Next Gen Application
لا Word. لا Canva. 100% Code.
طلب التوظيف كـ
تجربة برمجية
الأدوات التقليدية كـ Word محدودة وتُنتج كوداً غير نظيف. حلّي: إطار عمل مخصص مبني على HTML5 & CSS3، يجمع حرية التصميم مع الدقة التقنية.
الهدف: تحكم مطلق في التخطيط والطباعة وجماليات «Dark Glass» — مع تصدير PDF مثالي.
Technical Deep Dive
لماذا HTML يتفوق على Word.
Print CSS Optimization
استخدام @page وتقنيات zoom لتحجيم A4 بدقة البكسل بدون هوامش.
Glassmorphism UI
تصميم UI حديث باستخدام backdrop-filter ومتغيرات CSS لجماليات الوضع المظلم.
Privacy Workflow
فصل البيانات الخاصة عن الكود عبر .gitignore واستراتيجية البيانات التجريبية.
The Secret Sauce
كيف تُجبر المتصفح على طباعة A4 مثالي.
/* 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;
}
}
لماذا يهم هذا؟
صفحات الويب العادية تُطبع بشكل سيئ. تُقطع الترويسات وتتحول الخلفيات للأبيض.
حلّي: أستخدم @media print لإعادة حساب CSS Grid بالكامل. العناصر كأشرطة التنقل تُخفى، بينما يُجبَر حاوي السيرة الذاتية على مطابقة الأبعاد الفيزيائية لورقة A4 بالمليمتر.
التحديات & الحلول
المشكلة: Browser Rendering
تُعرض المسافات بشكل مختلف بين المتصفحات. PDF من Chrome يبدو مغايراً لـ Edge.
المشكلة: الخصوصية
كيف أعرض الكود على GitHub دون كشف بياناتي الشخصية؟
Mission Gallery
Word مقابل الكود
القوالب الكلاسيكية
- التخطيط يتشوه عند تغيير النص
- لا تحكم في الإصدارات (CV_Final_v2.docx)
- تصميم قياسي ومملّ
- ضغط PDF رديء
محركي بـ HTML
- Pixel-Perfect: التخطيط ثابت تماماً (CSS Grid)
- Git Versioning: كل تعديل قابل للتتبع
- High-End UI: Glassmorphism وجرافيكس متجهية
- Privacy: فصل البيانات عبر .gitignore
What's Next?
Core Engine
HTML Structure & Print CSS
Privacy Layer
Git Hooks & Data Separation
JSON Import
Lebenslauf-Daten aus JSON-Datei laden statt Hardcoding.
PDF-Auto-Gen
Automatischer PDF-Export via Node.js (Puppeteer) bei jedem Git Push.