feat: Alexander Whitestone landing page + the-matrix dist at /tower

- Root / serves branded landing page (falling amber digit rain, enter button) - /tower serves pre-built the-matrix frontend (Three.js Workshop world) - config.js patched: WS URL auto-detects from window.location.host - No manual ?ws= param needed — works on any domain
2026-03-19 07:12:26 +00:00
parent cbe3ed9e46
commit 9de2396457
13 changed files with 8175 additions and 1 deletions
--- a/artifacts/api-server/src/app.ts
+++ b/artifacts/api-server/src/app.ts
@@ -58,7 +58,117 @@ const towerDist = path.join(__dirname, "..", "..", "..", "the-matrix", "dist");
 app.use("/tower", express.static(towerDist));
 app.get("/tower/*splat", (_req, res) => res.sendFile(path.join(towerDist, "index.html")));

-app.get("/", (_req, res) => res.redirect("/tower"));
+app.get("/", (_req, res) => {
+  res.setHeader("Content-Type", "text/html");
+  res.send(`<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>Alexander Whitestone</title>
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  html, body {
+    height: 100%;
+    background: #050508;
+    color: #e8e8f0;
+    font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+  canvas {
+    position: fixed;
+    inset: 0;
+    z-index: 0;
+    opacity: 0.18;
+  }
+  main {
+    position: relative;
+    z-index: 1;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 40px;
+  }
+  h1 {
+    font-family: system-ui, sans-serif;
+    font-size: clamp(1.4rem, 4vw, 2.4rem);
+    font-weight: 300;
+    letter-spacing: 0.25em;
+    text-transform: uppercase;
+    color: #c8c8d8;
+  }
+  h1 em {
+    font-style: normal;
+    color: #f7931a;
+  }
+  p {
+    color: #44445a;
+    font-size: 0.78rem;
+    letter-spacing: 0.15em;
+    max-width: 320px;
+    line-height: 1.8;
+  }
+  a.enter {
+    display: inline-block;
+    padding: 14px 48px;
+    border: 1px solid #2a2a3a;
+    border-radius: 4px;
+    color: #6b6b80;
+    font-size: 0.72rem;
+    letter-spacing: 0.3em;
+    text-transform: uppercase;
+    text-decoration: none;
+    transition: border-color 0.3s, color 0.3s;
+    cursor: pointer;
+  }
+  a.enter:hover {
+    border-color: #f7931a44;
+    color: #f7931a;
+  }
+</style>
+</head>
+<body>
+<canvas id="c"></canvas>
+<main>
+  <h1>Alexander <em>Whitestone</em></h1>
+  <p>AI infrastructure &amp; Lightning-native agents.</p>
+  <a class="enter" href="/tower">enter</a>
+</main>
+<script>
+  // Subtle falling-digit rain behind the landing page
+  const canvas = document.getElementById('c');
+  const ctx = canvas.getContext('2d');
+  let cols, drops;
+  function resize() {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    cols = Math.floor(canvas.width / 18);
+    drops = Array.from({ length: cols }, () => Math.random() * -80 | 0);
+  }
+  resize();
+  window.addEventListener('resize', resize);
+  setInterval(() => {
+    ctx.fillStyle = 'rgba(5,5,8,0.15)';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = '#f7931a';
+    ctx.font = '13px monospace';
+    drops.forEach((y, i) => {
+      const ch = Math.random() > 0.5
+        ? String.fromCharCode(0x30A0 + Math.random() * 96 | 0)
+        : (Math.random() * 10 | 0).toString();
+      ctx.fillText(ch, i * 18, y * 18);
+      if (y * 18 > canvas.height && Math.random() > 0.97) drops[i] = 0;
+      else drops[i]++;
+    });
+  }, 60);
+</script>
+</body>
+</html>`);
+});
 app.get("/api", (_req, res) => res.redirect("/api/ui"));

 export default app;