denshooter
a5dba298f3
Some checks failed
Dev Deployment (Zero Downtime) / deploy-dev (push) Failing after 9m26s
34 lines
2.2 KiB
Markdown
34 lines
2.2 KiB
Markdown
# Design Overhaul Log: Editorial Bento Transformation (Feb 2026)
|
|
|
|
## Zielsetzung
|
|
Transformation des Portfolios von einem Standard-Layout in ein hochkarätiges "Editorial Bento Grid" Design. Fokus auf Typografie, Dynamik (Directus CMS) und Premium UX ("Liquid" Aesthetic).
|
|
|
|
## Meilensteine & Kernänderungen
|
|
|
|
### 1. UI/UX Architektur
|
|
- **Editorial Bento Grid:** Umstellung der gesamten Seite auf ein modulares Grid-System.
|
|
- **Liquid Aesthetic:** Nutzung von Glassmorphismus, extremen Abrundungen (`rounded-[3rem]`) und weichen Verläufen (`liquid-mint`, `liquid-purple`).
|
|
- **Typography-First:** Einsatz von riesigen, uppercase Headlines mit markanten Endpunkten (z.B. `Archive.`) für einen Magazin-Look.
|
|
|
|
### 2. Dynamische Features
|
|
- **ActivityFeed 2.0:**
|
|
- Integration von Echtzeit-Status (Spotify, Coding, Gaming) direkt in die Grid-Zellen.
|
|
- **Quote Carousel:** Automatischer Wechsel zwischen nerdigen Zitaten (Dijkstra, Einstein etc.) alle 10s im Idle-Mode.
|
|
- Fallback-Logik für CMS-gesteuerte Quotes (`about.quote.idle`).
|
|
- **Skeleton Loading:** Implementierung von Shimmer-Skeletons für alle dynamischen Daten (Hero, Bento, Library, Projects), um Layout-Shift zu verhindern.
|
|
|
|
### 3. Navigation & Struktur
|
|
- **Minimalist Dock:** Die Navbar wurde zu einer schwebenden, asymmetrischen "Pill" transformiert.
|
|
- **Intelligent Back Button:** Die Projektdetailseiten erkennen nun den Ursprung des Nutzers (Home vs. Archiv) und führen kontextsensitiv zurück.
|
|
- **Unified Sub-Pages:** Übertragung des Bento-Stils auf `/books`, `/projects`, `/legal-notice` und `/privacy-policy`.
|
|
|
|
### 4. Technische Stabilität
|
|
- **TypeScript Hardening:** Alle `any`-Typen in den neuen Komponenten wurden durch strikte Interfaces (`ProjectDetailData`, `ProjectListItem`) ersetzt.
|
|
- **Docker Ready:** Korrektur von Build-Errors (Klammerfehler, fehlende Imports), sodass das Image erfolgreich baut.
|
|
- **Test Suite:** Update der Jest-Tests auf das neue Design und Polyfilling von `Request`/`Response` für API-Tests.
|
|
|
|
## Design Mandate für die Zukunft
|
|
- Kontrastreiches Grün (`emerald-500`) für helle Hintergründe verwenden.
|
|
- Animationen immer mit Framer Motion (Staggered Effects, Floating).
|
|
- Keine Overlays; alle Widgets müssen Teil des Grids sein.
|