This Site

The most honest case study I can offer, because you're inside it right now. This portfolio is a Next.js 14 App Router site with a type-safe MDX content pipeline, a lab of working browser experiments, and Three.js scenes that know when to get out of the way. Everything this page claims can be checked by clicking around.

The Content Pipeline

Every case study, project, and lab experiment on this site is an MDX file with YAML frontmatter, parsed and validated against a Zod schema at build time. This is the actual schema this page passed through to render:

export const WorkCaseSchema = z.object({
  title: z.string(),
  client: z.string(),
  year: z.number(),
  services: z.array(z.enum(['strategy', 'design', 'engineering', 'data', 'ai', 'integration'])),
  impact: z.string(),
  outcomes: z.array(z.string()),
  stack: z.array(z.string()),
  cover: z.string(),
  repo: z.string().optional(),
  demo: z.string().optional(),
  duration_weeks: z.number().optional(),
  role: z.string(),
  featured: z.boolean().default(false),
  published: z.boolean().default(true),
})

The payoff is that content mistakes fail the build instead of shipping: a typo'd service tag, a missing cover image path, or a malformed date is caught before deploy. For a site whose content is the whole point, "the CMS is the type system" has been the highest-leverage architectural decision.

The Lab

The lab is where I test the "everything is checkable" principle hardest. Six experiments, all real implementations rather than embeds:

• A neural network playground that trains a real multilayer perceptron in the browser — forward pass, backpropagation, and a live decision boundary, with learning rate and activation function controls wired to the actual math
• A Web Audio synthesizer with oscillators, filters, and effects built on the Web Audio API
• A 3D scene builder on Three.js
• A GLSL shader playground compiling fragment shaders live on the GPU, with inline compile errors
• A data visualization playground that parses your own CSV uploads with hand-written SVG charts
• An asteroid shooter on HTML5 Canvas

The experiments deliberately avoid libraries where the point is the fundamentals — the charts are hand-rolled SVG rather than D3, the shader playground is raw WebGL rather than Three.js — and their write-ups document their limitations alongside their features.

Performance Without Sacrificing the Toys

The tension in this site's design: immersive Three.js backgrounds are heavy, and most visitors are on phones. The resolution:

• Hardware WebGL detection — the Three.js scenes only load where a real GPU is available; software rasterizers get a static background instead of a slideshow
• Deferred Three.js — the 3D bundles are dynamically imported so they never block a route's first load
• Reduced-motion support — animations respect prefers-reduced-motion throughout

The design system is Tailwind with shadcn/ui primitives, themed in OKLCH with full dark-mode support, and Framer Motion for transitions.

The Unglamorous Parts

The parts that don't demo well but matter:

• Server Actions handle the contact form — validation runs on both client and server with the same Zod schema
• Testing — content-pipeline unit tests in Vitest (malformed frontmatter should fail loudly) and Playwright end-to-end tests for the critical paths
• SEO plumbing — per-page metadata, Open Graph images, and a generated sitemap

Lessons Learned

Schema-validated content scales better than discipline. Early on I trusted myself to keep frontmatter consistent across files. The Zod pipeline exists because that trust was misplaced — the validator has caught real mistakes that would have shipped as broken pages.

Fallbacks are a feature, not an apology. The hardware-GL detection came from watching the site struggle on a low-end device. Building the static fallback made the 3D version better too, because it forced a clear answer to "what is this background actually for?"

A portfolio is a claim you have to live up to. Every technique named on this site is inspectable on this site. That constraint shaped it more than any design decision — it rules out impressive-sounding things I can't show, which turns out to be a good filter for what's worth building.