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

@senior: Build the homepage: project cards from my GitHub #6

Merged
ffaerber merged 1 commits from ai/issue-5 into main 2026-07-08 09:49:05 +02:00
Conversation 2 Commits 1 Files Changed 4
+418 -90
4 changed files with 418 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.dockerignore
+8
View File
@@ -0,0 +1,8 @@
.git
.gitea
.agents-workflow
Dockerfile
.dockerignore
AGENTS.md
README.md
*.md
Dockerfile
+1 -1
View File
@@ -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 /usr/share/nginx/html/index.html
COPY index.html styles.css /usr/share/nginx/html/
EXPOSE 80
index.html
+219 -89
View File
@@ -3,97 +3,227 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ffaerber</title>
<style>
:root {
--fg: #1f2328;
--muted: #57606a;
--bg: #ffffff;
--accent: #0969da;
--border: #d0d7de;
}
@media (prefers-color-scheme: dark) {
:root {
--fg: #e6edf3;
--muted: #9198a1;
--bg: #0d1117;
--accent: #58a6ff;
--border: #30363d;
}
}
* { 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);
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
padding: 2rem;
line-height: 1.6;
}
main {
max-width: 38rem;
width: 100%;
}
h1 {
font-size: clamp(2rem, 5vw, 3rem);
margin: 0 0 0.5rem;
letter-spacing: -0.02em;
}
.tagline {
color: var(--accent);
font-weight: 600;
margin: 0 0 1.5rem;
}
p { color: var(--muted); margin: 0 0 1rem; }
.links {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.5rem;
}
.links a {
color: var(--fg);
text-decoration: none;
padding: 0.5rem 1rem;
border: 1px solid var(--border);
border-radius: 6px;
font-size: 0.95rem;
transition: border-color 0.15s, color 0.15s;
}
.links a:hover { border-color: var(--accent); color: var(--accent); }
footer {
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border);
font-size: 0.85rem;
color: var(--muted);
}
</style>
<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>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<h1>ffaerber</h1>
<p class="tagline">Homelab &amp; self-hosting enthusiast</p>
<p>
Hi, I'm ffaerber. This is my corner of the internet — a self-hosted homepage
running on my homelab. I tinker with containers, Gitea, and anything that runs
on a quiet box in the corner.
</p>
<p>
More coming soon. In the meantime, you can find my code over on Gitea.
</p>
<nav class="links">
<a href="https://git.ffaerber.duckdns.org/ffaerber">Gitea</a>
<a href="https://homepage.ffaerber.duckdns.org">Homepage</a>
</nav>
<footer>
Served from a container built in
<a href="https://git.ffaerber.duckdns.org/ffaerber/homepage">ffaerber/homepage</a>.
</footer>
<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>
</div>
</header>
<main class="container">
<!-- Section: CipherDolls -->
<section class="section" id="cipherdolls">
<div class="section-head">
<h2 class="section-title">CipherDolls — AI companion platform</h2>
<p class="section-desc">An AI companion platform spanning cloud, web, and physical IoT devices.</p>
<a class="section-link" href="https://github.com/cipherdolls" rel="noopener" target="_blank">github.com/cipherdolls ↗</a>
</div>
<div class="cards">
<article class="card">
<h3 class="card-name">core</h3>
<p class="card-desc">Backend API for the CipherDolls platform: wallet-signature auth, AI chat completions, TTS/STT, embeddings (pgvector), USDC payments on Base, and IoT device management over MQTT.</p>
<ul class="tags">
<li>Bun</li><li>Elysia</li><li>Prisma</li><li>PostgreSQL</li><li>Redis</li><li>MQTT</li>
</ul>
<a class="card-link" href="https://github.com/cipherdolls/core" rel="noopener" target="_blank">View on GitHub ↗</a>
</article>
<article class="card">
<h3 class="card-name">server</h3>
<p class="card-desc">Minimal chat backend derived from core, stripped to the essentials: chat with a Character, optional TTS/STT — same architecture, no payments or IoT.</p>
<ul class="tags">
<li>Bun</li><li>Elysia</li><li>Prisma</li><li>PostgreSQL</li>
</ul>
<a class="card-link" href="https://github.com/cipherdolls/server" rel="noopener" target="_blank">View on GitHub ↗</a>
</article>
<article class="card">
<h3 class="card-name">webapp</h3>
<p class="card-desc">Web frontend for the platform.</p>
<ul class="tags">
<li>React Router</li><li>TypeScript</li><li>Tailwind</li>
</ul>
<a class="card-link" href="https://github.com/cipherdolls/webapp" rel="noopener" target="_blank">View on GitHub ↗</a>
</article>
<article class="card">
<h3 class="card-name">stream-player</h3>
<p class="card-desc">TTS audio streaming proxy — subscribes to Redis Pub/Sub and forwards audio chunks to WebSocket clients with a compact binary protocol.</p>
<ul class="tags">
<li>TypeScript</li><li>Redis</li><li>WebSocket</li>
</ul>
<a class="card-link" href="https://github.com/cipherdolls/stream-player" rel="noopener" target="_blank">View on GitHub ↗</a>
</article>
<article class="card">
<h3 class="card-name">stream-recorder</h3>
<p class="card-desc">WebSocket audio ingestion microservice — accepts raw WAV streams, converts to MP3 in-memory via ffmpeg, forwards to the backend.</p>
<ul class="tags">
<li>TypeScript</li><li>WebSocket</li><li>ffmpeg</li>
</ul>
<a class="card-link" href="https://github.com/cipherdolls/stream-recorder" rel="noopener" target="_blank">View on GitHub ↗</a>
</article>
<article class="card">
<h3 class="card-name">firmware-watcher</h3>
<p class="card-desc">ESP-IDF firmware for the SenseCAP Watcher companion device: BLE WiFi provisioning, MQTT events, MP3 playback through the onboard codec, LVGL UI on a 412×412 display, deep sleep.</p>
<ul class="tags">
<li>C</li><li>ESP-IDF</li><li>ESP32-S3</li><li>LVGL</li>
</ul>
<a class="card-link" href="https://github.com/cipherdolls/firmware-watcher" rel="noopener" target="_blank">View on GitHub ↗</a>
</article>
<article class="card">
<h3 class="card-name">firmware-m5sticks3</h3>
<p class="card-desc">ESP-IDF firmware for the M5StickS3 (ESP32-S3) pocket companion device with display, audio codec, and IMU.</p>
<ul class="tags">
<li>C</li><li>ESP-IDF</li><li>ESP32-S3</li>
</ul>
<a class="card-link" href="https://github.com/cipherdolls/firmware-m5sticks3" rel="noopener" target="_blank">View on GitHub ↗</a>
</article>
</div>
</section>
<!-- Section: Decentralized apps -->
<section class="section" id="dapps">
<div class="section-head">
<h2 class="section-title">Decentralized apps — Gnosis Chain + Ethereum Swarm</h2>
<p class="section-desc">dApps with on-chain logic and censorship-resistant Swarm storage/hosting.</p>
</div>
<div class="cards">
<article class="card">
<h3 class="card-name">SwarmChat</h3>
<p class="card-desc">Decentralized 1:1 messenger and WebRTC video calling: wallet identity, on-chain contact registry, encrypted messages over Swarm PSS with feeds as offline outbox. Live at swarmchat.eth.</p>
<ul class="tags">
<li>Solidity</li><li>React</li><li>Swarm PSS</li><li>WebRTC</li>
</ul>
<a class="card-link" href="https://github.com/ffaerber/SwarmChat" rel="noopener" target="_blank">View on GitHub ↗</a>
</article>
<article class="card">
<h3 class="card-name">Pink Chainsaw</h3>
<p class="card-desc">Decentralized imageboard: post images, comment, and vote with xBZZ; fees auto-top-up the poster's Swarm postage stamp so good content stays alive. A social-score system prices posting by reputation.</p>
<ul class="tags">
<li>Solidity</li><li>Foundry</li><li>React</li><li>Swarm</li>
</ul>
<a class="card-link" href="https://github.com/ffaerber/pinkchainsaw" rel="noopener" target="_blank">View on GitHub ↗</a>
</article>
<article class="card">
<h3 class="card-name">FreeeMarket</h3>
<p class="card-desc">Multi-vendor marketplace where anyone runs their own shop and gets paid in stablecoins through on-chain escrow — deliberately fee-free and VAT-free.</p>
<ul class="tags">
<li>Solidity</li><li>Gnosis Chain</li><li>Swarm</li>
</ul>
<a class="card-link" href="https://github.com/ffaerber/freeemarket" rel="noopener" target="_blank">View on GitHub ↗</a>
</article>
<article class="card">
<h3 class="card-name">WalletMatrix</h3>
<p class="card-desc">Pivot-table view of a crypto wallet across every EVM chain — tokens as rows, chains as columns; drag one cell onto another to bridge or cross-chain swap. Static SPA deployable to Swarm.</p>
<ul class="tags">
<li>React</li><li>TypeScript</li><li>Vite</li>
</ul>
<a class="card-link" href="https://github.com/ffaerber/walletmatrix" rel="noopener" target="_blank">View on GitHub ↗</a>
</article>
<article class="card">
<h3 class="card-name">swarm-connect</h3>
<p class="card-desc">React connect-button + wizard for Swarm on Gnosis: wallet → network → balances → Bee node → postage stamp, in one modal. Published on npm; demo hosted on Swarm itself.</p>
<ul class="tags">
<li>React</li><li>wagmi</li><li>npm package</li>
</ul>
<a class="card-link" href="https://github.com/ffaerber/swarm-connect" rel="noopener" target="_blank">View on GitHub ↗</a>
</article>
<article class="card">
<h3 class="card-name">opentab</h3>
<p class="card-desc">Onchain app bootstrapped with create-onchain (Base).</p>
<ul class="tags">
<li>Next.js</li><li>TypeScript</li>
</ul>
<a class="card-link" href="https://github.com/ffaerber/opentab" rel="noopener" target="_blank">View on GitHub ↗</a>
</article>
</div>
</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-desc">Dockerized speech AI for NVIDIA GPUs, tuned for the RTX 5090 / Blackwell generation.</p>
</div>
<div class="cards">
<article class="card">
<h3 class="card-name">whisper-cuda</h3>
<p class="card-desc">OpenAI-Whisper-compatible ASR web service built for RTX 5090 (sm_120) — faster-whisper on CTranslate2/CUDA 12.8, no PyTorch.</p>
<ul class="tags">
<li>Python</li><li>FastAPI</li><li>CUDA</li>
</ul>
<a class="card-link" href="https://github.com/ffaerber/whisper-cuda" rel="noopener" target="_blank">View on GitHub ↗</a>
</article>
<article class="card">
<h3 class="card-name">kokoro-cuda</h3>
<p class="card-desc">Minimal Kokoro TTS API with CUDA: 49 voices in 9 languages, streaming WAV/PCM plus MP3/Opus/FLAC, web UI included.</p>
<ul class="tags">
<li>Python</li><li>FastAPI</li><li>CUDA</li>
</ul>
<a class="card-link" href="https://github.com/ffaerber/kokoro-cuda" rel="noopener" target="_blank">View on GitHub ↗</a>
</article>
<article class="card">
<h3 class="card-name">voxtral-cuda</h3>
<p class="card-desc">Text-to-speech service running Mistral's Voxtral-4B-TTS with CUDA acceleration via vLLM-Omni.</p>
<ul class="tags">
<li>Python</li><li>vLLM</li><li>CUDA</li>
</ul>
<a class="card-link" href="https://github.com/ffaerber/voxtral-cuda" rel="noopener" target="_blank">View on GitHub ↗</a>
</article>
</div>
</section>
<!-- Section: Ethereum infrastructure -->
<section class="section" id="eth-infra">
<div class="section-head">
<h2 class="section-title">Ethereum infrastructure</h2>
</div>
<div class="cards">
<article class="card">
<h3 class="card-name">stakingtracker</h3>
<p class="card-desc">Self-hosted ETH staking rewards tracker and tax-report generator — reads from your own beacon node, persists daily history to SQLite, no external APIs or keys.</p>
<ul class="tags">
<li>TypeScript</li><li>Fastify</li><li>SQLite</li>
</ul>
<a class="card-link" href="https://github.com/ffaerber/stakingtracker" rel="noopener" target="_blank">View on GitHub ↗</a>
</article>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container">
<nav class="footer-links">
<a href="https://github.com/ffaerber" rel="noopener" target="_blank">github.com/ffaerber ↗</a>
<a href="https://github.com/cipherdolls" rel="noopener" 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>
</body>
</html>
styles.css
+190
View File
@@ -0,0 +1,190 @@
:root {
--fg: #e6edf3;
--muted: #9198a1;
--bg: #0d1117;
--bg-elev: #161b22;
--accent: #58a6ff;
--border: #30363d;
--tag-bg: #1f2630;
--radius: 10px;
--maxw: 64rem;
}
@media (prefers-color-scheme: light) {
:root {
--fg: #1f2328;
--muted: #57606a;
--bg: #ffffff;
--bg-elev: #f6f8fa;
--accent: #0969da;
--border: #d0d7de;
--tag-bg: #eaeef2;
}
}
* { 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.6;
-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: 2.5rem 0 1.5rem;
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: 2rem 0 0.5rem;
scroll-margin-top: 1rem;
}
.section-head { margin-bottom: 1.25rem; }
.section-title {
font-size: clamp(1.15rem, 2.5vw, 1.5rem);
margin: 0 0 0.35rem;
letter-spacing: -0.01em;
font-weight: 700;
}
.section-desc {
margin: 0 0 0.4rem;
color: var(--muted);
font-size: 0.95rem;
max-width: 48rem;
}
.section-link {
color: var(--accent);
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
}
.section-link:hover { text-decoration: underline; }
/* Cards grid */
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
gap: 1rem;
}
.card {
display: flex;
flex-direction: column;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.1rem 1.15rem 1.15rem;
transition: border-color 0.15s ease, transform 0.15s ease;
}
.card:hover { border-color: var(--accent); }
.card:focus-within { border-color: var(--accent); }
.card-name {
margin: 0 0 0.5rem;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.card-desc {
margin: 0 0 0.85rem;
color: var(--muted);
font-size: 0.92rem;
flex: 1 1 auto;
}
/* Tags */
.tags {
list-style: none;
margin: 0 0 0.9rem;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.tags li {
font-size: 0.75rem;
line-height: 1.4;
color: var(--muted);
background: var(--tag-bg);
border: 1px solid var(--border);
border-radius: 999px;
padding: 0.12rem 0.55rem;
white-space: nowrap;
}
/* Card link */
.card-link {
align-self: flex-start;
color: var(--accent);
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
}
.card-link:hover { text-decoration: underline; }
/* Footer */
.site-footer {
margin-top: 2.5rem;
padding: 1.5rem 0 2rem;
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) {
.cards {
grid-template-columns: 1fr;
}
.site-header { padding: 1.75rem 0 1rem; }
.section { padding: 1.5rem 0 0.25rem; }
}