Files
bytegeist-portfolio/index.html
T
Keith Casko b28852652c Revert "Update portfolio website"
This reverts commit 65582587f5.
2026-10-02 09:51:58 -04:00

423 lines
16 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="ByteGeist infrastructure control plane — a live view into Keith Casko's self-hosted cloud environment." />
<title>ByteGeist / Control Plane</title>
<link rel="icon" href="assets/images/bytegeist-logo.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="scanline" aria-hidden="true"></div>
<header class="control-bar">
<a class="wordmark" href="#overview" aria-label="ByteGeist control plane">
<img src="assets/images/bytegeist-logo.png" alt="" />
<span>BYTEGEIST</span>
<small>/ CONTROL PLANE</small>
</a>
<div class="control-state">
<span class="status-dot"></span>
<span>INFRASTRUCTURE NOMINAL</span>
</div>
<nav aria-label="Control plane navigation">
<a href="#overview">Overview</a>
<a href="#topology">Topology</a>
<a href="#observability">Observability</a>
<a href="#services">Services</a>
<a href="#security">Security</a>
</nav>
<div class="clock" aria-label="Current local time">
<span id="local-time">--:--:--</span>
<small>AMERICA / NEW YORK</small>
</div>
</header>
<main>
<section id="overview" class="command-grid">
<aside class="system-rail" aria-label="System status">
<div class="rail-heading">
<span>NODE</span>
<strong>BG-CORE-01</strong>
</div>
<dl class="rail-data">
<div><dt>Provider</dt><dd>Hetzner</dd></div>
<div><dt>OS</dt><dd>Ubuntu 24.04</dd></div>
<div><dt>Runtime</dt><dd>Docker</dd></div>
<div><dt>Region</dt><dd>US-East</dd></div>
<div><dt>Ingress</dt><dd>NPM / TLS</dd></div>
<div><dt>Identity</dt><dd>Authentik</dd></div>
</dl>
<div class="rail-health">
<span>HOST HEALTH</span>
<div class="health-bar"><i style="--value: 92%"></i></div>
<strong>92%</strong>
</div>
<a href="https://wiki.casko.dev">OPEN RUNBOOKS <span>↗</span></a>
<a href="https://git.casko.dev">GIT SERVER <span>↗</span></a>
</aside>
<div class="overview-console">
<div class="console-label">
<span>OVERVIEW / LIVE</span>
<span id="refresh-indicator">UPDATED 00s AGO</span>
</div>
<div class="identity-block">
<div>
<p class="overline">SELF-HOSTED INFRASTRUCTURE ENVIRONMENT</p>
<h1>Personal cloud.<br />Operational by design.</h1>
</div>
<p class="operator-note">
A working infrastructure lab for identity, observability, delivery, security,
and recovery. Built and maintained as an evolving system—not a static demo.
</p>
</div>
<div class="metric-board" aria-label="Infrastructure metrics">
<article class="metric metric-primary">
<span>SERVICES ONLINE</span>
<strong data-count="20">20</strong><small>/ 20</small>
<div class="spark-bars" aria-hidden="true">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>
</article>
<article class="metric">
<span>UPTIME</span>
<strong>99.98</strong><small>%</small>
<p>30 DAY WINDOW</p>
</article>
<article class="metric">
<span>CONTAINERS</span>
<strong data-count="26">26</strong>
<p>26 RUNNING / 0 DEGRADED</p>
</article>
<article class="metric">
<span>ACTIVE DOMAINS</span>
<strong data-count="11">11</strong>
<p>TLS VALID / PROXIED</p>
</article>
<article class="metric">
<span>CPU LOAD</span>
<strong>16.2</strong><small>%</small>
<div class="meter"><i style="--value: 16.2%"></i></div>
</article>
<article class="metric">
<span>MEMORY</span>
<strong>61.6</strong><small>%</small>
<div class="meter warning"><i style="--value: 61.6%"></i></div>
</article>
</div>
<div class="operations-window">
<div class="window-bar">
<span><i class="live-dot"></i> GRAFANA / BYTEGEIST OPERATIONS</span>
<a href="assets/images/portfolio-grafana-operations.png" target="_blank">FULL RES ↗</a>
</div>
<img src="assets/images/portfolio-grafana-operations.png" alt="Grafana operations dashboard showing ByteGeist infrastructure health" />
</div>
</div>
<aside class="activity-panel">
<div class="panel-title">
<span>EVENT STREAM</span>
<small>LIVE</small>
</div>
<ol class="event-list">
<li>
<time>22:14:08</time>
<span class="event-ok">DEPLOY</span>
<p>portfolio/main completed</p>
</li>
<li>
<time>21:48:32</time>
<span class="event-info">AUTH</span>
<p>OIDC session issued</p>
</li>
<li>
<time>20:03:17</time>
<span class="event-ok">BACKUP</span>
<p>volume snapshot verified</p>
</li>
<li>
<time>18:42:55</time>
<span class="event-warn">SEC</span>
<p>CrowdSec decision added</p>
</li>
<li>
<time>16:11:09</time>
<span class="event-info">DNS</span>
<p>certificate renewed</p>
</li>
</ol>
<div class="deployment-status">
<span>LAST DEPLOYMENT</span>
<strong>SUCCESS</strong>
<p>Woodpecker pipeline #184</p>
<div><i></i><i></i><i></i><i></i></div>
</div>
<div class="terminal-mini" aria-label="Recent terminal output">
<p><span>$</span> docker ps --format status</p>
<p class="terminal-output">26 containers running</p>
<p><span>$</span> systemctl is-system-running</p>
<p class="terminal-output">running<span class="cursor">_</span></p>
</div>
</aside>
</section>
<section id="topology" class="module topology-module">
<header class="module-header">
<div>
<span class="module-id">SYS.01</span>
<h2>Infrastructure topology</h2>
</div>
<p>Traffic, identity, workloads, telemetry, and recovery paths on the current host.</p>
<div class="module-state"><i></i> DOCUMENTED</div>
</header>
<div class="topology-layout">
<div class="stack-index">
<div>
<span>EDGE</span>
<strong>Nginx Proxy Manager</strong>
<small>TLS termination / routing</small>
</div>
<div>
<span>IDENTITY</span>
<strong>Authentik</strong>
<small>OIDC / SSO / 2FA</small>
</div>
<div>
<span>COMPUTE</span>
<strong>Docker Compose</strong>
<small>26 active containers</small>
</div>
<div>
<span>TELEMETRY</span>
<strong>Prometheus + Loki</strong>
<small>Metrics / logs / alerts</small>
</div>
</div>
<figure class="system-map">
<a href="assets/images/bytegeist-architecture.png" target="_blank">
<img src="assets/images/bytegeist-architecture.png" alt="ByteGeist infrastructure architecture diagram" />
</a>
<figcaption>
<span>BYTEGEIST-CLOUD / REV 04</span>
<span>SELECT DIAGRAM TO INSPECT</span>
</figcaption>
</figure>
</div>
</section>
<section id="observability" class="module evidence-module">
<header class="module-header">
<div>
<span class="module-id">OBS.02</span>
<h2>Monitoring stack</h2>
</div>
<p>Host metrics, container telemetry, centralized logs, and independent uptime checks.</p>
<div class="module-state"><i></i> COVERAGE ACTIVE</div>
</header>
<div class="evidence-grid">
<figure class="evidence evidence-wide">
<figcaption>
<span>LOG PIPELINE</span>
<strong>Loki / Grafana Alloy</strong>
<small>Container output searchable by service and host</small>
</figcaption>
<a href="assets/images/portfolio-grafana-logs.png" target="_blank">
<img src="assets/images/portfolio-grafana-logs.png" alt="Centralized logs in Grafana" />
</a>
</figure>
<div class="coverage-matrix">
<div class="panel-title"><span>MONITORING COVERAGE</span><small>6 / 6</small></div>
<ul>
<li><span>Host metrics</span><i>ACTIVE</i></li>
<li><span>Container metrics</span><i>ACTIVE</i></li>
<li><span>Application logs</span><i>ACTIVE</i></li>
<li><span>Endpoint uptime</span><i>ACTIVE</i></li>
<li><span>Resource alerts</span><i>ACTIVE</i></li>
<li><span>Security events</span><i>ACTIVE</i></li>
</ul>
<div class="stack-list">
<span>Grafana</span><span>Prometheus</span><span>Loki</span>
<span>Alloy</span><span>Node Exporter</span><span>cAdvisor</span>
</div>
</div>
</div>
</section>
<section id="services" class="module services-module">
<header class="module-header">
<div>
<span class="module-id">APP.03</span>
<h2>Service inventory</h2>
</div>
<p>Core applications currently exposed through the internal service portal.</p>
<div class="module-state"><i></i> 20 ONLINE</div>
</header>
<div class="service-layout">
<div class="service-table" role="table" aria-label="Service inventory">
<div class="service-row service-head" role="row">
<span>Service</span><span>Role</span><span>Access</span><span>State</span>
</div>
<div class="service-row"><strong>Gitea</strong><span>Source control</span><span>SSO</span><i>ONLINE</i></div>
<div class="service-row"><strong>Wiki.js</strong><span>Documentation</span><span>SSO</span><i>ONLINE</i></div>
<div class="service-row"><strong>Dashy</strong><span>Service portal</span><span>SSO</span><i>ONLINE</i></div>
<div class="service-row"><strong>Vaultwarden</strong><span>Secrets</span><span>DIRECT</span><i>ONLINE</i></div>
<div class="service-row"><strong>Stirling PDF</strong><span>Document tools</span><span>SSO</span><i>ONLINE</i></div>
<div class="service-row"><strong>IT Tools</strong><span>Utilities</span><span>SSO</span><i>ONLINE</i></div>
<div class="service-row"><strong>Uptime Kuma</strong><span>Availability</span><span>SSO</span><i>ONLINE</i></div>
</div>
<figure class="portal-shot">
<figcaption>
<span>SERVICE PORTAL</span>
<small>Dashy / internal access layer</small>
</figcaption>
<a href="assets/images/portfolio-cloud-dashboard-overview.png" target="_blank">
<img src="assets/images/portfolio-cloud-dashboard-overview.png" alt="ByteGeist Dashy service portal" />
</a>
</figure>
</div>
</section>
<section class="module devops-module">
<header class="module-header">
<div>
<span class="module-id">DEV.04</span>
<h2>Delivery pipeline</h2>
</div>
<p>Git-based workflows from repository change to automated deployment.</p>
<div class="module-state"><i></i> LAST RUN PASSED</div>
</header>
<div class="pipeline">
<div class="pipeline-flow" aria-label="Deployment pipeline">
<div><span>01</span><strong>COMMIT</strong><small>Gitea repository</small></div>
<b>→</b>
<div><span>02</span><strong>BUILD</strong><small>Woodpecker runner</small></div>
<b>→</b>
<div><span>03</span><strong>VERIFY</strong><small>Static checks</small></div>
<b>→</b>
<div><span>04</span><strong>DEPLOY</strong><small>Docker host</small></div>
</div>
<div class="pipeline-shots">
<figure>
<figcaption>GITEA / REPOSITORIES</figcaption>
<a href="assets/images/portfolio-gitea-dashboard.png" target="_blank">
<img src="assets/images/portfolio-gitea-dashboard.png" alt="Gitea repositories dashboard" />
</a>
</figure>
<figure>
<figcaption>WOODPECKER / PIPELINE</figcaption>
<a href="assets/images/portfolio-woodpecker-pipeline.png" target="_blank">
<img src="assets/images/portfolio-woodpecker-pipeline.png" alt="Successful Woodpecker CI pipeline" />
</a>
</figure>
</div>
</div>
</section>
<section id="security" class="module security-module">
<header class="module-header">
<div>
<span class="module-id">SEC.05</span>
<h2>Identity & perimeter</h2>
</div>
<p>Central authentication, protected services, and automated hostile-traffic decisions.</p>
<div class="module-state"><i></i> ENFORCING</div>
</header>
<div class="security-layout">
<figure class="auth-shot">
<figcaption>
<span>AUTHENTIK</span>
<small>11 protected applications / 2FA enforced</small>
</figcaption>
<a href="assets/images/portfolio-authentik-applications.png" target="_blank">
<img src="assets/images/portfolio-authentik-applications.png" alt="Applications protected by Authentik" />
</a>
</figure>
<div class="security-data">
<div class="security-score">
<span>ACCESS POSTURE</span>
<strong>HARDENED</strong>
<small>KEY-ONLY SSH / SSO / TLS</small>
</div>
<ul>
<li><span>OIDC providers</span><strong>04</strong></li>
<li><span>Forward-auth apps</span><strong>07</strong></li>
<li><span>2FA policy</span><strong>ENFORCED</strong></li>
<li><span>Public SSH password</span><strong>DISABLED</strong></li>
</ul>
</div>
<figure class="crowdsec-shot">
<figcaption>
<span>CROWDSEC / ACTIVE DECISIONS</span>
<small>Automated hostile source blocking</small>
</figcaption>
<a href="assets/images/portfolio-crowdsec-decisions.png" target="_blank">
<img src="assets/images/portfolio-crowdsec-decisions.png" alt="CrowdSec active firewall decisions" />
</a>
</figure>
</div>
</section>
<section class="module recovery-module">
<header class="module-header">
<div>
<span class="module-id">DR.06</span>
<h2>Recovery state</h2>
</div>
<p>Configuration in Git, persistent data backups, and an explicit rebuild sequence.</p>
<div class="module-state"><i></i> RUNBOOK CURRENT</div>
</header>
<div class="recovery-layout">
<div class="recovery-sequence">
<div><span>01</span><strong>Provision host</strong><small>Ubuntu / firewall / SSH</small></div>
<div><span>02</span><strong>Restore config</strong><small>Git / Compose / secrets</small></div>
<div><span>03</span><strong>Restore data</strong><small>Volumes / databases</small></div>
<div><span>04</span><strong>Validate edge</strong><small>DNS / TLS / identity</small></div>
</div>
<figure>
<a href="assets/images/portfolio-wiki-disaster-recovery.png" target="_blank">
<img src="assets/images/portfolio-wiki-disaster-recovery.png" alt="ByteGeist disaster recovery runbook" />
</a>
</figure>
</div>
</section>
</main>
<footer>
<div class="footer-mark">
<img src="assets/images/bytegeist-logo.png" alt="" />
<div><strong>BYTEGEIST</strong><span>KEITH CASKO / INFRASTRUCTURE LAB</span></div>
</div>
<p>PLAIN HTML / CSS / JAVASCRIPT</p>
<p>STATUS: <span class="status-text">OPERATIONAL</span></p>
</footer>
</body>
</html>