# 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.