Skip to content

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

Notifications You must be signed in to change notification settings

Kingjosh007/my-portfolio

Repository files navigation

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

  1. Additional updates

Live Demo

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

Screenshots

📱 Mobile version

    mobile version     mobile menu

💻 Desktop version

    desktop version

Built With

HTML5     CSS3     JavaScript

Git     GitHub Actions     Markdown     Visual Studio Code

Author

👤 King Josaphat Chewa (KJC)

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

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •