2025-04-23

2025 Portfolio Redesign

Next.jsTailwind

Why

Every couple years I like to redesign my portfolio using the trending technologies in the web development community. This year I wanted to try out:

Next.js with App Router as the framework, which offers routing, static site generation and more
Tailwind CSS for styling
Content Collections for managing content, which is very similar to Astro's Content Collections.

My old portfolio was built with Astro v4, which worked well but I found some pain points:

SEO (like Open Graph, JSON-LD, etc.) wasn't that clean to implement, whereas Next.js has a nice Metadata API which looked appealing.
Layouts feel a little clunky in Astro, where you define a layout component and manually reference it in all your pages, where Next.js just lets you define a layout.tsx which applies automatically to every page under it.
All of my side projects use Next.js, with this being the only Astro project I have, switching to Next.js would make it easier to maintain and share code between projects.

Below is a screenshot of my old portfolio:

Old Portfolio

Next.js and App Router

One of the biggest changes to my portfolio is the switch to Next.js with App Router, as my previous version was built with Astro.

React Server Components are gaining popularity and I wanted to start leveraging them more in my projects. I was also curious to see how React Server Components work with static site generation.

Tailwind

Since I last built my portfolio, shadcn/ui has exploded in popularity, which offers a different approach to building UI components. I wanted to leverage some of the ideas from shadcn/ui in my new portfolio, namely the approach towards defining a theme.

As my portfolio is mostly blog-like content, I wanted an easy way to style things consistently (e.g. a p or h2 tag should look the same everywhere). I found that opposed Tailwind's utility-first approach (where you style each HTML element individually, which is useful when developing a web application, but less so for a content-heavy website). To solve this, I leveraged shadcn/ui's approach to theming, which allows you to define a theme and apply global styles to HTML elements.

Below is a snippet of the globals.css file that I use:

globals.css

@import "tailwindcss";
 
@theme {
  /* Fonts */
  --font-family-sans: "Noto Sans", sans-serif;
  --font-family-mono: "Roboto Mono", monospace;
  --font-display: "Inter", sans-serif;
  --font-display--font-feature-settings: "dlig" on;
}
 
@layer base {
  body {
    @apply bg-gray-900 text-gray-100;
  }
 
  /* Other styles... */
}

This allows me to easily tweak the theme in the future, without having to do a global search and replace of Tailwind class names, but also lets me leverage Tailwind's utility classes for specific components (e.g. buttons, cards, etc.).

Below is a screenshot of my new portfolio:

New Portfolio