PROJECT: Portfolio Website

(This website btw)

Overview

I started making this website on March 7th because I had a holiday. I found an exciting YouTube video that I decided to follow. The setup procedure was pretty straightforward and it was easy for me to follow along with the video. Mine is similar but not exactly the same as what was there in the video. I wanted to add my touch to it.

After a certain point is when I realised that the video was slightly outdated. I was using newer versions of all the dependencies, which led me to have differences in the code in comparison to that of the instructor’s. It was hard to navigate through at first but eventually, after using ChatGPT to help me out a bit, I got a hang of the differences and could code most of it by myself. 

It took me an entire week but I was determined to complete it because I was so excited looking at how everything was turning out. 

The last day, which was 15th March, I sat the entire day to get this over with. The world had to see what I’ve worked on. The code was done and I pushed it onto GitHub. I tried to deploy it on Vercel but I encountered a lot of errors. Errors such as:

• Using let instead of const for variables which don’t seem to be changing
• Unused imports

Stuff which could’ve easily been written off as warnings, which is what I did. 

I made a lot of changes and after a certain point, I got super frustrated and just shut everything down because another problem I was encountering was with “tailwindcss” due to the variations in the versions of the dependencies.
I decided to make some changes to the code which allows deployment even if there were errors in build and in typescript. This allowed deployment! 

Wonderful, I thought. But when I looked at the website, it looked nothing like what I had made which was dejecting. It was fully functional but lacking any CSS, clearly. I had a hunch about where the issue might’ve been and decided to try it out. And guess what, it worked! Eureka!

Another observation: My website was not updating the new pages I had created on the projects list page, which I noticed when I was trying to get this published. I added revalidation, to check for changes every 86400 seconds (every day) and I also created webhooks to initiate redeployment on Vercel anytime there's a change made on Prismic.

Tech Stack:

• Next.js: For server-side rendering and optimal performance in a React-based portfolio.
• TypeScript: For type safety and better code organisation.
• Prismic: For easy content management without touching code.
• React Three Fiber: For creating impressive 3D elements that enhance visual appeal.
• GSAP: For smooth animations and interactive elements.
• ESLint: For consistent code quality and catching errors early.
• Tailwind CSS: For rapid styling with minimal custom CSS.
• Vercel: For seamless deployment and global content delivery.

Reference: