Zurück zum Portfolio
Persönliches Portfolio — Erkundbare Projektkarte

Persönliches Portfolio — Erkundbare Projektkarte

Ich habe mein Portfolio von Grund auf neu gebaut. Die alte Website war eine dunkle neo-brutalistische Seite, die ein Tailwind-CDN-Skript über ein JSON-Raster laufen ließ; diese ist ein statischer Astro-5-Build mit React-Islands nur dort, wo die Interaktion sie verlangt. Herzstück ist die Arbeitsseite — ein kartenartiges Board, auf dem 36 Projekte in fünf Territorien liegen, eines je Disziplin. Das Mausrad zoomt am Cursor, Ziehen schwenkt mit Schwung, zwei Finger zoomen per Pinch, und die Filter-Chips fliegen die Ansicht zu einer Kategorie und dimmen den Rest. Beim Hineinzoomen werden aus Pins Karten. Jeder Knoten ist ein echter Link, sodass jedes Projekt auch als eigene statische Seite gebaut wird, die bereits mit geöffnetem Dialog erscheint. Die Startseite ist eine Folge scrollgesteuerter Abschnitte: ein gepinntes Hero mit einem Sechs-Slide-Karussell, ein Über-mich-Abschnitt, dessen Absätze sich Buchstabe für Buchstabe füllen, während sich ein Bildstapel aufbaut, ein Fisheye-Reel mit Kurzfakten, ein Skills-Akkordeon und ein Projekt-Reel, dessen Spur beim Herunterscrollen seitwärts läuft — auf Telefonen ebenso wie auf Desktops. Alle Inhalte liegen in einer einzigen JSON-Datei. Es gibt kein CMS, keine Datenbank und keine Server-Laufzeit.

Technologien

Astro 5 React 19 TypeScript GSAP Lenis Tailwind CSS View Transitions SEO

Herausforderungen

Eine erkundbare Karte wird schnell desorientierend und schnell unzugänglich. Zugleich musste es ein statischer Build ohne Server bleiben und 36 Projekten dennoch echte, teilbare URLs geben — und die Bewegung musste auf dem Telefon standhalten.

Lösungen

Jeder Kartenknoten ist ein Anker auf eine zur Build-Zeit erzeugte Seite, sodass das Board navigierbar, teilbar und crawlbar bleibt — auch ohne JavaScript. Der Detailgrad ersetzt beim Zoomen Pins durch Karten, und die Filter-Chips fliegen die Ansicht, statt sie neu zu laden. Abschnitte werden mit GSAP ScrollTrigger gepinnt und über die Scrollposition statt über einen Ticker gesteuert, was sie auf Touch-Geräten ehrlich hält. Die gesamte Seite wird als statisches HTML aus Astro ausgeliefert, React läuft nur in der einen Komponente, die es wirklich braucht.