From dd2207bfa6b18be1f1e9c4f516611f4d970074f1 Mon Sep 17 00:00:00 2001
From: Jonathon Wright <jonny.wright225@gmail.com>
Date: Tue, 18 Aug 2026 09:40:58 +1000
Subject: [PATCH] add the exploded cluster as a project with a live link to
 learn.bztmon.com

---
 src/content/projects/exploded-cluster.md | 73 ++++++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 src/content/projects/exploded-cluster.md

diff --git a/src/content/projects/exploded-cluster.md b/src/content/projects/exploded-cluster.md
new file mode 100644
index 0000000..e2f6a56
--- /dev/null
+++ b/src/content/projects/exploded-cluster.md
@@ -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.