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