# Personal Brand — landing-page benchmark brief

Create a complete, modern, single-page landing page for the personal brand **Enrico Bachmann** (`enrico-bachmann.de`). The page is a single self-contained `index.html` file. CSS and JavaScript must be inline. No build step, external fonts, CDNs, analytics, or other network requests are permitted. Every visual must be authored by the model as inline SVG, CSS gradient, or canvas — do not hotlink or embed remote images.

This is a design benchmark. The goal is a page that feels like a top-tier, award-adjacent product launch site: confident typography, a strong hero, real depth, and tasteful motion. It must be genuinely impressive at first load and remain readable and navigable.

## Subject (content to represent)

- **Person:** Enrico Bachmann — KI-augmented Solopreneur, founder of **Hundeo** (dog-training app) and builder of several products (e.g. Socime, Anifit).
- **Positioning:** builds and ships software products augmented by AI; writes about the AI stack, benchmarks, and solopreneurship.
- **Voice:** direct, technical, modern. German-language site, but the benchmark page copy may be German or English (keep it consistent within the page).

## Visual direction

Use a dark, premium aesthetic with a single confident accent color (cyan/teal family is a good default but not mandated). Aim for a composition with: a bold hero headline, real layered depth, at least one striking graphic moment, and a clear typographic hierarchy. The page should look deliberately designed, not like a default template.

## Required content sections (in order)

1. **Hero** — name, role/tagline, a primary call-to-action, and a distinctive visual.
2. **Proof / projects** — at least three projects or products (Hundeo plus others) presented as cards or a showcase.
3. **About / positioning** — a short paragraph on the AI-augmented solopreneur approach.
4. **Contact / footer** — a contact or follow call-to-action and a footer.

## Required technique ("wow" bar)

The page must include **all** of the following, implemented by hand in the file:

- A **real rendered graphic** (inline SVG illustration or a canvas-drawn scene), not a stock image or empty placeholder box.
- A **scroll-triggered reveal animation** for at least one section (IntersectionObserver or equivalent).
- A **pointer- or motion-reactive effect** (parallax, magnetic/tilt, cursor glow, or similar).
- A **smooth-scroll or anchor navigation** from the top nav to the sections.
- A **responsive layout** that stays readable and ordered at a narrow mobile width.

## Quality bar

The result must render correctly on load at a typical desktop size (e.g. 1600×900) without console errors, animate smoothly, and remain fully readable and navigable at ~390px width. Prioritize polish, contrast, and typographic craft. No lorem ipsum — use real, coherent copy about Enrico Bachmann.