My Portfolio Website - Part 1

Built with a spirit of "learning while you are doing"

I built my first portfolio website in 2021 after numerous iterations of designing and redesigning, prototyping and re-prototyping. The process went like this-

  • Designed a prototype in Figma This took a long time deliberating with myself until I finalized a design which I felt would sell. I had to put something out quickly to be able to showcase my skills and be available in the market.
  • React was my go to choice to build my website since I already spent some time building applications in React and having tasted angular, it was time for me to explore a React framework. I decided to go with Nextjs, although I did consider gatsby, but was pretty much ignorant of other frameworks at that time.
  • My initial site had few pages utilizing Next's client side routing, but later, I decided go with a single page website using react-scroll for in-page navigation. This was purely to get things moving as I was trying to squeeze in time to build my portfolio alongside my day job.
  • Next, I had to choose between a UI library like material-ui or chakra-ui, a css-in-js library like styled-components or emotion or vanilla css. I decided to stick with Sass as it extends css and gives a lot of flexibility and additional features like mixins to make our life easy. I enjoy working with styled-components, but I wanted to let my Sass skills flowing.
  • After a few iterations, my site was ready for deployment and the obvious question was whether to use a hosting service provider or any other cheaper options.
  • Hostinger was my go to CMS provider for earlier projects, but I didn't want to shell out that much for a single page website.
  • My next choice was netlify which's service I extensively use for my projects. But, voila!! I am building my site on Nextjs and vercel, it's parent company provides a build pipeline to deploy sites and it's free!! Since, I already have my code on github, it was a one click process.
  • I also did a trial deployment of my site on AWS Amplify. However, I wasn't sure of the benefit I was getting going with vercel than going the Amplify-Route 53 route. I was also finding it hard to consider the cost involved in the S3 Bucket to host my static files and Cloudfront end points to provide access to my site. Moreover, I already had my repository on github and there was no reason, I need to host my static files elsewhere. Hence, I stuck with vercel
  • I had already deployed my site on vercel during development for quick feedback and testing. So, it was easy to point it to a custom domain.
  • I quickly purchased a domain from Google domains and created two CNAME records. One for my portfolio website and a subdomain pointing to my hashnode blog.

    And there it is my first portfolio website for the world!

Website Portfolio Site Screenshot

Part 2 - Redesigning my portfolio website (coming soon!)