Hi @tarikbouari 👋 , your portfolio looks great 👍 Here are some suggestions on how you can improve it:

• It would be good to add correct image alignment in the desktop version of my works card section.
• Kindly add a responsive image size for the mobile version.
• You can change the images and icons to .svg to have better quality.

[OPTIONAL]

• The design would match the Figma design more with a navbar shadow.

Salut Tarik

I think your website looks nice. Here are some things to make it look more similar with the Figma design:

• NavLinks are well placed I would recommend to give them a font-weight so they can cacth a lil attention, I think 500 should do it.
• Your header has a smaller height than the design, make it a lil tall so we can see the background image.
• I like the social media icons, I suggest you use svg so they can look more nicer, so if you can replace them that's great.
• For the projects make sure the fonts are the same as the design they look a lil big to me the, but check it.
• I saw that for IPad the ul.specific wraps, you can use white-space: nowrap to take care of that.
• In the about section, you can also use the font-weight and color used in the design for the Language, Framwork..texts. I also suggest you use border-bottom instead of hr for the separators.
• Finally the text under the languages in the ul class="lang-child" seem to small for me, and use the same width for all of them.
• You can also add in the css the scroll-behavior: smooth so when you click the anchors it happens smoothly Be sure to text me on slack @tarikbouari , we schedule a call this weekif you need any more suggestions.

In this project we

• did pair programing
• implemented data storage using local storage
• created a function that checks the existence of store data
• fixed linters errors

In this project I:

• did and practiced pair programming with my partners.
• created a function that controls my form
• added event on the form submit button
• fixed linter errors

In this project:

• I used DOM tree to create and manipulate the HTML element
• I added a click event on my project-card button to display a pop-up
• I created a close button on a click event for the popup
• I updated my code performance and fixed linter errors.

In this project

• I created a mobile navigation menu
• I added Eslint to check errors.
• I Created a javascript event on different buttons
• I fixed linters error and updated my code

In this project I :

• Did pair programming with my coding partners.
• Added color transition to the navigation links
• Added scale transition to the project images
• Added slide transition to the form placeholders

In this project I

• Created a media query for the desktop version of my site
• added one project card to the projects-section
• Used flexbox and grid for responsiveness
• Refactored my code
• Fixed linters errors

In this project I:

• created a footer in which I set a contact form
• Collected my form's data by using the Formspree service.
• Did collaborative work with my partners.
• Did peer programing and reviewed my partner's projects.

In this project I:

• created a project section with a grid and flex-box on the home page
• created about section and list items
• fixed linters and updated my code.

Hello @tarikbouari 👋 ,

Congratulations! Good job so far! 🎉 I know you've been very diligent and committed to implementing this project, and we, as a team, appreciate the effort you put in! But there are some issues that you still need to work on in this project but you are almost there!

Suggested Changes ♻️

• Your Readme file is very well described and informative. 💯 However, there is a broken link for the Mobile and Desktop versions. can you please fix those 😃

• There was an error when the page loads Failed to load resource: the server responded with a status of 404 () favicon.ico Make sure there is no console errors by removing the unwanted icon or fixing the broken links
• As per Figma template 1, the background color for the navigation menu does not look similar to the Figma mobile version. You can use the color code from the Figma template with mix-blend-mode: multiply property

• Your form is well validated for empty fields. You can add more validation to other inputs to have a better experience. For Example, only letters are acceptable for full name input.
• The background image in the contact form looks very stretchy and does not match with the Figma Template. You can use the different background image links for the desktop version (Refer to Figma Template)

• We like the alignment of all the elements placed in the Introduction section. The white background in the introduction section is responsive though you can make it static and also the height is more than the specified height in the Figma template.

Cheers and Happy coding!👏👏👏 💻

Please feel free to reach out or leave any questions or comments on the issue if you find anything unclear