ffaerber/homepage
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show only an about-me page, no homelab services

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015XiQYLY5JBuwam5nuVnBfz
This commit is contained in:
ffaerberandClaude Opus 5.5 committed 2026-10-28 09:14:12 +02:00
1 parent 837c50588f
commit e2eb20b3d0
5 files changed
+12 -262
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+10 -99
View File
@@ -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.">
<title>ffaerber — services</title>
<meta name="description" content="Felix Faerber — Ethereum infrastructure, dapps and self-hosted AI.">
<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>
<p class="site-tagline">Self-hosted homelab — every service running in the house, one click away.</p>
<h1 class="site-title">Felix Faerber</h1>
<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="services">
<section class="section" id="about">
<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>
<h2 class="section-title">About me</h2>
</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>