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

Portfolio

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

Author

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

Acknowledgments

  • Template provided from microverse Figma

📝 License

This project is MIT licensed.

Github

https://github.com/X-Elie-X/My-portfolio

Comments(7)

  • 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
    • https://github.com/X-Elie-X/X-Elie-X.github.io/blob/49262f5f5676b49bf19390e69865d47b9f00b671/media.css#L165
    • On hover colors
    • https://github.com/X-Elie-X/X-Elie-X.github.io/blob/49262f5f5676b49bf19390e69865d47b9f00b671/styles.css#L119
    • This resulted in the ideal color contrast ratios

    Resize

    • no issues found 👍

    Interaction

    • no issues found 👍

    Moving Content

    • no issues found 👍

    Multimedia

    • 10 + errors found with images
    • Resolved by including alt text in all images
    • https://github.com/X-Elie-X/X-Elie-X.github.io/blob/49262f5f5676b49bf19390e69865d47b9f00b671/index.html#L61

    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

    Portfolio

    In this PR I implemented the below:

    • Creating a new repository.
    • Upload all my portfolio files.
    • Updated my Readme file.
    • my website portfolio is https://x-elie-x.github.io/) 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 😃

Popular Tag

Related