Back to Projects

ezhou.dev — Personal Website

Portfolio and blog built with Next.js 14 and MDX

Next.jsTypeScriptTailwind CSSFramer MotionMDX

Demo coming soon

Overview

A personal portfolio site designed to showcase engineering projects, technical writing, and experiments. Built with a minimalist dark aesthetic and deployed on Vercel. The MDX blog system reads content from the filesystem at build time, enabling fully static generation.

Architecture

Next.js 14 App Router with static site generation. Blog posts are MDX files parsed with gray-matter and next-mdx-remote. Framer Motion handles scroll-triggered animations. Tailwind CSS provides the design system. All 16 pages are pre-rendered at build time for optimal performance.

Key Challenges

  • Navigating Next.js 14 App Router patterns and RSC/client component boundaries
  • Resolving dependency version conflicts in the MDX/remark/rehype ecosystem
  • Designing a minimal aesthetic that feels engineered, not templated
  • Maintaining fast build times with static MDX generation

What I Learned

  • Next.js 14 App Router architecture and SSG patterns
  • MDX pipeline setup with gray-matter, remark-gfm, and rehype-highlight
  • Framer Motion animation patterns for scroll-triggered reveals
  • Deploying and configuring custom domains on Vercel with Cloudflare DNS

Future Improvements

  • Add dark/light mode toggle
  • Implement RSS feed for blog posts
  • Add interactive project visualisations
  • Create a /uses page for tools and setup