Jan Wagner
ffe65eb8d7
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.
81 lines
2.6 KiB
TypeScript
81 lines
2.6 KiB
TypeScript
import type { NextConfig } from "next";
|
|
import { defaultLocale, locales } from "./src/i18n/routes";
|
|
|
|
const PUBLIC_TO_INTERNAL: Record<string, string> = {
|
|
"/": "/de",
|
|
"/ueber-mich": "/de/about",
|
|
"/projekte": "/de/projects",
|
|
"/kontakt": "/de/contact",
|
|
"/impressum": "/de/legal",
|
|
"/datenschutz": "/de/privacy",
|
|
"/en": "/en",
|
|
"/en/about": "/en/about",
|
|
"/en/projects": "/en/projects",
|
|
"/en/contact": "/en/contact",
|
|
"/en/legal": "/en/legal",
|
|
"/en/privacy": "/en/privacy",
|
|
};
|
|
|
|
function projectItemRewrite(srcPrefix: string, destLocale: "de" | "en") {
|
|
return {
|
|
source: `${srcPrefix}/:slug`,
|
|
destination: `/${destLocale}/projects/:slug`,
|
|
};
|
|
}
|
|
|
|
// Content-Security-Policy. Bewusst moderat, weil Next.js inline-styles und
|
|
// inline-scripts für Hydration + RSC braucht. 'unsafe-inline' ist hier
|
|
// akzeptabel, weil wir kein User-Generated-Content haben und alle Skripte
|
|
// aus dem eigenen Build kommen — XSS via externe Quelle ist trotzdem geblockt.
|
|
// TODO: Migration zu Nonces sobald der RSC-Stream nonces unterstützt.
|
|
const CSP = [
|
|
"default-src 'self'",
|
|
"script-src 'self' 'unsafe-inline' 'unsafe-eval'",
|
|
"style-src 'self' 'unsafe-inline'",
|
|
"img-src 'self' data: https:",
|
|
"font-src 'self' data:",
|
|
"connect-src 'self'",
|
|
"frame-ancestors 'none'",
|
|
"base-uri 'self'",
|
|
"form-action 'self'",
|
|
"object-src 'none'",
|
|
].join("; ");
|
|
|
|
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]) => ({
|
|
source: from,
|
|
destination: to,
|
|
})),
|
|
projectItemRewrite("/projekte", "de"),
|
|
projectItemRewrite("/en/projects", "en"),
|
|
];
|
|
},
|
|
async headers() {
|
|
return [
|
|
{
|
|
source: "/:path*",
|
|
headers: [
|
|
{ key: "Content-Security-Policy", value: CSP },
|
|
{ key: "X-DNS-Prefetch-Control", value: "off" },
|
|
{ key: "Strict-Transport-Security", value: "max-age=63072000; includeSubDomains; preload" },
|
|
{ key: "X-Content-Type-Options", value: "nosniff" },
|
|
{ key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
|
|
{ key: "Permissions-Policy", value: "camera=(), microphone=(), geolocation=(), payment=()" },
|
|
],
|
|
},
|
|
];
|
|
},
|
|
};
|
|
|
|
export default config;
|