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
Rocky Mountain Flycasters: Squarespace Component System

Rocky Mountain Flycasters: Squarespace Component System

Built and actively evolving a reusable component system for rmftu.org within Squarespace. Currently finalizing site styles aligned with National Trout Unlimited brand guidelines to solidify the RMFTU identity and modernize the visual presence.

Components (saved sections) 3 (ongoing)
Content Streams 4 +
Active Updates Ongoing
Role Volunteer Content Manager
Squarespace Design Systems Content Strategy UX/UI Community Management
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