My portfolio

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.

1. Setup and mobile version skeleton
2. List of previous projects + About myself (mobile)
3. Add a contact form + finish the mobile version
4. Create the desktop version using media queries
5. Deploy on Github Pages
6. Changes regarding accessibility
7. Mobile menu using JavaScript
8. Popup window that includes the project details
9. Client-side validation in the contact form
10. Use local storage to save form data

Later I created an 11th branch for every future update on the portfolio

11. Additional updates

Live Demo

Here is the link to the live version of this project: See it live

Screenshots

📱 Mobile version

       

💻 Desktop version

   

Built With

       

           

Author

👤 King Josaphat Chewa (KJC)

• GitHub: @Kingjosh007
• Twitter: @KingJoChewa
• LinkedIn: LinkedIn

🤝 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

• 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.

📝 License

This project is MIT licensed.