denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c9cd2d734d3c98cd8650ff564fdc90dc2d25a0ee
portfolio/docs/DESIGN_OVERHAUL_LOG.md
denshooter a5dba298f3
Some checks failed
Dev Deployment (Zero Downtime) / deploy-dev (push) Failing after 9m26s
Details
feat: major UI/UX overhaul, snippets system, and performance fixes
2026-02-16 12:31:40 +01:00

2.2 KiB
Raw Blame History

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.