All Projects

Portfolio Website

This website, built with Next.js 15 and Tailwind CSS 4

Portfolio Website, Next.js 15 SSG overview

This portfolio is a ground-up rebuild of my previous Create React App site. The old version had zero SEO because everything was client-rendered JavaScript. Google could not index a single page. Searching for my name returned nothing.

The rebuild uses Next.js 15 with the App Router and static site generation. Every page is pre-rendered at build time as full HTML. Each project and blog post gets its own URL with unique title, meta description, Open Graph tags, and JSON-LD structured data (Person, WebSite, BlogPosting, SoftwareApplication schemas). The sitemap.ts auto-generates a sitemap covering all routes.

The blog system uses MDX (Markdown + JSX) loaded through gray-matter for frontmatter parsing and next-mdx-remote for rendering. Code blocks use sugar-high for lightweight syntax highlighting.

The site went through a full visual rebuild from its original dark, CV-style presentation to a light paper theme built around an illustrated mascot hero with pointer-tracking gaze and click-to-greet interaction, and a one-point-perspective room-grid background that now runs continuously from the hero through the footer on every page, not just behind the fold. The copy was reframed from job-seeker language ("available for work") to agency/project framing ("taking projects") to match how the site is actually used to pitch work now.

Tailwind CSS 4 handles all styling with custom theme tokens defined as CSS variables, which made the dark-to-light flip mostly a token-level change rather than a per-component rewrite. Inter and JetBrains Mono are self-hosted via next/font for zero external requests.

Key Features

  • Static site generation for every page
  • MDX blog with syntax highlighting
  • SEO: unique metadata, Open Graph, JSON-LD, sitemap
  • Illustrated mascot hero with pointer-tracking gaze and click-to-greet
  • Persistent room-grid background running from hero to footer, site-wide
  • Framer Motion staggered entrance animations
  • Self-hosted Inter + JetBrains Mono fonts
  • Token-level dark-to-light theme flip via CSS custom properties

Tech Stack

Next.js 15React 19TypeScriptTailwind CSS 4MDXFramer Motionnext/font

Next project

Number & Verse