HTML/CSS CV Engine | Case Study

The Concept

Application as a
Code Experience

Standard tools like Word are inflexible and generate messy code. My solution: A custom framework based on HTML5 & CSS3 linking design freedom with technical precision.

The Goal: Absolute control over layout, typography, and 'Dark Glass' aesthetics – with perfect PDF export.

0 Dependencies

100 Lighthouse Score

A4 Format

Technical Deep Dive

Why HTML beats Word.

CSS

Print CSS Optimization

Using @page and zoom hacks for pixel-perfect A4 scaling without margins.

UI

Glassmorphism UI

Modern UI design with backdrop-filter and CSS variables for Dark Mode aesthetics.

GIT

Privacy Workflow

Separation of private data and code via .gitignore and placeholder strategy.

The Secret Sauce

How to force the browser to print perfect A4.

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;
    }
}

Why does this matter?

Standard websites print poorly. Headers get cut off, backgrounds turn white.

My Solution: I use @media print to completely recalculate the CSS Grid. Elements like navigation bars are hidden, while the CV container is forced to the exact physical millimeters of an A4 sheet.

Challenges & Solutions

🖨️

Problem: Browser Rendering

Browsers render margins differently. A Chrome PDF looked different from Edge.

🛡️

Solution Usage of `webkit-print-color-adjust: exact` and strict CSS reset for print media.

🔒

Problem: Privacy

How to show code on GitHub without leaking my phone number?

🛡️

Solution Architecture Split: `index.html` (Dummy Data) vs. `private_data.js` (Local).

Mission Gallery

🔍 CV

🔍 Letter

Word vs. Code

❌

Classic Templates

Layouts break when text changes
No versioning (CV_Final_v2.docx)
Boring standard design
Poor PDF compression

✅

My HTML Engine

Pixel-Perfect: Layout is set in stone (CSS Grid)
Git Versioning: Every change is traceable
High-End UI: Glassmorphism & Vector Graphics
Privacy: Data separation via .gitignore

What's Next?

Fertig ✓

Core Engine

HTML Structure & Print CSS

Fertig ✓

Privacy Layer

Git Hooks & Data Separation

Geplant

JSON Import

Lebenslauf-Daten aus JSON-Datei laden statt Hardcoding.