Ein moderner, professioneller und hochgradig anpassbarer Lebenslauf-Builder, der mit HTML5, CSS3, Tailwind CSS v4 und Vite erstellt wurde. Er ist speziell für den A4-Ausdruck optimiert und ermöglicht es, den Lebenslauf direkt im Webbrowser visuell anzupassen und abzuspeichern.
- Tailwind CSS v4: Nutzt das brandneue Tailwind CSS v4 Framework für moderne Stile und flexible Theme-Definitionen über CSS-Variablen.
- DINA4 optimiert: Durchdachtes 2-Seiten-Layout mit CSS-Print-Overrides. Keine abgeschnittenen Elemente oder Layout-Verschiebungen beim PDF-Export.
- Interaktiver Editor: Sämtliche Texte im Lebenslauf sind direkt per Klick im Browser editierbar (
contenteditable="true"). - Auto-Save & Cache: Änderungen werden automatisch lokal im Browser-Speicher (
localStorage) gesichert, damit nichts verloren geht. - Multi-Theme Unterstützung: Bietet vier vordefinierte, professionelle Farbpaletten ("Classic Navy", "Emerald Forest", "Deep Purple", "Charcoal Minimal"), die mit einem Klick gewechselt werden können.
- PDF-Export: Direkter Export über den nativen Druckdialog (
window.print()) des Browsers, bereinigt um alle Bedienelemente.
Folge diesen Schritten, um den CV-Builder lokal auszuführen:
Öffne ein Terminal in diesem Projektordner:
cd dev/tailwind-cvDer lokale Server wird gestartet und bietet Live-Reload:
pnpm run devÖffne die folgende Adresse in deinem Browser: 👉 http://localhost:5173/
- Stelle sicher, dass der Bearbeitungsmodus: EIN oben in der Leiste aktiv ist.
- Klicke auf ein beliebiges Textelement (z.B. Name, Berufsbezeichnung, Stichpunkte der Berufserfahrung oder Technologien).
- Tippe einfach deinen Text ein. Er wird im Hintergrund sofort per Auto-Save gesichert.
Klicke oben auf die runden Farbkreise in der Steuerungsleiste, um das Design augenblicklich zu wechseln:
- 🔵 Classic Navy (Standard: Professionelles Dunkelblau & Slate)
- 🟢 Emerald Forest (Modernes Dunkelgrün & Mint)
- 🟣 Deep Purple (Kreatives Violett & Indigo)
- ⚫ Charcoal Minimal (Elegantes Anthrazit & Indigo)
Wenn du von vorne anfangen möchtest, klicke einfach auf Reset in der Steuerungsleiste. Dadurch werden deine Browser-Caches gelöscht und die Standard-Demodaten wiederhergestellt.
Um deinen Lebenslauf als fehlerfreies PDF zu exportieren, befolge diese Schritte im Browser:
- Klicke in der Steuerungsleiste oben auf den Button "PDF Exportieren" (oder drücke
Strg + P/Cmd + P). - Konfiguriere im sich öffnenden Druckdialog deines Browsers folgende Einstellungen:
- Ziel: Als PDF speichern oder Save as PDF.
- Seiten: Alle (1 & 2).
- Layout: Hochformat / Portrait.
- Papierformat: A4.
- Ränder: Keine oder Minimal (Empfohlen: Keine / None, da die Ränder bereits perfekt im CSS-Layout definiert sind).
- Optionen: Aktiviere unbedingt Hintergrundgrafiken / Background graphics (damit die farbigen Hintergründe und Fortschrittsbalken im PDF sichtbar sind).
- Deaktiviere Kopf- und Fußzeilen (Headers and footers), damit keine Browser-URLs auf dem Ausdruck erscheinen.
- Klicke auf Speichern und wähle deinen Speicherort.
index.html— Die CV-Struktur mit allen editierbaren Elementen (data-cv-key).vite.config.js— Konfiguration für Vite und Tailwind Compiler.pnpm-workspace.yaml— Whitelist für erlaubte Dependency-Builds (esbuild).src/style.css— Tailwind v4@import, Theme-Variablen und dedizierte@media print-Regeln.main.js— Event-Handling für Editiermodus,localStorage-Sicherung und Theme-Wechsel.