Portfolio Redesign 2024

June 1, 2024 (5mo ago)

Listen to this article

In June 2020, I deployed my first React powered portfolio. After 4 years, I took the plunge and redesigned my portfolio website from the ground up. You might be wondering why, after all, four years seems like a decent lifespan for a website. Well, the answer lies in both a change in my development preferences and a desire for a cleaner, more streamlined user experience.

Back in 2020, I was getting hands-on with React and stumbled across Gatsby, an interesting meta framework using which I had built my portfolio. At the time, it felt like the perfect choice. I was diving headfirst into full-stack development and eager to explore the world of GraphQL. Gatsby, with its static site generation capabilities, seemed like a great fit. Looking back, however, Gatsby's complexity might have been overkill for my portfolio website. The thing is, my portfolio has very little dynamic content. It's primarily a showcase of my skills and experience, and Gatsby felt like a powerhouse for a relatively simple task.

After couple of months from launching my portfolio, I came across Next.js and built a sample app to test the waters. Let me tell you, I was immediately hooked. The developer experience felt smoother, more intuitive. Next.js offers a simpler approach to building and managing both static and dynamic content. It was clear: Next.js is the future of my portfolio.

💡

Before diving headfirst into this portfolio redesign, I spent a significant amount of time building real-world applications with Next.js. The experience was phenomenal - so much so that I even created a course called Straightforward Next.js. While the course might need an update due to Next.js v14's stable App Router release, the core concepts remain highly relevant thanks to Next.js's fantastic incremental migration strategy.

Now, the question became: migrate or rewrite? Thankfully, Next.js offers an incremental migration strategy, which would have allowed me to seamlessly transition the existing Gatsby site. However, a different desire started brewing - a desire for a fresh start, a clean slate. There's a reason behind this. Back when I was learning Gatsby by building, I was also exploring various CSS-in-JS solutions, particularly Styled Components. In my youthful exuberance, I ended up styling the portfolio using a mix of CSS modules and Styled Components.

On 2022 New Years' day, I wanted to add some color & dynamic content to the portfolio. First, I added react-confetti and scheduled it to run on every New Years' day. To greet the people visiting my website, I wanted to display a banner on the landing page. Instead of writing yet another static React "banner" component, I chose a more database-driven approach. I scaffolded a simple Next.js API-only project and wrote a simple serverless function to fetch banners from an Airtable base. This API opened the door for further enhancements. I built a custom analytics API using Firebase Realtime Database and migrated my project list to an Airtable base, giving the portfolio a more dynamic feel.

You know where I am going with this - too many moving pieces for a simple website that is my portfolio. Over time, this approach inevitably led to technical debt. Maintaining the codebase became cumbersome, and the need for a rewrite became increasingly evident.

So, after two whole years of procrastination (hey, we've all been there!), I finally decided to tackle the beast. My goal was clear: a brutally simple, minimal design that would put the spotlight on my work. Inspiration struck when I stumbled upon Lee Robinson's portfolio. His clean, minimalist aesthetic resonated deeply with my vision. I set myself a challenge: complete the rewrite within a weekend.

One major change I introduced is to use MDX for blog posts. Previously written using plain Markdown (.md) format, all the blog posts are now migrated to the MDX (.mdx) format. Now the posts can seamlessly integrate with React components to power the content. Hashicorp's next-mdx-remote is used to handle the parsing magic.

The result is a portfolio I'm truly proud of. It's clean, it's fast, and it highlights my skills and experience with a clear, uncluttered presentation.

Here's the complete tech stack powering this revamp:

  • Next.js: The foundation for a performant and scalable website.
  • TailwindCSS: My go-to utility-first framework for rapid UI development.
  • ShadCN UI: A collection of pre-built components that saved me valuable time.
  • Aceternity UI: Additional UI components. You must definitely check this UI library out! (Shoutout to Surya for sharing this library).
  • Vercel Geist Font: Because a sharp website deserves a sharp font, right?
  • Vercel: The platform of my choice for streamlined deployments.