So ist diese Website gebaut

Ein Recruiter hat etwa eine Minute. Diese Website hat deshalb nur eine Aufgabe: zeigen, wer ich bin, was ich baue und wie man mich erreicht, und dann zurücktreten. Diese Notiz erzählt, wie ich dahin gekommen bin, von A bis Z, mit den Entscheidungen und vor allem mit den Absagen.

Was ich wollte, bevor ich ein Werkzeug wählte

Ich habe mit Anforderungen angefangen, nicht mit Code.

Eine leichte Seite, denn viele, die mir schreiben, öffnen die Seite auf dem Smartphone, über 4G.
Drei Sprachen, Französisch, Englisch und Deutsch, weil ich in Deutschland lebe und aus Kamerun komme.
Eine Seite, die ich ändern kann, ohne Code anzufassen.
Eine Seite, die nicht so aussieht, wie ein Generator sie baut: kein violetter Verlauf, kein Milchglas, kein Raster aus Icon-Karten, keine hohlen Sätze.
Eine Palette, die von Anfang an feststeht: sechs Blautöne und ein Weiß, von Mitternachtsschwarz bis Königsblau.

Entscheiden durch Hinsehen, nicht durch Lesen

Ich wähle ein Design nicht nach einer Beschreibung. Für jede visuelle Entscheidung habe ich eine gerenderte Seite mit mehreren Varianten nebeneinander verlangt und vor dem Bildschirm entschieden.

Dadurch habe ich vieles verworfen. Meine erste Richtung, ein Datenblatt für ein elektronisches Bauteil mit Pinbelegung und Teilenummer, war zu verspielt und überhaupt nicht modern, also habe ich sie fallen gelassen. Eine WebGL-Partikelwelle gefiel mir nicht. Eine Aurora auch nicht. Geblieben ist ein Nachthimmel mit blauem Schimmer am Horizont. Beim Logo habe ich mehrere Wege verglichen, zu dünne Monogramme verworfen und mich für ein massives Y mit drei Spitzen entschieden, aus dessen Mitte ein Ring herausgeschnitten ist. Jede Absage hat den Stil geschärft.

Der Stack: Astro, TypeScript, schlichtes CSS

Astro erzeugt statisches HTML und liefert JavaScript nur dort, wo sich etwas bewegt. Genau das war nötig: kein UI-Framework, das geladen werden muss, nur um Text und Bilder zu zeigen. TypeScript für die Module mit Logik, von Hand geschriebenes CSS für den Rest, kein Styling-Framework.

Das Ergebnis ist messbar. Die Startseite lädt etwa 9 KB eigenes JavaScript. Das einzige schwere Stück ist Three.js (137 KB komprimiert) für die Wand mit Technologie-Logos. Es wird nur geladen, wenn die Wand in die Nähe des Bildschirms kommt, und nie bei Besuchern, die weniger Bewegung wünschen, Daten sparen oder mit 2G unterwegs sind.

Eine Schrift, bei mir gehostet

Poppins trägt alles, vom Namen im Hero bis zu den Beschriftungen im Formular. Ich hoste sie selbst, nur in vier Schnitten, und lade die zwei im ersten Bildschirm genutzten vorab. Keine Anfrage an einen Schriftdienst, also keine externe Abhängigkeit und kein Springen des Layouts.

Drei Sprachen, eine Quelle

Die Seiten entstehen aus demselben Komponentenbaum. Die Texte liegen in einer Datei pro Sprache, das Gemeinsame (Links, Projekte, Technologien, Farben) in einer geteilten Datei. Jede Seite deklariert ihre Fassungen mit hreflang, und die Sitemap verknüpft sie, damit Google die drei Sprachen als eine übersetzte Seite behandelt und nicht als Duplikate. Eine Sprache hinzufügen oder einen Satz korrigieren heißt nie, eine Komponente anzufassen.

Ein Dashboard, damit ich keinen Code mehr anfasse

Das ist die Entscheidung, mit der ich am zufriedensten bin. Ein kleiner Node-Server, gestartet mit npm run admin, gibt mir eine Oberfläche, um alles zu bearbeiten: Texte in drei Sprachen, Projekte, Werdegang, Bilder, Lebensläufe, SEO-Einstellungen.

