Frontend

Personal Engineering Website

A premium personal website built with Next.js, TypeScript, and Tailwind CSS — serving as a portfolio, technical blog, digital garden, and knowledge base.

September 1, 20242 min read
Source CodeLive Demo
Next.jsTypeScriptTailwind CSSMDXFramer Motion

Overview

This website — the one you're reading right now. A handcrafted personal engineering website that goes beyond a typical portfolio template to serve as a living knowledge base, technical blog, and professional showcase.

Problem

Most developer portfolio sites fall into two categories: generic templates that look identical to thousands of others, or overly complex setups that are difficult to maintain. I wanted a site that feels premium, is technically impressive under the hood, and is easy to extend with new content over time.

Architecture

  • Framework: Next.js with App Router for file-based routing and static generation
  • Content: MDX files with frontmatter metadata — no CMS, no database, just files in a Git repository
  • Styling: Tailwind CSS with a custom design system using CSS custom properties for theme consistency
  • Animations: Framer Motion for scroll-triggered animations and page transitions
  • Search: Client-side command palette (Cmd+K) using cmdk library

Tradeoffs

  • Static export over SSR: The site generates static HTML at build time for maximum performance and simple GitHub Pages hosting, at the cost of dynamic features
  • MDX over a CMS: Content lives in the repository alongside the code, making it easy to version, review, and deploy through the same Git workflow
  • Custom design system over component library: Full control over aesthetics and consistent with the minimal, premium feel I wanted

Implementation

  • Custom MDX pipeline with gray-matter for frontmatter parsing and reading-time calculation
  • Comprehensive dark mode using next-themes with CSS custom properties
  • Responsive design tested across mobile, tablet, and desktop breakpoints
  • SEO optimization with dynamic metadata, Open Graph images, and structured data

Challenges

  • Achieving a cohesive design language across 9 different page types with varied content structures
  • Balancing animation richness with performance — every animation is GPU-accelerated and respects reduced-motion preferences
  • Content architecture that scales from 6 projects and 3 articles to hundreds without navigation degradation

Future Improvements

  • RSS feed for blog subscribers
  • Full-text search across all content
  • Automated Open Graph image generation
  • Comments system using GitHub Discussions
  • View count tracking with a privacy-respecting analytics service
Back to all projects