How This Site Was Built

This site is built as a static, verifiable system. It uses no database, no complex CMS, and relies entirely on local markdown and TypeScript files for content.

• Framework: Next.js 16 (App Router) + React 19
• Language: TypeScript 6
• Styling: Tailwind CSS 4 (CSS-first @theme)
• Animations: Framer Motion 12 with prefers-reduced-motion gating
• Content: MDX compiled with next-mdx-remote/rsc
• Search: Pagefind (Static search index)
• Deployment: Vercel (Edge-cached SSG)

Every route on this site is pre-rendered at build time (SSG). There are no client-side waterfalls for content fetching. Animation components are lazily mounted and respect the OS reduced-motion preference to preserve a fast Largest Contentful Paint (LCP).

Current field data targets (Speed Insights):

• LCP: < 1.2s
• INP: < 50ms
• CLS: 0.00

A beautiful design is a failure if it isn't usable. This site was built with a baseline accessibility floor:

• Contrast: All text meets the WCAG AA 4.5:1 ratio minimum.
• Keyboard Navigation: Every interactive element has a visible :focus-visible ring. You can navigate the entire site without a mouse.
• Reduced Motion: All Framer Motion animations respect the prefers-reduced-motion media query. If you have animations disabled in your OS, they are disabled here.
• Touch Targets: Interactive elements on mobile are at least 44x44px.

This site respects your privacy. I use a lightweight, privacy-focused analytics wrapper (Vercel Analytics) that does not use cookies or collect PII. Below is the exhaustive list of custom events tracked:

• Search Executed — Triggered when a query is run in the Command Palette.
• Search Result Selected — Triggered when a search result is clicked.
• contact_submit — Triggered when the contact form is successfully submitted.

The CI/CD pipeline enforces strict quality gates before any deployment reaches production. You can review the approach in the Portfolio Engineering Lab note.