CSS Print Engine
HTML5 / CSS3
Next Gen Application
Kein Word. Kein Canva. 100% Code.
Explore Case
Das Konzept
Bewerbung als
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
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?
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.
Geplant
PDF-Auto-Gen
Automatischer PDF-Export via Node.js (Puppeteer) bei jedem Git Push.