This project was part of my Microverse journey. I had to work on what would be my personal portfolio. The goal was to be able to parse a Figma design to create a beautiful UI using Flexbox, Grid CSS, images and backgrounds, while sticking to the best practices (Linter, Github Flow, Professional commits and documentation etc.)
I was supposed to build a UI that is as close as possible to this Figma design: Figma Template
This project was divided into 10 parts before getting to the full portfolio website. Each part corresponds to a specific branch. The 10 parts are listed below. The text in bold refers to the part I am currently working on. Refer to the corresponding branch.
- Setup and mobile version skeleton
- List of previous projects + About myself (mobile)
- Add a contact form + finish the mobile version
- Create the desktop version using media queries
- Deploy on Github Pages
- Changes regarding accessibility
- Mobile menu using JavaScript
- Popup window that includes the project details
- Client-side validation in the contact form
- Use local storage to save form data
Later I created an 11th branch for every future update on the portfolio
- Additional updates
Here is the link to the live version of this project: See it live
📱 Mobile version
💻 Desktop version
👤 King Josaphat Chewa (KJC)
- GitHub: @Kingjosh007
- Twitter: @KingJoChewa
- LinkedIn: LinkedIn
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
Give a ⭐️ if you like this project!
- Microverse
- @Kingstalux, which whom I created the contact form through pair-programming
- A huge thanks to @Tchilo and @benshidanny11, from my morning session team, for reviewing the code of the desktop version
- Hat tip to @Goldinium with whom I added some nice animations and effets through pair programming.
This project is MIT licensed.