Astro 6
Statisch by default — jede Seite, die nicht dynamisch sein muss, ist es auch nicht. Interaktivität kommt als gezielte Insel hinzu, nicht als App-weite Laufzeit.
Kolophon
Die Technik dahinter.
Diese Seite ist bewusst kein Effekt-Feuerwerk. Sie ist ein Arbeitsbeispiel: dieselben Entscheidungen, dieselbe Disziplin, die ich in Projekte trage — nur klein genug, um sie ganz zu zeigen.
Der Stack — und warum
Jede Wahl ist eine Entscheidung mit Begründung.
Svelte 5
Eine einzige UI-Bibliothek für alles Interaktive — Theme-Wechsel und Kontaktformular. Kompiliert, schlank, ohne Virtual-DOM-Overhead.
Natives CSS + Design-Tokens
Eine Single Source of Truth für Farben, Spacing und Type-Scale. Container-Queries, logische Properties und fluide clamp()-Skalen — die Plattform statt einer Abstraktion darüber.
Hetzner · Coolify
Eigenbetrieb in Deutschland: die Seite läuft als schlanker Node-Server, ausgerollt per Coolify (Open-Source-PaaS) auf einem Hetzner-Server — Datenhoheit in der EU und git-push-Deploy.
Ubuntu Server
Die Seite läuft auf einem eigenen Ubuntu-Server. Dadurch bleiben Laufzeit, Logs, Konfiguration und Betriebsentscheidungen nachvollziehbar — keine Blackbox, sondern eine bewusst kontrollierte Umgebung.
Coolify
Coolify übernimmt Deployment, Prozessverwaltung, Domain-Anbindung, TLS und Git-Integration. Plattform-Komfort, aber auf eigener Infrastruktur — mit klarer Kontrolle über Betrieb und Umgebung.
GitHub + CI/CD
Änderungen laufen nicht manuell per FTP oder Shell-Kopie in Produktion. Jeder relevante Stand wird versioniert, automatisch geprüft und anschließend kontrolliert ausgeliefert.
Typsichere Inhalte
Inhalte sind modelliert, nicht hingestreut. Strukturfehler fallen beim Build auf — nicht erst beim Besucher.
Qualitäts-Gates
astro check, ESLint, Prettier, Vitest und Playwright. Grün vor jedem Commit — die Disziplin, die Wartbarkeit überhaupt erst möglich macht.
Prinzipien, sichtbar im Code
Haltung, die nicht auf der Über-mich-Seite endet.
- Langweilige Technik gewinnt
- Astro, Svelte, npm — etablierte Werkzeuge statt einer Wette auf den nächsten Trend.
- Typen vor Laufzeit
- TypeScript strict und Zod-Schemas. Der Build ist die erste Code-Review.
- Wenige, bewusste Abhängigkeiten
- Eine Handvoll Laufzeit-Dependencies. Jede ist eine dokumentierte Entscheidung.
- Betrieb wird mitgedacht
- Dieselbe Node-Runtime lokal wie in Produktion; saubere, geprüfte Fehlerpfade im Kontakt-Endpoint.
- Deployment ist Architektur
- Der Lieferprozess ist kein nachträgliches Shell-Skript. Code, Build, Tests und Deployment gehören sichtbar zusammen.
- Betrieb bleibt nachvollziehbar
- Serverlogs, Buildlogs und CI-Ausgaben bilden eine prüfbare Kette vom Commit bis zur laufenden Anwendung.
- Secrets bleiben außerhalb des Codes
- Tokens, API-Keys und produktive Konfiguration liegen in Umgebungsvariablen — nicht im Repository.
Von Commit bis Produktion
Ein Lieferprozess, der mitgedacht ist.
Diese Seite ist nicht nur gebaut, sondern lieferbar gemacht. Änderungen entstehen lokal, werden versioniert, automatisch geprüft und erst danach auf dem Server ausgerollt. Der Deployment-Prozess ist Teil der Architektur — nicht ein nachträglicher manueller Schritt.
- Code
- Änderungen entstehen lokal im Projekt, mit denselben Regeln und Qualitätsansprüchen wie der spätere Build.
- GitHub Repository
- Der relevante Stand wird versioniert und nachvollziehbar gemacht, statt direkt auf dem Server verändert zu werden.
- CI-Gates
- Automatische Prüfungen validieren Typen, Linting, Tests, Build und E2E-Verhalten, bevor ausgeliefert wird.
- Coolify Webhook
- Erst nach erfolgreichen Gates stößt GitHub Actions den kontrollierten Deploy-Prozess in Coolify an.
- Build
- Die Anwendung wird reproduzierbar aus dem versionierten Stand gebaut, inklusive statischer Assets und Server-Bundle.
- Node Runtime
- Der Astro-Node-Server läuft als definierter Prozess in der produktiven Umgebung.
- Live-Seite
- Ausgeliefert wird der geprüfte Stand — beobachtbar über Buildlogs, Serverlogs und den laufenden Betrieb.
Performance & Zugänglichkeit
- Keine Web-Font-Abhängigkeit — ein sorgfältiger System-Font-Stack. Sofortiger erster Paint, kein FOUT.
- Seiteninhalte werden statisch ausgeliefert; interaktiv wird nur eine Handvoll kleiner Inseln — Theme-Wechsel und das Kontaktformular.
- Respektiert prefers-reduced-motion und prefers-color-scheme; Theme-Wechsel ohne Flash.
- Progressive Enhancement: ohne JavaScript bleiben Navigation, Inhalte und alle Texte voll nutzbar.
- Semantisches HTML, Fokus-Management, Skip-Link und durchgehende Tastatur-Bedienung.
- Statische Auslieferung, wo möglich; Node-Runtime nur dort, wo serverseitige Logik wirklich benötigt wird.
- Reproduzierbare Builds aus einem versionierten Git-Stand statt manueller Serveränderungen.
Sicherheit & Recht
- Kontaktformular serverseitig abgesichert: Cloudflare Turnstile, Honeypot und Pflichtfeld-Prüfung, Versand über Resend.
- Secrets ausschließlich über Umgebungsvariablen — niemals im Repository.
- Kontrollierter Rollout: erst grüne CI-Gates (check · lint · test · build · e2e), dann automatischer Deploy — kein ungetesteter Code in Produktion.
- Content-Security-Policy über die native Astro-6-API vorbereitet.
- Deployment über GitHub Actions und Coolify: erst prüfen, dann ausliefern.
- Produktive Secrets liegen ausschließlich in der Laufzeitumgebung und werden nicht committet.
- Die öffentliche Seite beschreibt Prinzipien — keine Webhook-URLs, Tokens, Admin-Pfade oder produktiven Details.
Nichts davon ist spektakulär — und genau das ist der Punkt. Software, die Jahre tragen soll, gewinnt nicht durch das Neueste, sondern durch klare, begründete und beobachtbare Entscheidungen. Der Stack ist nur die sichtbare Oberfläche. Interessant wird es dort, wo Code zuverlässig gebaut, geprüft, ausgeliefert und betrieben wird. Sprechen wir darüber.