Work

Selected product engineering case studies

End-to-end work across production platforms, open-source patterns, and complex UX - told as systems, decisions, and outcomes, not a tool list.

Each study calls out ownership: what I built, why I built it that way, and how it behaves in the real world (performance, accessibility, operations, and iteration).

Featured case studies

  1. Highlight

    Personal · Public · 2026 · Design Engineer & Sole Maintainer

    A production design system, hand-rolled in Next.js and Tailwind v4

    The system that powers this site. Eight foundation layers, twenty-plus components, full voice and accessibility docs, shipped as static pages and read in production.

    Ownership: End-to-end: token architecture, scoped CSS, doc primitives, MDX-free authoring model, build, deploy, observability

    Stack: Next.js 14, React, TypeScript, Tailwind v4, custom CSS variables

    The hard part of a design system is not the tokens, it is the doc primitives. Built the primitives as plain React components so the docs ship the same code that runs in production.

    Design EngineeringDesign SystemNext.jsTailwind v4

    20+Documented components

    Read case study →

  2. Highlight

    Open Source · 2026 · Design Engineer

    2 KB that eliminates 'file too large' for millions of users

    A zero-dependency browser image optimizer grounded in cognitive distance research. Compresses, resizes, and converts images client-side so users never see upload failures again.

    Ownership: End-to-end: research → architecture → library → website → docs → deploy

    Stack: Vanilla JS, Canvas API, Next.js, Tailwind CSS, Rollup

    Systems externalize image preprocessing onto users who don't understand file formats. Absorb it back into the browser with a library so small any system can adopt it.

    Open SourceJavaScriptAccessibilityImage Processing

    ~2 KBGzipped

    Read case study →

Two perspectives · exploratory work

Mobile contract workflows

Every action returns to the record. One exploratory mobile product told through authored design decisions on the design portfolio and working behavior here.

  1. Part 2 of 2 · Design engineeringFeatured in series

    Independent exploration · 2026 · Design Engineer

    A tap is only safe if the state survives

    A local React prototype for mobile agreement approval, document creation, and signature coordination with guarded failure and recovery.

    Ownership: Typed transitions, accessible interaction, responsive interface, recovery, and testing

    Stack: Next.js, React, TypeScript, semantic CSS and SVG

    Every action returns to the record.

    Design EngineeringTyped StateAccessibilityMobile

    VerifiedRules, recovery, focus, and browser behavior

    Read case study →

Platform trilogy · 2025–2026

Rádio Alvorada TV

One gospel media brand, three independent deploys — public website, 24/7 audio tooling, and custom live video — each designed to collapse complexity for audiences and operators.

  1. Part 1 of 3

    Rádio Alvorada TV · 2025–2026 · Product Designer & Design Engineer

    A gospel media home that never stops playing

    Public Next.js platform with persistent Shoutcast radio, São Paulo schedule engine, PWA install, and CMS-ready editorial.

    Ownership: End-to-end: IA, UX, persistent player architecture, SEO, PWA install flow, maintenance

    Stack: Next.js, React, TypeScript, PWA

    The stream follows you page to page — schedule and metadata stay legible without turning the site into a player app.

    Product DesignPWAAudio UXEditorial

    24/7Radio bar

    Read case study →

  2. Part 2 of 3

    Rádio Alvorada TV · 2025–2026 · Product Designer & Design Engineer

    Broadcast from the browser, not a desktop encoder

    Self-hosted Icecast on Oracle Always Free with a WebSocket bridge — operators go live from the browser, listeners tune in via MP3.

    Ownership: End-to-end: operator UX, server bridge, deployment, maintenance

    Stack: Next.js, React, TypeScript, Icecast, WebSockets

    Remove BUTT/OBS from the operator path by accepting a small bridge on the server — complexity moves where volunteers never see it.

    Design EngineeringWebRTC-adjacentIcecastStreaming

    $0Origin cost

    Read case study →

  3. Part 3 of 3Featured in series

    Rádio Alvorada TV · 2025–2026 · Product Designer & Design Engineer

    When the broadcast goes live, viewers shouldn't think about codecs

    Custom live TV: OBS publishes RTMP, nginx writes HLS segments, a Next.js viewer handles mobile unmute policy and YouTube fallback.

    Ownership: End-to-end: UX, streaming pipeline integration, viewer implementation, deployment, maintenance

    Stack: Next.js, React, TypeScript, HLS

    Collapse RTMP, segment freshness, autoplay policy, and screen-lock lifecycle into one black frame and one unmute button.

    Live StreamingDesign EngineeringMobile UXHLS

    ~3–6sHLS latency

    Read case study →

Other case studies

Contact for remote roles