Back to Projects

Portfolio Rebuild — Next.js & TypeScript Refactor

A complete redesign and refactor of my portfolio site, focusing on clean code architecture, better component composition, and seamless project showcase capabilities.

Core Technologies

Next.jsTypeScriptReactTailwind CSSAWSMDX

Architecture Components

  • Next.js App Router for file-based routing and server components
  • TypeScript for type-safe component development
  • Tailwind CSS for responsive, utility-first styling
  • MDX integration for dynamic project case study pages
  • AWS S3 + CloudFront for static asset delivery and CDN
  • Radix UI primitives for accessible button and component patterns

Problem

The original portfolio lacked proper organization and had complex state management. Navigation was inconsistent, and adding new projects required manual updates across multiple files.

  • No clear separation between content and presentation layer
  • Button routing issues in development vs. production environments
  • Manual page creation was error-prone and not scalable

Solution

Implement a content-driven architecture with TypeScript for type safety, dynamic route generation from a centralized content file, and proper component composition using Radix UI primitives.

  • Centralized site content in a single TypeScript file with typed exports
  • Dynamic project pages generated from slugs in the content configuration
  • Fixed Button component to properly handle Next.js Link integration with Radix Slot
  • Implemented responsive design with Tailwind CSS breakpoints

Outcome

Now adding projects is as simple as updating the content file with new entries. The site is faster, more maintainable, and provides a better user and developer experience.

  • New projects can be added by simply editing the content configuration
  • All pages are statically optimized and deploy instantly to AWS
  • Navigation works flawlessly in both development and production
  • Type safety prevents content-related bugs before they reach production

Key Learnings & Decisions

Key Decisions & Learnings

  • Chose Next.js App Router over Pages Router for better performance and modern patterns
  • Implemented typed content structure to catch errors at build time, not runtime
  • Fixed Radix UI Slot integration issues by understanding how asChild merges attributes
  • Kept styling simple with Tailwind to avoid theme complexity

Implementation Milestones

A breakdown of the key tasks and milestones that brought this project to life.

Architecture Design

Complete

Plan content structure and component hierarchy

Core Components

Complete

Build base UI components and layout system

Dynamic Pages

Complete

Implement MDX-powered project pages

AWS Deployment

Complete

Deploy to S3 + CloudFront with custom domain

View Source Code