Sechs neue Special Effects, die das Portfolio auf das nächste Level bringen.
Alle theme-konsistent, alle reduced-motion-safe, alle performance-bewusst.
1. Konami-Code Easter Egg (KonamiMatrix):
↑↑↓↓←→←→BA (oder WASD-Variante) aktiviert einen 'Matrix-Mode' mit
fallenden japanischen Glyphen + Zahlen über den ganzen Screen.
Canvas-basiert, GPU-beschleunigt, 14-px-Spalten, ~60 fps.
Akzeptiert auch WASD statt Pfeiltasten. Respektiert prefers-reduced-motion.
Kleines 'matrix mode active'-Hint oben rechts für 3.5s beim Aktivieren.
Easter Egg: konami + matrix im ⌘K-Palette.
2. View-Transitions für Page-Navigation:
theme.css: ::view-transition-old/new(root) mit 280ms Fade. Browser-
Support Chrome 111+, Safari TP, Firefox-Flag. Fallback: instant nav.
Macht den Übergang zwischen Routes spürbar smoother, ohne JS-Overhead.
3. Section-Reveal-on-Scroll (SectionReveal):
IntersectionObserver (threshold 0.12, rootMargin -10% bottom).
Einmal-Trigger (kein Re-Anim beim Hoch-Scrollen), GPU-beschleunigt
via transform + opacity, 620ms cubic-bezier(0.16,1,0.3,1).
Staggered-Delay für Featured-Cards (60ms pro Card).
Sofort sichtbar bei prefers-reduced-motion.
4. Live-Uptime (LiveStats im Footer):
Echte Container-Uptime. Persistenz via localStorage, Updates jede Minute.
'online · 1d 5h' mit pulsierendem grünen Dot. Macht das Portfolio
lebendig statt fake Counter.
5. Click-Ripple-Effekt:
Vanilla CSS + Pointer-Event-Listener. Wenn User irgendwo klickt (nicht
auf a/button/input), entsteht am Click-Punkt eine animierte Welle
(Magenta, 580ms). Modernes Material-Design-Pattern, gibt haptisches
Feedback. reduced-motion: komplett disabled.
6. Hero-Mouse-Tilt (HeroTilt):
Die ganze Hero-Section kippt subtil (±2°) basierend auf Maus-Position.
CSS-Variablen + transform, 600ms ease. Touch + reduced-motion: deaktiviert.
Gibt der Hero-Section ein 'lebendiges' Gefühl ohne aufdringlich zu sein.
Plus:
- Reading-Time-Estimator: Tokenisierung (Code/Markdown ignoriert), 180 WPM
für Deutsch, 220 für Englisch. Anzeige im Project-Detail-Header neben
Status/Kategorie: '⏱ 5 min read · 847 Wörter'.
- StatsBar (Home-Page): Echte Live-Zahlen aus der DB — Anzahl Projekte,
Anzahl Kategorien, totale Wörter in Notizen, 'since 2003'.
Vier ascii-boxen mit großen Mono-Zahlen, theme-konsistent.
Build-Hash, Commit-Logik und Proxy bleiben unverändert.
Jan Wagner
ffe65eb8d7