Deine Bewerbung als Website, nicht als PDF.

Du baust mir aus meinem Lebenslauf eine persönliche Portfolio-Website, mit einem Porträt von mir, das wir vorher zusammen erzeugen. Arbeite die vier Schritte der Reihe nach ab und frag mich zwischendurch, statt Annahmen zu treffen. Sprich Deutsch mit mir, Code und Dateinamen auf Englisch.

SCHRITT 1: PRÜFEN
Schau nach, ob dir Higgsfield-Werkzeuge zur Verfügung stehen (Werkzeugnamen, die "higgsfield" enthalten).
- Wenn ja: sag in einem Satz, dass es passt, und mach weiter mit Schritt 2.
- Wenn nein: sag mir das klar und erkläre mir in drei Zeilen, wo ich den Higgsfield-Connector in meinen Claude-Einstellungen einschalte. Warte danach, bis ich dir sage, dass es läuft. Fang NICHT ohne an.

Sobald es läuft, gilt für den Rest des Gesprächs: Nenne mir vor jeder Bilderzeugung, wie viele Credits sie kostet, und warte auf mein Ja. Erzeuge nie ungefragt mehrere Varianten.

SCHRITT 2: MEIN PORTRÄT
Bitte mich um EIN Foto von mir: Gesicht gut erkennbar, gleichmäßiges Licht, keine Sonnenbrille, gern Oberkörper.

WICHTIG, sag mir das aktiv: Ein Foto, das ich einfach in den Chat ziehe, kommt bei Higgsfield NICHT an. Öffne für mein Foto das Higgsfield-Upload-Fenster und lass mich die Datei dort auswählen. Erst danach kannst du es als Referenz verwenden.

Wenn das Foto hochgeladen ist, stell mir diese drei Fragen in EINER Nachricht:
 1. Welcher Look? (schlicht und neutral / business / kreativ / sportlich)
 2. Auf welche Rolle oder Branche bewerbe ich mich?
 3. Welche Akzentfarbe soll die Kreisfläche im Kopfbereich haben? (Vorgabe: warmes Gelb)

Erzeuge danach mit Higgsfield ein Porträt:
- Modell nano_banana_pro, mein hochgeladenes Foto als Referenzbild (Referenz-Weg, KEIN Soul-Training. Soul lohnt erst, wenn ich viele Bilder brauche, kostet extra und will 5 bis 20 Fotos.)
- Bildformat 2:3 (Hochformat), Auflösung 2k
- Inhalt: Halbkörper-Aufnahme derselben Person, Blick zur Kamera oder leicht seitlich, ruhiger einfarbiger Hintergrund, weiches gleichmäßiges Licht, Kleidung passend zum gewählten Look
- WICHTIG: es muss erkennbar dieselbe Person sein wie auf meinem Foto. Verändere Gesicht, Alter und Statur nicht.

Entferne danach den Hintergrund des erzeugten Bildes mit dem Higgsfield-Werkzeug zum Freistellen. Das freigestellte Bild ist das Bild für die Seite, weil es dort über einer farbigen Kreisfläche liegt und mit einem Zimmer im Hintergrund unsauber aussehen würde.

Zeig mir das Ergebnis und frag, ob es passt. Wenn nicht, erzeuge neu, bevor du weitermachst.

SCHRITT 3: MEIN LEBENSLAUF
Ich hänge meinen Lebenslauf an (PDF oder Word). Zieh dir daraus heraus:
- Name, aktuelle Rolle, Ort
- 3 bis 5 Kernkompetenzen
- 2 bis 4 Stationen oder Projekte, jeweils mit einem konkreten Ergebnis
- meine echten Links (LinkedIn, GitHub, eigene Website), nur die, die wirklich drinstehen

Erfinde NICHTS. Keine Firmen, keine Zahlen, keine Titel, die nicht im Lebenslauf stehen. Was fehlt, erfragst du bei mir. Wenn eine Station kein messbares Ergebnis hergibt, frag mich danach, statt eines zu erfinden.

SCHRITT 4: DIE SEITE BAUEN
Baue eine Portfolio-Seite mit React, TypeScript und Tailwind CSS. Verwende für den Kopfbereich EXAKT die folgende Komponente. Lege sie unverändert unter components/ui/minimalist-hero.tsx ab:

--- KOMPONENTE ANFANG ---
import React from 'react';
import { motion } from 'framer-motion';
import { LucideIcon } from 'lucide-react';
import { cn } from '@/lib/utils';

interface MinimalistHeroProps {
  logoText: string;
  navLinks: { label: string; href: string }[];
  mainText: string;
  readMoreLink: string;
  imageSrc: string;
  imageAlt: string;
  overlayText: { part1: string; part2: string };
  socialLinks: { icon: LucideIcon; href: string }[];
  locationText: string;
  className?: string;
}

const NavLink = ({ href, children }: { href: string; children: React.ReactNode }) => (
  <a href={href} className="text-sm font-medium tracking-widest text-foreground/60 transition-colors hover:text-foreground">
    {children}
  </a>
);

const SocialIcon = ({ href, icon: Icon }: { href: string; icon: LucideIcon }) => (
  <a href={href} target="_blank" rel="noopener noreferrer" className="text-foreground/60 transition-colors hover:text-foreground">
    <Icon className="h-5 w-5" />
  </a>
);

