Personal Portfolio Website
A statically-generated portfolio website built to showcase ML engineering work, publications, and blog posts with fast load times and straightforward content management.
TL;DR
- Next.js 16 App Router with React 19 Server Components for efficient static generation
- File-based MDX content system with gray-matter frontmatter and version control
- IDE-inspired tag colors with expandable category grouping and +N overflow
- Split card interactions (clickable titles, selectable tags) for intuitive UX
- CSS custom properties theming with single-attribute dark/light toggle
What I Built
Site Architecture
The application uses Next.js 16 App Router with React 19 Server Components for efficient code splitting and static generation. All content pages are pre-rendered at build time, eliminating runtime content fetching. The root layout handles font loading (Sora, Inter, JetBrains Mono), theme provider setup, and global metadata.
Content System
Content lives in version-controlled MDX files organized by type (blog, projects, publications). Each file includes YAML frontmatter for metadata (title, date, tags, featured status) parsed via gray-matter. A content loading utility (lib/content.ts) reads files, extracts frontmatter, and sorts by date. MDX is rendered server-side using next-mdx-remote with custom component mappings for callouts, figures, and metrics.
Component Library
Reusable components handle all interactive elements: project cards with split click zones (title navigates, tags remain selectable), expandable tag groups with color categorization (ML orange, backend blue, language green), publication cards with abstract toggles, and an email contact component with clipboard copy. Components follow a consistent depth-based shadow system and share theme tokens via CSS custom properties.
Tag System & Theming
Tags are categorized by type (ML, backend, language, database, frontend, ops) and assigned IDE-inspired colors for quick visual scanning. On cards, tags are grouped by category with a +N overflow button to prevent layout breaking. All colors are defined as CSS custom properties and toggled via a data-theme attribute on the root element, enabling seamless dark/light transitions without JavaScript.
Tech Stack
- Next.js 16.1.0: App Router for modern routing patterns, static generation for zero-latency content serving, Turbopack for fast development builds
- TypeScript 5: Strict mode enabled for type safety across components and content utilities
- Tailwind CSS 4: Utility-first styling with custom CSS properties for theme tokens
- MDX + next-mdx-remote 5.0.0: File-based content authoring with component composition and server-side rendering
- React 19.2.3: Server Components reduce client JavaScript, improving initial load performance
Why It Matters
Content-First Architecture
The portfolio prioritizes content authoring experience over infrastructure complexity. Markdown with frontmatter is universally readable and easily versioned in git. No database, no API layer, no CMS—just files that can be edited anywhere and tracked with standard version control.
Performance & User Experience
Static generation eliminates runtime content fetching and database queries. Every page loads instantly from a CDN. The split card interaction (clickable titles, selectable tags) respects user intent: navigate when clicking content, copy when selecting tags. Dark/light theming via CSS custom properties requires zero JavaScript, enabling fast theme switching.
Visual Consistency & Design Intent
The IDE-inspired tag color system communicates visual hierarchy instantly. ML skills are orange, backend blue, frontend purple. This is not random decoration; it's a signal that design decisions are intentional and system-oriented. Consistent component styling across projects, publications, and blog posts demonstrates disciplined product thinking.
Engineering & Design Decisions
- File-based content over CMS: Content versioned with git, no API latency, simple local editing, readable diffs
- Static generation over SSR: All content pages pre-rendered at build time for consistent fast loads and CDN-friendly caching
- CSS custom properties over Tailwind themes: Single
data-themeattribute flip toggles entire color system without JavaScript - Split card interactions: Card titles link to detail pages, tag areas remain non-interactive for text selection and copying
- Minimal dependencies: Radix UI for accessible primitives, Lucide for icons, no heavy frameworks or UI libraries
Development & Deployment
Development runs locally via npm run dev with Turbopack for fast refresh. The production build (npm run build) generates static HTML and optimized assets. The site is configured for deployment to Vercel, Netlify, or any static hosting with automatic builds on git push. No environment variables or runtime configuration required.