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

Source: Dev.to

The Motivation

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!)

// 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

• 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.

Adding a new project is as simple as adding a JSON object—no UI code changes required.

3. Butter‑Smooth Animations with GSAP

(Implementation details omitted for brevity.)

Demo

aarish.dev

Let me know what you think!