Building a High-Performance Foundation with Next.js & Vanilla Extract

When I set out to build this portfolio, I wanted more than just a static site. I wanted a platform that felt alive, performant, and maintainable. This led me to a core stack of Next.js for the framework and Vanilla Extract for styling.

Why Next.js?

Next.js provides the perfect balance of Server-Side Rendering (SSR) for SEO and performance, and Client-Side rendering for interactivity. For a portfolio where first impressions and load times are everything, theApp Router's ability to stream content was a game-changer.

{% illustration initialCode=".container {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 200px;\n}" type="flex" /%}

Type-Safe Styling with Vanilla Extract

I've always been a fan of CSS-in-JS, but the runtime cost can be a heavy hit on performance. Vanilla Extract solves this by giving us a type-safe API that compiles to static CSS at build time. No runtime injection, no flicker, just raw performance.

import { style } from '@vanilla-extract/css';
import { vars } from './theme.css';

export const button = style({
  backgroundColor: vars.color.primary,
  padding: '12px 24px',
  borderRadius: '8px',
  transition: 'transform 0.2s ease',
  ':hover': {
    transform: 'scale(1.05)'
  }
});