Wie diese Website gebaut ist: statisch, schnell und gut auffindbar

Ein Portfolio hat zwei Aufgaben: einen guten ersten Eindruck machen und von den richtigen Leuten gefunden werden. Beides hängt an Entscheidungen, die lange vor dem ersten gestalteten Pixel fallen: wie die Seite gebaut ist, wo sie läuft und was sie weglässt.

Hier steht, wie diese Website aufgebaut ist und warum.

1. Warum statisch: nichts, wo man einbrechen kann

Jede Seite dieser Website ist einfaches HTML, einmal gebaut und dann als Datei ausgeliefert. Es gibt keine Datenbank, keinen Admin-Login, keine Plugins und keinen Servercode, der bei jeder Anfrage läuft.

Das wird jedes Jahr wichtiger. Automatisierte Scanner suchen rund um die Uhr nach bekannten Lücken in veralteten CMS-Installationen, Plugins und Login-Formularen, und KI macht das Finden und Ausnutzen solcher Lücken schneller und billiger. Eine statische Seite nimmt das meiste davon vom Tisch: kein Login zum Erraten, kein Plugin zum Patchen und keine Datenbank, die leaken kann. Übrig bleiben Hosting, Domain und Mail, und die sind eigens abgesichert (mehr dazu im Beitrag zur Absicherung dieser Website).

Statisch heißt nicht schlicht. Die Seite hat Animationen, ein kleines Spiel, zwei Sprachen und einen Blog. All das steckt schon beim Build im HTML, Besucher bekommen also das fertige Ergebnis.

2. Der Stack: Astro, Tailwind, Motion

Astro baut die Seiten. Es rendert alles zu HTML und liefert JavaScript nur dort aus, wo eine Komponente es wirklich braucht. Content Collections halten die Blogbeiträge typisiert und geprüft, und das i18n-Routing kümmert sich um Deutsch und Englisch.
Tailwind CSS trägt das Design-System: Farben, Schriftrollen, Abstände und Radien liegen als Tokens an einer Stelle, damit jede Komponente dieselbe visuelle Sprache spricht.
Motion und Lenis übernehmen Animationen und sanftes Scrollen. Im Browser läuft kein Frontend-Framework, nur kleine Scripts pro Komponente.
Cloudflare liefert die Dateien aus seinem Netz nah am jeweiligen Besucher aus, mit Security-Headern und Cache-Regeln in einer einzigen Datei.

Jeder Push auf den Hauptzweig durchläuft Typprüfung, Build und Tests, und Cloudflare veröffentlicht die Seite aus diesem Zweig. Ein Build, der scheitert, etwa an der Sicherheitsprüfung, geht nie live.

3. Performance: schnell durch Weglassen

Geschwindigkeit kommt vor allem von dem, was eine Seite nicht lädt:

CSS steckt direkt im HTML. Das ganze Stylesheet ist klein genug dafür, und das spart eine Anfrage, die das Rendern blockieren würde.
Schriften liegen auf dem eigenen Server als kompakte WOFF2-Dateien, ohne Anfragen an fremde Font-Dienste.
Bilder gibt es in mehreren Größen und modernen Formaten, der Browser nimmt das passende für den Bildschirm. Bilder weiter unten laden erst bei Bedarf.
Schwere Teile laden nur, wenn sie gebraucht werden. Das 3D-Logo, das Spiel und der Rausch-Hintergrund sind eigene Bundles, die erst bei Bedarf geladen werden.
Animationen laufen, wo möglich, in CSS. Scroll-gesteuerte Animationen folgen dem Scrollen, ohne den Hauptthread zu blockieren.
Pixel-Art wird gezeichnet, nicht heruntergeladen. Die Prozess-Szenen und diese Blog-Cover sind ein paar Kilobyte Code statt schwerer Bilder oder Videos.
Dateien mit Hash im Namen werden ein Jahr gecacht. Eine geänderte Datei bekommt einen neuen Namen, Besucher sehen also nie eine veraltete Version.

