06 · Observability / write-up
Making of mumeyong.dev
Two acts, one DOM. A walkable world on top; an ordinary, readable page underneath that never depends on it.
The idea
Most portfolios are a list. This one is a walk first: six small worlds — Root, Platform, Security, Cloud, Automation and Observability — laid end to end along a single road. At the end, the world comes apart and settles into the Living Atlas, a normal long-form page with every piece of information from the walk.
The concept is inspired by the walkable portfolio at ishikawa.co. Everything here — code, words, character, scenery and sound — is original to this site.
Content first
The Living Atlas is rendered to static HTML at build time. Headings, links and lists are real elements in the document from the first byte, so search engines, screen readers and people without JavaScript read the whole site.
Act I is a progressive enhancement. It only starts when scripts run, the canvas is available and the visitor has not asked for reduced motion. With
prefers-reduced-motion: reduce, the walk never starts and the atlas opens directly. The walk is always one click from being skipped.
The walk
The traveler accelerates while a key is held and eases to a stop with frame-rate-independent friction. A small jump uses real gravity with coyote time and input buffering; everything else follows the ground.
3 scripted passages connect the worlds — a drop into the network, a launch into the sky and a fall back to warm ground. Each runs in four beats: anticipation, a burst where every particle changes shape to the next world's language, an eased path, and a short landing. Walking back plays them in reverse.
6 one-shot formations mark the worlds: a network topology, a shield, stacked containers, a gear, an open book and, finally, the site's name. The first world has its own ritual instead — an old terminal that boots and prints a profile — and a rain that fills a small pond as you walk.
The journey is complete when all six worlds are collected and five archives opened; that unlocks a constellation keepsake. And the road does not quite end at the atlas: linger after the finale, and the walk has a second life.
The budget
| Rendering | Canvas 2D for dots and particles; DOM for signs, text and the traveler |
|---|---|
| World | 16,700 units wide, 900 units tall, scaled to the viewport height |
| Scenery | Procedural, seeded point clouds bucketed in 640-unit slices |
| Repaint | World canvases at 30 fps, CSS-translated in between; input and camera at display rate |
| Particles | Pooled, capped at 1,400 (scaled by quality), at most 24 new per frame |
| Quality | Frame-cost governor: steps down in under a second, recovers only while idle |
| Resolution | Device pixel ratio capped at 1× and at ~3.2 megapixels per canvas |
| Audio | WebAudio oscillators only — no files — and off until you turn it on |
| Weight | No UI framework; the whole walk is one small ES module bundle |
Access
- Keyboard:
A Dor arrows to walk,Wto jump,Spaceto interact,Enterto open,Escto close or fast-forward. - Touch: hold-to-walk buttons, a jump button and a context-aware action button.
- A single polite live region narrates worlds, hints and transitions.
- The animation loop pauses whenever the tab is hidden.
- Nothing is stored except two local preferences — see privacy.