Looks pretty good to start with! :)
Although, i would recommend some ideas for improvement:
1) Change font family for "resume" and "blog" in top nav to same you use in your pdf resume, make "contact" bold (and maybe try some darker shade for text from the palette you used).
2) I would remove "Hi, There" completely and add just "Hi, " in front of "I'm Amine Elouarti" in the same huge font.
3) Related to all the text below, stick with rounder and smoother fonts like "Quicksand" or "Comfortaa", to preserve the hero-area feel and try to stay in the same palette for text colors.
4) Add a medium size photo of yourself in round frame in "about me" section right above "Passionate about building immersive products" and decrease the font size a bit to fit both.
5) Put "education" panel right under "about me" section and leave it as it is.
6) Change "projects i worked on" title to "projects" and put it under education section and set background color to light green.
7) Also, in projects section remove all the colorful text, and use real screenshots (images) of your projects. Put the name of projects right above each description, using increased font size.
8) Remove the grey horizontal lines between panels. Switching between white and light green would look more clean and professional without them.
9) Increase the font size and weight of panel headings and make them stick out from the background (use some darker green shade on that light green background and a black one on the white background).
10) Consider making a subdomain for blog (blog.elouartinra.now.sh), leaving main page just as hero-area -> about me -> education -> projects -> contact. Link visitors to your blog domain via top nav.
11) Add some CSS media-breaks for smoother hero-area transitions between different display widths. Currently there is just one beak around 735px. Fix the margin of Say Hi button at the bottom on resize.
12) Check your sources in dev tools, resume.pdf.js is not found (404) in initial load (link to resume pdf directly via href) and also fix cookie issues noted in console.
13) Check typos (saw a few) and obviously add some JS for contact and blog navs to add functionality to scroll to their positions/pages and make contact lead to its form (work in progress, i guess).
Hi Madza, thank you for this awesome response it really means a lot.
Here is some of the stuff I fixed:
I put the education section under about me, though I'm not sure about the color of the paragraphs should I leave it as grey or change it to lighter green?
I removed one of the grey lines, I'll make sure to remove the other one once I'm done with projects section.
I also removed the resume.pdf.js bug.
I added blog page.
TODO
I'll try to redesign it with the fonts you recommended.
I'll also see how I can add a photo of me.
For subdomain I think it's not good for SEO since search engines treat subdomain as a standalone website.
I'll make sure the header is more responsive.
Overall really thank you for your wholesome feedback, I fixed a lot of small things cuz of your comment. Thank you again!
Looks pretty good to start with! :)
Although, i would recommend some ideas for improvement:
1) Change font family for "resume" and "blog" in top nav to same you use in your pdf resume, make "contact" bold (and maybe try some darker shade for text from the palette you used).
2) I would remove "Hi, There" completely and add just "Hi, " in front of "I'm Amine Elouarti" in the same huge font.
3) Related to all the text below, stick with rounder and smoother fonts like "Quicksand" or "Comfortaa", to preserve the hero-area feel and try to stay in the same palette for text colors.
4) Add a medium size photo of yourself in round frame in "about me" section right above "Passionate about building immersive products" and decrease the font size a bit to fit both.
5) Put "education" panel right under "about me" section and leave it as it is.
6) Change "projects i worked on" title to "projects" and put it under education section and set background color to light green.
7) Also, in projects section remove all the colorful text, and use real screenshots (images) of your projects. Put the name of projects right above each description, using increased font size.
8) Remove the grey horizontal lines between panels. Switching between white and light green would look more clean and professional without them.
9) Increase the font size and weight of panel headings and make them stick out from the background (use some darker green shade on that light green background and a black one on the white background).
10) Consider making a subdomain for blog (blog.elouartinra.now.sh), leaving main page just as hero-area -> about me -> education -> projects -> contact. Link visitors to your blog domain via top nav.
11) Add some CSS media-breaks for smoother hero-area transitions between different display widths. Currently there is just one beak around 735px. Fix the margin of Say Hi button at the bottom on resize.
12) Check your sources in dev tools, resume.pdf.js is not found (404) in initial load (link to resume pdf directly via href) and also fix cookie issues noted in console.
13) Check typos (saw a few) and obviously add some JS for contact and blog navs to add functionality to scroll to their positions/pages and make contact lead to its form (work in progress, i guess).
Again, these are just subjective :)
Best of luck!
Hi Madza, thank you for this awesome response it really means a lot.
Here is some of the stuff I fixed:
TODO
Overall really thank you for your wholesome feedback, I fixed a lot of small things cuz of your comment. Thank you again!
I was bored, so i did mess around in dev tools a bit..
Here's a quick screen capture (put in on 1080p) of basic wire-framing:
drive.google.com/file/d/1SjpCEacS_...
Again, just an idea for inspiration,
Best of luck,