Und wer weniger Bewegung bevorzugt: Jede Animation richtet sich nach der Einstellung für reduzierte Bewegung.

4. SEO: klare Signale für Suchmaschinen

Jede Seite hat ihren eigenen Titel, ihre eigene Beschreibung und eine kanonische URL.
Deutsche und englische Seiten verweisen per hreflang aufeinander, und die Sitemap listet beide Sprachen.
Strukturierte Daten beschreiben die Website in einer Form, die Suchmaschinen direkt lesen: die Person, die angebotenen Leistungen, die FAQ und jeden Blogbeitrag.
Open-Graph-Tags sorgen für eine ordentliche Vorschau, wenn ein Link geteilt wird.
Das HTML ist semantisch: echte Überschriften, Listen und Landmarks. Das hilft Suchmaschinen und Screenreadern gleichermaßen.

5. GEO: in KI-Antworten gefunden werden

Immer mehr Menschen fragen einen KI-Assistenten statt einer Suchmaschine. Generative Engine Optimization (GEO) sorgt dafür, dass die Antwort dich enthalten kann:

KI-Crawler sind ausdrücklich erlaubt in der robots.txt, damit eine spätere Pauschalregel sie nicht aus Versehen aussperrt.
Eine llms.txt-Datei fasst die Website in einfachem Text zusammen: wer ich bin, was ich anbiete, die FAQ und die Blogbeiträge.
Strukturierte Daten und eine klare FAQ geben Assistenten Fakten, die sie zitieren können, statt zu raten.
Links zur KI-Zusammenfassung öffnen ChatGPT, Claude, Gemini oder Perplexity mit einer Frage zur gerade gelesenen Seite.

6. Sicherheit: streng von Anfang an

Eine Content Security Policy mit Hashes für jedes Inline-Script und jeden Inline-Style. Der Build bricht ab, sobald eine Seite Inline-Styles oder Event-Handler enthält, damit die Policy nicht aus Versehen aufgeweicht wird.
HSTS, nur HTTPS und mindestens TLS 1.2.
Keine Cookies, also auch kein Cookie-Banner.
DNSSEC, CAA-Einträge und Zertifikats-Alarme für die Domain, dazu SPF, DKIM und DMARC für die Mail.

7. Best Practices: aktuell bleiben

Eine Website ist nur so aktuell wie ihr letztes Update. Deshalb werden vor jedem Release alle Abhängigkeiten aktualisiert, und bei jeder neuen Hauptversion wird das Changelog auf Breaking Changes gelesen. Dependabot schlägt jede Woche Updates vor, und die CI-Actions sind auf exakte Versionen festgenagelt.

Der Code selbst folgt der Plattform: Native Browser-Funktionen wie scroll-gesteuertes CSS und das inert-Attribut kommen zuerst, Bibliotheken nur dort, wo sie etwas bieten, das die Plattform nicht kann. Barrierefreiheit gehört zum Build: sichtbare Fokus-Stile, Textkontrast nach WCAG AA und Menüs, in die man nicht hineintabben kann, solange sie geschlossen sind.

Die Kurzfassung

Statisch: einfaches HTML, keine Datenbank, kein Login, kaum Angriffsfläche.
Stack: Astro, Tailwind CSS, Motion, Cloudflare.
Performance: CSS im HTML, eigene Schriften, responsive Bilder, Bundles bei Bedarf, CSS-Animationen.
SEO: Titel, Canonicals, hreflang, Sitemap, strukturierte Daten.
GEO: KI-Crawler erlaubt, llms.txt, zitierbare FAQ, Links zur KI-Zusammenfassung.
Sicherheit: strenge CSP, nur HTTPS, keine Cookies, abgesicherte Domain und Mail.

Wenn du eine Website auf demselben Fundament möchtest, melde dich.