Erstelle eine Jobbewerbungs-Website mit Claude Code an einem Nachmittag

Jeder Recruiter bekommt den gleichen Stapel PDFs. Gleiche Schriften, gleiches Layout, gleiches zweiseitiges Format. Was fast niemand beilegt, ist ein Link zu einer sauberen, interaktiven Website, die dieselben Informationen besser darstellt, auf jedem Gerät funktioniert und wie etwas bewusst Gestaltetes wirkt. Du kannst eine solche Seite an einem einzigen Nachmittag erstellen — mit Claude Code Desktop, ohne selbst eine Zeile Code zu schreiben.

Das Konzept

Du hängst deinen Lebenslauf wie gewohnt als PDF an. Aber im Anschreiben fügst du eine kurze URL, ein Passwort und eine Zeile Erklärung hinzu.

Der Recruiter öffnet den Link, gibt das Passwort ein und sieht deinen Lebenslauf als strukturierte, interaktive Seite — klar getrennte Abschnitte, flüssige Navigation, mobilfreundliches Layout, mehrere Sprachen. Immer noch dein Lebenslauf. Nur so präsentiert, dass er schneller erfassbar und schwerer zu vergessen ist.

Schau dir unsere Beispiel-Website für Homer J. Simpson an!

Warum Recruiter darauf ansprechen

Recruiter lesen keine Lebensläufe. Sie scannen. Innerhalb von Sekunden entscheiden sie, ob jemand passt und ob sich ein genauerer Blick lohnt.

Eine gut gebaute Website verändert diese Kalkulation sofort. Sie hebt sich von identischen PDFs ab. Sie zeigt Initiative, ohne sie zu behaupten. Sie demonstriert digitale Kompetenz auf praktische statt auf darstellerische Weise.

Das Ziel ist nicht Komplexität. Es geht um weniger Reibung und einen stärkeren ersten Eindruck.

Was Claude Code für dich erledigt

Du baust nichts manuell. Gib Claude Code deinen Lebenslauf als Datei und eine klare Anweisung. Es liest deinen Inhalt, strukturiert ihn in Abschnitte, erstellt Layout und Design, fügt Navigation und Feinschliff hinzu und gibt eine vollständige Website aus.

Du prüfst das Ergebnis, bittest um Änderungen und iterierst, bis es passt.

Der Workflow

Lade deinen Lebenslauf hoch

Öffne Claude Code Desktop und lege deine Lebenslauf-Datei in das Arbeitsverzeichnis. Mehr ist nicht nötig.

Fordere eine Website-Version an

Schreib deinen Prompt. Gib Anweisungen für ein sauberes, professionelles Design, klare Abschnitte (Übersicht, Erfahrung, Ausbildung, Skills, Sprachen, Kontakt), Navigation, mobiles Layout, dezente Animationen, Passwortschutz und Mehrsprachigkeit.

Hier ist ein bewährter Prompt, den du direkt verwenden kannst. Er enthält alles, was wir in diesem Blogpost besprechen!

Die wichtigste Anweisung: Fordere ausdrücklich eine einzelne, eigenständige HTML-Datei.

Output a single self-contained index.html file with all CSS and JavaScript
inline. No external dependencies, no separate asset files.

Diese eine Einschränkung beseitigt fast alle technischen Hürden. Keine Build-Tools, keine Abhängigkeiten, keine Hosting-Komplexität. Eine Datei, die du überall hochladen kannst — und sie funktioniert.

Iterieren

Claude Code generiert die komplette Seite. Du steuerst mit einfacher Sprache:

• „Mach es minimalistischer"
• „Verbessere die Lesbarkeit im Erfahrungsbereich"
• „Der Abstand zwischen den Abschnitten fühlt sich zu eng an"
• „Hebe die Skills deutlicher hervor"

Die meisten Iterationen dauern unter einer Minute.

Export

Am Ende hast du eine index.html. Inhalt, Design, Verhalten — alles drin. Keine zusätzlichen Dateien.

Features, die du anfordern solltest

Eine gute Version dieser Seite enthält mehrere Dinge, die gezieltes Prompting erfordern.

Passwortschutz

Die Seite öffnet sich mit einem Passwort-Bildschirm. Das Passwort wird nie im Klartext gespeichert — nur ein SHA-256-Hash befindet sich in der Datei. Der Zugang gilt nur für die aktuelle Browser-Sitzung.

Du teilst das Passwort in deinem Anschreiben mit. Das schafft ein kontrolliertes Erlebnis und vermittelt Intentionalität, die generische öffentliche Lebensläufe nicht haben.

Die Implementierung sieht so aus:

// Hash stored in the file, never the plain password
const PASSWORD_HASH = "5e884898da28047151d0e56f8dc6292773603d0d6aabbdd62a11ef721d1542d8";

async function checkPassword(input) {
  const hash = await crypto.subtle.digest(
    'SHA-256',
    new TextEncoder().encode(input)
  );
  const hashHex = Array.from(new Uint8Array(hash))
    .map(b => b.toString(16).padStart(2, '0')).join('');
  return hashHex === PASSWORD_HASH;
}

Der Recruiter tippt das Passwort ein, der Browser hasht es clientseitig und vergleicht es mit dem gespeicherten Hash. Treffer → der Lebenslauf-Inhalt wird sichtbar. Kein Server erforderlich.

Eine entschlossene Person könnte deinen Lebenslauf-Inhalt unabhängig vom Hash aus dem HTML-Quelltext extrahieren. Das ist keine Tresor-Sicherheit — es ist eine Schranke, die Gelegenheitsbesucher draußen hält und das Erlebnis bewusst wirken lässt. Für eine Bewerbung reicht das.

Mehrsprachigkeit

