تفاصيل العمل

# 🏢 الفكرة

موقع تعريفي + كتالوج لـ Nerd Developer، مطروح كـشركة تقنية عامة مو استوديو ألعاب: أربعة أقسام (أمن سيبراني · تشفير وبيانات · مواقع وأنظمة · سيرفرات ألعاب)، وقسم الألعاب هو "القسم البارز" اللي عنده كتالوج منتجات.

## 🎨 الشكل البصري — "Technical Editorial"

- **الأرضية:** ورقية دافئة `#F3F2EE` مع شبكة تقنية خفيفة جدًا ثابتة خلف كل شي (texture مو زخرفة).

- **الحبر:** أسود شبه صافي `#0C0C0E`. الأحمر `#CC1933` وظيفي فقط — أيقونات، خطوط، أرقام مفاتيح، الزر الأساسي.

- **الخطوط:** Outfit للعناوين (عريض، تتبّع سالب) · JetBrains Mono لكل اللِيبلات والأسعار والميتاداتا — هذي هي الإشارة اللي تقول "مطورين سوّوه" · Fraunces مائل أحمر كلمة أكسنت نادرة · Tajawal للعربي.

- **البنية** بالخطوط الهيرلاين مو بالظلال — حواف 10px مو pills، الظل يُستخدم بس عند التفاعل.

## 📄 الصفحات

| الصفحة | المحتوى |

|---|---|

| `index` | هيرو (Nerd + شكل 3D) ← بلوك أمان + توافق ← منتجات مختارة ← شريط أرقام ← كروت الأقسام الأربعة ← CTA |

| `divisions` | قائمة الأقسام الأربعة |

| `division.html?id=` | صفحة قسم كاملة: هيرو + 4 مزايا + "شو بتاخذ" + CTA |

| `scripts` | كتالوج ببحث + فلاتر (منصة/سعر) + ترتيب + عدّاد |

| `script.html?id=` | تفاصيل منتج: بانل شراء، اعتماديات، تشينج لوق، درجة أمان |

| `security` | معيار الأمان + قائمة الضمانات |

| `about` / `contact` | القصة + فورم متحقّق يفتح mailto |

## ⚙️ التقنية

- ستاتيك بالكامل، Vanilla JS بدون build step.

- صفر innerHTML — كل شي عبر `el()`/`textContent` في `core.js` (قرار أمني مقصود).

- `data.js` هو المصدر الوحيد للبيانات — الصفحات ما تحتوي محتوى مكتوب داخلها.

- Three.js (589KB) lazy عبر `requestIdleCallback` — اللوقو المسطّح يطلع أول، الكانفاس يبدّله بعدين.

- ثنائي اللغة كامل EN/AR مع RTL حقيقي، اللهجة سعودية بيضاء، والمصطلحات التقنية تُكتب كما تُنطق.

بطاقة العمل