Files
portfolio/src/pages/infrastructure.astro
vorpax 6f5d0fcb35
Some checks failed
Build and Push Docker Image / build-and-push (push) Failing after 13s
edit theme for my own siye
2026-01-02 16:15:14 +01:00

112 lines
5.0 KiB
Plaintext

---
import Layout from "@/layouts/Layout.astro";
import { Server, Database, Shield, Globe, Activity, Lock } from "@lucide/astro";
---
<Layout
title="Infrastructure"
description="Technical overview of my homelab infrastructure."
keywords="Infrastructure, Homelab, Kubernetes, Proxmox, Docker, Monitoring"
>
<div class="site-container mx-auto my-8 md:my-16 px-4">
<header class="mb-12">
<h1 class="text-4xl font-brand mb-4 text-neutral-800 dark:text-neutral-100">Infrastructure</h1>
<p class="text-neutral-600 dark:text-neutral-400">Technical overview of my homelab stack.</p>
</header>
<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
<!-- Virtualization -->
<div class="p-6 rounded-xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
<div class="flex items-center gap-3 mb-4">
<Server size={24} class="text-primary dark:text-primary-light" />
<h2 class="text-xl font-medium text-neutral-800 dark:text-neutral-100">Virtualization</h2>
</div>
<ul class="space-y-2 text-neutral-600 dark:text-neutral-400 text-sm">
<li><strong>Proxmox VE</strong> - Hypervisor</li>
<li>Multiple VMs and LXC containers</li>
<li>ZFS storage pools</li>
</ul>
</div>
<!-- Orchestration -->
<div class="p-6 rounded-xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
<div class="flex items-center gap-3 mb-4">
<Database size={24} class="text-primary dark:text-primary-light" />
<h2 class="text-xl font-medium text-neutral-800 dark:text-neutral-100">Orchestration</h2>
</div>
<ul class="space-y-2 text-neutral-600 dark:text-neutral-400 text-sm">
<li><strong>Kubernetes</strong> - Container orchestration</li>
<li><strong>Docker</strong> - Containerization</li>
<li>GitOps deployment workflow</li>
</ul>
</div>
<!-- PKI & Security -->
<div class="p-6 rounded-xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
<div class="flex items-center gap-3 mb-4">
<Shield size={24} class="text-primary dark:text-primary-light" />
<h2 class="text-xl font-medium text-neutral-800 dark:text-neutral-100">PKI & Security</h2>
</div>
<ul class="space-y-2 text-neutral-600 dark:text-neutral-400 text-sm">
<li><strong>step-ca</strong> - Internal Certificate Authority</li>
<li>Automated certificate provisioning</li>
<li>mTLS for service communication</li>
</ul>
</div>
<!-- DNS -->
<div class="p-6 rounded-xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
<div class="flex items-center gap-3 mb-4">
<Globe size={24} class="text-primary dark:text-primary-light" />
<h2 class="text-xl font-medium text-neutral-800 dark:text-neutral-100">DNS</h2>
</div>
<ul class="space-y-2 text-neutral-600 dark:text-neutral-400 text-sm">
<li><strong>Technitium</strong> - DNS Server</li>
<li>Split-horizon DNS</li>
<li>Internal service discovery</li>
</ul>
</div>
<!-- Monitoring -->
<div class="p-6 rounded-xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
<div class="flex items-center gap-3 mb-4">
<Activity size={24} class="text-primary dark:text-primary-light" />
<h2 class="text-xl font-medium text-neutral-800 dark:text-neutral-100">Monitoring</h2>
</div>
<ul class="space-y-2 text-neutral-600 dark:text-neutral-400 text-sm">
<li><strong>Grafana</strong> - Visualization</li>
<li><strong>Prometheus</strong> - Metrics</li>
<li><strong>InfluxDB</strong> - Time-series data</li>
</ul>
</div>
<!-- Access & Auth -->
<div class="p-6 rounded-xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
<div class="flex items-center gap-3 mb-4">
<Lock size={24} class="text-primary dark:text-primary-light" />
<h2 class="text-xl font-medium text-neutral-800 dark:text-neutral-100">Access & Auth</h2>
</div>
<ul class="space-y-2 text-neutral-600 dark:text-neutral-400 text-sm">
<li><strong>Authentik</strong> - Identity Provider</li>
<li>OIDC/SAML SSO</li>
<li><strong>Caddy</strong> - Reverse proxy</li>
<li><strong>FRP</strong> - Tunnel access</li>
</ul>
</div>
</div>
<div class="mt-12 p-6 rounded-xl bg-neutral-100 dark:bg-neutral-800/50 border border-neutral-200 dark:border-neutral-700">
<h2 class="text-xl font-medium mb-4 text-neutral-800 dark:text-neutral-100">Architecture Notes</h2>
<p class="text-neutral-600 dark:text-neutral-400 text-sm leading-relaxed">
Everything runs on-premise. Services communicate over an internal network with mTLS. External access goes through authenticated reverse proxy. Monitoring covers infrastructure and application metrics.
</p>
</div>
<div class="mt-8">
<a href="/work/homelab" class="text-primary dark:text-primary-light hover:underline text-sm">
&larr; Back to Homelab project
</a>
</div>
</div>
</Layout>