Skip to content
Back to projects

Full Stack

Personal Portfolio Website

Designed and built a modern portfolio site using Next.js, TypeScript, and Tailwind CSS with scroll animations and static deployment.

Published

May 2, 2025

Stack

nextjstypescripttailwindframer-motion
Hero image for Personal Portfolio Website

Category

Full Stack

Links available

Live site · Repository

Focus

Problem → process → outcome

Overview

A modern personal portfolio and resume site built with Next.js 16, TypeScript, and Tailwind CSS v4. Features scroll-driven animations, dark mode, MDX content, and static deployment to GitHub Pages.

Key Features

  • Cinematic scroll animations using Framer Motion with reduced-motion support
  • Dark/light theme with zero flash-of-unstyled-content
  • File-based content pipeline (MDX + JSON) — no CMS required
  • Fully static export deployed to GitHub Pages via GitHub Actions
  • SEO optimized with structured data, sitemap, and RSS feed

Technical Approach

Built with a Server Components-first architecture using Next.js App Router, with Client Components only where interactivity is needed. The design system uses CSS custom properties for theme tokens.

AreaTechnology
FrameworkNext.js 16 (App Router, static export)
StylingTailwind CSS v4 + CSS custom properties
AnimationFramer Motion / Motion v12
ContentMDX + JSON files
DeploymentGitHub Pages via GitHub Actions

Impact

A fast, accessible, and visually polished portfolio that showcases professional experience while demonstrating modern web development practices.

Want a product partner who can ship the interface and the system behind it?

Let's talk through the product constraints, front-end quality bar, and the delivery plan.