knsoandClaude Opus 5
ecf66c7340
Unter dem großen Zeichen steht jetzt der Claim „Persönlichkeit · Wirkung · Erfolg“ (englisch „Personality · Impact · Success“), rechtsbündig auf dessen Kante, in der Kapitälchen-Zeile der Seite. Das Trennzeichen setzt der Hero, wie im Ledger – im Inhalt stehen nur die drei Wörter. Das Monogramm schrumpft dafür von 45vh auf 40vh, mobil von 14 auf 12svh: so kostet der Claim keine Höhe, das Cover bleibt bei min-h-svh. Der Nackenstrich endet nicht mehr an der Folio-Haarlinie, sondern an der Oberkante des Claims (20 px bei 1440×900, 1 px Luft). Der Ursprung der Haarlinie bleibt derselbe Punkt unter dem V – nachgemessen: --handoff-x 957+151 = 1108, transform-origin der Regel 72+1036 = 1108. Die Vertikale liest sich Nacken → Strich → Claim → Haarlinie. Die H1 heißt „Mit deiner Persönlichkeit entwickelst du deine Wirkung – und deinen Erfolg.“ Sie betont drei Wörter statt einem, weil sie den Claim wiederholt; den Gold-Verlauf trägt weiterhin genau eines. Dafür gibt es Headline.parts, und em-plain nimmt den übrigen das Gold wieder ab (Regel in globals.css, Ausnahme in AGENTS.md notiert). Die Größe ist gemessen, nicht geschätzt. Playfair bei 100 px: „Mit deiner Persönlichkeit“ = 1033 px, „entwickelst du deine Wirkung –“ = 1315 px. max-w-[10.9em] liegt zwischen beiden, damit bricht die Headline auf jeder Schriftgröße in dieselben vier Zeilen – der Umbruch hängt nicht mehr an der Fensterbreite. Der Clamp bleibt zusätzlich von der Fensterhöhe gedeckelt (22vh − 120px), für 800- und 768-px-Laptops. HeadlinePart.tail klammert Wort und Satzzeichen in ein white-space: nowrap. Nötig, weil SplitText die Zeilen selbst neu aufbaut: es normalisiert U+00A0 zu einem gewöhnlichen Leerzeichen und darf an jeder Elementgrenze umbrechen. Ohne die Klammer fing der Gedankenstrich im Englischen eine Zeile an, mit einem Punkt statt des Strichs derselbe Fehler. Ein Margin verschiebt den Umbruch nur, nowrap nimmt ihn weg. 02 Trainings & Workshops nimmt HR auf: „Leadership & HR mit Persönlichkeit – für Führungskräfte und Teams.“ Die Stichworte tragen HR-Teambuilding & Konfliktlösung und Kommunikation & Teamgeist – es geht darum, dass ein Team sich besser kennenlernt und versteht. Bei 1280 px bleiben 76 px Luft zur Link-Spalte. Geprüft bei 390/1024/1180/1440/1600 px in beiden Sprachen: kein Gedankenstrich am Zeilenanfang, kein waagerechter Überlauf, Cover trifft die Fensterhöhe. Kein Build gelaufen – der Dev-Server einer anderen Sitzung hält .next; geprüft ist tsc --noEmit und eslint. Offen und nicht Teil dieses Commits: src/content/coaching.ts sichert seinen Gedankenstrich noch mit U+00A0 ab, was aus demselben Grund nicht wirkt. Dort fällt der Umbruch derzeit zufällig richtig. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Anelia Wolf – Website
Statische Website für Anelia Wolf (Keynote Speakerin, Trainerin, Coach).
Vierzehn Routen in zwei Sprachen: Startseite, drei Leistungsseiten, die Messeseite
zur herCAREER Expo, Impressum und Datenschutz – deutsch auf /, englisch unter
/en/ – plus die 404.
Next.js 16 (App Router) im Static Export, Tailwind v4, GSAP + Lenis, TypeScript. Kein Backend, keine Datenbank, keine Formulare.
Entwickeln und bauen
npm install
npm run dev # http://localhost:3000
npm run build # erzeugt out/
npm run lint
npx tsc --noEmit
next.config.ts setzt output: "export" und trailingSlash: true. Der Build schreibt
den fertigen Ordner out/ – das ist das komplette Deployment: rein statische
Dateien für einen beliebigen Webhoster (Apache, nginx, Uberspace, Netlify, …).
Kein Node-Prozess auf dem Server, kein next start.
Was diese Seite bewusst nicht tut
Diese Regeln sind nicht kosmetisch – die Datenschutzerklärung sagt sie zu:
- keine externen Requests: keine Google Fonts, keine CDNs, keine Videos,
keine Karten, keine Social-Plugins, keine Analytics. Schriften werden über
next/fontzur Build-Zeit selbst gehostet. - kein Storage: kein localStorage, kein sessionStorage, keine Cookies – deshalb auch kein Cookie-Banner.
- Kontaktformular mit Serverversand, kein Newsletter. Abschnitt 06 sendet an
/api/contactbeim Hoster; die Anfrage landet im Postfachinfo@anelia-wolf.comim Ordnerweb-anfragen(kein Formulardienst eines Dritten). Alle übrigen Kontaktwege laufen weiter übermailto:und Telefon.
Wer eine dieser Zusagen ändert, muss src/content/legal.ts (Ziffer 2, 3 und 6)
mit ändern.
Wo was liegt
| Pfad | Inhalt |
|---|---|
src/app/(de)/ |
deutsche Routen (page.tsx je Seite) und ihr Wurzel-Layout mit <html lang="de"> |
src/app/en/ |
englische Routen und ihr Wurzel-Layout mit <html lang="en"> |
src/app/global-not-found.tsx |
404 für unbekannte Adressen – wird zu out/404.html |
src/components/pages/ |
Der Aufbau jeder Seite, einmal für beide Sprachen |
src/content/en/ |
die englischen Texte, Datei für Datei dieselbe Struktur |
src/lib/i18n.ts |
Pfade beider Sprachen, Sprachumschalter, hreflang |
src/content/*.ts |
Sämtliche Texte. Wer Copy ändert, ändert nur hier – nie im JSX. |
src/lib/site.ts |
Stammdaten (Name, E-Mail, Telefon, LinkedIn), Navigation, Routen, Flags |
src/lib/legal.ts |
Platzhalter-Logik, Build-Guard, LEGAL_TODO / CONTENT_TODO |
src/lib/assets.ts |
Build-Zeit-Prüfung der Drop-in-Dateien (fehlt eine, rendert die dokumentierte Variante B) |
src/components/ |
layout/, motion/ (GSAP-Primitiven), ui/, brand/, home/, services/ |
public/brand/, public/photos/ |
Drop-in-Slots für Logo und Fotos (je eigene README) |
docs/superpowers/ |
Spec und Build-Plan |
docs/SUBDOMAIN-HERCAREER.md |
her-career.anelia-wolf.com – Ziel des QR-Codes auf der Rückwandgrafik: DNS, Zertifikat, Vhost |
Drop-in-Assets
Fehlt eine Datei, bricht nichts – die Seite rendert die dokumentierte Alternative:
| Datei | Fehlt sie, dann … |
|---|---|
public/brand/logo-mark.svg |
typografisches <WolfMark/>-Monogramm statt des echten Logos |
public/brand/logo-full.png |
kein Social-Preview-Bild in den OpenGraph-Daten |
public/photos/anelia-hero.jpg |
Hero ohne Foto (Monogramm trägt die Fläche) |
public/photos/anelia-portrait.jpg |
„Über Anelia“ ohne Foto |
public/photos/anelia-stage.jpg |
Keynotes-Seite ohne Bühnenfoto |
public/speaker-profil.pdf |
Speaker-Profil-Zeile entfällt (zusätzlich flags.showSpeakerPdf) |
Das gelieferte Logo-SVG wird inline eingebettet. Enthält es ein <script>,
bricht der Build ab – dann eine Export-Variante ohne Interaktivität liefern.
Flags (src/lib/site.ts)
| Flag | Bedeutung |
|---|---|
showPlaceholders |
true bis zum Launch: offene Angaben stehen sichtbar als „[…]“ in Gold |
hostOutsideEu |
nur true, wenn Hoster/Office-Anbieter außerhalb EU/EWR sitzen (Drittland-Absatz) |
showFaq, showStimmen, showSpeakerPdf, showSecondTalk, show24hPromise, showIndustry, showTwins |
schalten einzelne Blöcke frei, sobald die Inhalte freigegeben sind |
showHerCareer |
true, solange die herCAREER Expo bevorsteht: nur dann trägt /her-career/ die Termin-Angaben und steht in der Sitemap. Ab 24.10.2026 auf false. |
Vor dem Livegang
LEGAL_TODOundCONTENT_TODOinsrc/lib/legal.tsabarbeiten – Anschrift, USt-IdNr., Hoster, Aufsichtsbehörde, Bildnachweise, Dauer-/Paketangaben.- Erst dann
flags.showPlaceholdersauffalsesetzen. Steht danach irgendwo noch ein „[…]“ in einer Pflichtangabe, bricht der Build mit einer Fundstelle ab – der Flip geht nicht ungelesen live. npm run buildund den Inhalt vonout/hochladen.