Migrate Vite SPA to Hugo (hugo-coder, dark) with WebGPU background

- Hugo static site at root: config, content (home/about/resume/blog + 5 projects),
  data/resume.yaml, custom layouts (gpu background, resume renderer, projects list),
  dark theme with canvas behind content
- gpu-bg/: extracted WebGPU/WebGL2 spiral engine as a Vite sub-package; slim bootstrap
  drops router/overlay/text renderer; fixed uniforms (scene0/dim0); self-contained engine.js
- archive/: retired Vite SPA preserved (router, overlay, data, engine/text orphaned)
- 3-stage Dockerfile (node -> hugo extended/dart-sass -> nginx), static nginx config
- DEPLOYMENT.md handover + README rewrite; pre-hugo rollback tag

assets/css/custom.css

@@ -0,0 +1,93 @@
+/* ---- WebGPU background layer ---- */
+/* The canvas is rendered INSIDE main.wrapper (home partial), so it is a sibling
+   of the nav and sections. As a positioned (fixed) element it stacks ABOVE the
+   static-positioned nav/content. Give it z-index:-1 so it paints behind all
+   in-flow content on the page. */
+#gpu {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: -1;
+  overflow: hidden;
+}
+
+/* The nav has no opaque background in vanilla hugo-coder, so the shader
+   shows straight through behind the links. Same dark-glass as the home panel.
+   (This is a backdrop for readability, not a re-stack — the nav now paints
+   above the z-index:-1 canvas because it is normal in-flow content.) */
+.navigation {
+  background: rgba(33, 33, 33, 0.82);
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+/* ---- Homepage: dark glass panels for readability over the background ---- */
+.centered .about {
+  background: rgba(33, 33, 33, 0.72);
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 1.1rem;
+  padding: 2.4rem 2.8rem;
+  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.35);
+}
+
+/* Light headings stay readable over the bright spiral center */
+.centered .about h1,
+.centered .about h2 {
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
+}
+
+/* ---- Resume cards & pills ---- */
+.resume-card {
+  background: rgba(33, 33, 33, 0.6);
+  -webkit-backdrop-filter: blur(5px);
+  backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 0.8rem;
+  padding: 1.2rem 1.4rem;
+  margin: 1rem 0;
+}
+
+.resume-meta {
+  color: #9e9e9e;
+  font-size: 0.85em;
+}
+
+.resume-period {
+  color: #9e9e9e;
+  font-size: 0.85em;
+  font-weight: 500;
+  margin: 0 0 0.5rem;
+}
+
+.pill {
+  display: inline-block;
+  background: rgba(33, 33, 33, 0.72);
+  color: #dadada;
+  border: 1px solid rgba(66, 66, 66, 0.9);
+  border-radius: 999px;
+  padding: 0.15rem 0.7rem;
+  margin: 0.2rem 0.25rem;
+  font-size: 0.8em;
+  white-space: nowrap;
+}
+
+/* ---- Projects cards ---- */
+.project-card {
+  background: rgba(33, 33, 33, 0.6);
+  -webkit-backdrop-filter: blur(5px);
+  backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 0.8rem;
+  padding: 1.2rem 1.4rem;
+  margin: 1rem 0;
+}
+
+.project-period {
+  color: #9e9e9e;
+  font-size: 0.85em;
+  font-weight: 500;
+}