set up a new repository and prepare it for development using best practices (e.g. linters) and build the first 2 sections of the mobile website using a Figma template

  • By Christian Biringanine
  • Last update: Jun 27, 2022
  • Comments: 7

Setup, mobile and Desktop version of my portfolio

Description of the project.

  • set up a new repository and prepare it for deployement using best practices (e.g. linters).

  • build all the sections (introduction, works section, About me and contact section) of the mobile and Desktop version of my portfoliowebsite using the template I have chosen in Figma.

Built With

  • HTML
  • CSS
  • GitHubflow

Live Demo (if available)

You can check the live demo of my portfolio here


  • Have completed the previous activities.

Set up

  • git clone [email protected]:christianbiring1/portfolio-mobile-version.git
  • cd portfolio-mobile-version
  • code


👤 Christian biringanine

🤝 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 who will take a glance to this project

📝 License

This project is MIT licensed.



  • 1

    Checking accessibility

    During the pair programming session with my coding partner @khitermedachraf, We evaluate my website against accessibility best practices and implement any necessary changes to ensure that it is accessible:

    These are some of the important changes we made:

    • [ ] Page titles: - no issues found.
    • [ ] Image text alternatives : link1, link2, link3.
    • [ ] Text Headings : commit msg -Correct heading text link1, link1
    • [ ] Color Contrast: - no issues found.
    • [ ] Resize: no issues found
    • [ ] Interaction: - no issues found.
    • [ ] Moving Content: - no issues found.
    • [ ] Multimedia: - no issues found.
    • [ ] The basic structure of the page:- no issues found.
  • 2

    validate contact form

    For this milestone of my portfolio website, l had to implement a client-side validation of the data in the contact form before submission using javaScript.

  • 3

    Peer to Peer coding reviews

    Hi, @christianbiring1 great work 💯 👍

    We really enjoyed your design and layout. Here are your suggestions noted by your morning section team.

    • Please try and run your linters inside your local terminal
    • Please separate the JavaScript files to facilitate the maintenance and speed of your code.
  • 4

    Details pop-up window

    For this milestone of our portfolio website, we had to implement :

    • [ ] A popup window that includes the project details both in desktop and mobile.
    • [ ] We had to store the information about the projects section in a JavaScript object.
    • [ ] Create the project section dynamically using the information stored in JS array
  • 5


    • [ ] In this milestone I had to make my portfolio website available online by using GitHub Pages.
    • [ ] Update README file by inserting a live demo link in it.
    • [ ] Made sure that use the correct gitHubflow.
  • 6

    Contact form section

    In this milestone I had to :

    • [ ] Add a contact form to my portfolio and,
    • [ ] Make sure that I guide my users' experience in a way that helps them fill in the form without frustration.
  • 7

    Bugs: Hide and Seek

    I think the issue is that your emailAddress variable was empty inside the event listener on the form. This is because the variable was not visible inside the form event handler due to its scope. The solution for this is to move line 12 (where you declared the variable for the email address) inside the event handler and it will work. :smiley: happy coding :+1: :hugs: