The site you're reading — where the content is the filesystem. Projects are markdown files, design docs are MDX, and every page becomes static HTML at build time.
Overview
This portfolio is documentation-aware by design: any project can attach multiple Design Docs (local MDX or Notion links) that render with the same pipeline — diagrams, callouts, tables of contents. Adding content never means touching code: drop files in projects/, push, done.
It's also honest about itself — its own Architecture, Requirements, and ADR docs are written in its own format.
Key Capabilities
- Filesystem as CMS —
fast-glob+gray-matterdiscover and parse projects at build time; frontmatter drives slugs, tags, visibility, ordering. - Server-rendered MDX — one component map (
src/lib/mdx.tsx) defines what Markdown means here: Obsidian-style callouts (10 themed types), Mermaid diagrams, styled tables/code, auto heading anchors. - Design Docs for every project — validated metadata (
meta.yaml), local MDX or Notion sources, index + detail pages generated statically. - Mermaid without the payload penalty — lazy client-side import, serialized renders, theme-aware re-rendering, full-screen pan/zoom viewer.
- Build-time SEO — per-page metadata, generated OG/Twitter images, JSON-LD (Person/WebSite/Article), sitemap, robots, PWA manifest.
- Motion with manners — Motion-based reveals under a global reduced-motion rule; View Transitions API theme wipe.
Tech Stack
| Layer | Choice |
|---|---|
| Framework | Next.js 16 (App Router, Server Components) |
| Content | MDX via next-mdx-remote (RSC) + gray-matter + yaml + fast-glob |
| Styling | Tailwind CSS v4 + shadcn/ui (Radix primitives), next-themes |
| Diagrams | Mermaid (lazy client-side rendering) |
| Animation | Motion (reducedMotion="user" globally) |
| Deploy | Vercel |
See Design Docs above — especially Architecture — for the content pipeline, route map, and honest gaps.
What This Project Shows
Product sense — treats documentation as part of the product: every project carries architecture docs, and the site documents itself in its own format.
Engineering care — strict build-time validation that fails loudly, path-traversal-guarded asset serving, bundle-isolated diagram rendering, accessibility (reduced motion, keyboard navigation) as a global rule rather than a cleanup task.
Dive deeper
Open Design Docs above: Architecture, Functional Requirements, Architecture Decisions, Design Docs System, and How to Use — kept short, visual, and verified against the source code.
Scope Notes
Honest limitations: no CMS UI or database (by design); no blog section yet (header button intentionally disabled); sitemap doesn't yet include design-doc pages; asset serving requires a Node runtime, so pure static export isn't possible.