DEV Community

Aarish
Aarish

Posted on

I Built a Portfolio with Next.js 16, React 19 & Tailwind v4 โ€“ Hereโ€™s What I Learned

#nextjs #portfolio #showdev #tailwindcss

๐Ÿš€ 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)