Building My Developer Portfolio with Next.js

\

Why I Built a Custom Portfolio

Instead of using a template, I decided to build my portfolio from scratch using Next.js and TailwindCSS. This gave me full control over the architecture, performance, and design.

Tech Stack

• Next.js 16 with App Router for server-first rendering
• TypeScript in strict mode for type safety
• TailwindCSS for utility-first styling
• Vercel for deployment with automatic previews

Architecture Decisions

The project follows a layered component architecture:

1. Types layer — shared TypeScript interfaces
2. Config layer — centralized data management
3. UI primitives — reusable components like GlassCard and Badge
4. Section components — page sections that compose UI primitives
5. Page layer — final composition with animations

Key Features

Some of the features I'm most proud of:

• Interactive particle background using tsparticles
• Glassmorphism design with backdrop-blur effects
• Scroll-triggered reveal animations via IntersectionObserver
• Project case study pages with Mermaid architecture diagrams
• GitHub contribution calendar integration

What I Learned

Building this portfolio taught me a lot about Next.js App Router patterns, the difference between server and client components, and how to structure a project for maintainability.

The biggest takeaway: keep data out of components. By centralizing all content in a config file, I can update my portfolio without touching any component code.

Website demo & screenshots