jwright
c5b1044d7a
Adds mirror-registry as a featured project (order 26, beside The Exploded Cluster) covering the zot deployment, the bootstrap and auth circular dependencies, and the retention/revalidation behaviours that corrected the first published write-up. Adds the cover: field to exploded-cluster (it had none, so the card rendered imageless) and stages public/covers/image.md with the generation prompts and processing steps for both covers.
4.0 KiB
title, outcome, summary, role, period, stack, featured, order, cover, links
| title | outcome | summary | role | period | stack | featured | order | cover | links | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| The Exploded Cluster | A scroll-driven teaching site that takes container platforms apart one machine at a time. | A single-page course on how Kubernetes and OpenShift delivery actually works - each subject drawn as one exploded illustration, sliced into its real components and wired to the scroll, then shipped through the same GitOps and CSP discipline as the rest of the estate. | Author / Engineer | 2026 |
|
true | 25 | exploded-cluster |
|
Problem
Container platforms are usually taught as bullet points. A reader finishes knowing the nouns - kubelet, CRI, Service, chart - without a mental model of how the parts sit together or which one owns which job. I wanted the opposite: a page where the machine comes apart in front of you, and the words explain the piece you are looking at.
Constraints
- One page, no framework. The site is a static artefact - no React, no client router. The animation engine and the content build had to be hand-rolled and small enough to reason about.
- Same security posture as everything else.
script-src 'self', no inline JavaScript, no third-party origins - which rules out most off-the-shelf scroll libraries and every CDN. - The illustrations are raster. Each scene is a single generated image, not an SVG scene graph, so "exploding" it means slicing one bitmap into polygons rather than moving vectors.
Design
Each subject is one image, cut into per-part polygons with clip-path. Every slice is an
absolutely-positioned layer showing the same bitmap through a different window, so the scene
reassembles pixel-exact. Scroll position drives a pinned timeline that translates the slices
between a collapsed stack and the exploded layout.
The parts also carry hidden edges where they overlap in the source art, which constrains the motion: rotate or fan a slice on a scene where parts overlap and you expose the concealed cut. Scenes whose parts are already separated take a richer signature - a tumble, a bowed arc, a spiral orbit - and the rest keep a straight translate. The difference reads as deliberate rather than repetitive.
The legend beside each scene is wired to the parts. As the scroll advances, the component being described holds full strength while the others sit back, and hovering or keyboard-focusing a row pins the link to that part - so what you are reading and what is lit are never different things.
Security and reliability decisions
- No inline script. The engine is split into a fingerprinted external bundle at build time,
and a preflight gate fails the build if an inline
<script>survives. - Every asset content-fingerprinted. An earlier revision served a fresh HTML file against a cached older script and the animations silently died for anyone with a warm cache. Hashing every asset makes that pairing impossible.
- Digest-pinned delivery. The image is built once, pushed through the local zot mirror, and referenced by digest in the deployment repo; Argo CD reconciles it. Exposure is a Cloudflare Tunnel, so the origin has no inbound WAN port-forward.
- Reduced motion is a branch, not a bolt-on. Under
prefers-reduced-motionthe scroll scenes render their end state immediately and the parallax backdrop is disabled outright.
Outcome
The course runs from what an image is through to how a change reaches a fleet, with the architecture moving while the words explain it. Layout and motion are verified with headless browser passes rather than by eye - scroll samples across desktop and mobile widths checking that no pinned scene overlaps the prose beneath it.
Future improvements
A storage chapter - PersistentVolume, claim and StorageClass are the obvious gap in the current arc - and a pass that lets a reader jump straight to a single machine rather than scrolling the whole menu.