About this site.
Why it exists
I'm in market for a voice and agentic AI role. I wanted my portfolio to demonstrate craft, not just claim it. The site is itself a small proof. The interactions, the writing, the build pipeline — all of it is the work.
What it's built with
Next.js 16 with the App Router and React 19. Tailwind v4 for styling. GSAP and ScrollTrigger for scroll-tied motion. Lenis for smooth scroll. Motion for component-level transitions. Tone.js powers the soft synth on the Top-of-Mind orbs. The OG card and favicon are generated by a small Python script using Pillow so I can regenerate them in one command when the source art changes. Hosted on Cloudflare Pages with auto-deploy on push to main.
AI in the loop
Most of the code was co-written with Claude in Cowork mode — Anthropic's desktop tool that lets Claude run actual git, build, and deploy commands instead of just suggesting them. I drove the design direction and the writing. Claude handled implementation, debugging, and the long tail of polish. Some interactions (the commentary bubble system, the brush wash overlays, the orbital physics) were prototyped in conversation, refined visually against my feedback, and iterated until they felt right.
I'm putting this front-and-center because it's the whole point. The case for an AE who ships with AI gets stronger when the portfolio you're reading was itself shipped this way.
Design notes
The palette is bone cream, teal deep, and gold accent. Cool and warm temperatures balanced; gold deliberately restrained so the page reads warm without feeling bright. Typography pairs Fraunces (display) with Inter (UI) and JetBrains Mono (small labels). Permanent Marker shows up only on the “Brian's Pick” badges over on the bookshelf — handwritten by design, restricted by intent.
The atmospheric color you see drifting in the background is an SVG layer of hand-authored brush washes with per-shape parallax and slow drift. The whole motion layer respects prefers-reduced-motion. The video on the Get-in-touch section also respects prefers-reduced-data and won't download on metered connections.
Credits
Fonts via Google Fonts (Fraunces, Inter, JetBrains Mono, Permanent Marker). Audio synth via Tone.js. The OG card banner art and the favicon portrait are mine.