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.
This commit is contained in:
+100
-174
@@ -3,197 +3,40 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="ffaerber — personal projects: CipherDolls, decentralized apps on Gnosis/Ethereum Swarm, self-hosted speech AI, and Ethereum infrastructure.">
|
||||
<title>ffaerber — projects</title>
|
||||
<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">Personal projects — AI companions, decentralized apps, GPU speech services, Ethereum infra.</p>
|
||||
<p class="site-tagline">Self-hosted homelab — every service running in the house, one click away.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container">
|
||||
|
||||
<!-- Section: CipherDolls -->
|
||||
<section class="section" id="cipherdolls">
|
||||
<!-- Section: Services (rendered from services.json) -->
|
||||
<section class="section" id="services">
|
||||
<div class="section-head">
|
||||
<h2 class="section-title">CipherDolls — AI companion platform</h2>
|
||||
<p class="section-lede">What if an AI companion wasn't just an app, but something physical in your room? CipherDolls is my biggest project: an AI companion platform where characters can talk, listen — and live inside real devices.</p>
|
||||
<a class="section-link" href="https://github.com/cipherdolls" rel="noopener noreferrer" target="_blank">github.com/cipherdolls ↗</a>
|
||||
<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>
|
||||
<ul class="projects">
|
||||
|
||||
<li class="project">
|
||||
<h3 class="project-name"><a href="https://github.com/cipherdolls/core" rel="noopener noreferrer" target="_blank">core</a></h3>
|
||||
<p class="project-story">The brain of the platform: one backend that handles chat, voice, memory, payments and the connection to the physical dolls.</p>
|
||||
<ul class="tags">
|
||||
<li>Bun</li><li>Elysia</li><li>Prisma</li><li>PostgreSQL</li><li>Redis</li><li>MQTT</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="project">
|
||||
<h3 class="project-name"><a href="https://github.com/cipherdolls/server" rel="noopener noreferrer" target="_blank">server</a></h3>
|
||||
<p class="project-story">A slimmed-down core for anyone who just wants to chat with a character — the same architecture, none of the complexity.</p>
|
||||
<ul class="tags">
|
||||
<li>Bun</li><li>Elysia</li><li>Prisma</li><li>PostgreSQL</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="project">
|
||||
<h3 class="project-name"><a href="https://github.com/cipherdolls/webapp" rel="noopener noreferrer" target="_blank">webapp</a></h3>
|
||||
<p class="project-story">The web face of CipherDolls — where you meet the characters.</p>
|
||||
<ul class="tags">
|
||||
<li>React Router</li><li>TypeScript</li><li>Tailwind</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="project">
|
||||
<h3 class="project-name"><a href="https://github.com/cipherdolls/stream-player" rel="noopener noreferrer" target="_blank">stream-player</a></h3>
|
||||
<p class="project-story">Voices need to arrive instantly. This streams the AI's speech to your browser the moment it is generated.</p>
|
||||
<ul class="tags">
|
||||
<li>TypeScript</li><li>Redis</li><li>WebSocket</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="project">
|
||||
<h3 class="project-name"><a href="https://github.com/cipherdolls/stream-recorder" rel="noopener noreferrer" target="_blank">stream-recorder</a></h3>
|
||||
<p class="project-story">The listening half: your voice streams in, gets converted on the fly, and lands with the AI.</p>
|
||||
<ul class="tags">
|
||||
<li>TypeScript</li><li>WebSocket</li><li>ffmpeg</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="project">
|
||||
<h3 class="project-name"><a href="https://github.com/cipherdolls/firmware-watcher" rel="noopener noreferrer" target="_blank">firmware-watcher</a></h3>
|
||||
<p class="project-story">The magic moment: a real device on your desk wakes up, connects, and speaks with the character's voice.</p>
|
||||
<ul class="tags">
|
||||
<li>C</li><li>ESP-IDF</li><li>ESP32-S3</li><li>LVGL</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="project">
|
||||
<h3 class="project-name"><a href="https://github.com/cipherdolls/firmware-m5sticks3" rel="noopener noreferrer" target="_blank">firmware-m5sticks3</a></h3>
|
||||
<p class="project-story">The pocket version: the same companion on a tiny stick with a display and a microphone.</p>
|
||||
<ul class="tags">
|
||||
<li>C</li><li>ESP-IDF</li><li>ESP32-S3</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- Section: Decentralized apps -->
|
||||
<section class="section" id="dapps">
|
||||
<!-- Section: Projects (kept — links to the GitHub orgs) -->
|
||||
<section class="section" id="projects">
|
||||
<div class="section-head">
|
||||
<h2 class="section-title">Decentralized apps — Gnosis Chain + Ethereum Swarm</h2>
|
||||
<p class="section-lede">Can the web run without servers? These apps are my experiments in building things that nobody can switch off.</p>
|
||||
<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="projects">
|
||||
|
||||
<li class="project">
|
||||
<h3 class="project-name"><a href="https://github.com/ffaerber/SwarmChat" rel="noopener noreferrer" target="_blank">SwarmChat</a></h3>
|
||||
<p class="project-story">I was thinking about how cool it would be to have a web3-based chat system. Is it possible to communicate without any servers? With Swarm, a decentralised technology, this is now possible — messages travel encrypted through the network itself, and your wallet is your identity.</p>
|
||||
<ul class="tags">
|
||||
<li>Solidity</li><li>React</li><li>Swarm PSS</li><li>WebRTC</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="project">
|
||||
<h3 class="project-name"><a href="https://github.com/ffaerber/pinkchainsaw" rel="noopener noreferrer" target="_blank">Pink Chainsaw</a></h3>
|
||||
<p class="project-story">I wanted an imageboard where content can't just disappear. Images live on Swarm, and every post pays a little to keep them alive — good content earns you cheaper posting, bad content gets expensive.</p>
|
||||
<ul class="tags">
|
||||
<li>Solidity</li><li>Foundry</li><li>React</li><li>Swarm</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="project">
|
||||
<h3 class="project-name"><a href="https://github.com/ffaerber/freeemarket" rel="noopener noreferrer" target="_blank">FreeeMarket</a></h3>
|
||||
<p class="project-story">Can you run a marketplace with no company behind it? Anyone opens a shop, buyers pay in stablecoins, and on-chain escrow replaces the middleman. Deliberately fee-free — a farmers' market for the internet.</p>
|
||||
<ul class="tags">
|
||||
<li>Solidity</li><li>Gnosis Chain</li><li>Swarm</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="project">
|
||||
<h3 class="project-name"><a href="https://github.com/ffaerber/walletmatrix" rel="noopener noreferrer" target="_blank">WalletMatrix</a></h3>
|
||||
<p class="project-story">My tokens were scattered across a dozen chains and I could never see the whole picture. So I built a pivot table for your wallet: tokens as rows, chains as columns — drag a cell from one chain to another to bridge.</p>
|
||||
<ul class="tags">
|
||||
<li>React</li><li>TypeScript</li><li>Vite</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="project">
|
||||
<h3 class="project-name"><a href="https://github.com/ffaerber/swarm-connect" rel="noopener noreferrer" target="_blank">swarm-connect</a></h3>
|
||||
<p class="project-story">Every Swarm dApp I built needed the same onboarding dance: wallet, network, Bee node, postage stamp. So I packaged it once — a single React button that walks users through all of it.</p>
|
||||
<ul class="tags">
|
||||
<li>React</li><li>wagmi</li><li>npm package</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="project">
|
||||
<h3 class="project-name"><a href="https://github.com/ffaerber/opentab" rel="noopener noreferrer" target="_blank">opentab</a></h3>
|
||||
<p class="project-story">An experiment with onchain apps on Base.</p>
|
||||
<ul class="tags">
|
||||
<li>Next.js</li><li>TypeScript</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- Section: AI on GPU -->
|
||||
<section class="section" id="ai-gpu">
|
||||
<div class="section-head">
|
||||
<h2 class="section-title">AI on GPU — self-hosted speech services</h2>
|
||||
<p class="section-lede">I wanted my projects to hear and speak without sending a single word to the cloud — so these run on my own GPU.</p>
|
||||
</div>
|
||||
<ul class="projects">
|
||||
|
||||
<li class="project">
|
||||
<h3 class="project-name"><a href="https://github.com/ffaerber/whisper-cuda" rel="noopener noreferrer" target="_blank">whisper-cuda</a></h3>
|
||||
<p class="project-story">Speech-to-text on my own GPU: no cloud, no per-minute pricing. Whisper packaged for the RTX 5090 so anything in my homelab can transcribe audio locally.</p>
|
||||
<ul class="tags">
|
||||
<li>Python</li><li>FastAPI</li><li>CUDA</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="project">
|
||||
<h3 class="project-name"><a href="https://github.com/ffaerber/kokoro-cuda" rel="noopener noreferrer" target="_blank">kokoro-cuda</a></h3>
|
||||
<p class="project-story">Giving my projects a voice: a small self-hosted TTS service with 49 voices in 9 languages, fast enough to stream. Type text, hear it instantly.</p>
|
||||
<ul class="tags">
|
||||
<li>Python</li><li>FastAPI</li><li>CUDA</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="project">
|
||||
<h3 class="project-name"><a href="https://github.com/ffaerber/voxtral-cuda" rel="noopener noreferrer" target="_blank">voxtral-cuda</a></h3>
|
||||
<p class="project-story">The newest open speech models are amazing but heavy. This runs Mistral's Voxtral on a local GPU, so state-of-the-art speech stays in my own house.</p>
|
||||
<ul class="tags">
|
||||
<li>Python</li><li>vLLM</li><li>CUDA</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- Section: Ethereum infrastructure -->
|
||||
<section class="section" id="eth-infra">
|
||||
<div class="section-head">
|
||||
<h2 class="section-title">Ethereum infrastructure</h2>
|
||||
</div>
|
||||
<ul class="projects">
|
||||
|
||||
<li class="project">
|
||||
<h3 class="project-name"><a href="https://github.com/ffaerber/stakingtracker" rel="noopener noreferrer" target="_blank">stakingtracker</a></h3>
|
||||
<p class="project-story">Tax season with an ETH validator used to mean paid APIs and spreadsheets. Now my own beacon node does the work: a small self-hosted app that records rewards daily and prints the tax report.</p>
|
||||
<ul class="tags">
|
||||
<li>TypeScript</li><li>Fastify</li><li>SQLite</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<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>
|
||||
|
||||
@@ -208,5 +51,88 @@
|
||||
<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 { "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[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>
|
||||
Reference in New Issue
Block a user