Portfolio Website
Next.js

Portfolio Website

Time: 2025

Labels: Next.js, React, Design

Portfolio Website

Overview

Modern portfolio website built with Next.js 16, React 19, and Framer Motion. Features content management via JSON/Markdown and beautiful animations throughout.

Design Goals

  • Clean, minimal aesthetic
  • Fast performance
  • Easy content management
  • Responsive design
  • Professional animations

Features

Content Management

The site uses a hybrid JSON + Markdown approach:

  • JSON for structured metadata (projects, timeline, resources)
  • Markdown for rich content (project descriptions, case studies)

This allows for:

  • Easy updates without a CMS
  • Version control for all content
  • Type-safe content access

Technical Highlights

  • Next.js 16 with App Router
  • React 19 with server components
  • Framer Motion for animations
  • Tailwind CSS for styling
  • TypeScript throughout

Homepage Screenshot

Key Pages

  1. Home: Hero section, about me, featured projects
  2. Timeline: Interactive career timeline with sticky scroll
  3. Projects: Filterable project gallery with detail pages
  4. Resources: Downloadable resources with ratings

Performance

  • Lighthouse score: 100/100
  • First Contentful Paint: < 1s
  • Time to Interactive: < 2s
Visit Project →