Skip to content

Kitkatnik/ks-Portfolio

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Portfolio

Site_Preview

Click Here to Demo

That's if you're not already seeing this through my portfolio ;)

Description

💼 About this project

About a year ago, I asked my design team (affiliate link) to create a mockup of a portfolio site that looks like VSCode.

Portfolio MockUp that looks like VSCode

This mockup was for my partner, who had recently graduated Thinkful Software Engineering Immersion. He never built the website, so I took the mockup for myself and started to build it out from scratch to practice React. I changed it a bit to more closely resemble my own VSCode editor, including small easter eggs and links to extensions that I use on a daily basis.

🖥 About the tech stack

HTML5 Badge CSS3 Badge Sass Badge JavaScript Badge React Badge Create React App Badge Yarn Badge GitHub Badge Vercel Badge

🧠 What I learned

  • Taking a Figma Mockup and building it from scratch
  • Using Github's API to import my repositories, using a special character to only showcase certain projects I designate
  • Set up Google Firebase as the database, after realizing that repeatedly fetching repos from Github's API doesn't make sense. I still want to improve this part to ONLY update the database if there's an actual update to the repo, instead of updating every single time the website is loaded.
  • I learned a lot about rate limits and sendign authenticated requests to Github and Firebase.
  • I realized the benefit of mobile-first design after 30 hours of already having worked on this portfolio. I've learned my lesson the hard way, and in the future I will work mobile-first.
  • I could've done a better job of breaking up components into smaller parts with a focus on DRY coding.