Eigenes Projekt · Portfolio · 2026
Gebaut mitNext.js · TypeScript · GSAP
jonatan-greis.de: Diese Website ist meine längste Arbeitsprobe.
In 30 Sekunden scanbar und trotzdem ein Beleg dafür, wie ich baue.
Wer ein Portfolio öffnet, will schnell wissen: welche Rolle, welche Arbeit, welche Person. Für einen Design Engineer ist die Website aber selbst ein Beleg. Deshalb habe ich sie von Grund auf entworfen und in Next.js gebaut, mit eigener Motion, zwei Sprachen und zwei Themes. Hier stehen die Entscheidungen, die man auf den ersten Blick nicht sieht.
- Mein Beitrag
- Konzept, Gestaltung, Motion und Umsetzung. Gebaut mit KI-Unterstützung in Cursor und Claude Code.
- Stack
- Next.js 16, TypeScript, Tailwind CSS 4, GSAP, Lenis, WebGL
- Stand
- Live auf jonatan-greis.de, statisch vorgerendert auf Vercel
01
Erst lesbar, dann eindrucksvoll.
Die Startseite folgt einer festen Reihenfolge: Rolle, Arbeit, Person. Motion darf diese Reihenfolge begleiten, aber nie aufhalten. Alles, was sich bewegt, hat einen Ruhezustand für reduzierte Bewegung.
Ein Takt für Scroll und Animation
Smooth Scroll läuft im selben Ticker wie die Animationen. Scrollgebundene Bewegung hört auf dieselbe Uhr und läuft deshalb nicht auseinander.
Zwei Sprachen ohne Umweg
Deutsch liegt ohne Präfix unter /, Englisch unter /en. Eine Weiterleitung auf Server-Ebene hält beide Varianten statisch vorgerendert.
Zwei Themes, ein Token-Set
Farben, Abstände und Bewegungskurven sind Tokens. Hell und Dunkel teilen dieselben Regeln; der Wechsel läuft als kreisförmige View Transition.
02
Drei Stellen, an denen das Naheliegende nicht gereicht hat.
Jeweils: was ich beobachtet habe, was ich daraufhin gebaut habe und was es kostet.
01
Seitenwechsel mit harter Frist
- Beobachtung
- Beim schnellen Hin- und Herklicken blieb der Übergang hängen. Das Warten auf die Zielseite lief nur über Frame-Polling, und das kam bei vielen Wechseln hintereinander nicht mehr hinterher.
- Entscheidung
- Der Übergang wartet, bis die Zielseite bereit ist, und bekommt zusätzlich eine harte Frist. Ein überholter Wechsel bricht sauber ab.
- Trade-off
- Auf langsamen Verbindungen wartet ein Wechsel kurz, statt eine halb geladene Seite zu zeigen.
02
Ein Shader, der sich erholt
- Beobachtung
- Der WebGL-Verlauf im Footer kam nach Seitenübergängen mit SVG-Filter nicht zurück. Ein Resize half nicht, und den Kontext gezielt freizugeben, machte den nächsten Start kaputt.
- Entscheidung
- Das Canvas wird bei Bedarf neu montiert und bekommt so eine frische Fläche. Den Kontext gebe ich nur beim Verlassen frei. Ohne WebGL oder bei reduzierter Bewegung bleibt ein ruhiger Verlauf.
- Trade-off
- Mehr Lifecycle-Code für einen Effekt, der nur im Footer sitzt.
03
Gleiches HTML auf Server und Client
- Beobachtung
- Nach dem ersten Production-Deploy meldete React auf der Startseite einen Hydration-Fehler. Beim Vorrendern lief die Seite intern unter /de, im Browser unter /. Das Kontakt-CTA fehlte deshalb im ausgelieferten HTML.
- Entscheidung
- Ein kleiner Hook liefert überall den öffentlichen Pfad. Alle zwölf Stellen, die den Pfad lesen, nutzen ihn; im Browser ändert sich dadurch nichts.
- Trade-off
- Eine Abstraktion mehr, die man kennen muss, bevor man den Pfad liest.
03
Was sonst noch drinsteckt.
Kleinere Systeme, die zusammen den Eindruck von Ruhe ergeben.
Playground
24 interaktive UI-Snippets in einer eigenen Engine ohne Abhängigkeiten, mit einer gemeinsamen Animationsuhr.
Privat und schnell
Schriften liegen lokal, es gibt keine Cookies und kein Tracking, dazu eine strenge Content-Security-Policy.
Regeln als Tests
Welche Cases öffentlich sind, ob beide Sprachen vollständig sind und ob Stilregeln eingehalten werden, prüfen automatische Tests.
04
KI schreibt mit. Entscheiden muss ich.
Die Seite ist mit KI-Unterstützung entstanden, in Cursor und Claude Code. Struktur, Gestaltung und Motion lege ich fest, jede Änderung prüfe ich im Browser und auf dem Handy. Was sich bewährt, landet als Entscheidung in Architektur-Notizen und als Regel in Tests, damit es beim nächsten Umbau hält.
