this is my personal portfolio website that i designed and used HTML, CSS and JavaScript. It showcases all my projects that i have done.

  • By Hassan Momanyi
  • Last update: Nov 2, 2022
  • Comments: 11

Portfolio-app

Built With

  • HTML
  • CSS
  • JavaScript

Live Demo

Momanyi's Portfolio

Authors

👤 Momanyi Hassan

👤 Samiullah

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

Acknowledgments

  • To my coding partner for collaborating, supporting and guiding me in my journey to complete this project.

📝 License

This project is MIT licensed.

Github

https://github.com/fullstop125/My-Portfolio

Comments(11)

  • 1

    Validate contact form

    Portfolio: preserve data in the browser

    In the following milestone we managed to implement the following:

    • When the user changes the content of any input field, the data is saved to the local storage.
    • When the user loads the page, if there is any data in the local storage the input fields are pre-filled with this data.
    • create a single JavaScript object with all the data from the entire form and save it in local storage.
  • 2

    Personal Portfolio Site

    in this section, I understood how to :

    • navigate and utilize the Figma platform
    • use flexbox and implement it into my project
    • tweak and manipulate images inside the project
    • build a fully responsive mobile version portfolio app
  • 3

    [ImgBot] Optimize images

    Beep boop. Your images are optimized!

    Your image file size has been reduced by 41% 🎉

    Details

    | File | Before | After | Percent reduction | |:--|:--|:--|:--| | /images/about-image/metrics.png | 328.55kb | 192.30kb | 41.47% |

    📝 docs | :octocat: repo | 🙋🏾 issues | 🏪 marketplace

    ~Imgbot - Part of Optimole family

  • 4

    [ImgBot] Optimize images

    Beep boop. Your images are optimized!

    Your image file size has been reduced by 8% 🎉

    Details

    | File | Before | After | Percent reduction | |:--|:--|:--|:--| | /images/about-image/leaderboard.png | 30.11kb | 19.69kb | 34.61% | | /images/about-image/bookstore.png | 63.59kb | 48.32kb | 24.00% | | /images/about-image/react-app.png | 23.49kb | 20.56kb | 12.48% | | /images/about-image/anime.png | 901.83kb | 791.01kb | 12.29% | | /images/about-image/spacehub.png | 347.51kb | 307.71kb | 11.45% | | /images/about-image/tonic-project-2.svg | 385.71kb | 385.70kb | 0.00% | | /images/about-image/Snapshoot_Portfolio.svg | 536.26kb | 536.25kb | 0.00% | | | | | | | Total : | 2,288.50kb | 2,109.25kb | 7.83% |

    📝 docs | :octocat: repo | ??🏾 issues | 🏪 marketplace

    ~Imgbot - Part of Optimole family

  • 5

    [ImgBot] Optimize images

    Beep boop. Your images are optimized!

    Your image file size has been reduced by 21% 🎉

    Details

    | File | Before | After | Percent reduction | |:--|:--|:--|:--| | /images/about-image/bg_contact.png | 29.36kb | 10.35kb | 64.73% | | /images/about-image/bg_Header.png | 49.42kb | 17.97kb | 63.63% | | /images/about-image/contact-form-background-shapes.png | 10.91kb | 4.41kb | 59.57% | | /app_screenshot.png | 6.20kb | 2.61kb | 57.85% | | /images/about-image/bg_Header-Mobile.png | 6.44kb | 3.29kb | 48.89% | | /images/background.png | 6.44kb | 3.29kb | 48.89% | | /images/screenshots/mobile/Screenshot from 2022-07-12 09-47-41.png | 42.37kb | 24.85kb | 41.36% | | /images/screenshots/mobile/Screenshot from 2022-07-12 09-46-05.png | 49.15kb | 29.04kb | 40.91% | | /images/screenshots/mobile/Screenshot from 2022-07-12 09-48-18.png | 27.22kb | 17.59kb | 35.39% | | /images/about-image/todo.png | 18.83kb | 13.02kb | 30.85% | | /images/screenshots/desktop/Screenshot from 2022-07-12 09-50-40.png | 62.33kb | 44.21kb | 29.07% | | /images/screenshots/desktop/Screenshot from 2022-07-12 09-53-59.png | 39.24kb | 29.07kb | 25.90% | | /images/screenshots/desktop/Screenshot from 2022-07-12 09-51-41.png | 59.82kb | 45.09kb | 24.62% | | /images/screenshots/mobile/Screenshot from 2022-07-12 09-46-51.png | 61.70kb | 47.15kb | 23.57% | | /images/screenshots/mobile/Screenshot from 2022-07-12 09-48-02.png | 22.25kb | 17.41kb | 21.77% | | /images/screenshots/mobile/Screenshot from 2022-07-12 09-47-22.png | 58.93kb | 47.18kb | 19.95% | | /images/screenshots/mobile/Screenshot from 2022-07-12 09-47-05.png | 62.78kb | 51.78kb | 17.51% | | /images/icons/victory.png | 0.72kb | 0.61kb | 15.20% | | /images/screenshots/mobile/Screenshot from 2022-07-12 09-46-37.png | 52.78kb | 45.14kb | 14.48% | | /images/screenshots/desktop/Screenshot from 2022-07-12 09-51-23.png | 133.53kb | 120.54kb | 9.73% | | /images/about-image/tonic-project-2.png | 31.35kb | 30.06kb | 4.12% | | /images/about-image/big1.png | 64.31kb | 62.26kb | 3.20% | | /images/about-image/multi-post-stories-project.png | 28.57kb | 27.77kb | 2.79% | | /images/about-image/big4.png | 76.39kb | 75.11kb | 1.67% | | /images/about-image/Contact-me.svg | 0.18kb | 0.17kb | 1.67% | | /images/about-image/contact-form-shapes-mobile.svg | 1.31kb | 1.30kb | 1.04% | | /images/icons/arrow-down.svg | 0.48kb | 0.47kb | 0.62% | | /images/icons/arrow-right.svg | 0.48kb | 0.48kb | 0.61% | | /images/icons/menu.svg | 0.51kb | 0.51kb | 0.57% | | /images/icons/live-icon.svg | 0.70kb | 0.70kb | 0.42% | | /images/icons/git-icon.svg | 1.01kb | 1.01kb | 0.29% | | /images/about-image/Ellipse-css.svg | 8.39kb | 8.38kb | 0.13% | | /images/about-image/Ellipse-js.svg | 9.45kb | 9.44kb | 0.10% | | /images/icons/goodsamaritan.svg | 37.47kb | 37.43kb | 0.09% | | /images/about-image/Ellipse-html.svg | 26.00kb | 25.99kb | 0.04% | | | | | | | Total : | 1,087.02kb | 855.70kb | 21.28% |

    📝 docs | :octocat: repo | 🙋🏾 issues | 🏪 marketplace

    ~Imgbot - Part of Optimole family

  • 6

    Validate contact form

    Portfolio: validate contact form

    In this milestone we managed to implement the following :

    • When the user submits the form, you check if the email is in lower case.
    • If the validation is OK, the form is sent.
    • If the validation is not OK, you show an error message to the user near the submit button informing them of the error, and the form is not sent.
  • 7

    Portfolio: details popup window

    Details popup window

    In this milestone we managed to implement the following :

    • When the user clicks (or taps) the button to check project details, the popup with details about the project appears.
    • When the user clicks (or taps) the close (X) button, the popup disappears.
    • implement popups for both mobile and desktop screen sizes
  • 8

    Peer to Peer Code Review:

    • Good job working on the reviews and suggestions from previous reviewers
    • I think it is a better practice to have comments on seperate lines rather than having them in front of codes.
  • 9

    Javascript Menu : Dom events

    In this milestone we managed to implement the following features:

    • When the user clicks (or taps) the hamburger button, the mobile menu appears.
    • When the user clicks (or taps) the close (X) button, the mobile menu disappears.
    • When the user clicks (or taps) any of the mobile menu options, the mobile menu disappears.
    • When the user clicks (or taps) any of the mobile menu options, a correct part of the page is displayed.
  • 10

    accessibility report

    Accessibility check result

    1. page title: no issues found

    2. Image text alternatives: no issues found

    3. Text Headings: Heading elements are not in sequentially descending order : Properly ordered headings that do not skip levels convey the semantic structure of the page, making it easier to navigate and understand when using assistive technologies.

    4. color contrast: Ensure the foreground and background color meet WCAG 2 AA contrast ratio thresholds. My Logo how to fix: Fix the following: Element has insufficient color contrast of 3.99 (foreground color: #6070ff, background color: #ffffff, font size: 13.5pt (18px), font weight: bold). Expected contrast ratio of 4.5:1Element has insufficient color contrast of 3.99 (foreground color: #6070ff, background color: #ffffff, font size: 13.5pt (18px), font weight: bold). Expected contrast ratio of 4.5:1 Use foreground color: #5664e5 and the original background color: #ffffff to meet a contrast ratio of 4.83:1.

    5. Resize: no issues found

    6. Interaction: no issues found

    7. Moving content: no issues found

    8. Multimedia: no issues found

    9. Basic structure of the page: no issues found

  • 11

    Animation

    Animations and transitions exercise in this milestone I managed to :

    • Understand the usefulness of transitions and animations.
    • add some transitions and animations to my portfolio website.

Popular Tag

Related