01Überblick
Mein persönliches Portfolio zeigt Arbeiten aus Illustration, Design und Art Direction. Es lief ursprünglich auf Readymag und wurde auf Next.js neu entwickelt, mit einer Dramaturgie in drei Ebenen.
02Ausgangslage
Die Readymag-Seite war gestalterisch eigenständig, aber technisch geschlossen: Ohne JavaScript blieb die Seite leer, Struktur und Auslieferung ließen sich nicht beeinflussen.
03Herausforderung
52 Arbeiten und drei Loop-Videos zügig ausliefern, ohne die verspielte Typografie und Bewegung der Vorlage zu verlieren.
04Strategie
Bewegung nur dort, wo sie trägt. Alles andere als schnelle, statische Seiten.
ADrei Ebenen
Eine verspielte Typo-Landing, ein schwarzes Statement-Band und eine ruhige Galerie.
BBewegung gezielt
Animationen nur in der Landing, die Galerie kommt ohne Animationsbibliothek aus.
CNatives Raster
Mehrspaltiges CSS-Layout statt JavaScript-Masonry, dadurch kein Layoutsprung.
05Gestaltung
Das Orange des ursprünglichen Portfolios bleibt Leitfarbe und zieht sich bis in dieses Studio.
Typografie
Inter, JetBrains Mono und Caveat
Farben
- Weiß#FFFFFF
- Schwarz#000000
- Orange#FF9900
06Entwicklung
Umgesetzt mit Next.js, React und Tailwind CSS. Ein Audit mit getrennten Prüfungen für Design, Barrierefreiheit und Performance hat Animationscode, Videoladeverhalten und Schriftschnitte gezielt verschlankt.
Technologie
Next.js, React, Tailwind CSS, Framer Motion, Vercel
Besondere Funktionen
- Masonry-Galerie in reinem CSS
- Videos mit Poster-Frames
- Sprunglink und Fokusführung
07Ergebnis
Ein Portfolio mit eigener Persönlichkeit, auf einer Technik, die ich vollständig kontrolliere.
08Wirkung
Konkret entstanden
- Unabhängig von Readymag
- Galerie ohne Animationsbibliothek
- Live auf eigener Domain
