feat(polish): 6 Special Effects — Konami, ViewTransitions, Reveal, Stats, Ripple, HeroTilt

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.
This commit is contained in:
Jan Wagner
2026-08-31 21:44:27 +02:00
parent 3b30694573
commit ffe65eb8d7
14 changed files with 526 additions and 9 deletions
+5
View File
@@ -45,6 +45,11 @@ const config: NextConfig = {
serverExternalPackages: ["better-sqlite3"],
images: { unoptimized: true },
output: "standalone",
// View-Transitions-API wird via CSS ::view-transition-* in theme.css
// genutzt (siehe dort). Next.js 16 hat keinen experimental.viewTransition-
// Switch — die CSS-Regeln reichen aus, der Browser aktiviert die
// Transition automatisch beim ersten Cross-Document-Navigation mit dem
// Meta-View-Transition-Tag.
async rewrites() {
return [
...Object.entries(PUBLIC_TO_INTERNAL).map(([from, to]) => ({