Das ist die Seite, auf der du gerade bist. Es ist ein Next.js-14-Projekt, gebaut und gepflegt als kleines Produkt statt als Template – die Codebasis ist öffentlich, die Details unten sind also alle nachprüfbar. Sie erreicht bei Lighthouse 99/100 auf dem Desktop und 97/100 auf dem Mobilgerät, mit 100 bei Barrierefreiheit und SEO.
Was drinsteckt
-
12 Sprachen: Die Website ist auf Englisch, Deutsch, Spanisch, Französisch, Hindi, Italienisch, Japanisch, Koreanisch, Portugiesisch, Russisch, Türkisch und Chinesisch verfügbar. Ein typisierter Sprachkontext und eine Übersetzungszuordnung steuern den Umschalter, der sich deine Wahl merkt und das
lang-Attribut der Seite aktualisiert, sodass Screenreader und Suchmaschinen die richtige Sprache lesen. Jeder Text ist abgedeckt, einschließlich des Kontaktformulars. -
Ein Partikel-Hintergrund, der schnell bleibt: Die dem Cursor folgenden Punkte werden auf einem Canvas gezeichnet. Eine frühe Version ruckelte, weil sie bei jeder Mausbewegung die Canvas-Position maß und so eine ständige Layout-Neuberechnung erzwang. Das Zwischenspeichern dieser Messung entfernte das Ruckeln, und das Lazy-Loading der Partikel hält sie aus dem ersten Rendern heraus – was den Großteil dessen ausmacht, was den Desktop-Score auf 99 gebracht hat.
-
Analytics, die Werbeblocker nicht heimlich kaputtmachen: Analytics-Skripte, die von Drittanbieter-Domains geladen werden, werden von Blockern wie uBlock und Brave stillschweigend verworfen und verlieren so 20–40 % der Ereignisse ohne jede Warnung. Das Leiten der Analytics über die eigene Domain der Website hält die Daten First-Party und intakt. Umami übernimmt die datenschutzfreundlichen Statistiken; Google Tag Manager übernimmt den Rest.
-
SEO-Grundlagen sauber umgesetzt: Strukturierte Daten für die Person und jedes Projekt, korrekte Sprach-Tags über alle 12 Versionen jeder Seite, kanonische URLs, damit Übersetzungen nicht miteinander konkurrieren, und pro Projekt erzeugte Social-Preview-Karten.
-
Barrierefreiheit: Ein Skip-to-Content-Link, sichtbare Fokusumrandungen für Tastaturnutzer, AA-konformer Textkontrast, dekorative Animationen, die vor Screenreadern verborgen sind, und ein Sprachmenü, das als ordentlich navigierbares Markup statt als gestyltes div gebaut ist.
-
Inhalte sind einfach Markdown: Ein Projekt hinzuzufügen bedeutet, eine Markdown-Datei in den richtigen Sprachordner zu legen – es erscheint beim nächsten Deploy, vollständig typisiert, ohne Code-Änderungen. Seitenaufrufe werden von einer kleinen serverlosen Funktion gezählt, die IPs hasht, statt sie zu speichern, es gibt also keine Cookies oder personenbezogenen Daten.
Warum es wichtig ist
Die Website dient zugleich als funktionierendes Beispiel dafür, wie der Rest dieser Projekte gebaut ist – Performance, datenschutzfreundliche Analytics, Mehrsprachigkeit und Barrierefreiheit, alles an einem Ort, den man inspizieren kann. Da das Repository offen ist, lässt sich der Code gegen die Beschreibung prüfen.