Skip to content
All Projects
Portfolio site homepage
·Personal·shipped

Portfolio Site

This site, a content-driven portfolio built with Next.js 16, MDX, and Tailwind CSS. Statically generated, fast, and designed to showcase projects with rich media and interactive components.

web
  • ▸Content-driven architecture: MDX files with Zod-validated frontmatter, compiled at build time with next-mdx-remote
  • ▸Custom MDX components: FloatingImage with text wrapping, Gallery, DiagramBlock, MetricRow, and animated GIF support
  • ▸Statically generated with Next.js 16 App Router: project and experience routes are pre-rendered for fast loading
  • ▸Dark theme with Framer Motion animations, responsive design, and SEO optimization with auto-generated sitemap
Stack
Next.jsTypeScriptTailwind CSSMDXFramer MotionVercel
RoleSolo developer
Team1 people
Source Code

Overview

The site you're looking at. Built to present my projects as full write-ups with architecture diagrams, screenshots, and interactive elements, not just a list of cards.

Architecture

Content-driven approach where each project/experience is an MDX file with validated frontmatter:

  • MDX files in content/projects/ and content/experience/ define all content
  • Zod schemas validate frontmatter at build time: type-safe content with no runtime surprises
  • next-mdx-remote compiles MDX server-side with remark/rehype plugins (GFM tables, syntax highlighting via Shiki, auto-linked headings)
  • Static generation via generateStaticParams: every page is pre-rendered at build

Custom MDX Components

Built a set of components available in any project write-up:

  • FloatingImage: images that float left/right with text wrapping and optional captions (with automatic GIF detection for unoptimized rendering)
  • Gallery: responsive grid of images with hover effects
  • DiagramBlock: styled container for technical diagrams
  • MetricRow: display key metrics inline
  • VideoEmbed: responsive video embedding

Stack

  • Next.js 16 with App Router and React 19
  • Tailwind CSS 4 for styling
  • Framer Motion for page transitions and scroll animations
  • MDX with rehype-pretty-code (Shiki) for syntax highlighting
  • Vercel for deployment with analytics and speed insights
  • Lucide for icons