Die Bausteine dieser Website

Farben stehen an genau einer Stelle: als CSS-Variablen im Wurzel-Selektor, ein zweites Mal überschrieben für das dunkle Theme. Tailwind liest sie über rgb(var(--surface) / <alpha-value>), damit Abstufungen wie bg-surface/80 weiter funktionieren.

Der Gewinn zeigt sich im Komponentencode: dort steht bg-surface text-text — kein einziges dark:. Vorher waren es 54 solcher Präfixe, und jeder war eine Stelle, an der ein Element in nur einem Theme richtig aussah.

Die Werte sind nicht nach Gefühl gewählt. Der schlechteste Kontrast von Fließtext über den farbigen Flächen im Hintergrund liegt bei 6,7:1 im dunklen und 7,5:1 im hellen Theme — gemessen am hellsten Punkt jeder Fläche, nicht am Durchschnitt.

Die alte Version hatte die Tailwind-Skala global vergrößert: text-base waren 19 px statt 16 px. Auf dem Desktop fiel das kaum auf, auf dem Handy wirkte jede Seite aufgeblasen und Überschriften brachen an unpassenden Stellen um.

Jetzt gilt wieder die Standardskala, und nur die drei Display-Größen sind fluide: clamp(2.25rem, 6vw, 4rem) für die Seitenüberschrift. Zwischen Handy und großem Monitor skaliert sie stufenlos, ohne dass für jede Breite eine eigene Regel nötig wäre.

Die Monospace-Schrift trägt Datumsangaben, Kategorien und kleine Marken. Sie markiert Technisches und hält es zugleich vom Fließtext getrennt.

Mehr als drei Schaltflächen-Varianten braucht eine Portfolio-Seite nicht: eine für die Hauptaktion, eine für alles Gleichrangige, eine für Navigation im Header.

Alle drei haben min-height: 44px. Das ist die Größe, die eine Fingerkuppe zuverlässig trifft — die häufigste Ursache für Fehlklicks auf Mobilgeräten sind zu kleine Ziele, nicht zu kleine Schrift.

Den Fokusrahmen definiert eine einzige Regel für alles Interaktive, gespeist aus --ring. Wer mit der Tastatur navigiert, sieht überall denselben Rahmen, und keine neue Komponente kann ihn vergessen.

Eine Karte trägt Titel, zwei bis drei Sätze Ergebnis, den Stack als Chips und die Links. Mehr nicht — wer Projekte überfliegt, liest Titel und Stack, alles andere ist Beiwerk.

Anfangs war die erste Kachel doppelt so groß wie die übrigen. Das sah dynamischer aus, hat aber eine Rangfolge behauptet, die es nicht gibt: alle Projekte sind gleich echt. Jetzt sind alle Kacheln gleich groß, das Raster ist ruhig, und die Reihenfolge allein setzt den Schwerpunkt.

Beim Überfahren ändert sich nur die Rahmenfarbe. Karten, die sich anheben oder vergrößern, lassen den Text springen — bei sechs Kacheln nebeneinander wird das schnell unruhig.

Die Technologien standen zuerst neben den Projekten in derselben Reihe. Das las sich, als gehörten sie zusammen — tatsächlich beantworten sie eine andere Frage: nicht was habe ich gebaut, sondern womit arbeite ich.

Jetzt haben sie einen eigenen Abschnitt, eine Karte je Kategorie: DevOps, Datenbanken, Backend, Frontend, Werkzeuge. Die Gruppierung erzählt mehr als eine alphabetische Liste, weil sie den Schwerpunkt sichtbar macht.

Bewusst ohne Sterne oder Prozentbalken. Solche Bewertungen behaupten eine Genauigkeit, die niemand prüfen kann; die Einordnung liefern Werdegang und Projekte.

Der Werdegang ist die einzige Stelle, an der Reihenfolge tatsächlich Bedeutung trägt — also bekommt er die einzige Linie auf der Seite.

Zeiträume stehen in Monospace über der Position. Sie sind so kurz, dass sie auf jeder Breite in eine Zeile passen, und durch die feste Zeichenbreite stehen sie untereinander bündig.

Die Punkte sitzen auf der Linie und sind vom Vorlesen ausgenommen: sie tragen keine Information, die nicht schon im Text steht.

Weil alles auf einer Seite liegt, gibt es drei Zugänge. Der Header führt zu Abschnitten und zum Lebenslauf. Unter 768 px wandern die Links ins Menü, sichtbar bleiben Marke, Theme, Sprache und der Lebenslauf-Knopf.

Rechts markiert die Punktleiste den aktuellen Abschnitt. Ein IntersectionObserver beobachtet dafür einen schmalen Streifen um die Bildschirmmitte — ohne diesen Streifen springt die Markierung bei langen Abschnitten hin und her. Ab 1024 px eingeblendet, darunter wäre sie nur im Weg.

Alle Ankerziele haben scroll-margin-top. Ohne das schiebt der klebende Header genau die Überschrift unter sich, zu der man gerade gesprungen ist.

Der Vorgänger war ein Sternenfeld: 654 Zeilen Canvas, eine Zeichenschleife auf jeder Seite, spürbar auf dem Akku. Ersetzt hat ihn ein radial-gradient-Muster als Punktraster — reines CSS, keine Zeichenschleife.

Darüber ziehen drei Farbflächen langsam ihre Bahn. Animiert wird ausschließlich transform, also übernimmt der Compositor die Arbeit; Layout und Paint bleiben unberührt. Im dunklen Theme sind es tiefe statt heller Töne: sie färben den Grund, ohne ihn aufzuhellen, und der Text darüber bleibt lesbar.

Das Raster folgt beim Scrollen leicht versetzt, der weiche Schein folgt dem Zeiger — Letzteres nur bei pointer: fine, auf Touchgeräten wird der Listener gar nicht erst registriert. Bei prefers-reduced-motion: reduce steht alles still.