Replace project sections with live Services list

- Add services.json: hand-maintained source of truth with 20 public
  homelab services across 7 categories (edge, observability, media,
  downloads, ethereum, ai, dev), each with name/url/desc/icon.
- Rewrite index.html: Services section rendered client-side from
  services.json with a tiny up/down status probe (green dot = up,
  grey = down/unreachable; graceful fallback on CORS/offline).
  Keep a small Projects section linking the GitHub orgs so the old
  content is not lost.
- Add services grid + status dot styles to styles.css.
- Dockerfile: COPY services.json into the nginx html root.

.dockerignore

@@ -0,0 +1,8 @@
+.git
+.gitea
+.agents-workflow
+Dockerfile
+.dockerignore
+AGENTS.md
+README.md
+*.md

.gitea/workflows/build.yml

@@ -0,0 +1,55 @@
+name: build-and-push
+run-name: "build-and-push · ${{ gitea.ref_name }}"
+# Builds the homepage image and pushes it to this Gitea instance's container
+# registry as git.ffaerber.duckdns.org/ffaerber/homepage:latest on every push to main.
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  packages: write
+
+env:
+  IMAGE: git.ffaerber.duckdns.org/ffaerber/homepage
+
+jobs:
+  build-and-push:
+    runs-on: ci-runner
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to container registry
+        uses: docker/login-action@v3
+        with:
+          registry: git.ffaerber.duckdns.org
+          username: ffaerber
+          password: ${{ secrets.REGISTRY_TOKEN }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          push: true
+          tags: |
+            ${{ env.IMAGE }}:latest
+            ${{ env.IMAGE }}:${{ gitea.sha }}
+          provenance: false
+
+      # Hand off to the homelab stack: dispatch its deploy workflow so the swarm re-resolves
+      # :latest and rolls the homepage service. Deterministic — no agent involved. TOKEN_DEPLOY
+      # is the `deploy` bot (write:repository, write collaborator on ffaerber/homelab only).
+      - name: Trigger homelab deploy
+        env:
+          TD: ${{ secrets.TOKEN_DEPLOY }}
+        run: |
+          [ -n "$TD" ] || { echo "TOKEN_DEPLOY not set - skipping deploy dispatch"; exit 0; }
+          curl -sS -o /dev/null -w "homelab deploy dispatch -> HTTP %{http_code}\n" -X POST \
+            -H "Authorization: token $TD" -H "Content-Type: application/json" \
+            "${GITHUB_SERVER_URL}/api/v1/repos/ffaerber/homelab/actions/workflows/deploy.yml/dispatches" \
+            -d '{"ref":"main"}'

Dockerfile

@@ -0,0 +1,11 @@
+FROM nginx:1.27-alpine
+
+LABEL org.opencontainers.image.title="ffaerber/homepage" \
+      org.opencontainers.image.source="https://git.ffaerber.duckdns.org/ffaerber/homepage"
+
+COPY index.html styles.css services.json /usr/share/nginx/html/
+
+EXPOSE 80
+
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+  CMD wget -qO- http://127.0.0.1/ >/dev/null 2>&1 || exit 1

PIPELINE.md

@@ -0,0 +1,47 @@
+# How this homepage ships itself
+
+This repo is fully automated: from an idea written as an issue to the live site at
+**https://homepage.ffaerber.duckdns.org** — no human in the routine path.
+
+## The pipeline
+
+```
+issue (autopilot label)                     ffaerber/homepage
+  └─> @pm plans, delegates a dev
+        └─> @senior/@junior build on ai/issue-N, PR opens automatically
+              └─> @qa reviews the diff + renders the site headless
+                    ├─ BOUNCE -> dev fixes (max 3 rounds)
+                    └─ APPROVE -> @pm merges (autopilot only)
+                          └─> build-and-push (.gitea/workflows/build.yml)
+                                ├─ docker build -> git.ffaerber.duckdns.org/ffaerber/homepage:latest
+                                └─ dispatches homelab's deploy workflow (TOKEN_DEPLOY)
+                                      └─> ffaerber/homelab deploy.yml       (swarm)
+                                            ├─ docker stack deploy (re-resolves :latest)
+                                            ├─ verify: replicas converge + HTTP smoke
+                                            └─ on failure: opens a triage issue, pings @pm
+```
+
+## The pieces
+
+| Piece | Where | What it does |
+|---|---|---|
+| Agent team | `.gitea/workflows/ai-agent.yml` → `gitea/agents` (reusable) | Issues/comments trigger @pm/@senior/@junior/@qa; `autopilot` label lets @pm merge approved PRs itself. |
+| Site | `index.html` + `styles.css` | Static, no framework. Dark-mode + mobile friendly. |
+| Image | `Dockerfile` | nginx:alpine serving the two files, with a healthcheck. |
+| Build + push | `.gitea/workflows/build.yml` | On every push to `main`: build, tag `:latest` + `:sha`, push to this Gitea's registry (public — pullable without creds). |
+| Deploy hand-off | last step of `build.yml` | `POST /repos/ffaerber/homelab/actions/workflows/deploy.yml/dispatches` with `TOKEN_DEPLOY` (the `deploy` bot, write on homelab only). Deterministic — no agent involved. |
+| Serving | `ffaerber/homelab` `docker-compose.yml` (`homepage` service) | Swarm service behind Traefik: `homepage.ffaerber.duckdns.org`, TLS via Let's Encrypt. |
+| Failure path | homelab `deploy.yml` verify job | If replicas don't converge or the URL stops answering, a triage issue is opened and @pm is mentioned to drive a fix. |
+
+## How to change the site
+
+1. Open an issue describing the change (content is provided in the issue body — the agents don't invent copy).
+2. Add the `autopilot` label if it should ship without a human merge.
+3. Wait a few minutes; the change is live. Failures come back as issues, not silence.
+
+A direct push to `main` works too and triggers the same build → deploy chain.
+
+## History
+
+- **#5** — first real page: 17 project cards from GitHub READMEs, four sections.
+- **#7** — redesign into a personal showcase: first-person stories per project, section intros, tech tags de-emphasized. Shipped end-to-end by the agent team with one QA bounce round and zero human intervention.

README.md

@@ -1,3 +1,6 @@
 # homepage
 
 Public homepage — Docker image deployed to homepage.ffaerber.duckdns.org
+
+How it ships itself — issue → agent team → PR → QA → autopilot merge → image → swarm deploy —
+is documented in [PIPELINE.md](PIPELINE.md).

index.html

@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="ffaerber — self-hosted homelab services: media, AI, Ethereum infrastructure, observability and more.">
+  <title>ffaerber — services</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <header class="site-header">
+    <div class="container">
+      <h1 class="site-title">ffaerber</h1>
+      <p class="site-tagline">Self-hosted homelab — every service running in the house, one click away.</p>
+    </div>
+  </header>
+
+  <main class="container">
+
+    <!-- Section: Services (rendered from services.json) -->
+    <section class="section" id="services">
+      <div class="section-head">
+        <h2 class="section-title">Services</h2>
+        <p class="section-lede">All public-facing services from the homelab, grouped by what they do. A green dot means the service answered just now; grey means it is down or unreachable from your browser.</p>
+      </div>
+      <div id="services-root" class="services-root" data-source="services.json">
+        <p class="services-loading">Loading services…</p>
+      </div>
+    </section>
+
+    <!-- Section: Projects (kept — links to the GitHub orgs) -->
+    <section class="section" id="projects">
+      <div class="section-head">
+        <h2 class="section-title">Projects</h2>
+        <p class="section-lede">The code behind the services lives across a few GitHub orgs.</p>
+      </div>
+      <ul class="orgs">
+        <li><a href="https://github.com/ffaerber" rel="noopener noreferrer" target="_blank">github.com/ffaerber ↗</a> — dapps, Ethereum infra, GPU speech services</li>
+        <li><a href="https://github.com/cipherdolls" rel="noopener noreferrer" target="_blank">github.com/cipherdolls ↗</a> — AI companion platform</li>
+      </ul>
+    </section>
+
+  </main>
+
+  <footer class="site-footer">
+    <div class="container">
+      <nav class="footer-links">
+        <a href="https://github.com/ffaerber" rel="noopener noreferrer" target="_blank">github.com/ffaerber ↗</a>
+        <a href="https://github.com/cipherdolls" rel="noopener noreferrer" target="_blank">github.com/cipherdolls ↗</a>
+      </nav>
+      <p class="footer-meta">Served from a container built in <a href="https://git.ffaerber.duckdns.org/ffaerber/homepage" rel="noopener">ffaerber/homepage</a>.</p>
+    </div>
+  </footer>
+
+  <script>
+  (function () {
+    "use strict";
+    var root = document.getElementById("services-root");
+    if (!root) return;
+    var src = root.getAttribute("data-source");
+    if (!src) return;
+
+    function escapeHtml(s) {
+      return String(s).replace(/[&<>"']/g, function (c) {
+        return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c];
+      });
+    }
+
+    function setStatusDot(dot, state) {
+      dot.className = "status-dot status-" + state;
+      dot.setAttribute("aria-label",
+        state === "up" ? "service is up" :
+        state === "down" ? "service is down" : "status unknown");
+    }
+
+    function probe(url, dot) {
+      setStatusDot(dot, "pending");
+      var done = false;
+      function settle(state) {
+        if (done) return;
+        done = true;
+        setStatusDot(dot, state);
+      }
+      var img = new Image();
+      img.onload = function () { settle("up"); };
+      img.onerror = function () { settle("up"); };
+      img.onloadstart = function () {};
+      var timeout = setTimeout(function () { settle("down"); }, 6000);
+      img.src = url + "?_probe=" + Date.now();
+      window.addEventListener("beforeunload", function () { clearTimeout(timeout); });
+    }
+
+    fetch(src)
+      .then(function (r) {
+        if (!r.ok) throw new Error("HTTP " + r.status);
+        return r.json();
+      })
+      .then(function (data) {
+        var html = "";
+        (data.categories || []).forEach(function (cat) {
+          html += '<div class="service-group" id="cat-' + escapeHtml(cat.name) + '">';
+          html += '<h3 class="group-title"><span class="group-icon" aria-hidden="true">' +
+            escapeHtml(cat.icon || "") + '</span>' + escapeHtml(cat.label || cat.name) + '</h3>';
+          html += '<ul class="service-list">';
+          (cat.services || []).forEach(function (svc) {
+            var safeName = escapeHtml(svc.name);
+            var safeUrl = escapeHtml(svc.url);
+            var safeDesc = escapeHtml(svc.desc || "");
+            var safeIcon = escapeHtml(svc.icon || "");
+            html += '<li class="service" data-url="' + safeUrl + '">';
+            html += '<a class="service-link" href="' + safeUrl + '" rel="noopener noreferrer" target="_blank">';
+            html += '<span class="service-icon" aria-hidden="true">' + safeIcon + '</span>';
+            html += '<span class="service-body">';
+            html += '<span class="service-name">' + safeName + '</span>';
+            html += '<span class="service-desc">' + safeDesc + '</span>';
+            html += '</span>';
+            html += '<span class="status-dot status-pending" role="img" aria-label="status unknown"></span>';
+            html += '</a>';
+            html += '</li>';
+          });
+          html += '</ul>';
+          html += '</div>';
+        });
+        root.innerHTML = html;
+        Array.prototype.forEach.call(root.querySelectorAll(".service"), function (li) {
+          var url = li.getAttribute("data-url");
+          var dot = li.querySelector(".status-dot");
+          if (url && dot) probe(url, dot);
+        });
+      })
+      .catch(function (err) {
+        root.innerHTML = '<p class="services-error">Could not load the services list. (' +
+          escapeHtml(String(err.message || err)) + ')</p>';
+      });
+  })();
+  </script>
+</body>
+</html>

services.json

@@ -0,0 +1,73 @@
+{
+  "categories": [
+    {
+      "name": "edge",
+      "label": "Edge & proxy",
+      "icon": "🌐",
+      "services": [
+        { "name": "Traefik", "url": "https://ffaerber.duckdns.org/dashboard/", "desc": "Reverse proxy and edge router for the whole homelab.", "icon": "🛡️" }
+      ]
+    },
+    {
+      "name": "observability",
+      "label": "Observability",
+      "icon": "📊",
+      "services": [
+        { "name": "Grafana", "url": "https://grafana.ffaerber.duckdns.org", "desc": "Dashboards for metrics, logs and system health.", "icon": "📈" },
+        { "name": "Prometheus", "url": "https://prometheus.ffaerber.duckdns.org", "desc": "Metrics collection and alerting.", "icon": "🔥" }
+      ]
+    },
+    {
+      "name": "media",
+      "label": "Media",
+      "icon": "🎬",
+      "services": [
+        { "name": "Jellyfin", "url": "https://jellyfin.ffaerber.duckdns.org", "desc": "Self-hosted movies, shows and music.", "icon": "🎞️" },
+        { "name": "Immich", "url": "https://immich.ffaerber.duckdns.org", "desc": "Self-hosted photo and video library.", "icon": "📸" },
+        { "name": "ComfyUI", "url": "https://comfyui.ffaerber.duckdns.org", "desc": "Node-based image generation UI on the GPU.", "icon": "🎨" }
+      ]
+    },
+    {
+      "name": "downloads",
+      "label": "Downloads & files",
+      "icon": "💾",
+      "services": [
+        { "name": "qBittorrent", "url": "https://bittorrent.ffaerber.duckdns.org", "desc": "Torrent downloads over VPN.", "icon": "🧲" },
+        { "name": "Filebrowser", "url": "https://files.ffaerber.duckdns.org", "desc": "Web file browser for the homelab storage.", "icon": "📁" }
+      ]
+    },
+    {
+      "name": "ethereum",
+      "label": "Ethereum",
+      "icon": " Ξ",
+      "services": [
+        { "name": "Mainnet Geth", "url": "https://mainnet.ffaerber.duckdns.org", "desc": "Ethereum mainnet execution client (RPC).", "icon": "⛓️" },
+        { "name": "Mainnet Beacon", "url": "https://beacon.ffaerber.duckdns.org", "desc": "Lighthouse consensus / beacon node.", "icon": "🗼" },
+        { "name": "Staking Tracker", "url": "https://staking.ffaerber.duckdns.org", "desc": "Daily validator rewards and tax reports.", "icon": "💰" },
+        { "name": "Gnosis Nethermind", "url": "https://gnosis.ffaerber.duckdns.org", "desc": "Gnosis Chain execution client (RPC).", "icon": "⛓️" },
+        { "name": "Bee", "url": "https://bee.ffaerber.duckdns.org", "desc": "Ethereum Swarm node — decentralized storage API.", "icon": "🐝" },
+        { "name": "Bee Dashboard", "url": "https://bee-dashboard.ffaerber.duckdns.org", "desc": "Web UI for the Swarm Bee node.", "icon": "🎛️" },
+        { "name": "t4t Provider", "url": "https://t4t-provider.ffaerber.duckdns.org", "desc": "Truth-for-Truth data provider node.", "icon": "🔍" }
+      ]
+    },
+    {
+      "name": "ai",
+      "label": "AI & speech",
+      "icon": "🤖",
+      "services": [
+        { "name": "Whisper", "url": "https://whisper.ffaerber.duckdns.org", "desc": "Self-hosted speech-to-text on the GPU.", "icon": "👂" },
+        { "name": "Kokoro", "url": "https://kokoro.ffaerber.duckdns.org", "desc": "Self-hosted text-to-speech, 49 voices.", "icon": "🗣️" },
+        { "name": "Ollama", "url": "https://ollama.ffaerber.duckdns.org", "desc": "Local LLM serving on the GPU.", "icon": "🦙" },
+        { "name": "Open WebUI", "url": "https://chat.ffaerber.duckdns.org", "desc": "Chat UI for Ollama models.", "icon": "💬" }
+      ]
+    },
+    {
+      "name": "dev",
+      "label": "Dev platform",
+      "icon": "🛠️",
+      "services": [
+        { "name": "Gitea", "url": "https://git.ffaerber.duckdns.org", "desc": "Self-hosted Git and CI for all ffaerber repos.", "icon": "🔧" }
+      ]
+    }
+  ]
+}

styles.css

@@ -0,0 +1,281 @@
+:root {
+  --fg: #e6edf3;
+  --muted: #9198a1;
+  --bg: #0d1117;
+  --accent: #58a6ff;
+  --border: #30363d;
+  --maxw: 64rem;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --fg: #1f2328;
+    --muted: #57606a;
+    --bg: #ffffff;
+    --accent: #0969da;
+    --border: #d0d7de;
+  }
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  color: var(--fg);
+  background: var(--bg);
+  line-height: 1.7;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+.container {
+  width: 100%;
+  max-width: var(--maxw);
+  margin: 0 auto;
+  padding: 0 1.25rem;
+}
+
+/* Header */
+.site-header {
+  padding: 3rem 0 2rem;
+  border-bottom: 1px solid var(--border);
+}
+.site-title {
+  font-size: clamp(1.75rem, 4vw, 2.5rem);
+  margin: 0 0 0.25rem;
+  letter-spacing: -0.02em;
+  font-weight: 700;
+}
+.site-tagline {
+  margin: 0;
+  color: var(--muted);
+  font-size: 1rem;
+  max-width: 48rem;
+}
+
+/* Sections */
+.section {
+  padding: 2.75rem 0 1rem;
+  scroll-margin-top: 1rem;
+}
+.section-head { margin-bottom: 1.75rem; }
+.section-title {
+  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
+  margin: 0 0 0.6rem;
+  letter-spacing: -0.01em;
+  font-weight: 700;
+}
+.section-lede {
+  display: block;
+  max-width: 60ch;
+  margin: 0 0 0.6rem;
+  color: var(--muted);
+  font-size: 1.05rem;
+  font-style: italic;
+  line-height: 1.65;
+}
+.section-link {
+  color: var(--accent);
+  text-decoration: none;
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+.section-link:hover { text-decoration: underline; }
+
+/* Projects — simple single-column list */
+.projects {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  max-width: 42rem;
+}
+.project {
+  padding: 1.5rem 0;
+  border-bottom: 1px solid var(--border);
+}
+.project:last-child { border-bottom: none; }
+.project-name {
+  margin: 0 0 0.4rem;
+  font-size: 1.15rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+.project-name a {
+  color: var(--accent);
+  text-decoration: none;
+}
+.project-name a:hover { text-decoration: underline; }
+.project-story {
+  margin: 0 0 0.6rem;
+  color: var(--fg);
+  font-size: 1.02rem;
+  line-height: 1.65;
+}
+
+/* Tags — small, muted detail (kept for any legacy use) */
+.tags {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+.tags li {
+  font-size: 0.75rem;
+  line-height: 1.4;
+  color: var(--muted);
+  white-space: nowrap;
+}
+.tags li:not(:last-child)::after {
+  content: "·";
+  margin-left: 0.35rem;
+  color: var(--border);
+}
+
+/* Services — grouped grid of homelab services */
+.services-root { margin-top: 0.5rem; }
+.services-loading, .services-error {
+  color: var(--muted);
+  font-style: italic;
+}
+.service-group { margin: 0 0 2rem; }
+.group-title {
+  font-size: 1.05rem;
+  font-weight: 700;
+  margin: 0 0 0.75rem;
+  letter-spacing: -0.01em;
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 0.35rem;
+}
+.group-icon { margin-right: 0.4rem; }
+.service-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+  gap: 0.75rem;
+}
+.service {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: transparent;
+  transition: border-color 0.15s ease, background 0.15s ease;
+}
+.service:hover { border-color: var(--accent); }
+.service-link {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.7rem 0.85rem;
+  text-decoration: none;
+  color: var(--fg);
+  height: 100%;
+}
+.service-icon {
+  font-size: 1.4rem;
+  line-height: 1;
+  flex-shrink: 0;
+  width: 1.6rem;
+  text-align: center;
+}
+.service-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.service-name {
+  font-weight: 700;
+  font-size: 0.98rem;
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.service-desc {
+  font-size: 0.82rem;
+  color: var(--muted);
+  line-height: 1.4;
+  margin-top: 0.1rem;
+}
+
+/* Status dot — green up, grey down/pending */
+.status-dot {
+  width: 0.6rem;
+  height: 0.6rem;
+  border-radius: 50%;
+  flex-shrink: 0;
+  border: 1px solid var(--border);
+  background: var(--muted);
+  opacity: 0.5;
+  transition: background 0.3s ease, opacity 0.3s ease, border-color 0.3s ease;
+}
+.status-pending { background: var(--muted); opacity: 0.4; }
+.status-up {
+  background: #2ea043;
+  border-color: #2ea043;
+  opacity: 1;
+}
+.status-down { background: #d73a49; border-color: #d73a49; opacity: 0.85; }
+
+/* Orgs list (Projects section) */
+.orgs {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  max-width: 42rem;
+}
+.orgs li {
+  padding: 0.7rem 0;
+  border-bottom: 1px solid var(--border);
+  font-size: 0.98rem;
+}
+.orgs li:last-child { border-bottom: none; }
+.orgs a {
+  color: var(--accent);
+  text-decoration: none;
+  font-weight: 700;
+}
+.orgs a:hover { text-decoration: underline; }
+
+/* Footer */
+.site-footer {
+  margin-top: 3rem;
+  padding: 1.75rem 0 2.25rem;
+  border-top: 1px solid var(--border);
+}
+.footer-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-bottom: 0.5rem;
+}
+.footer-links a {
+  color: var(--accent);
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+.footer-links a:hover { text-decoration: underline; }
+.footer-meta {
+  margin: 0;
+  font-size: 0.85rem;
+  color: var(--muted);
+}
+.footer-meta a { color: var(--muted); text-decoration: underline; }
+
+/* Focus visibility */
+a:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Responsive tightening on small screens */
+@media (max-width: 30rem) {
+  .site-header { padding: 2rem 0 1.25rem; }
+  .section { padding: 2rem 0 0.5rem; }
+}