add the exploded cluster as a project with a live link to learn.bztmon.com

2026-08-18 09:40:58 +10:00
parent 51d1ccb149
commit dd2207bfa6
1 changed files with 73 additions and 0 deletions
@@ -0,0 +1,73 @@
 ---
 title: "The Exploded Cluster"
 outcome: "A scroll-driven teaching site that takes container platforms apart one machine at a time."
 summary: "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."
 role: "Author / Engineer"
 period: "2026"
 stack: ["Astro-free static build", "GSAP ScrollTrigger", "Strict CSP", "Cloudflare Tunnel", "Argo CD", "zot mirror"]
 featured: true
 order: 25
 links:
  - label: "learn.bztmon.com"
    href: "https://learn.bztmon.com"
 ---
 ## 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-motion` the 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.