Build the homepage: project cards grouped in 4 sections
Replaces the placeholder index.html with a full personal-projects page listing all 17 projects across four sections (CipherDolls, decentralized apps, AI on GPU, Ethereum infrastructure) as cards with name, description, tech tags, and GitHub links. Adds styles.css (dark-first, light override, mobile-first responsive grid) and a .dockerignore to keep the build context clean. Updates the Dockerfile to copy styles.css alongside index.html.
This commit is contained in:
+219
-89
@@ -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 & 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>
|
||||
Reference in New Issue
Block a user