Project Of Creating My Portfolio Website for both Mobile Version and Desktop Version Using A Template From Figma Design Using HTML, CSS and JavaScript

  • By Elie Harfouche
  • Last update: Aug 26, 2022
  • Comments: 7


this my porfolio mobile and desktop version

Built With

  • HTML
  • CSS
  • Media
  • javascript

Site Mockup

1 2 3

Live Demo (if available)

Live Demo Link

Getting Started


👤 Author1

🤝 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!


  • Template provided from microverse Figma

📝 License

This project is MIT licensed.



  • 1

    Portfolio: preserve data in the browser

    In this PR we implemented the below:

    1. Creating a new repository.
    2. Upload all my portfolio files.
    3. we make a local storage to be saves in the browser.
    4. All the code are made in Javascript.
  • 2

    Portfolio: validate contact form pair programming

    In this PR we implemented the below:

    • Creating a new repository.
    • Upload all my portfolio files.
    • Email validations.
    • we put someerror message .
    • we put the a approval message.
    • All the code are made inJavascript.
  • 3

    portfolio: details popup window

    In this PR we implemented the below:

    • Creating a new repository.
    • Upload all my portfolio files.
    • we Created a popup window.
    • Add main.js to activate the buttons and show the popup effects.
    • Add some style for the popup design
  • 4

    Accessibility pair programming

    Used pair programming to check for accessibility issues within the webpage and tried to resolve the most critical issues we noticed.

    They are shown below

    Page titles

    • no issues found 👍

    Image text alternatives

    • 10+ issues found
    • resolved by filling in the alt attribute
    • hamburger icon Changed Code

    Text headings

    • no issues found 👍

    Color Contrast

    • 10 + multiple issues found
    • Resolved by replacing the color to one which achieves the 4.5:1 ratio
    • Button color change
    • On hover colors
    • This resulted in the ideal color contrast ratios


    • no issues found 👍


    • no issues found 👍

    Moving Content

    • no issues found 👍


    • 10 + errors found with images
    • Resolved by including alt text in all images

    The basic structure of the page

    • 10 + possible issues found
    • These where not errors but suggestions as to good workflows

    For example

    • Descending order of h1 h2 h3 elements
    • Color choices and schemes
    • background-image vs img tag
    • etc. …
  • 5


    In this PR I implemented the below:

    • Creating a new repository.
    • Upload all my portfolio files.
    • Updated my Readme file.
    • my website portfolio is inside readme as Live Demo
  • 6

    Peer review

    • [ ] Your project looks great, the functionality works well.
    • [ ] Add recent works you have done on the recent works section.
    • [ ] Make the footer border full width
  • 7

    Bugs: hide-and-seek

    To Highlight

    • Congratulations! Good job! 🎉 I know you've been very diligent and committed to implementing this project, I 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 ♻️

    • Try To remove commented code in your javascript for best practices 💯 Kindly, can you please fix those 😃