I Built a Portfolio with Next.js 16, React 19 & Tailwind v4 – Here’s What I Learned

Aarish — Sat, 17 Jan 2026 17:30:25 +0000

🚀 The Motivation
As a developer, your portfolio is your handshake. I didn't want just another template—I wanted to build something that reflects my engineering standards: performance, scalability, and modern aesthetics.

In this post, I'll walk you through how I built my new portfolio using the absolute latest stack: Next.js 16, React 19, and Tailwind CSS v4, along with GSAP for high-performance animations.

🛠️ The Tech Stack

Framework: Next.js 16 (App Router)
UI Library: React 19
Styling: Tailwind CSS v4 (Alpha/Beta)
Animations: GSAP (GreenSock)
State Management: React Context API
Language: TypeScript

✨ Key Features & "The Cool Stuff"
1. Dynamic Color Themes (Not Just Dark Mode!)
Most sites stop at Dark/Light mode. I wanted more expression. I implemented a ThemeContext that allows for multiple color palettes (Cyan-Blue, Green-Emerald, Pink-Rose, etc.) that instantly re-theme the entire application.

// contexts/ThemeContext.tsx
export type ColorTheme = 'cyan-blue-purple' | 'green-emerald-teal' | 'pink-rose-purple' | ...;
const themeConfigs = {
  'cyan-blue-purple': {
    primary: 'from-cyan-400 via-blue-500 to-purple-600',
    // ... define complex gradients
  },
  // ... other themes
};

2. Scalable Project Data Architecture
Instead of hardcoding HTML for every project, I built a data-driven architecture.

data/enhancedProjects.ts : Acts as the source of truth.
projectMapper.ts: Dynamically handles image paths, resolving screenshot-*.png files automatically.
ProjectCard.tsx: A reusable component that adapts to the data.
This means adding a new project is as simple as adding a JSON object—no UI code changes required.

3. Butter-Smooth Animations with GSAP
I used GSAP for complex entrance animations and hover effects. Unlike simple CSS transitions, GSAP gives me granular control over timelines, ensuring the site feels "alive" without jank.

🔗 Check it out
I'm hosting this live at aarish.dev

Let me know what you think!

winner

Aarish — Mon, 07 Apr 2025 09:15:12 +0000

Forem: Aarish

I Built a Portfolio with Next.js 16, React 19 & Tailwind v4 – Here’s What I Learned

winner