How I Built My Portfolio with Next.js and Sanity CMS (And What I Learned)

Every developer reaches a point where their existing portfolio feels obsolete. My previous portfolio was built on a clunky setup with slow client-side rendering, layout shifts on mobile, and manual hard-coded HTML for every project. It was a chore to update.

For Portfolio 2.0, I set three non-negotiable architectural mandates: 100/100 Core Web Vitals on Lighthouse, fluid 60FPS spring animations powered by Framer Motion, and a headless CMS schema that would allow me to publish rich case studies and blogs in minutes. Here is how I built it.

Why Next.js 15 App Router and React Server Components?

The App Router fundamentally changes how we ship JavaScript to the browser. By default, components in the 'app' directory are React Server Components (RSC). They render on the server, output pure HTML, and ship zero JavaScript to the user's browser for static content.

For dynamic interactive widgets — such as our Super Dynamic Island, theme toggles, and animated case study cards — we selectively use 'use client' at the leaf level of our component tree.

Headless content modeling with Sanity CMS & GROQ

Rather than managing messy markdown files or dealing with static JSON drift, I modeled project case studies, client testimonials, and blog posts in Sanity CMS. Sanity's GROQ query language allows you to request the exact fields needed for a view with zero over-fetching.

// Inefficient: Downloads 80KB of unused fields on initial load
const res = await fetch('https://api.cms.com/projects');
const allProjects = await res.json();

// Exact payload: Only returns necessary card fields in 2KB
const query = groq`*[_type == "project" && featured == true]{
  title,
  slug,
  metrics,
  "thumbnail": coverImage.asset->url
}`;
const featuredProjects = await client.fetch(query);

Tactile micro-interactions: sound & spring physics

A great portfolio shouldn't just look pretty; it should feel tactile and responsive under your fingers. We introduced two signature details to Portfolio 2.0:

• •Framer Motion Spring Physics: Active navigation pills and dynamic command palettes use stiffness: 380, damping: 35 for natural, momentum-based motion.
• •Soft Acoustic Feedback: A custom 18ms Web Audio API sine oscillator generates a subtle, premium acoustic click on CTA buttons without external audio file latency.
• •Native View Transitions: Theme switching uses document.startViewTransition with frozen snapshot capture to prevent delayed black/white element pops.