Single Page Portfolio / React/EmailJS

-use inline svg, if u look at a svg in a text editor, like visual studio code, u will see that it is a vector graphic writen with vector graphic rules, paste that in your html, and than u can target its properties in css

a svg:hover path { fill: #556B2F; }

-tutorial on the topic link

-overflow hidden, basically

but u have some problems with layouts in general, below 1560px the your grid system breaks down, u can fix that by playing around with fr-s, gap-s, centering the content of the grid ect.. i know grid is powerful and can do a lot of complicated stuff, but overall you could have used flex for the whole thing as it is much easier and quicker to work with

put some transitions on links

the profile img should be able to "stack", meaning it should be either positioned absolutely, or a flex item

i hope this helps u at least a little bit. best regards!

hi! congrats on finishing this project!

tbh, I have no idea how u write the code but if I can see the HTML file, I think u need more dividers for each section so u can set them with different sizes and displays.

here's how I'd do it:

• div for the hero:

.hero {
display: grid;
grid-template-column: 2fr 1fr
}

• div for skills:

.skills {
display: flex;
flex-wrap: wrap;
}

/* add class skill for each item */
.skill {
width: calc(100% / 2 - 20px); /* adjust for each screen sizes */
}

• div for projects' grid:

.project-grid {
display: grid;
grid-template-column: 1fr 1fr; /* adjust for each screen sizes */
}

• div for contact and input (create two different grids for each):

.contact {
display: flex;
flex-direction: row; /* adjust for each screen sizes */
justify-content: space-between;
}

dont forget to add margin for each divs. or in the main-container if u put them in a container.

hope this helps🙌🏻 have a great day⭐