Entwickler haben die schlechte Angewohnheit, Schweizer Taschenmesser zu bauen, wenn sie eigentlich nur eine scharfe Klinge brauchen. Wir greifen zu schweren Frontend-Frameworks, noch bevor die erste Zeile HTML geschrieben ist. Wir hängen Animationsbibliotheken, State-Management-Tools und Build-Pipelines an, die leistungsstark genug sind, um ein kleines Unternehmen zu führen. Dann wundern wir uns, warum unsere Portfolio-Seiten drei Sekunden zum Rendern brauchen, warum die Navigation auf Mobilgeräten hakt und warum Recruiter abspringen, noch bevor sie die Projekte sehen, in die wir Monate investiert haben.
Ich habe bei meinem neuesten Portfolio einen anderen Weg gewählt. Ich habe mich vom Ökosystem der endlosen Abhängigkeiten entfernt und die gesamte Seite mit semantischem HTML und sauberem CSS gebaut. Keine JavaScript-Frameworks. Keine Build-Schritte. Keine Drittanbieter-Animations-Engines. Nur die Plattform selbst, das Layout über CSS Grid und Flexbox, und eine Designphilosophie, die Geschwindigkeit und Klarheit als Features betrachtet und nicht als nachträgliche Überlegungen.
Das Ergebnis ist leicht, schnell und professionell. Hier ist genau mein Ansatz.
Beginnen Sie mit dem Fundament
Die meisten Überentwicklungen beginnen am Fundament. Ein Portfolio muss keine Single-Page-Application sein. Es muss Ihre Arbeit zeigen, den Leuten mitteilen, wie sie Sie kontaktieren können, und sich dann aus dem Weg machen. Ich habe semantisches HTML verwendet, weil der Browser bereits weiß, wie er ein nav, ein article und ein footer darstellt. Wenn man das richtige Element für den richtigen Zweck verwendet, erhält man Barrierefreiheit, Sichtbarkeit in Suchmaschinen und responsives Verhalten quasi geschenkt. Zudem schreibt man weniger Code. Ein div mit fünf ARIA-Attributen ist nur eine wortreiche Imitation eines button. Das habe ich komplett vermieden.
Für das Layout sind CSS Grid und Flexbox mehr als ausreichend. Grid übernimmt die Makrostruktur: die allgemeinen Seitenabschnitte, die Projektgalerie, die Ausrichtung der Hauptblöcke. Flexbox verwaltet die Mikro-Interaktionen: Navigationslinks innerhalb der Kapsel, das Zentrieren von Text in Karten, das Schieben eines Footers an den unteren Rand des Viewports. Zusammen ersetzen sie jeden Grund, warum man 2018 ein Zwölf-Spalten-Grid-Framework hätte importieren müssen. Der Code bleibt lesbar. Die CSS-Datei bleibt klein.
Farbe, Typografie und Zurückhaltung
Ich wollte, dass sich das Portfolio in dem Moment, in dem es lädt, ruhig anfühlt. Der Hintergrund nutzt eine helle Basis mit subtilen radialen Verläufen. Nichts Aggressives. Der Verlauf hat eine geringe Deckkraft und erzeugt eine sanfte Tiefe, die verhindert, dass die Seite flach wirkt, ohne nach Aufmerksamkeit zu schreien. Er lädt sofort, da es reines CSS ist. Es gibt keine Hero-Images, die komprimiert werden müssen, keine WebP-Fallbacks, die verwaltet werden müssen, und keine JavaScript-Lazy-Loading-Bibliotheken, die konfiguriert werden müssen.
Die Typografie trägt die Persönlichkeit. Ich habe Outfit mit Ovo kombiniert. Outfit, eine geometrische Sans-Serif, übernimmt den gesamten UI-Text: Navigationsbeschriftungen, Button-Texte, Fließtext, Metadaten. Sie ist auf Bildschirmen gestochen scharf und bleibt auch in kleinen Größen lesbar. Ovo, eine Serifenschrift mit mittlerem Kontrast, dient den Headern und großen Überschriften. Diese Kombination verleiht der Seite ein ruhiges, redaktionelles Gefühl. Es sieht designt aus, nicht nach einem fertigen Theme. Am wichtigsten ist: Beide Schriftarten werden über einen einzigen Aufruf eines Font-Services oder über selbst gehostete Dateien geladen. Es gibt keinen Layout-Shift, kein Flackern von unformatiertem Text und kein Skript, das die Schriftstärken nach dem initialen Rendering austauscht.
Das schwebende Kapsel-Menü
Die Navigation ist der Punkt, an dem Portfolios oft unter ihrem eigenen Gewicht zusammenbrechen. Vollbild-Overlay-Menüs, gestaffelte Animationsskripte und Hamburger-Icons, die vierzig Zeilen JavaScript benötigen, um eine Klasse umzuschalten. Das alles wollte ich nicht.
Ich habe ein schwebendes, glassmorphisches Kapsel-Menü gebaut. Es ist ein einzelner horizontaler Container, an den Rändern abgerundet und fixiert am oberen Rand des Viewports positioniert. Der Glassmorphismus entsteht durch eine halbtransparente Hintergrundfarbe und die Eigenschaft backdrop-filter: blur(). Es schwebt über dem Inhalt, ohne ihn zu verdecken, bietet sofortigen Zugriff auf jeden Abschnitt und lässt sich auf kleineren Viewports elegant zusammenziehen, ohne dass ein komplettes Redesign nötig ist. Der Effekt wirkt modern, weil der Browser das Compositing übernimmt und nicht eine Canvas-Library.