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:
@@ -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]) => ({
|
||||
|
||||
Reference in New Issue
Block a user