This website

My original site was built in 2015 with jQuery and vanilla JavaScript. There was nothing technically wrong with it — it worked, it loaded, it represented me. But it looked exactly like what it was: a site built ten years ago by someone who was still learning.

I'd spent the intervening decade building complex front-end applications at IBM, ADP, Vanguard, and NBCUniversal. I knew CSS Grid, custom properties, fluid type scales, scroll-driven animations, the View Transitions API. My site showed none of that. It was a résumé that undersold the person it was supposed to represent.

I had two goals going in: build something that actually demonstrated where my skills are now, and do it entirely with AI-assisted development — from concept to execution — to see what that process was really like.

Going into it, I assumed the dynamic would be straightforward: I'd explain what I wanted, the AI would generate code, I'd review and correct it. I'd be the manager, it would be the executor.

That's not what happened. What emerged instead was something closer to a genuine creative partnership — workshopping headline concepts across three rounds of iteration, debating color palettes, thinking through information architecture together. The AI pushed back on ideas that weren't working. I pushed back on ideas the AI suggested. We arrived at things neither of us would have landed on alone.

The animated headline — "Crafted code." cycling through "code," "prose," and "images" — came out of exactly that kind of back-and-forth. It started as three static lines, became a repetition structure, then became a single line with the rotating word when I realized the repetition was cluttered but the concept was right.

What the AI couldn't do was supply the content. The personal history, the career narrative, the specific details that make a portfolio feel like a person rather than a template — that all had to come from me. But it turned out to be a surprisingly useful thought partner for the design and engineering decisions.

The stack is intentionally minimal: vanilla HTML, CSS, and JavaScript, deployed to GitHub Pages. No React, no bundler, no compilation step. This was a deliberate choice — I wanted to demonstrate CSS mastery, and the best way to do that is to let the CSS do the work.

The CSS architecture uses a three-layer token system: primitive values (raw palette, raw scale), semantic tokens (what a value means), and component tokens (what a value does in context). Components reference only the semantic and component layers — never a primitive directly. This means dark mode, theming, and future changes all flow from a single source of truth.

Some specific things worth examining in the source:

• Fluid type scale using clamp() — zero media queries for typography
• Scroll-driven animations via animation-timeline: view(), progressively enhanced
• View Transitions API for cross-page fades — one line of CSS
• The animated headline uses the Web Animations API with a Page Visibility reset to handle tab-switching correctly
• Dark mode via prefers-color-scheme with a user-toggleable override persisted to localStorage
• A custom cursor implemented with requestAnimationFrame lerp — only on fine-pointer devices

The source code is public on GitHub. The README documents the full CSS architecture and every technique used.