Derselbe Lebenslauf verfügbar auf Deutsch, Englisch und Französisch. Der Wechsel erfolgt sofort — kein Neuladen, keine separaten Seiten.

Besonders wertvoll im Schweizer oder internationalen Kontext, wo Sprachflexibilität etwas Reales über deine Arbeitsweise signalisiert.

Weise Claude Code an, dies als Sprach-Toggle mit einem Content-Objekt umzusetzen:

const content = {
  de: { title: "Erfahrung", intro: "..." },
  en: { title: "Experience", intro: "..." },
  fr: { title: "Expérience", intro: "..." }
};

Feste Navigation

Eine fixierte Leiste oben ermöglicht es Recruitern, direkt zum gewünschten Abschnitt zu springen. Die meisten gehen direkt zu Erfahrung — die Navigation macht daraus einen Klick statt eines Scrollens durch Inhalte, die sie noch nicht brauchen.

Erfahrungs-Timeline

Statt einer dichten Liste erscheint die Erfahrung als vertikale Timeline. Leichter zu erfassen, klarerer Werdegang, visuell strukturiert. Der Lesbarkeits-Unterschied im Vergleich zu einer flachen Aufzählungsliste ist erheblich.

Scroll-Animationen

Kleine Details verbessern das Gesamtgefühl, ohne abzulenken. Abschnitte blenden beim Scrollen ein, Elemente erscheinen mit leichter Verzögerung, ein Tippeffekt stellt deine Rolle vor. Richtig umgesetzt wirkt das poliert statt aufdringlich.

Weise Claude Code an, Intersection Observer für scroll-gesteuerte Animationen zu verwenden statt schwerer Bibliotheken. Das hält die Datei eigenständig und performant.

Online stellen

Du hast eine index.html. Sie online zu bringen dauert etwa fünf Minuten — und du kannst eine professionelle URL, Hosting und eine passende E-Mail-Adresse an einem Ort haben, für 5 $ im Monat.

Der einfache Weg: Fastmail

Fastmail ist vor allem als schneller, datenschutzfreundlicher E-Mail-Anbieter bekannt. Was weniger bekannt ist: Wenn du eine Domain über Fastmail registrierst, kannst du eine statische Website direkt über deine Fastmail Files darauf hosten — kein Server, keine Konfiguration, keine Deploy-Pipeline.

So sieht der gesamte Prozess aus:

1. Melde dich bei Fastmail an — 5 $/Monat, 30 Tage kostenlose Testphase, 10 % Rabatt im ersten Jahr über unseren Link.
2. Registriere deine Domain — wähle deinname.com bei der Anmeldung oder füge sie später hinzu. Fastmail verwaltet das DNS für dich.
3. Lade deine Datei hoch — geh zu Files, erstelle einen Ordner, lade deine index.html hoch.
4. Aktiviere das Hosting — zeige in den Fastmail-Einstellungen deine Domain auf diesen Ordner. SSL wird automatisch eingerichtet.
5. Fertig. Dein Lebenslauf ist live unter deinname.com.

Deine E-Mail-Adresse — email@deinname.com — ist im selben Tarif enthalten. Du kannst beliebig viele Aliasse erstellen: zum Beispiel jobs@deinname.com. Schreib sie auf deinen Lebenslauf. So eine Premium-E-Mail-Adresse mit eigener Domain wirkt bewusst gewählt, nicht zufällig.

Füge einen QR-Code in dein Anschreiben ein

Generiere einen QR-Code aus deiner URL und platziere ihn in deinem Anschreiben zusammen mit einer Zeile wie:

„Eine interaktive Version meines Lebenslaufs ist unter deinname.com verfügbar. Du kannst auch den QR-Code unten scannen. Passwort: morning47"

Müheloser Zugang, besonders für Recruiter, die Bewerbungen auf dem Handy lesen.

Die Einschränkung, die alles funktionieren lässt

Der Großteil dieses Beitrags handelt vom Ergebnis. Die Entscheidung, die es nutzbar macht, ist die Ein-Datei-Einschränkung.

Wenn du Claude Code nach einer React-App oder einem Projekt mit separaten CSS- und JS-Dateien fragst, führst du Deployment-Komplexität ein, die den Zweck verfehlt. Ein Recruiter kann einen GitHub-Repository-Link nicht so öffnen wie eine direkte URL.

Eine Datei. Alles inline. Überall hochladen. Funktioniert sofort. Das macht den Ansatz praktisch statt theoretisch.

Es geht nicht darum, technisch zu sein

Dieser Ansatz funktioniert, weil er die Wahrnehmung verändert, bevor der Recruiter ein einziges Wort deiner Erfahrung liest. Er zeigt, dass du über das Minimum hinausgehst, Informationen klar präsentierst und moderne Tools gut genug verstehst, um sie für echte Zwecke einzusetzen.

Der Aufwand ist ein Nachmittag. Das Signal ist unverhältnismäßig stark. Und einmal gebaut, verwendest du es für alle Bewerbungen wieder — Inhalt in der index.html aktualisieren, neu hochladen, fertig.

Füge die URL dieses Beitrags in Claude Code oder deinen KI-Assistenten deiner Wahl ein, falls du beim Erstellen nicht weiterkommst.

Wo du das betreiben kannst

Für E-Mail auf deiner eigenen Domain kostet Fastmail 5 $/Monat, unterstützt unbegrenzte Domains und Aliasse und bietet eine 30-tägige kostenlose Testphase mit 10 % Rabatt im ersten Jahr. Besser als sich mit selbstgehostetem SMTP für eine Bewerbungsdomain herumzuschlagen.

(Affiliate-Links — wir erhalten eine kleine Provision, wenn du dich anmeldest, ohne Mehrkosten für dich.)