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.
Server-Components dürfen in Next.js 16 keine Event-Handler an DOM-Elemente
oder Client-Komponenten weitergeben. Site-Header war Server-Component mit
onClick={dispatchEvent(...)} — das hat alle /ueber-mich, /projekte,
/projekte/[slug], /en mit 500er geworfen (nur / und /admin/login blieben
200, weil sie kein Site-Header-Render nutzen bzw. ein anderes Layout).
Fix: �K-Button in eigene 'use client'-Datei ausgelagert (command-bar-button.tsx)
und im Header eingebunden. Nach dem Fix: alle Routen wieder 200.
Größeres Redesign, das die Seite spürbar besser macht. Behält das
Magenta/Grün-Dark-Thing, poliert aber alles drumherum.
Neue Komponenten:
- hero-banner: full-bleed Hero mit AI-generiertem Hintergrund (grok-imagine-image,
1280×720, Magenta/Grün-Akzente), Terminal-Boot-Animation mit Tipp-Effekt,
Rotating-Role-Animation, animiertes Grid-Overlay.
- command-palette: �K / Ctrl+K öffnet ein durchsuchbares Modal mit Navigation,
Projekt-Suche, Aktionen (Gitea/w-make.com/Admin) und Easter Eggs. Tastatur
↑↓/Enter/Esc, gruppiert nach Typ, mit Vorschau-Hints.
- custom-cursor: Canvas-basierter Cursor mit Trail für Desktop, 14 Punkte,
Farbwechsel Magenta↔Grün, Hover-State für interaktive Elemente. Touch-
Devices behalten den Default-Cursor.
- scroll-progress: Top-Bar mit Magenta→Grün-Gradient.
- tilt-card: 3D-Hover mit Mouse-Tracking (CSS-Variablen --rx/--ry/--mx/--my).
- stack-icon: 13 handgezeichnete inline SVGs (TypeScript, Node, Python, Rust,
SQLite, Tailwind, React, Docker, Gitea, Next, Nix, Hermes, Shell, Self-Host).
Kein CDN, kein Hydration, currentColor-aware.
- project-filter: tag-basierter Filter für Projekt-Liste, Status-Tone-Tags
(live/warm/muted) plus Kategorie-Tags, useTransition für sanfte Updates.
Pages-Update:
- Home (/): neuer Hero-Banner, Featured-Grid mit Tilt-Cards und KI-generierten
Thumbnails (hermes.jpg, casino-bot.jpg, polymarket-trader.jpg), darunter
filterbare Projekt-Liste, Bio + Links Sidebar.
- Projects: filterbar nach Kategorie und Status.
- Project-Detail: Hero-Image (für 3 Projekte), Stack-Pills mit SVG-Icons,
bessere Sektionierung (~/stack, ~/notes).
- About: Stack-Visualisierung mit 13 Einträgen in einem Grid.
- OpenGraph-Image pro Projekt (Next.js native, 1200×630): eldov-Logo,
Projekt-Slug in Magenta, Status-Badge, Kategorie-Badge.
Build-Hash-Support:
- NEXT_PUBLIC_BUILD_HASH + NEXT_PUBLIC_BUILD_DATE werden via Docker ARG in
die Footer geschrieben ("build abc1234 · 2026-08-31"), deploy-vps.sh
ermittelt Commit-Hash automatisch aus git und gibt ihn weiter.
Theme v2:
- Tiefere Palette (--bg #0a0a10, --bg-deep #050508), --fg-dim für Hierarchie.
- Neue Komponenten-Klassen: tilt-card, stack-pill, tag, hero-bg, hero-banner,
scroll-progress, cursor-blink, type-in, glow-text.
- ASCII-Box-Hover-Effekt mit Akzent-Border.
Public-Bilder unter public/img/{hero,projects}/ — KI-generiert via xAI
grok-imagine-image (Token aus .hermes-state/credentials/xai.json), alle
im Marken-Stil (Magenta/Grün/dunkel). 4 Bilder, ~960 KB total.
Sonstiges:
- Header mit ⌘K-Hint, sticky+blur.
- Footer mit Build-Hash, externen Links, Datenschutz-Badge.
- About-Page mit Stack-Grid.
Jan Wagner