Portfolio-app
Built With
- HTML
- CSS
- JavaScript
Live Demo
Authors
- GitHub: @fullstop125
- LinkedIn: momanyi-hassan
- Twitter: @moseshassany
- GitHub: @samiullah997
🤝
Contributing
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
Show your support
Give a
Acknowledgments
- To my coding partner for collaborating, supporting and guiding me in my journey to complete this project.
📝
License
This project is MIT licensed.
Validate contact form
Portfolio: preserve data in the browser
In the following milestone we managed to implement the following:
Personal Portfolio Site
in this section, I understood how to :
[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
[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
[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
Validate contact form
Portfolio: validate contact form
In this milestone we managed to implement the following :
Portfolio: details popup window
Details popup window
In this milestone we managed to implement the following :
Peer to Peer Code Review:
Javascript Menu : Dom events
In this milestone we managed to implement the following features:
accessibility report
Accessibility check result
page title: no issues found
Image text alternatives: no issues found
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.
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.
Resize: no issues found
Interaction: no issues found
Moving content: no issues found
Multimedia: no issues found
Basic structure of the page: no issues found
Animation
Animations and transitions exercise in this milestone I managed to :