momme.world: terminal-style personal site, nginx + ConfigMap deploy

Static site (no build step) with a browser terminal, plain-text output for curl, and plain k8s manifests under k8s/ for ArgoCD.
2026-10-13 20:34:54 +02:00
commit 9f923b4f35
12 changed files with 740 additions and 0 deletions
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+<rect width="32" height="32" rx="6" fill="#0b0e14"/>
+<rect x="5" y="9" width="22" height="15" rx="2" fill="none" stroke="#7ee787" stroke-width="2"/>
+<path d="M9 15l4 3-4 3M16 21h6" stroke="#7ee787" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,39 @@
+
+  __  __                         __        .
+ |  \/  | ___  _ __ ___  _ __    \ \   __ | | ___   ___
+ | |\/| |/ _ \| '_ ` _ \| '_ \    \ \ / _` |/ _ \ / _ \
+ | |  | | (_) | | | | | | | | |    \ V  (_| | (_) |  __/
+ |_|  |_|\___/|_| |_| |_|_| |_|     \_/\__,_|\___/ \___|
+
+Hey :)
+I'm Momme. I build and break infrastructure, and I keep the pieces in
+Kubernetes so they can be put back together again.
+
+whoami
+------
+Momme Jürgensen — infrastructure and developer platforms.
+I like work that ends up as a short command instead of a long document.
+Currently at codeanker.
+
+stack
+-----
+kubernetes      self-hosted cluster, GitOps with ArgoCD, Terraform for the rest
+nix             reproducible configs for servers and laptops
+observability   Prometheus, Loki, Grafana — dashboards I actually read
+fpv drones      built, flown, crashed, rebuilt
+
+projects
+--------
+nix-ha-kubernetes-cluster   high-availability Kubernetes on NixOS, built to learn on
+brahmsee.digital            event management platform for DLRG Schleswig-Holstein
+silvatica-web               website of the Silvatica festival, Schwäbisch Hall
+momme.world                 this site — no build step, GitOps all the way down
+
+contact
+-------
+mail      momme@juergensen.me
+matrix    @momme:chaos.jetzt
+github    https://github.com/supermomme
+mastodon  https://cybre.town/@momme
+
+The interactive version of this page is at https://momme.world/
@@ -0,0 +1,91 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>momme.world — Momme Jürgensen</title>
+<meta name="description" content="Hi, I'm Momme. I build and break infrastructure: Kubernetes, NixOS, self-hosting, and FPV drones. Say hello on the terminal.">
+<meta name="color-scheme" content="dark">
+<meta property="og:type" content="profile">
+<meta property="og:title" content="momme.world">
+<meta property="og:description" content="Hi, I'm Momme. I build and break infrastructure: Kubernetes, NixOS, self-hosting, and FPV drones.">
+<meta property="og:url" content="https://momme.world/">
+<link rel="canonical" href="https://momme.world/">
+<link rel="icon" href="/favicon.svg" type="image/svg+xml">
+<link rel="stylesheet" href="/style.css">
+<script>document.documentElement.classList.add("js")</script>
+</head>
+<body>
+<main>
+
+  <div class="term" id="term">
+    <div class="titlebar">
+      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <span class="title">momme@world: ~</span>
+    </div>
+
+    <div class="screen" id="screen" tabindex="-1">
+      <pre class="hello">
+  __  __                         __        .
+ |  \/  | ___  _ __ ___  _ __    \ \   __ | | ___   ___
+ | |\/| |/ _ \| '_ ` _ \| '_ \    \ \ / _` |/ _ \ / _ \
+ | |  | | (_) | | | | | | | | |    \ V  (_| | (_) |  __/
+ |_|  |_|\___/|_| |_| |_|_| |_|     \_/\__,_|\___/ \___|
+      </pre>
+
+      <div id="out"></div>
+
+      <form id="prompt" autocomplete="off">
+        <span class="ps1" aria-hidden="true">momme@world:~$</span>
+        <input id="cmd" aria-label="Run a command" placeholder="type a command — try `help`"
+               autocapitalize="off" autocorrect="off" spellcheck="false">
+        <span class="caret" aria-hidden="true"></span>
+      </form>
+    </div>
+  </div>
+
+  <nav class="chips" aria-label="Commands">
+    <button data-run="whoami">whoami</button>
+    <button data-run="projects">projects</button>
+    <button data-run="stack">stack</button>
+    <button data-run="social">social</button>
+    <button data-run="contact">contact</button>
+  </nav>
+
+  <p class="curl">
+    Terminal people: <code>curl momme.world</code>
+    &nbsp;·&nbsp; source: <a href="https://github.com/supermomme">github.com/supermomme</a>
+  </p>
+
+  <!-- Readable and copy-pasteable with JavaScript turned off. The terminal
+       above is the same information, delivered as a conversation. -->
+  <noscript>
+    <section class="facts">
+      <h2>whoami</h2>
+      <p>I'm <strong>Momme Jürgensen</strong>. I work on infrastructure and developer
+      platforms — the kind of work where the best interface is a short command.
+      Currently at <a href="https://codeanker.de">codeanker</a>.</p>
+
+      <h2>stack</h2>
+      <ul>
+        <li><strong>Kubernetes</strong> — self-hosted cluster, GitOps, the whole garden.</li>
+        <li><strong>NixOS</strong> — reproducible configs for servers and laptops.</li>
+        <li><strong>Observability</strong> — Prometheus, Loki, dashboards I actually read.</li>
+        <li><strong>FPV drones</strong> — built, flown, crashed, rebuilt.</li>
+      </ul>
+
+      <h2>contact</h2>
+      <ul>
+        <li>Mail: <a href="mailto:momme@juergensen.me">momme@juergensen.me</a></li>
+        <li>Matrix: <a href="https://matrix.to/#/@momme:chaos.jetzt">@momme:chaos.jetzt</a></li>
+        <li>Mastodon: <a href="https://cybre.town/@momme">@momme@cybre.town</a></li>
+        <li>GitHub: <a href="https://github.com/supermomme">supermomme</a></li>
+        <li>Instagram: <a href="https://instagram.com/supermommej">@supermommej</a></li>
+      </ul>
+    </section>
+  </noscript>
+
+</main>
+<script src="/site.js"></script>
+</body>
+</html>
@@ -0,0 +1,42 @@
+# Mounted at /etc/nginx/conf.d/default.conf — everything here is http context.
+
+# terminal people get the plain text version of the page
+map $http_user_agent $root_doc {
+    default                        /index.html;
+    "~*(curl|wget|httpie|lynx|w3m|nc/)"  /hello.txt;
+}
+
+server {
+    listen 8080;
+    server_name _;
+
+    root /var/www/html;
+    index index.html;
+    absolute_redirect off;
+
+    gzip on;
+    gzip_types text/css application/javascript text/plain image/svg+xml;
+    gzip_vary on;
+
+    # index.html is the app itself: never cache it, so a deploy is visible now
+    location = / {
+        try_files $root_doc =404;
+        add_header Cache-Control "no-store";
+    }
+
+    location = /index.html {
+        add_header Cache-Control "no-store";
+    }
+
+    location = /hello.txt {
+        add_header Cache-Control "no-store";
+    }
+
+    location ~* \.(css|js|svg)$ {
+        add_header Cache-Control "public, max-age=604800";
+    }
+
+    location / {
+        try_files $uri $uri/ =404;
+    }
+}
@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /
@@ -0,0 +1,244 @@
+// Content lives in COMMANDS only: every entry renders in the terminal, and the
+// names double as the `help` listing. A `label -> url` line becomes a real link.
+// Adding a section to this site means adding one object here.
+const COMMANDS = [
+  {
+    name: "hello",
+    help: "the welcome message",
+    body: `Hey :)
+I'm Momme. I build and break infrastructure, and I keep the pieces in
+Kubernetes so they can be put back together again.
+Type help to see what this box knows.`,
+  },
+  {
+    name: "whoami",
+    help: "who is typing",
+    body: `Momme Jürgensen — infrastructure and developer platforms.
+I like work that ends up as a short command instead of a long document.
+Currently at codeanker.`,
+  },
+  {
+    name: "projects",
+    help: "projects <name> — what I'm building",
+    body: `nix-ha-kubernetes-cluster   high-availability Kubernetes on NixOS, built to learn on
+brahmsee.digital            event management platform for DLRG Schleswig-Holstein
+silvatica-web               website of the Silvatica festival, Schwäbisch Hall
+momme.world                 this site — no build step, GitOps all the way down
+    more of them at: https://github.com/supermomme`,
+    detail: {
+      "nix-ha-kubernetes-cluster": `An HA Kubernetes cluster on NixOS, built to learn rather than to impress.
+Control plane in HA, Ceph for storage, GitOps for everything above it.
+This site runs on it. -> https://github.com/supermomme/nix-ha-kubernetes-cluster`,
+      "brahmsee.digital": `Event management platform for DLRG Schleswig-Holstein.
+Registrations and scheduling for a state water-rescue organisation, where the
+traffic arrives in waves of a few hundred people at once. -> https://brahmsee.digital`,
+      "silvatica-web": `Website of the Silvatica festival in Schwäbisch Hall.
+-> https://github.com/supermomme/silvatica-web`,
+      "momme.world": `This site. Plain files, a stock nginx image, four manifests, no build
+step. ArgoCD points at the repo, so a merged commit is a deployed site.`,
+    },
+  },
+  {
+    name: "stack",
+    help: "the tools I reach for",
+    body: `kubernetes      self-hosted cluster, GitOps with ArgoCD, Terraform for the rest
+nix             reproducible configs for servers and laptops
+observability   Prometheus, Loki, Grafana — dashboards I actually read
+fpv drones      built, flown, crashed, rebuilt`,
+  },
+  {
+    name: "social",
+    help: "where I hang out online",
+    body: `github    -> https://github.com/supermomme
+mastodon  -> https://cybre.town/@momme
+instagram -> https://instagram.com/supermommej`,
+  },
+  {
+    name: "contact",
+    help: "reach me directly",
+    body: `mail    -> mailto:momme@juergensen.me
+matrix  -> https://matrix.to/#/@momme:chaos.jetzt`,
+  },
+  {
+    name: "ls",
+    help: "what's in here",
+    body: () => names("projects").join("  "),
+  },
+  {
+    name: "cat",
+    prefix: true,
+    help: "cat README.md",
+    run: (arg) => {
+      const f = arg.toLowerCase();
+      if (f === "readme.md" || f === "readme") return body("hello");
+      if (f === ".ssh/id_rsa") return fail("nice try.");
+      return fail(`cat: ${arg}: No such file or directory`, "try: cat README.md");
+    },
+  },
+  {
+    name: "help",
+    help: "this list",
+    body: () => ["usage: <command>", "", ...usages()],
+    run: (arg) => {
+      if (!arg) return body("help");
+      const row = usages().find((line) => line.trim().startsWith(arg + " "));
+      return row ? row : fail(`no command called "${arg}"`, "see: help");
+    },
+  },
+  { name: "clear", help: "wipe the screen", body: "" },
+  { name: "date", help: "today's date", body: () => new Date().toDateString() },
+  { name: "time", help: "current time", body: () => new Date().toLocaleTimeString("de-DE") },
+  { name: "echo", prefix: true, help: "echo <text> — repeat yourself", body: (arg) => arg },
+  { name: "pwd", help: "working directory", body: "/world" },
+  { name: "uname", prefix: true, help: "system information", body: "momme.world 1.0.0 static x86_64 GNU/freedom" },
+  { name: "curl", prefix: true, help: "curl momme.world — you already did that", body: "you are already reading the output :)" },
+  { name: "sudo", prefix: true, help: "elevate", body: "momme is not in the sudoers file. This incident has been reported." },
+  { name: "vim", prefix: true, help: "an editor", body: "emacs, obviously." },
+  { name: "emacs", prefix: true, help: "an OS with good editing", body: "a great OS, shame about the editor." },
+  { name: "coffee", help: "brew coffee", body: "() ~   I'm out of coffee." },
+  { name: "exit", help: "close the session", body: "close the tab, or just stop reading :)" },
+];
+
+const ALIASES = {
+  whois: "whoami", about: "whoami", openme: "whoami",
+  tech: "stack", tools: "stack",
+  links: "social", socials: "social",
+  mail: "contact", email: "contact",
+  repos: "projects", rm: "sudo",
+};
+
+// ---------- content helpers ----------
+const byName = (name) => COMMANDS.filter((c) => c.name === name && !c.prefix)[0];
+const body = (name) => render(byName(name).body, "");
+const render = (value, arg) => {
+  const v = typeof value === "function" ? value(arg) : value;
+  return Array.isArray(v) ? v.join("\n") : String(v);
+};
+const names = (name) =>
+  split(body(name)).map((line) => line.trim().split(/\s{2,}/)[0]).filter(Boolean);
+const commandNames = () => unique().map((c) => c.name);
+const unique = () =>
+  COMMANDS.filter((c, i) => COMMANDS.findIndex((x) => x.name === c.name) === i);
+const usages = () => unique().map((c) => `  ${c.name.padEnd(9)} ${c.help}`);
+const fail = (message, ...more) => ({ error: message, more: more.filter(Boolean) });
+const split = (value) => value.split("\n");
+
+// ---------- dom ----------
+const out = document.getElementById("out");
+const screen = document.getElementById("screen");
+const form = document.getElementById("prompt");
+const input = document.getElementById("cmd");
+
+const make = (tag, cls, value) => {
+  const node = document.createElement(tag);
+  if (cls) node.className = cls;
+  if (value != null) node.textContent = value;
+  return node;
+};
+
+const scrollDown = () => (screen.scrollTop = screen.scrollHeight);
+
+function print(value, arg) {
+  const resolved = typeof value === "function" ? value(arg) : value;
+  if (resolved && resolved.error) {
+    out.append(make("div", "line err", resolved.error));
+    resolved.more.forEach((line) => out.append(make("div", "line dim", line)));
+  } else {
+    split(render(resolved, arg)).forEach((line) => out.append(linked(line)));
+  }
+  scrollDown();
+}
+
+// Turn `label -> url` (or a bare url) into text plus real anchors.
+const LINK = /(https?:\/\/\S+|mailto:\S+)/;
+
+function linked(line) {
+  const node = make("span", "line out");
+  if (!LINK.test(line)) return (node.textContent = line), node;
+  const arrow = line.indexOf("->");
+  if (arrow > 0) node.append(line.slice(0, arrow));
+  (arrow > 0 ? line.slice(arrow + 2) : line).split(LINK).forEach((part) => {
+    if (!LINK.test(part)) return node.append(part);
+    const anchor = make("a", null, part);
+    anchor.href = part;
+    if (part.startsWith("http")) anchor.rel = "noopener me";
+    node.append(anchor);
+  });
+  return node;
+}
+
+// ---------- the loop ----------
+const history = { items: [], at: 0 };
+
+function recall(step) {
+  history.at += step;
+  if (history.at < 0) history.at = 0;
+  if (history.at >= history.items.length) {
+    history.at = history.items.length;
+    input.value = "";
+    return;
+  }
+  input.value = history.items[history.at];
+}
+
+function execute(raw) {
+  const [word = "", ...rest] = raw.trim().split(/\s+/);
+  const arg = rest.join(" ");
+  const name = word.toLowerCase();
+
+  out.append(make("div", "line cmd", raw));
+  if (!name) return scrollDown();
+  if (name === "clear") return (out.textContent = "");
+
+  const wanted = ALIASES[name] || name;
+  const found =
+    COMMANDS.find((c) => c.name === wanted && !c.prefix) ||
+    COMMANDS.find((c) => c.name === wanted && c.prefix);
+
+  if (!found) {
+    const near = commandNames().filter((n) => n !== name && n[0] === name[0]).slice(0, 3);
+    return print(fail(`command not found: ${name}`,
+      near.length ? `did you mean: ${near.join(", ")}` : "see: help"));
+  }
+
+  if (found.name === "projects" && arg) {
+    const key = arg.toLowerCase();
+    if (key === "list") return print(body("projects"));
+    return print(found.detail[key] ||
+      fail(`no project called "${arg}"`, "names:", ...names("projects")));
+  }
+
+  return print(found.run ? found.run(arg) : found.body, arg);
+}
+
+form.addEventListener("submit", (event) => {
+  event.preventDefault();
+  const raw = input.value;
+  input.value = "";
+  if (raw.trim()) history.items.push(raw.trim());
+  history.at = history.items.length;
+  execute(raw);
+});
+
+input.addEventListener("keydown", (event) => {
+  if (event.key === "ArrowUp") { event.preventDefault(); recall(-1); }
+  if (event.key === "ArrowDown") { event.preventDefault(); recall(1); }
+  if (event.key !== "Tab") return;
+  const word = input.value.trim().split(/\s+/)[0];
+  const hit = commandNames().filter((n) => word && n.startsWith(word));
+  if (hit.length === 1) { event.preventDefault(); input.value = hit[0] + " "; }
+});
+
+screen.addEventListener("click", () => {
+  if (!getSelection().toString()) input.focus();
+});
+
+document.querySelectorAll("[data-run]").forEach((button) =>
+  button.addEventListener("click", () => {
+    execute(button.dataset.run);
+    input.focus();
+  })
+);
+
+print(`hello — type help for the rest of it.\n`);
+input.focus();
@@ -0,0 +1,136 @@
+:root {
+  --bg: #0b0e14;
+  --panel: #11151f;
+  --border: #232b3a;
+  --fg: #d6deeb;
+  --dim: #7c879b;
+  --accent: #7ee787;
+  --accent-2: #6cb6ff;
+  --warn: #f2cc60;
+  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Mono",
+          Menlo, Consolas, monospace;
+}
+
+* { box-sizing: border-box; }
+
+html, body { margin: 0; }
+
+body {
+  background: var(--bg);
+  color: var(--fg);
+  font-family: var(--mono);
+  font-size: 15px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  display: flex;
+  justify-content: center;
+  padding: clamp(12px, 4vw, 48px) clamp(10px, 3vw, 24px) 40px;
+}
+
+main { width: 100%; max-width: 46rem; }
+
+.term {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
+}
+
+.titlebar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  background: #151a26;
+  border-bottom: 1px solid var(--border);
+  font-size: 12px;
+  color: var(--dim);
+}
+.dot { width: 11px; height: 11px; border-radius: 50%; }
+.dot.r { background: #ff5f57; }
+.dot.y { background: #febc2e; }
+.dot.g { background: #28c840; }
+.title { margin-left: 8px; }
+
+.screen {
+  padding: 18px clamp(12px, 2.5vw, 22px) 20px;
+  min-height: 58vh;
+  max-height: 78vh;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  outline: none;
+}
+
+.hello {
+  color: var(--accent-2);
+  font-size: clamp(6.5px, 1.55vw, 12px);
+  line-height: 1.25;
+  margin: 0 0 18px;
+  overflow-x: auto;
+}
+
+#out { white-space: pre-wrap; word-break: break-word; }
+
+.line { margin: 0; display: block; }
+.line.cmd { color: var(--fg); }
+.line.cmd::before { content: "momme@world:~$ "; color: var(--dim); }
+.line.out { color: var(--fg); margin-bottom: 6px; }
+.line.dim { color: var(--dim); }
+.line.err { color: #ff6b6b; }
+a { color: var(--accent-2); text-decoration: none; }
+a:hover, a:focus-visible { text-decoration: underline; }
+.hl { color: var(--accent); }
+.key { color: var(--warn); }
+
+.cursor {
+  display: inline-block;
+  width: 8px;
+  height: 1.05em;
+  background: var(--accent);
+  vertical-align: text-bottom;
+  animation: blink 1.1s steps(1) infinite;
+}
+@keyframes blink { 50% { opacity: 0; } }
+
+#prompt { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
+.ps1 { color: var(--dim); white-space: nowrap; }
+#cmd {
+  flex: 1;
+  min-width: 0;
+  background: none;
+  border: 0;
+  outline: none;
+  color: var(--fg);
+  font: inherit;
+  caret-color: var(--accent);
+}
+#cmd::placeholder { color: #4b5566; }
+
+.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
+.chips button {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  color: var(--dim);
+  font: inherit;
+  font-size: 13px;
+  padding: 5px 14px;
+  cursor: pointer;
+  transition: color .15s, border-color .15s;
+}
+.chips button:hover, .chips button:focus-visible {
+  color: var(--accent);
+  border-color: var(--accent);
+  outline: none;
+}
+
+.curl { color: var(--dim); font-size: 13px; margin: 16px 2px 0; }
+.curl code { background: var(--panel); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; }
+
+.facts h2 { font-size: 15px; color: var(--accent); margin: 26px 0 8px; }
+.facts ul { padding-left: 20px; }
+
+@media (prefers-reduced-motion: reduce) {
+  .cursor { animation: none; }
+}