HTML/CSS CV Engine | Case Study

Das Konzept

Bewerbung als
Code-Experience

Standard-Tools wie Word sind unflexibel...

Das Ziel: Absolute Kontrolle...

0 Dependencies

100 Lighthouse

A4 Format

Technical Deep Dive

Warum HTML besser ist als Word.

CSS

Print CSS

@page Optimization

UI

Glassmorphism

Backdrop Filter UI

GIT

Privacy

Gitignore Strategy

The Secret Sauce

Wie man den Browser zwingt, perfektes A4 zu drucken.

style.css (Print Logic)


/* Der "Magic Hack" für randlosen Druck */
@media print {
    @page {
        margin: 0; /* Zwingt Browser-Ränder auf 0 */
        size: A4;
    }

    html, body {
        width: 210mm;
        height: 297mm;
        /* Verhindert Scaling-Fehler bei unterschiedlichen DPI */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .page-wrapper {
        /* Zoom-Fix für überlaufende Inhalte */
        zoom: 0.95; 
        background-color: #1a1a1a !important;
    }
}

Warum ist das wichtig?

Standard-Webseiten drucken schlecht...

Challenges & Solutions

🖨️

Problem: Browser Rendering

Browser rendern unterschiedlich...

🛡️

Solution webkit-print-color-adjust...

🔒

Problem: Privacy

Private Daten auf GitHub?

🛡️

Solution Data Split Strategy...

Mission Gallery

🔍 CV

🔍 Letter

Word vs. Code

❌

Klassische Vorlagen

Verrutschende Layouts
Keine Versionierung
Langweiliges Standard-Design
Schlechte PDF-Komprimierung

✅

Meine HTML-Engine

Pixel-Perfect Layout
Git-Versionierung
High-End UI
Privacy Protection

What's Next?

✅ Done

Core Engine

HTML Structure & Print CSS

✅ Done

Privacy Layer

Git Hooks & Data Separation

🚧 Planned

JSON Import

Lebenslauf-Daten aus JSON laden.

🚀 Vision

PDF-Auto-Gen

Automatischer PDF-Export via Node.js.

Check the Results

Code oder PDF.

GitHub Repo

Full Source Code

View Code

Bewerbung als Code-Experience