Roadmap & Changelog
What's coming next — and what has already shipped.
Roadmap
What's being built next
Admin Panel — Phase 1 Abschluss
Changelog-Admin + Blog/Thoughts-Editor im Admin Panel. Letzter Schritt von Phase 1 bevor das Portfolio öffentlich geht.
Öffentliche Changelog-Seite
Eigene /changelog-Seite — alle Releases nach Version, Datum und Kategorie gelistet. Footer-Link, vollständig mehrsprachig.
GitHub Activity Widget
Live GitHub-Aktivitäten auf der Startseite — Contribution-Graph oder letzte Commits. Belegt aktives Development ohne ein Wort.
Demo-Video Integration
Kurze Demo-Videos direkt in Projektseiten — StudyNexus zuerst. Lazy-Loading, kein Autoplay, kein Performance-Impact.
Project Status Indicators
Live-Status-Badges auf Projektkarten — "In Entwicklung", "Beta", "Live". Gesteuert aus dem Admin Panel.
Dark Mode
Light/Dark Mode Toggle unter Beibehaltung der Vanilla-Performance. Status-Speicherung via LocalStorage.
Blog / Thoughts
Eigene /thoughts Sektion — kurze Posts, LinkedIn-Stil aber individuell. Verwaltet im Admin Panel.
Animierte Seitenübergänge
Smooth Seitenübergänge via View Transitions API — kein Framework, kein Layout-Shift, kein Performance-Impact.
ES Modules Migration
Umstieg auf native ES Modules im Browser — saubere Scope-Isolation, kein globaler Window-Clutter, ohne Bundler.
Arabisch (AR) — Dritte Sprache
Vollständige AR-Übersetzung + RTL-Support. Language Switcher: DE → EN → AR.
Der große Relaunch — ein vollständig verwaltbares Portfolio-System
Der größte Sprung seit dem Start: Aus einer statischen Seite wird ein vollständig selbst verwaltetes System — dreisprachig, KI-gestützt, in jeder Ebene abgesichert, und weiterhin ohne ein einziges Frontend-Framework.
• Dreisprachigkeit mit echtem SEO — DE · EN · AR mit vollständigem Rechts-nach-links-Layout für Arabisch. Jede Sprache wird jetzt zusätzlich statisch vorgerendert (eigene URLs, hreflang) — Google indexiert jede Sprache separat, nicht nur Deutsch.
• KI-Twin „Ask Yusef · Neural Console" — mein Chat-Widget wurde komplett neu gestaltet: ein atmender AI-Ring-Button, Auto-Hide beim Scrollen, ein Vollbild-Sheet mit Wisch-Geste auf Mobile, Cmd/Ctrl+K zum Öffnen und kontextbewusste Frage-Vorschläge je nach Seite.
• Admin Panel „SPACE" — ein Apple-artiges Verwaltungswerkzeug mit ⌘K-Command-Palette, acht Bereichen (Projekte, Roadmap, Changelog, Blog, Übersetzungen, Medien, KI-Wissen, Wartungsmodus), einem Live-System-Health-Dashboard und vollständigem Aktivitätsprotokoll.
• Security-Fortress — vier unabhängige Sicherheitsebenen im Admin Panel: Zugangs-Whitelist, ein PIN als zweiter Faktor, Rate-Limiting gegen Missbrauch und Security-Header — bevor das Panel die echte Live-Seite verwaltet.
• Neue öffentliche Bereiche — ein mehrsprachiger Blog (Thoughts), dieser öffentliche Changelog (jetzt mit klickbaren Detail-Karten), eine dynamische Roadmap und ein Live-GitHub-Aktivitäts-Widget.
• Design-Neustart „Calm Cinema" — die Startseite als durchgehende Leinwand statt einzelner Blöcke, eine maus-folgende Aurora im Hero, cinematische Scroll-Übergänge, self-hosted Schriften und fluide Typografie.
• Barrierefreiheit & PWA — Skip-Links, vollständige Tastaturbedienbarkeit, kein Layout-Sprung beim Laden, installierbar und offline-fähig.
• Und jede Menge Feinschliff — von Grund auf auf Mobile getestet, Dutzende kleine Fehler behoben, jede Sprache und jeder Modus (Hell/Dunkel) doppelt geprüft.
Roadmap & Changelog System
Vollständiges Roadmap-System: Supabase-gesteuert, Scope-Logik (Portfolio + Projekte), Prerender für SEO, Client-Renderer mit DE/EN/AR. Changelog-Komponente mit Kategorie-Badges. Admin: Drag & Drop Sortierung, "→ CL" Button, AR-Felder im Draft-Modal.
Projects & Media Manager
Projects CRUD: Admin UI für alle 5 Projekte, dynamischer Renderer (js/projects-data.js), Prerender für SEO, Build-Pipeline via GitHub Action. Media Manager v2: Repo-first Uploads, Admin-Commit-Flow, CV-Verwaltung, Supabase Storage Integration.
Admin Panel — Infrastruktur & Kern-Features
Admin Panel live auf admin.yusefbach.de (Vercel + Next.js + Supabase). GitHub OAuth Login. Maintenance Mode mit Notfall-Knopf, Multi-Sprache (DE/EN/AR), RTL, 30s-Polling. System Health Dashboard. Bot Memory Editor (yusef_brain.md). Translations Manager (DE/EN/AR, ~491 Keys).
Architektur & TypeScript Migration
Migration von statischem HTML zur datengetriebenen Engine. CSS in 6 Module aufgeteilt (2338 → 931 Zeilen main.css), project-base.css für alle Projektseiten, Web Components (app-header, app-footer, app-project-header), Inline-CSS eliminiert, lightbox.ts extrahiert. Kein Duplikat-Code mehr.