https://github.com/haminimi/homepage
The responsive homepage of a portfolio site designed to be responsive across three sizes: full desktop, tablet and mobile.
https://github.com/haminimi/homepage
accessibility css responsive-design responsive-images responsive-layout responsive-web-design responsive-website the-odin-project theodinproject
Last synced: 7 months ago
JSON representation
The responsive homepage of a portfolio site designed to be responsive across three sizes: full desktop, tablet and mobile.
- Host: GitHub
- URL: https://github.com/haminimi/homepage
- Owner: Haminimi
- Created: 2024-01-10T00:11:49.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-22T12:51:44.000Z (over 1 year ago)
- Last Synced: 2025-01-13T17:51:42.658Z (9 months ago)
- Topics: accessibility, css, responsive-design, responsive-images, responsive-layout, responsive-web-design, responsive-website, the-odin-project, theodinproject
- Language: CSS
- Homepage: https://haminimi.github.io/homepage/
- Size: 15.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Homepage 🏠
## Description
The responsive homepage of a portfolio site designed to be responsive across three sizes: full desktop, tablet and mobile. [The project](https://www.theodinproject.com/lessons/node-path-advanced-html-and-css-homepage) is a part of [The Odin Project](https://www.theodinproject.com/dashboard)'s curriculum. The Odin Project provides a high quality web development education maintained by an open source community.
## [Live Preview](https://haminimi.github.io/homepage/)
## Main Features
- **Responsive Design:** The homepage is designed and built to be responsive across three sizes: full desktop, tablet and mobile.
- **Accessibility:** The page is fully accessible and it respects various accessibility recommendations, such as including sufficient color contrasts, labeling, and keyboard support.
**To Do:**
- [ ] **Cover Edge Cases**
## Tech
**The project is built with:**
- HTML
- Vanilla CSS
**Tools**
- Visual Studio Code
- Git
## Covered Topics
**This section mentions the main topics covered during project work and prior lessons**
- Responsive Design
- Accessibility
- Animations
## Reflection
The design files are available in the design-files folder. The layouts are pretty straightforward when implementing them separately, but while trying to achieve smooth transitions from one layout to another with the same HTML structure, I got kind of tangled up 😅. Therefore, I think the code could be a bit better organized and shorter. There might be some edge cases where a part of one of the layouts for smaller screens breaks and looks a bit weird. This can be easily solved with a bit more code and a few more breakpoints. However, on an average device, it looks completely fine. The dimensions I primarily tested for an average tablet device are 1024x768, and for a mobile phone, they are 360x780. Currently, I am satisfied, everything looks just as it does in the design files at the average dimensions, and the main goal of the project is achieved.
One of the main topics in the previous lessons was the accessibility. I understand it's importance, and I hope that we can have a fully accessible web for all.
## Credits
- [Photo by Anna Shvets](https://www.pexels.com/photo/woman-in-black-blazer-3727474/)
- [Photo by Anna Shvets](https://www.pexels.com/photo/woman-in-black-blazer-sitting-on-black-office-chair-3727464/)
- Icon used for the favicon image is one of the [Homepage icons created by Hilmy Abiyyu A. - Flaticon](https://www.flaticon.com/free-icons/homepage)
## Happy coding!