Film
Teams Music Status
OWN PRODUCT
Writes whatever you're playing into your Teams status, automatically. One Swift core, two platforms: presence sources and targets are protocols, so each OS gets its own write path against the same model instead of a separate app.
- 01Local playback
- 02Presence source
- 03macOS Accessibility API / Windows UI Automation
- 04Teams status, read back to verify
SWIFT · MACOS + WINDOWS · WINRT
Erika Cardema
FILMMAKER & EDITOR
A filmmaker's site that opens through the camera itself: a real Panasonic camcorder powers on, cranks open, and its flip-out screen wakes with her reel before pushing in to fullscreen. The masonry below reacts to how much survived the filter, off one engine shared with the stills.
- Camcorder intro
- A real GLB camcorder, scrubbed open frame-by-frame; the LCD is a live video texture, not a baked screen.
- Filter-aware grid
- Three columns holding four photos stack 2/2/0 rather than leave a dead column; under six items the grid drops to two.
- Two encodes per card
- A muted preview plays in view; the full clip loads only when the lightbox opens.
WEBGL (THREE.JS) · CSS MULTI-COLUMN · INTERSECTION OBSERVER
The Party App
Lock Phones
Unlock Vibes

Glass Tappers
PARTY APP · iOS + WEB
A party app that keeps guests off their phones. Leave mid-party and your glass cracks; keep ignoring it and a Live Activity pulls you back with a live count of who's out and for how long. I built the iOS app and the launch backend, Party Mode being the 1,270-line core.
- The mechanic
- Detects backgrounding, not a locked phone: every exit cracks the glass (drawn procedurally) and re-triggers the Live Activity. Leaving on purpose asks for a confirm tap first, so a stray touch can't drop you.
- Web + backend
- The launch site is a separate build on Azure Static Web Apps over Functions v4, cookies signed HMAC-SHA256 and verified in constant time; the live app runs on Supabase (Postgres, auth, storage).
SWIFT · SWIFTUI · SUPABASE · AZURE FUNCTIONS
Inked
by Billy
Book a tattoo
Billy
TATTOO ARTIST · SAN JOSE
A booking system, not a contact form. Public intake lands in D1; a confirmed booking returns a real .ics invite. Each piece on the home page composites three depth layers off one scroll-progress property.
- Three depths
- Wash, plate and macro-crop separate in depth off a single
--pvariable; move through the frame and each drifts at its own rate. - Admin desk
- An authenticated desk works each inquiry with threaded replies; no mail double-sends (Resend keyed on inquiry + event).
NEXT · WORKERS · D1 · R2 · RESEND
1 · Set the design inputs
2 · Stopping sight distance
- Reaction distancedᵣ = 1.47 × V × t
- Braking distance
- Design valueSSD = dᵣ + dʙ, rounded up to next 5 ft
roadway.tools
OWN PRODUCT
Two geometry solvers on Astro with Preact islands, every result rendering its equations, substitutions and assumptions cited to the manual section each came from. The calculator to the left runs the real formula. Drag any input.
- Live & cited
- Every step shows the equation, the numbers substituted in, and the exact TxDOT table it comes from.
- Measured daily
- A launchd job snapshots Search Console, SERP and first-party telemetry each morning; changes gate on evidence and default to no.
ASTRO · WORKERS · D1 · LAUNCHD
1 · Set your priorities
Bridgeworks
UBC CAPSTONE · TSOLUM RIVER BRIDGE
A weighted decision matrix normalises eight priority sliders to 100% and rescores arch against suspension against cable-stay live, so every stakeholder sees which concept wins on their own weighting. Drag the sliders; the real scores are wired in.
- Live rescoring
- Move a slider, the weights renormalize to 100% and the winner recomputes immediately.
- STL viewer
- The design geometry also loads in the browser as an STL (pivot, pan, zoom) with no CAD seat.
PLOTLY · STL VIEWER · WEIGHTED MATRIX
Clara Delattre
CERAMICIST · MINNEAPOLIS
Every pot stands at true relative scale. Each frame is measured once, the pot's top and bottom stored as fractions of its height, and the build normalises across the whole body of work rather than per shelf, so a cup stays a fifth of the tallest bottle on a different row.
- Measured once
- Each pot's top and bottom stored as fractions of its own frame height; the shelf you see is drawn from those real numbers.
- Whole-body scale
- Normalised across every piece she's made, not per shelf. Her site opens dark and ramps to the paper the pots stand on.
CLOUDFLARE WORKERS · PYTHON MEDIA PIPELINE
Featured
Work
Film
Video Feature
Sports
Highlight Cut
Sports
Social Reel
Brand
Brand Film
Brand
Advertising
Edmund Zhang
CONTENT PRODUCER & SPORTS VIDEOGRAPHER
The same engine as the Cardema site, retuned for a videographer whose showreel has to lead. Hover a tile and a muted preview plays; click it and one lightbox path handles self-hosted clips and YouTube alike. Filters respect the active category.
- Fluid type
- Seven clamp() ramps across the whole scale, no breakpoint jumps.
- One lightbox path
- Self-hosted clips and YouTube embeds share the same player logic.
CSS GRID · FLUID TYPE · OBSERVER




Archive
DK Bradford
ARCHIVE
Eleven scenes whose transitions are taken from the photographs rather than a library: horizon sweeps, sky bleeds, a court wipe, grain cuts, a drain to grey. Desktop and mobile are two genuinely different edits of one archive, all off one scroll-progress custom property published by a single shared rAF loop.
- Scene transitions
- Each cut is taken from a frame: a real horizon, a painted line, never a stock fade.
- Two edits
- Desktop and mobile are different cuts of the same archive; the ground colour is sampled from the sky in shot.
NEXT · SCROLL-DRIVEN