Portfolio

Strategic projects that moved the needle on design systems, accessibility, and developer experience.

Okra Design System

Okra Design System

Principal Architect for multi-brand design system serving Crocs and HeyDude with 40+ components, design tokens, and WCAG compliance.

Components Built 40+
Releases 27
Brands Served 2
Accessibility WCAG AA
Design Systems React 18 Storybook Style Dictionary Accessibility npm Publishing
Road34 Redesign: AI + pen.dev + Sanity

Road34 Redesign: AI + pen.dev + Sanity

Rebuilt Road34's marketing site using AI scaffolding, pen.dev for design exploration, and Sanity CMS for content management.

Pages 6
Dynamic Routes Bikes, Menu
Content Types 8+
Deploy Automation Vercel Hooks
Astro Sanity GROQ React TypeScript pen.dev
AI-Scaffolded UI: Interview Prep Workflow

AI-Scaffolded UI: Interview Prep Workflow

Developed a rapid prototyping workflow combining AI scaffolding, React implementation, and pen.dev design polish for interview prep.

Development Time 3 days
Test Coverage 90%+
Workflow Stages 3
Iteration Speed AI → Code → Design
React Vite TypeScript Vitest Component Design UI Polish

Design Token Architecture & Multi-Brand Support

Built a scalable token system supporting two brands (Crocs, HeyDude) with Style Dictionary, enabling runtime theming and brand-specific overrides.

Brands Supported 2
Token Categories 8+
Output Formats SCSS, JS, CSS
Token Sets Global + 2 Brand
Design Tokens Style Dictionary SCSS CSS Custom Properties Brand Strategy

Component Accessibility: Building WCAG-Compliant Components

Systematically designed and audited components for WCAG 2.1 AA compliance with keyboard navigation, ARIA attributes, and automated testing.

Components Audited 15+
WCAG Compliance 2.1 AA
Focus States 100%
Keyboard Nav Fully Tested
WCAG 2.1 ARIA Attributes Keyboard Navigation Screen Reader Testing Axe Storybook A11y

Storybook-Driven Documentation & Design System Publishing

Architected a comprehensive Storybook documentation system linking code, design tokens, and Figma specs as single source of truth for 40+ components.

Components Documented 40+
Story Pages 100+
Documentation Types 4
Designer/Dev Alignment Figma Links
Storybook 7 MDX Documentation Static Site Generation Figma Integration Developer Experience