feat: calvana application microsite + ship-log extension

- Static site: /manifesto, /live, /hire pages - Ship-log Pi extension: calvana_ship, calvana_oops, calvana_deploy tools - Docker + nginx deploy to calvana.quikcue.com - Terminal-ish dark aesthetic, mobile responsive - Auto-updating /live page from extension state
2026-03-02 18:03:22 +08:00
commit 2fb612b1df
73 changed files with 10938 additions and 0 deletions
--- a/calvana-build/Dockerfile
+++ b/calvana-build/Dockerfile
@@ -0,0 +1,4 @@
+FROM nginx:alpine
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY html/ /usr/share/nginx/html/
+EXPOSE 80
--- a/calvana-build/html/404.html
+++ b/calvana-build/html/404.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>404 — Calvana</title>
+  <link rel="stylesheet" href="/css/style.css">
+</head>
+<body>
+  <nav>
+    <div class="nav-inner">
+      <a href="/" class="logo">calvana<span>.exe</span></a>
+      <div class="nav-links">
+        <a href="/manifesto">/manifesto</a>
+        <a href="/live">/live</a>
+        <a href="/hire">/hire</a>
+      </div>
+    </div>
+  </nav>
+  <main class="page" style="text-align:center;padding-top:6rem">
+    <h1 class="hero-title">404</h1>
+    <p class="subtitle" style="margin:1rem auto">This page doesn't exist yet. But give me 10 minutes.</p>
+    <a href="/manifesto" class="btn btn-outline" style="margin-top:1.5rem">← Back to manifesto</a>
+  </main>
+</body>
+</html>
--- a/calvana-build/html/css/style.css
+++ b/calvana-build/html/css/style.css
@@ -0,0 +1,104 @@
+:root {
+  --bg: #0a0a0a;
+  --bg-card: #111;
+  --bg-card-hover: #161616;
+  --text: #e5e5e5;
+  --text-muted: #666;
+  --text-dim: #444;
+  --accent: #00ff9f;
+  --accent-dim: #00cc7f;
+  --cta: #ff6b35;
+  --cta-hover: #ff8c5a;
+  --yellow: #ffd93d;
+  --red: #ff4757;
+  --border: #1a1a1a;
+  --border-light: #222;
+  --font-mono: 'SF Mono','Fira Code','JetBrains Mono','Cascadia Code',monospace;
+  --font-sans: -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
+  --max-w: 780px;
+}
+*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
+html{font-size:16px;scroll-behavior:smooth}
+body{background:var(--bg);color:var(--text);font-family:var(--font-sans);line-height:1.65;min-height:100vh;-webkit-font-smoothing:antialiased}
+
+nav{position:sticky;top:0;z-index:100;background:rgba(10,10,10,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:.75rem 1.5rem}
+nav .nav-inner{max-width:var(--max-w);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem}
+nav .logo{font-family:var(--font-mono);font-size:.95rem;font-weight:700;color:var(--accent);text-decoration:none;letter-spacing:-.02em}
+nav .logo span{color:var(--text-muted);font-weight:400}
+nav .nav-links{display:flex;gap:.25rem;list-style:none}
+nav .nav-links a{font-family:var(--font-mono);font-size:.8rem;color:var(--text-muted);text-decoration:none;padding:.35rem .65rem;border-radius:6px;transition:all .15s ease}
+nav .nav-links a:hover,nav .nav-links a.active{color:var(--text);background:var(--bg-card)}
+
+.page{max-width:var(--max-w);margin:0 auto;padding:3.5rem 1.5rem 5rem}
+
+.hero-title{font-family:var(--font-mono);font-size:clamp(2rem,6vw,3.2rem);font-weight:800;line-height:1.15;letter-spacing:-.03em;color:var(--text);margin-bottom:1rem}
+.hero-title .accent{color:var(--accent)}
+h2{font-family:var(--font-mono);font-size:1.35rem;font-weight:700;color:var(--text);margin-bottom:1rem;letter-spacing:-.02em}
+h3{font-family:var(--font-mono);font-size:1rem;font-weight:600;color:var(--text);margin-bottom:.5rem}
+.subtitle{font-size:1.05rem;color:var(--text-muted);line-height:1.7;max-width:600px}
+.section{margin-top:3.5rem}
+
+.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
+.btn{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.85rem;font-weight:600;padding:.65rem 1.25rem;border-radius:8px;text-decoration:none;transition:all .15s ease;cursor:pointer;border:none}
+.btn-primary{background:var(--accent);color:#0a0a0a}
+.btn-primary:hover{background:#33ffb3;transform:translateY(-1px)}
+.btn-cta{background:var(--cta);color:#fff}
+.btn-cta:hover{background:var(--cta-hover);transform:translateY(-1px)}
+.btn-outline{background:transparent;color:var(--text-muted);border:1px solid var(--border-light)}
+.btn-outline:hover{color:var(--text);border-color:var(--text-muted);transform:translateY(-1px)}
+
+.card-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem}
+.card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:1.25rem;transition:border-color .15s ease}
+.card:hover{border-color:var(--border-light)}
+.card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:.6rem}
+.card-title{font-family:var(--font-mono);font-size:.9rem;font-weight:600;line-height:1.4}
+.card-meta{font-size:.78rem;color:var(--text-muted);margin-bottom:.5rem}
+.card-links{display:flex;gap:.75rem;margin-top:.6rem}
+.card-links a{font-family:var(--font-mono);font-size:.75rem;color:var(--accent-dim);text-decoration:none}
+.card-links a:hover{color:var(--accent);text-decoration:underline}
+
+.badge{font-family:var(--font-mono);font-size:.7rem;font-weight:600;padding:.2rem .55rem;border-radius:99px;white-space:nowrap;flex-shrink:0}
+.badge-planned{color:var(--text-muted);border:1px solid var(--border-light)}
+.badge-shipping{color:#0a0a0a;background:var(--yellow)}
+.badge-shipped{color:#0a0a0a;background:var(--accent)}
+
+.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1rem}
+.col{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:1.25rem}
+.col h3{margin-bottom:.75rem}
+.col ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}
+.col ul li{font-size:.88rem;color:var(--text-muted);padding-left:1.25rem;position:relative}
+.col ul li::before{content:'';position:absolute;left:0;top:.55rem;width:6px;height:6px;border-radius:50%}
+.col-broke ul li::before{background:var(--cta)}
+.col-kept ul li::before{background:var(--accent)}
+
+.oops-log{margin-top:1rem;display:flex;flex-direction:column;gap:.6rem}
+.oops-entry{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.85rem;color:var(--text-muted);padding:.75rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;border-left:3px solid var(--red)}
+.oops-entry a{font-family:var(--font-mono);font-size:.75rem;color:var(--accent-dim);text-decoration:none;white-space:nowrap}
+.oops-entry a:hover{color:var(--accent)}
+
+.manifesto-para{font-size:1.05rem;color:var(--text-muted);line-height:1.75;margin-top:3.5rem;max-width:620px;border-left:3px solid var(--accent);padding-left:1rem}
+
+.hire-ctas{display:flex;flex-direction:column;gap:1rem;margin-top:2rem;max-width:480px}
+.hire-ctas .btn{justify-content:center;padding:1rem 1.5rem;font-size:.9rem}
+.hire-note{margin-top:3.5rem;font-size:.9rem;color:var(--text-muted);line-height:1.7}
+.hire-referral{margin-top:2rem;font-size:.85rem;color:var(--text-dim);font-style:italic}
+
+footer{margin-top:5rem;padding-top:2rem;border-top:1px solid var(--border)}
+footer p{font-family:var(--font-mono);font-size:.78rem;color:var(--text-dim)}
+.footer-tagline{color:var(--text-muted)!important;font-style:italic}
+.metric{font-family:var(--font-mono);font-size:.78rem;color:var(--text-dim)}
+
+@media(max-width:640px){
+  .page{padding:2rem 1rem 3rem}
+  .hero-title{font-size:clamp(1.7rem,7vw,2.4rem)}
+  .btn-row{flex-direction:column}.btn-row .btn{width:100%;justify-content:center}
+  .two-col{grid-template-columns:1fr}
+  nav .nav-links a{font-size:.75rem;padding:.3rem .5rem}
+  .card-header{flex-direction:column;gap:.4rem}
+  .oops-entry{flex-direction:column;align-items:flex-start;gap:.4rem}
+  .hire-ctas{max-width:100%}
+}
+@media(max-width:380px){
+  nav .logo span{display:none}
+  nav .nav-links{gap:0}
+}
--- a/calvana-build/html/hire/index.html
+++ b/calvana-build/html/hire/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Calvana — Hire</title>
+  <meta name="description" content="If you want velocity with control — let's talk.">
+  <meta property="og:title" content="Calvana — Hire">
+  <meta property="og:description" content="If you want velocity with control — let's talk.">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://calvana.quikcue.com/hire">
+  <meta name="twitter:card" content="summary">
+  <link rel="canonical" href="https://calvana.quikcue.com/hire">
+  <link rel="stylesheet" href="/css/style.css">
+</head>
+<body>
+  <nav>
+    <div class="nav-inner">
+      <a href="/" class="logo">calvana<span>.exe</span></a>
+      <div class="nav-links">
+        <a href="/manifesto">/manifesto</a>
+        <a href="/live">/live</a>
+        <a href="/hire" class="active">/hire</a>
+      </div>
+    </div>
+  </nav>
+  <main class="page">
+    <h1 class="hero-title">If you're reading this,<br>you <span class="accent">already know.</span></h1>
+    <div class="hire-ctas">
+      <a href="mailto:omair@quikcue.com?subject=Calvana%20-%20Repo%20%2B%20Metric" class="btn btn-cta">Give me a repo + one metric →</a>
+      <a href="mailto:omair@quikcue.com?subject=Calvana%20-%207-day%20proof" class="btn btn-primary">Give me 7 days. I'll prove it. →</a>
+    </div>
+    <p class="hire-note">
+      If you want safe hands, hire safe people.<br>
+      If you want velocity with control — let's talk.
+    </p>
+    <p class="hire-referral">PS — Umar pointed me here. If this turns into a hire, I want him to get paid.</p>
+    <footer>
+      <p class="footer-tagline">I break rules. Not production.</p>
+    </footer>
+  </main>
+</body>
+</html>
--- a/calvana-build/html/index.html
+++ b/calvana-build/html/index.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="utf-8"><meta http-equiv="refresh" content="0;url=/manifesto"><title>Calvana</title></head>
+<body><p>Redirecting to <a href="/manifesto">/manifesto</a>…</p></body>
+</html>
--- a/calvana-build/html/live/index.html
+++ b/calvana-build/html/live/index.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Calvana — Live Shipping Log</title>
+  <meta name="description" content="Intentional chaos. Full receipts. Watch the build happen in real time.">
+  <meta property="og:title" content="Calvana — Live Shipping Log">
+  <meta property="og:description" content="Intentional chaos. Full receipts.">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://calvana.quikcue.com/live">
+  <meta name="twitter:card" content="summary">
+  <link rel="canonical" href="https://calvana.quikcue.com/live">
+  <link rel="stylesheet" href="/css/style.css">
+</head>
+<body>
+  <nav>
+    <div class="nav-inner">
+      <a href="/" class="logo">calvana<span>.exe</span></a>
+      <div class="nav-links">
+        <a href="/manifesto">/manifesto</a>
+        <a href="/live" class="active">/live</a>
+        <a href="/hire">/hire</a>
+      </div>
+    </div>
+  </nav>
+  <main class="page">
+    <h1 class="hero-title">Live Shipping Log</h1>
+    <p class="subtitle">Intentional chaos. Full receipts.</p>
+
+    <section class="section">
+      <h2>Today's Ships</h2>
+      <div class="card-grid">
+        <div class="card">
+          <div class="card-header">
+            <span class="card-title">Fix post-donation consent funnel (Email + WhatsApp)</span>
+            <span class="badge badge-planned">Planned</span>
+          </div>
+          <p class="card-meta">⏱ —</p>
+          <p class="metric">What moved: —</p>
+          <div class="card-links"><a href="#pr">PR</a><a href="#deploy">Deploy</a><a href="#loomclip">Loom clip</a></div>
+        </div>
+        <div class="card">
+          <div class="card-header">
+            <span class="card-title">Deploy pledge-now-pay-later micro-saas</span>
+            <span class="badge badge-planned">Planned</span>
+          </div>
+          <p class="card-meta">⏱ —</p>
+          <p class="metric">What moved: —</p>
+          <div class="card-links"><a href="#pr">PR</a><a href="#deploy">Deploy</a><a href="#loomclip">Loom clip</a></div>
+        </div>
+        <div class="card">
+          <div class="card-header">
+            <span class="card-title">JustVitamin post-migration AI automation demos</span>
+            <span class="badge badge-shipping">Shipping</span>
+          </div>
+          <p class="card-meta">⏱ —</p>
+          <p class="metric">What moved: —</p>
+          <div class="card-links"><a href="#pr">PR</a><a href="#deploy">Deploy</a><a href="#loomclip">Loom clip</a></div>
+        </div>
+        <div class="card">
+          <div class="card-header">
+            <span class="card-title">This Calvana application — shipped ✓</span>
+            <span class="badge badge-shipped">Shipped</span>
+          </div>
+          <p class="card-meta">⏱ 2026-03-02 14:00 GMT+8</p>
+          <p class="metric">What moved: 0 → live in one session</p>
+          <div class="card-links"><a href="#pr">PR</a><a href="#deploy">Deploy</a><a href="#loomclip">Loom clip</a></div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section">
+      <div class="two-col">
+        <div class="col col-broke">
+          <h3>Rules I broke today</h3>
+          <ul>
+            <li>Didn't ask permission</li>
+            <li>Didn't wait for alignment</li>
+            <li>Didn't write a PRD</li>
+            <li>Didn't submit a normal application</li>
+          </ul>
+        </div>
+        <div class="col col-kept">
+          <h3>Rules I refuse to break</h3>
+          <ul>
+            <li>No silent failures</li>
+            <li>No unbounded AI spend</li>
+            <li>No hallucinations shipped to users</li>
+            <li>No deploy without rollback path</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <section class="section">
+      <h2>Oops Log</h2>
+      <p class="subtitle" style="margin-bottom:1rem">If it's not here, I haven't broken it yet.</p>
+      <div class="oops-log">
+        <div class="oops-entry">
+          <span>Traefik label typo → 404 on first deploy. Fixed in 3 min.</span>
+          <a href="#commit">→ commit</a>
+        </div>
+        <div class="oops-entry">
+          <span>CSS grid overflow on mobile. Caught in preview, fixed before push.</span>
+          <a href="#commit">→ commit</a>
+        </div>
+        <div class="oops-entry">
+          <span>Forgot meta viewport tag. Pinch-zoom chaos. Fixed in 90 seconds.</span>
+          <a href="#commit">→ commit</a>
+        </div>
+      </div>
+    </section>
+
+    <footer>
+      <p class="footer-tagline">I break rules. Not production.</p>
+      <p style="margin-top:.4rem">Last updated: 2026-03-02T14:00:00+08:00</p>
+    </footer>
+  </main>
+</body>
+</html>
--- a/calvana-build/html/manifesto/index.html
+++ b/calvana-build/html/manifesto/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Calvana — I don't apply. I deploy.</title>
+  <meta name="description" content="Most applications prove the past. This one proves the next 7 days. Built live. Shipped now.">
+  <meta property="og:title" content="Calvana — I don't apply. I deploy.">
+  <meta property="og:description" content="You're hiring engineers. I'm showing you what changes when you hire an engine.">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://calvana.quikcue.com/manifesto">
+  <meta name="twitter:card" content="summary">
+  <link rel="canonical" href="https://calvana.quikcue.com/manifesto">
+  <link rel="stylesheet" href="/css/style.css">
+</head>
+<body>
+  <nav>
+    <div class="nav-inner">
+      <a href="/" class="logo">calvana<span>.exe</span></a>
+      <div class="nav-links">
+        <a href="/manifesto" class="active">/manifesto</a>
+        <a href="/live">/live</a>
+        <a href="/hire">/hire</a>
+      </div>
+    </div>
+  </nav>
+  <main class="page">
+    <h1 class="hero-title">I don't apply.<br><span class="accent">I deploy.</span></h1>
+    <p class="subtitle">
+      You're hiring engineers. I'm showing you what changes when you hire an engine.<br>
+      This application is a product. Built for you. Right now.
+    </p>
+    <div class="btn-row">
+      <a href="#loom" class="btn btn-primary" id="loom">▶ Watch the build (Loom)</a>
+      <a href="/live" class="btn btn-outline">◉ Open the live shipping log</a>
+      <a href="#repo" class="btn btn-outline" id="repo">↗ Open the repo</a>
+    </div>
+    <p class="manifesto-para">
+      Most applications prove the past. I'm proving the next 7 days.<br>
+      Build → test → ship → observe → iterate… at speed, without breaking reality.
+    </p>
+    <footer>
+      <p class="footer-tagline">I break rules. Not production.</p>
+    </footer>
+  </main>
+</body>
+</html>
--- a/calvana-build/nginx.conf
+++ b/calvana-build/nginx.conf
@@ -0,0 +1,28 @@
+server {
+    listen 80;
+    server_name calvana.quikcue.com;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Fix: behind reverse proxy, use relative redirects
+    absolute_redirect off;
+
+    location / {
+        try_files $uri $uri/ =404;
+    }
+
+    location /css/ {
+        expires 1h;
+        add_header Cache-Control "public, immutable";
+    }
+
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+
+    gzip on;
+    gzip_types text/html text/css application/javascript text/plain;
+    gzip_min_length 256;
+
+    error_page 404 /404.html;
+}