Er kommt ohne Abhängigkeiten aus. Er lauscht nur auf dem lokalen Rechner, nie im Netzwerk. Das Passwort wird mit scrypt gehasht, die Sitzung ist geschützt, jede Änderung verlangt ein CSRF-Token und eine Herkunftsprüfung, und jede hochgeladene Datei wird an ihrer echten Signatur und Größe geprüft, nicht an ihrem Namen. Vor dem Speichern prüft er, ob die Daten die richtige Form haben: Wenn ich ein Feld falsch setze, lehnt er ab, statt die Seite kaputt zu machen.

Die Bewegung

Der Himmel im Hero ist ein Canvas mit einigen hundert Sternen auf drei Tiefenebenen, die funkeln, driften und dem Cursor ein wenig folgen. Außerhalb des Bildschirms pausiert er. Beim ersten Laden einer Sitzung lässt ein kurzes Intro von unter vier Sekunden das Logo an seinen Platz in der Navigationsleiste fliegen und kommt in dieser Sitzung nicht wieder.

All das folgt einer Regel: Wer weniger Bewegung wünscht oder Daten spart, sieht ein Standbild, und die Seite bleibt vollständig. Bewegung ist ein Plus, nie eine Voraussetzung.

Die Projekte: das echte Produkt zeigen

Für jedes Projekt wollte ich echte Screenshots der laufenden Anwendung, keine Mock-ups. Wenn eine Anwendung nicht lief, habe ich sie auf einer Kopie gestartet, mit einer Wegwerf-Datenbank und von mir erfundenen Demodaten: erfundene Vereinsnamen, zufällig gezogene Ergebnisse. Persönliche Angaben, die in Dokumenten auftauchten, habe ich vor der Veröffentlichung gelöscht, auch in den Pixeln eines Bildes.

Wenn ein Projekt ein unbestellter Vorschlag ist, wie der für eine kamerunische Hähnchenkette, sagt die Seite das. Jedes Bild trägt außerdem in seinen Metadaten seine Herkunft: echter Screenshot, frei lizenziertes Foto oder Rendering. Ich veröffentliche nichts, dessen Herkunft ich nicht belegen kann.

SEO, behandelt wie Code

Die Seite ist vollständiges HTML und für Suchmaschinen ohne Skriptausführung lesbar. Jede Seite hat ihre kanonische Adresse, ihre Sprachalternativen und ihre strukturierten Daten (die Person, die Website, jedes Projekt, der herunterladbare Bericht, das Video). Die Sitemap trägt echte Änderungsdaten, und eine Datei llms.txt fasst die Seite für KI-gestützte Suchwerkzeuge zusammen. Die Vorschaubilder zum Teilen erzeugt ein Skript.

Vor allem läuft ein Prüfskript (npm run seo) über alle gebauten Seiten und schlägt fehl, wenn etwas kaputt ist: Titel, Beschreibung, interner Link, Rückverweis zwischen Sprachen, Bild ohne Alternativtext. Ich führe es nach jeder Änderung aus.

Die Werkzeuge, ehrlich

Ich habe diese Seite mit einem KI-gestützten Programmierassistenten gebaut, der einen großen Teil des Codes geschrieben und die Prüfungen ausgeführt hat. Die Entscheidungen sind meine: das Briefing, die Anforderungen, die Palette, was verworfen und was behalten wurde. Ich lese, was veröffentlicht wird, und liefere nichts aus, was ich nicht verstehe.

Was nicht perfekt ist

Am Computer ist die Startseite wegen der 3D-Wand etwas langsamer als auf dem Smartphone. Ich habe etwa 98 von 100 Punkten bei der Performance auf dem Smartphone gemessen und 85 am Computer, mit 100 bei Barrierefreiheit, Best Practices und SEO. Die 3D-Wand zu verbessern steht auf meiner Liste.
Das Kontaktformular sendet eine E-Mail und bestätigt keinen Termin.
Hier läuft kein Tracking-Skript: Ich weiß also nicht, wie viele Leute vorbeikommen, und das ist mir lieber so.