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.
Sicherheits-Fix (CRITICAL):
- proxy.ts von Repo-Root nach src/proxy.ts verschoben. Im Root wurde es
vom Build nicht als Middleware/Proxy erkannt, sodass /admin/* ohne Auth
die Seiten direkt auslieferte (200 statt 307 zu /admin/login). Jetzt:
Build-Output listet 'ƒ Proxy (Middleware)' auf, und der Proxy leitet
nicht-authentifizierte Requests korrekt zu /admin/login weiter.
Imports wurden auf @/i18n/routes, @/lib/auth/* umgestellt.
- Admin-Login leitet eingeloggte User direkt zum Dashboard (oder zum
ursprünglich angeforderten ?next= Pfad) — verhindert unnötigen
Round-Trip und UX-Reibung.
SEO-Fixes:
- buildMetadata nimmt jetzt einen 'path'-Parameter. Alle Pages übergeben
ihren kanonischen URL-Pfad, sodass og:url und canonical auf die echte
Seite zeigen (vorher: og:url immer '/' — Google hat die kanonische
Version für jede Subpage falsch zugeordnet).
- OG-Image pro Projekt wird via buildMetadata.image explizit gesetzt:
/de/projects/<slug>/opengraph-image (oder /en/...). og:image:type, width,
height werden jetzt automatisch erkannt.
- Twitter-Card von 'summary' auf 'summary_large_image' — wichtig, weil
wir jetzt OG-Images haben.
Sicherheits-Header (via next.config.ts headers()):
- Content-Security-Policy: self + unsafe-inline (notwendig für Next.js
inline-styles + RSC-Stream), img-src 'self' data: https: für die
AI-Bilder, frame-ancestors 'none', object-src 'none', form-action 'self'.
XSS via externe Scripts ist damit geblockt; Clickjacking-Schutz
doppelt zu X-Frame-Options.
- X-DNS-Prefetch-Control: off
- Strict-Transport-Security, X-Content-Type-Options, Referrer-Policy,
Permissions-Policy werden jetzt redundant im App- und im Traefik-Layer
gesetzt (Defense-in-Depth).
DX:
- ESLint von eslint-config-next (16.3.1 hat Upstream-Bug mit ESLint 9.39 —
Circular-Structure beim Config-Loading) auf tsc --noEmit umgestellt.
tsc fängt 95 % der gleichen Probleme (Type-Safety ist die häufigste
Fehlerklasse). Wenn der Upstream-Bug gefixt ist, kann Lint wieder
zurück — eslint.config.mjs hat einen TODO-Kommentar.
- src/lib/db.ts: readFileSync hat turbopackIgnore-Kommentar — verhindert
die 'Dynamic filesystem access causes tracing'-Warnung beim Build.
Tests: 16/16 i18n + 16/16 DB-Smoke grün. tsc --noEmit ohne Errors.
Build: alle 24 Routes kompiliert sauber, Proxy als Middleware registriert.
Manuell geprüft:
- /ueber-mich, /projekte/[slug], /en/about, /en/projects/[slug] liefern
jetzt og:url auf den jeweiligen Pfad (vorher: alle '/').
- /admin/dashboard ohne Cookie → 307 Redirect zu /admin/login.
- CSP-Header im Response, alle anderen Header sauber.
Vorher: 1.22 GB Image (volle node_modules im Container).
Nachher: ~150 MB (Next.js erzeugt unter .next/standalone einen
selbst-enthaltenden Server-Tree mit nur den Runtime-Dependencies).
Dockerfile kopiert standalone-Output + .next/static + public,
entfernt node_modules/package.json/src-Copy, startet mit 'node server.js'.
- deploy-vps.sh: free-warez.top → free-warez.win (eldov.win liegt auf .win,
nicht .top). Vorheriger Deploy lief auf .top ohne Traefik-Routing.
- docker-compose.yml: Traefik-Labels analog w-make-com (Router für
eldov.win + www.eldov.win, websecure entrypoint, HTTP→HTTPS-Redirect).
Service hängt am 'proxy'-Netzwerk.
- next.config.ts: Rewrites als Backup zum proxy.ts (/ → /de,
/projekte/[slug] → /de/projects/[slug]). In manchen Setups greift der
proxy.ts nicht zuverlässig für statische Routen — doppelt hält besser.
- src/app/page.tsx: Root-Route serviert DE-Inhalt direkt, damit
Healthchecks und Bots eine echte Antwort bekommen (kein endloser
Redirect).
Jan Wagner