First version of a portfolio website

Projects Portfolio Project: Personal Portfolio Website
1

Link to website: https://portfoliobyyanko.netlify.app/
Link to GitHub repo: GitHub - YankoChergov55/portfolio-basics: Basic structure of a portfolio

I did not have to think much about the layout because I created something similiar to what was suggested just with my flavor.

When it comes to the HTML I tried to use Semantic HTML to separate the different sections like footer and header. I used only if it made sence and tried not to include too many divs and sections.

This was my first time using flexbox and media queries and I think it worked fine. Tried to make it somewhat responsive. CSS is not my strong suit but I think I managed to find the proper setup/commands to use for the CSS file. Imported a google font that looked awesome so that the page is mine.

The project description required an interactive element and on my website that would be the dark mode button because I am a fan of dark mode, Managed to find a color palette based on the green color (my favorite) and then simple reversed it. Then with JavaScript allowed the button to toggle the dark mode class.

It took me about 3 hours to complete it. That includes creating the repo and publishing to netifly.

2

Hi Yanko, I recommend you to increase your font-size and to add space between your paragraphs, also it is recommended to keep the paragraphs width no longer than 72 characters long.

Keep up the good work :slight_smile:

3

I was struggling with the space between paragraphs and was not sure how much or even how to do it but I will see option that I can do about that. The limit on characters for a paragraph make sense, will try to implement that as well. Thanks for taking a look and the suggestions.

4

You have a reset in your css code, so all margins are set to 0.

  • {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

To solve this add the margin or padding wanted in the element like:
p {
margin: 1em 2em 1em 2em;
padding: 1em 2em 1em 2em;
}

Move the values as you wish.