This is my portfolio website. It shows my various projects and skills as a software developer. Built with Html/CSS

  • By tarike bouari
  • Last update: Nov 25, 2022
  • Comments: 11



This is my portofolio website. It shows my various projects and skills as a software developer. Built with Html/CSS.

Built With

  • following linters standards.
  • following github flows standards.

Live demo

click here

Source code

click here


πŸ‘€ Tarik Bouari

🀝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!


  • Hat tip to anyone whose code was used
  • Inspiration
  • etc.


tablet screen screen size small mokup responsible

πŸ“ License

This project is MIT licensed..



  • 1

    Peer to peer code review

    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.


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

    Review for Tarik's Portfolio

    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.
  • 3

    Create store-data feature

    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
  • 4

    Create form-validation

    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
  • 5

    Create popup window

    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.
  • 6

    Create mobile menu

    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
  • 7


    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
  • 8

    Portfolio desktop version

    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
  • 9

    Created contact-section

    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.
  • 10

    Built different sections

    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.
  • 11

    Portfolio: Peer to Peer Code Review

    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 πŸ˜ƒ
    Screenshot 2022-07-22 at 2 18 59 PM
    • 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
    Screenshot 2022-07-22 at 2 09 16 PM
    • 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)
    Screenshot 2022-07-22 at 2 00 02 PM
    • 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.
    Screenshot 2022-07-22 at 2 04 38 PM

    Cheers and Happy coding!πŸ‘πŸ‘πŸ‘ πŸ’»

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