Personal Site

Overview

A high-performance personal website serving as a digital garden for technical writing, project showcases, and professional presence. Every detail — from the animated tricolor logo to the scroll-driven timeline — is intentionally crafted.

Problem

Most personal sites fall into two camps: generic templates that look like everyone else's, or over-engineered experiments that sacrifice content for flash. I wanted something that was:

• Visually distinctive — a site that could credibly compete on Awwwards
• Content-first — writing a new article should mean creating one .mdx file
• Performant — 95+ Lighthouse scores across the board
• Maintainable — clean enough that I can extend it without re-learning the codebase

Solution

Built from scratch with Next.js App Router and a carefully chosen set of tools:

1. Design System — Intel-inspired deep navy palette with multi-accent color system, implemented via CSS custom properties and Tailwind v4.
2. Content Pipeline — MDX files with frontmatter, compiled at build time with KaTeX for math, Shiki for syntax highlighting, and custom components for callouts, figures, and equations.
3. Animations — Framer Motion for scroll-triggered reveals, layout animations, and micro-interactions. All motion respects prefers-reduced-motion.
4. Search — Flexsearch index generated at build time, loaded on-demand when the search dialog opens.

Key Learnings

1. Design tokens first. Defining the full color palette, type scale, and spacing system before writing any component code saved enormous time.
2. RSC changes everything. Server Components let you keep heavy MDX compilation server-side while keeping the interactive shell lightweight.
3. Ship incrementally. Building page-by-page with a working deploy at every step is far better than trying to ship everything at once.

Tech Stack

• Next.js 16, React 19, TypeScript
• Tailwind CSS v4, CSS custom properties
• Framer Motion
• MDX (next-mdx-remote), KaTeX, Shiki
• Flexsearch
• Vercel (deployment)