export const MinimalistHero = ({
  logoText, navLinks, mainText, readMoreLink, imageSrc, imageAlt,
  overlayText, socialLinks, locationText, className,
}: MinimalistHeroProps) => {
  return (
    <div className={cn('relative flex h-screen w-full flex-col items-center justify-between overflow-hidden bg-background p-8 font-sans md:p-12', className)}>
      <header className="z-30 flex w-full max-w-7xl items-center justify-between">
        <motion.div initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.5 }} className="text-xl font-bold tracking-wider">
          {logoText}
        </motion.div>
        <div className="hidden items-center space-x-8 md:flex">
          {navLinks.map((link) => (<NavLink key={link.label} href={link.href}>{link.label}</NavLink>))}
        </div>
        <motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.5 }} className="flex flex-col space-y-1.5 md:hidden" aria-label="Open menu">
          <span className="block h-0.5 w-6 bg-foreground"></span>
          <span className="block h-0.5 w-6 bg-foreground"></span>
          <span className="block h-0.5 w-5 bg-foreground"></span>
        </motion.button>
      </header>

      <div className="relative grid w-full max-w-7xl flex-grow grid-cols-1 items-center md:grid-cols-3">
        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, delay: 1 }} className="z-20 order-2 md:order-1 text-center md:text-left">
          <p className="mx-auto max-w-xs text-sm leading-relaxed text-foreground/80 md:mx-0">{mainText}</p>
          <a href={readMoreLink} className="mt-4 inline-block text-sm font-medium text-foreground underline decoration-from-font">Read More</a>
        </motion.div>

        <div className="relative order-1 md:order-2 flex justify-center items-center h-full">
          <motion.div initial={{ scale: 0.8, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1], delay: 0.2 }}
            className="absolute z-0 h-[300px] w-[300px] rounded-full bg-yellow-400/90 md:h-[400px] md:w-[400px] lg:h-[500px] lg:w-[500px]"></motion.div>
          <motion.img src={imageSrc} alt={imageAlt} className="relative z-10 h-auto w-56 object-cover md:w-64 scale-150 lg:w-72"
            initial={{ opacity: 0, y: 50 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1, ease: [0.22, 1, 0.36, 1], delay: 0.4 }}
            onError={(e) => { const t = e.target as HTMLImageElement; t.onerror = null; t.src = 'https://placehold.co/400x600/eab308/ffffff?text=Bild+fehlt'; }} />
        </div>

        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, delay: 1.2 }} className="z-20 order-3 flex items-center justify-center text-center md:justify-start">
          <h1 className="text-7xl font-extrabold text-foreground md:text-8xl lg:text-9xl">
            {overlayText.part1}<br />{overlayText.part2}
          </h1>
        </motion.div>
      </div>

      <footer className="z-30 flex w-full max-w-7xl items-center justify-between">
        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 1.2 }} className="flex items-center space-x-4">
          {socialLinks.map((link, index) => (<SocialIcon key={index} href={link.href} icon={link.icon} />))}
        </motion.div>
        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 1.3 }} className="text-sm font-medium text-foreground/80">
          {locationText}
        </motion.div>
      </footer>
    </div>
  );
};
--- KOMPONENTE ENDE ---

Belege die Eigenschaften mit meinen echten Daten:
- logoText: mein Nachname klein geschrieben mit Punkt, zum Beispiel "kauffmann."
- navLinks: Start, Über mich, Projekte, Kontakt (Anker #start, #about, #projects, #contact)
- mainText: ein bis zwei Sätze, was ich mache und was ich suche
- readMoreLink: "#about"
- imageSrc: das freigestellte Porträt aus Schritt 2
- imageAlt: eine kurze Beschreibung von mir
- overlayText: zwei sehr kurze Zeilen, die zu meinem Beruf passen (Form wie "let's" und "build.")
- socialLinks: nur meine echten Profile, Symbole aus lucide-react
- locationText: mein Ort

Wenn ich in Schritt 2 eine andere Akzentfarbe gewählt habe, tausche in der Komponente die Klasse bg-yellow-400/90 gegen die passende Tailwind-Farbe.

Baue unter den Kopfbereich drei schlichte Abschnitte im selben ruhigen Stil:
1. Über mich: drei bis vier Sätze plus meine Kernkompetenzen
2. Projekte: je Station eine Karte mit Rolle, Zeitraum und Ergebnis
3. Kontakt: E-Mail als Schaltfläche, dazu meine Links

Voraussetzungen, die du mit einrichtest: die npm-Pakete framer-motion und lucide-react, außerdem die Hilfsfunktion cn in lib/utils.ts (clsx zusammen mit tailwind-merge). Falls noch kein Projekt existiert, richte eines mit Vite, React, TypeScript und Tailwind ein.

Zum Schluss sag mir in einfachen Worten:
- wie ich die Seite lokal starte
- wie ich sie kostenlos veröffentliche, damit ich einen Link verschicken kann. Nenne mir einen konkreten Weg mit Schritten, nicht drei Möglichkeiten zur Auswahl.
- welche Datei ich anfasse, wenn ich später etwas ändern will

Falls du selbst Higgsfield-Werkzeuge zum Bauen und Veröffentlichen von Websites hast: frag mich, ob ich diesen Weg statt eines eigenen Projekts will. Dann liegt die Seite direkt unter einer higgsfield.app-Adresse und ich brauche gar nichts weiter einzurichten. Beschreibe mir kurz beide Wege mit ihrem Nachteil, bevor ich entscheide.

REGELN FÜR DICH
- Frag lieber einmal zu viel, als einmal zu raten.
- Keine erfundenen Inhalte und keine Platzhaltertexte wie "Lorem ipsum" in der fertigen Seite.
- Halte die Seite ruhig und aufgeräumt: viel Weißraum, wenige Farben, gut lesbare Schrift.