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.
18 lines
862 B
TypeScript
18 lines
862 B
TypeScript
// Reading-Time-Estimator. Englisch/Deutsch, ~200 WPM.
|
|
// Tokenisiert auf Wortgrenzen, ignoriert Code/Markdown-Sonderzeichen.
|
|
|
|
export function estimateReadingTime(text: string, locale: "de" | "en" = "de"): { minutes: number; words: number } {
|
|
const stripped = text
|
|
.replace(/```[\s\S]*?```/g, " ") // Code-Blöcke
|
|
.replace(/`[^`]*`/g, " ") // Inline-Code
|
|
.replace(/!\[[^\]]*\]\([^)]*\)/g, " ") // Bilder
|
|
.replace(/\[([^\]]*)\]\([^)]*\)/g, "$1") // Markdown-Links: nur Text behalten
|
|
.replace(/[#>*_~`]/g, " "); // Markdown-Steuerzeichen
|
|
|
|
const words = stripped.split(/\s+/).filter(Boolean).length;
|
|
// Deutsch spricht man etwas langsamer (~180 WPM), Englisch schneller (~220)
|
|
const wpm = locale === "de" ? 180 : 220;
|
|
const minutes = Math.max(1, Math.round(words / wpm));
|
|
return { minutes, words };
|
|
}
|