DEV Community

Aarish
Aarish

Posted on

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

#portfolio #tailwindcss #nextjs #showdev

🚀 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
};
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)