Merge pull request 'About-me page instead of the services list' (#14) from ai/about-me into main

Reviewed-on: #14

Dockerfile

@@ -3,7 +3,7 @@ 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/
+COPY index.html styles.css /usr/share/nginx/html/
 
 EXPOSE 80
 

README.md

@@ -1,6 +1,6 @@
 # homepage
 
-Public homepage — Docker image deployed to homepage.ffaerber.duckdns.org
+Public homepage (about me) — Docker image deployed to ffaerber.com and 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

@@ -3,36 +3,32 @@
 <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.">
+  <meta name="description" content="Felix Faerber — Ethereum infrastructure, dapps and self-hosted AI.">
-  <title>ffaerber — services</title>
+  <title>Felix Faerber</title>
   <link rel="stylesheet" href="styles.css">
 </head>
 <body>
   <header class="site-header">
     <div class="container">
-      <h1 class="site-title">ffaerber</h1>
+      <h1 class="site-title">Felix Faerber</h1>
-      <p class="site-tagline">Self-hosted homelab — every service running in the house, one click away.</p>
+      <p class="site-tagline">Ethereum infrastructure, dapps and self-hosted AI.</p>
     </div>
   </header>
 
   <main class="container">
 
-    <!-- Section: Services (rendered from services.json) -->
+    <section class="section" id="about">
-    <section class="section" id="services">
       <div class="section-head">
-        <h2 class="section-title">Services</h2>
+        <h2 class="section-title">About me</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>
+      <p class="project-story">I build decentralised apps and the infrastructure under them: Ethereum and
+        Gnosis nodes, staking and Swarm storage. I also work on self-hosted AI: GPU speech services
+        and an AI companion platform.</p>
     </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>
@@ -48,92 +44,7 @@
         <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 controller = window.AbortController ? new AbortController() : null;
-      var timeout = setTimeout(function () {
-        if (controller) controller.abort();
-        settle("down");
-      }, 6000);
-      fetch(url, { mode: "no-cors", cache: "no-store", redirect: "follow", signal: controller ? controller.signal : undefined })
-        .then(function () { clearTimeout(timeout); settle("up"); })
-        .catch(function () { clearTimeout(timeout); settle("down"); });
-    }
-
-    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>
+</html>

services.json

@@ -1,74 +0,0 @@
-{
-  "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": "Homepage", "url": "https://homepage.ffaerber.duckdns.org", "desc": "This page — the homelab services index you are looking at.", "icon": "🏠" },
-        { "name": "Gitea", "url": "https://git.ffaerber.duckdns.org", "desc": "Self-hosted Git and CI for all ffaerber repos.", "icon": "🔧" }
-      ]
-    }
-  ]
-}

styles.css

@@ -134,93 +134,6 @@ body {
   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;