Projects

A mix of editorial work, open-source tools, and experiments. The highlights are up top; everything else is in the archive below.

Selected work

CodePass

Published on npm

Terminal harness that hot-swaps between AI coding agents - Claude Code, Codex, opencode, Cline - carrying a shared handoff file so you never lose context when a rate limit hits.

Read case study →

  • TypeScript
  • CLI
  • Node

Sports Misery Index

1M+ views

Interactive misery rankings across 120+ teams in the four major leagues.

Read case study →

  • React
  • TypeScript
  • TailwindCSS
  • Lottie

ChromaKit

Open source

Modern React color picker for design systems with perceptual color spaces and accessible defaults.

  • React
  • TypeScript
  • OKLCH
  • Accessibility

NFL Playoff Picture

8M+ views

Live NFL playoff odds powered by FPI. Real-time seeding, clinch scenarios, and draft-order tracking.

  • Hugo
  • Sass
  • D3.js

BeamCSS

Rust-fast utility CSS with grouped variants, CSS-first naming, and zero-runtime atomic output.

  • Rust
  • CSS
  • Design Tokens

React Lazy Image

~1.4KB gzipped

Lazy-loaded React images with responsive sources, smart placeholders, and a ~1.4KB footprint.

  • React
  • TypeScript
  • Blurhash
  • Intersection Observer

Text2CSS

Figma plugin that exports text styles as CSS, Tailwind, or SCSS with configurable output.

  • Figma Plugin API
  • TypeScript
  • CSS

F1 Design History

Interactive history of 75 years of F1 cars, engineering leaps, and regulation eras.

  • React
  • TypeScript
  • TailwindCSS
  • Framer Motion

The Magic and Mastery of Carlos Alcaraz

Webby winner

Webby-winning mobile-first feature on tennis champion Carlos Alcaraz.

  • React

Internal @ ESPN

Systems and tooling built for ESPN's editorial and engineering teams - internal, so no public links.

Slideshow Template System

Reusable component library and templating system for Visual Storytelling slideshows, adopted across 3 teams.

Tooling · Templates

GIF Optimization Tool

Fully client-side GIF optimizer - batch queue, before/after preview, video-to-GIF - that replaced a third-party dependency.

Web APIs · Performance

Matchup System Banner Builder

Automated banner production pipeline from PSD handoff through output.

Tooling · Automation

AI Enablement & Agent Guardrails

Trained the engineering org on Claude Code, Cursor, and MCP; built guardrails - custom ESLint rulesets, CI gates, instruction files - that made AI-assisted development reliable in production.

AI Workflows · ESLint · CI

More projects

Promptkit

7 ecosystems

Write once, export AI behavior files for seven coding ecosystems.

Next.js · Developer Tooling · AI Workflows

Strong Women, Warrior Women

Webby nominated

Immersive documentary story on Las Amazonas and softball's power in Yucatan.

React · TypeScript · TailwindCSS · GSAP

They Were All Young

Longform on the 1988 Saints, lasting brotherhood, and football's physical toll.

React · TypeScript · TailwindCSS · Framer Motion

K&N Engineering

+23% promo revenue

Headless ecommerce redesign for K&N Engineering on React and Next.js.

React · Next.js · Headless CMS · Magento

LISTEN: Lauren McCluskey Investigation

Investigative multimedia story tracing the failures surrounding Lauren McCluskey's case.

Hugo · Sass · JavaScript · GSAP

The Rebirth of Hinchliffe Stadium

Immersive history of Hinchliffe Stadium's legacy, decline, and restoration.

Hugo · Sass · JavaScript · GSAP

A Beginner's Guide to F1 Terms and Tech

Beginner-friendly guide to F1 terms, flags, systems, and race strategy.

Hugo · Sass · JavaScript · GSAP

2024 NFL Quarterback Draft Picker

Play-GM NFL draft tool matching Round 1 quarterbacks to team needs and pick odds.

React · TailwindCSS

How Clubs Got Their Colours

Interactive kit history tracing how iconic club colours became identity.

React · TypeScript · TailwindCSS

WNBA 2024: Year of the Rookie

Interactive timeline following a historic WNBA rookie class as the season unfolded.

React · TailwindCSS

2024 NFL Playoff Picture

Live 2024 NFL playoff odds, clinch scenarios, and seeding races.

React · D3.js

2023 NFL Playoff Picture

Live 2023 NFL playoff standings, probabilities, and scenario modeling.

React · TypeScript

2022 NFL Playoff Picture

The original live NFL playoff probability tracker.

React · JavaScript · Chart.js

30 for 30 Podcasts

Site for ESPN's 30 for 30 podcast series - episode archive and streaming.

WordPress

NCAA March Madness Forecast

Live March Madness forecast with team performance and bracket odds.

React · TypeScript

Super Bowl Rings

Interactive showcase of every Super Bowl championship ring in NFL history.

React

Brockulator

Salary calculator analyzing the value of Brock Purdy's contract.

React · TypeScript

Search Bar Trivia: 2023 Year in Review

Trivia game built around 2023's most-searched sports moments.

React

Shohei Ohtani True Value Calculator

Interactive calculator for the true value of Ohtani's two-way game.

React

Inside the WNBA's Triple-Double Explosion

Data-driven look at the rise of triple-doubles in the WNBA.

React · D3.js

Fantasy Football Name Generator

Generator for creative fantasy football team names.

React

My Wish: Dreams Realized

Archive of ESPN's My Wish program - sports dreams granted for young fans.

React

Siuuu! Ronaldo is 40

Interactive tribute to Cristiano Ronaldo's career at 40.

React

Olympians, Assemble!

Build-your-own dream Olympic basketball starting five.

React

The Anatomy of an ESPY's Speech

Interactive analysis of iconic ESPY Awards speeches.

React

Signature Shoes of the NBA and WNBA

Interactive guide to NBA and WNBA signature sneakers.

React

Head to Head: Hiring in the NFL

Blind-resume analysis of NFL coaching hires in the Rooney Rule era.

React

The Biogenesis Files

Investigative feature on baseball's Biogenesis PED scandal.

React

Breaking Down Diana Taurasi's 10,000-Point Shot

Shot analysis of Taurasi becoming the WNBA's first 10K scorer.

React · D3.js