Jan Wagner ffe65eb8d7 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.
2026-08-31 21:44:27 +02:00

eldov.win

Privates Portfolio für „eldov" — Self-Hosting, Bots, AI-Fleet, Hacks. Domain eldov.win (live seit 2026-08-31).

Das ist das Gegenstück zu w-make.com. Dort steht die industrielle Arbeit (Behälterglas, W-Make Batch, Batchmaker Studio). Hier stehen die Dinge, die mich abseits von Auftragsarbeit umtreiben: Hermes, Casino-/Trading-Bots, Freewarez-Selfhosting, Themes für Open-Source-Software.

Live-Status

  • URL: https://eldov.win (und https://www.eldov.win) — Let's Encrypt via Traefik ACME
  • Container: eldov-portfolio auf free-warez.win, Image 323 MB (Standalone-Build), Healthcheck healthy
  • Routing: Traefik hinter cloudflare NS (DNS only) auf 217.160.217.196, Labels analog w-make.com
  • DB: SQLite unter eldov_data Volume, Seed mit 13 Projekten + Profil beim ersten Request
  • Admin: /admin/login, single-user via ADMIN_PASSWORD + HMAC-Session-Cookie
  • Repo: https://gitea.free-warez.win/eldov/eldov-win (public)

Stack

Next.js 16 (App Router) · React 19 · Tailwind 4 · TypeScript · SQLite (better-sqlite3). SSR mit dynamischem Content aus DB.

Lokal

npm install
npm run dev          # http://localhost:3000 (lädt .env.local automatisch)
npm run build
npm test             # i18n + auth
npm run test:db      # DB-Smoke (Schema, Seed, CRUD)

.env.local (nicht committen, von .env.local.example kopieren):

ADMIN_PASSWORD=<starkes-passwort>
SESSION_SECRET=<mindestens-32-byte-hex>
DB_PATH=./data/eldov.db
NEXT_PUBLIC_SITE_URL=http://localhost:3000

Wichtig für Production: next start lädt .env.local nicht automatisch. env vars müssen vor dem Start gesetzt sein — typischerweise via Docker env_file (siehe docker-compose.yml) oder systemd Environment=. Für lokale Production-Smoke-Tests:

ADMIN_PASSWORD=... SESSION_SECRET=... npm run start

Routen

Pfad Zweck
/ (DE) · /en Startseite
/ueber-mich · /en/about Bio, Skills, Setup
/projekte · /en/projects Projektübersicht
/projekte/[slug] · /en/projects/[slug] Projekt-Detail
/kontakt · /en/contact Linksammlung statt Kontaktformular
/impressum · /en/legal Impressum
/datenschutz · /en/privacy Datenschutz
/admin/login Login
/admin/dashboard Übersicht
/admin/profile Bio/Person editieren
/admin/projects · /admin/projects/new · /admin/projects/[slug] Projekte-CRUD

API (alle außer /api/admin/login erfordern Auth-Cookie):

Methode · Pfad Effekt
POST /api/admin/login Body {password} → setzt Session-Cookie
POST /api/admin/logout löscht Cookie
GET /api/admin/session {authenticated: boolean}
GET /api/admin/profile aktuelles Profil
PUT /api/admin/profile Profil aktualisieren
GET /api/admin/projects Liste
POST /api/admin/projects neues Projekt
GET /api/admin/projects/[slug] Detail
PUT /api/admin/projects/[slug] aktualisieren
DELETE /api/admin/projects/[slug] löschen

Datenmodell

SQLite, Schema in src/lib/schema.sql. Zwei Haupttabellen:

  • profile (singletone, id=1): handle, real_name, role, location, bio_de, bio_en, links_json, updated_at
  • projects (slug PK): slug, number, status, category, stack, href, featured (0/1), summary_de, summary_en, body_de, body_en, created_at, updated_at

Beim ersten Request ohne DB wird automatisch migriert und mit dem Seed aus src/lib/seed.ts gefüllt (handle, bio, initiale Projekte aus dem Workspace).

Deployment

./deploy.sh (oder ./deploy-vps.sh) synct nach free-warez.win:/opt/containers/eldov-portfolio. Build und Restart des Containers passieren dort. Traefik routet eldov.win & www.eldov.win per Docker-Labels → Container-Internes 3000.

Was beim Erst-Deploy zu tun ist

  1. DNS: Im Cloudflare-Dashboard für eldov.win zwei A-Records anlegen — eldov.win und www.eldov.win217.160.217.196, Proxy: DNS only (graue Wolke), TTL 300 oder Auto.
  2. Vorbereitung auf dem VPS:
    ssh free-warez.win
    sudo mkdir -p /opt/containers/eldov-portfolio
    sudo chown 1000:1000 /opt/containers/eldov-portfolio
    # Secret generieren:
    openssl rand -hex 32 > /tmp/session-secret
    openssl rand -base64 18 | tr -d '/+=' | head -c 20 > /tmp/admin-password
    
    Dann /opt/containers/eldov-portfolio/.env.local anlegen (chmod 600):
    ADMIN_PASSWORD=<aus /tmp/admin-password>
    SESSION_SECRET=<aus /tmp/session-secret>
    DB_PATH=/app/data/eldov.db
    NEXT_PUBLIC_SITE_URL=https://eldov.win
    
  3. Erst-Deploy: ./deploy-vps.sh (sync + build + up).
  4. Traefik-Restart nach DNS-Propagation, damit die ACME-Challenge für eldov.win startet:
    ssh free-warez.win 'docker restart traefik'
    
    Wenn der A-Record vor dem ersten Traefik-Versuch fehlte, kann Let's Encrypt die Domain 5× nicht validieren und macht ein 1h-Rate-Limit. Nach dem Limit + Restart kommt das Zertifikat automatisch.

Update-Deploy

./deploy-vps.sh   # synct + baut + restarts

Die DB bleibt persistent (eldov_data Volume). Admin-Änderungen überleben Deploys.

DSGVO-Hinweis

Das Admin-Backend speichert keine personenbezogenen Daten außer dem Profil des Betreibers. Login-Cookie ist HMAC-signiert, HttpOnly, SameSite=Lax, 7 Tage gültig. Es findet kein Tracking, keine externen Skripte, keine Schriftarten von Drittanbietern statt.

S
Description
Privates Portfolio von eldov (eldov.win). Hermes, Bots, Self-Hosting, Themes — alles außer Industrie.
Readme
1.2 MiB
Languages
TypeScript 92.5%
CSS 5.1%
Shell 1.2%
Dockerfile 0.9%
JavaScript 0.3%