01 · نظرة عامة
زخم، لا تخمين
تسويق المعسكرات التدريبية يقوم على شيئين: رقم راتب وصورة جاهزة لشخص مبتهج أمام حاسوب محمول. منتج Brightloop الفعلي هو البنية — أفواج مباشرة، وموجّهون من سوق العمل، ومشاريع تُبنى لملف الأعمال أولًا، في ستة أشهر، بينما تحتفظ بوظيفتك. البنية هي ما يجب عرضه، والصورة لا تستطيع عرضها.
لذا لا تصوير في الصفحة إطلاقًا. ثلاث عشرة SVG مضمّنة تحمل المنظومة البصرية كلها، ونقاط الإثبات أدوات قياس: حلقات تقدّم تمتلئ، وأشرطة تنمو، وأرقام تَعُدّ. كلها تعمل من متغيّر التمرير نفسه والمراقب نفسه، فتقيس الصفحة نفسها دون أن تُثقل ميزانية الإطارات.
02 · الفكرة
أدوات قياس، لا رسوم توضيحية
في الصفحة الحية، كل أداة تمتلئ من خاصية مخصصة واحدة تُكتب مرة في الإطار ما دام قسمها على الشاشة. ثلاث حلقات، وثلاثة أشرطة، وكتابة واحدة. الأرقام أدناه محتوى تصوُّري، بُني لاختبار نمط الأدوات المتحركة على أرقام معقولة الشكل — لا إحصاءات من فوج حقيقي.
91%
معدل التوظيف، في هذا التصوُّر.
4.9/5
تقييم خرّيجين تخيّلي.
310
عدد شركاء توظيف تخيّلي.
03 · الأهداف
ما كان على الصفحة فعله
شرح حلقة، لا قاعة محاضرات
المنهج تكراري، لذا يُعرض حلقة مبوّبة بدل جدول خطي أسبوعًا بأسبوع.
ستة برامج، نتيجة واحدة
مسارات البيانات والتصميم والهندسة تؤول كلها إلى الوعد نفسه، دون ست صفحات هبوط شبه متطابقة.
تسعير بصدق
ادفع شهريًا، وفقط ما دمت تدرس — معلَنة عنوانًا رئيسيًا لا مدفونة خلف نموذج.
إثبات بأرقام حسنة السلوك
كل إحصاءة تتحرك مرة واحدة، من خط أنابيب مشترك واحد، وتُطبع فورًا مع تقليل الحركة.
04 · ترتيب البناء
اثنتا عشرة وحدة، خط أنابيب واحد
الرموز وسلّم الظلال
عشرون خاصية مخصصة: كحلي، وكوبالتي، ومرجاني، وكهرماني، وصبغة، وخط شعري — إضافة إلى سلّم ظلال من ثلاث طبقات يقوم بكل عمل الارتفاع.
خط أنابيب «تحرّك عند الرؤية»
حجر الأساس: مراقب واحد يغذّي الحلقات والأشرطة والعدّادات. ثلاثة آثار، ونقطة تسجيل واحدة، ومكان واحد لإصلاح أي علّة.
أدوات القياس SVG
حلقات مبنية على
pathLength="100"، فالحساب نسب مئوية لا محيط دائرة — لا حساب نصف قطر في أي مكان.تبويبات المنهج
ثلاث لوحات، وroving tabindex، و
aria-selectedصحيحة، ومحتوى اللوحات في الترميز لا مجلوبًا.بارالاكس العمق
بطاقات الواجهة الافتتاحية التجريبية تنجرف بمعامِلات معلنة في سمات
data-depth، فالأثر مؤلَّف في الترميز لا مثبَّت في الكود.
05 · البنية
ثلاثة ملفات
├── index.html 48.6 KB — 8 أقسام، 13 SVG مضمّنة، 0 صور
├── styles.css 42.1 KB — 20 خاصية مخصصة، 4 استعلامات وسائط
└── script.js 20.3 KB — 653 سطرًا، 12 وحدة مرقّمة
الحزمة التقنية
- Inline SVG
- pathLength
- IntersectionObserver
- data-depth
- Sora
- Public Sans
إتاحة الوصول
- Roving tabindex
- aria-selected
- SVG role + label
- aria-live
- Reduced motion
06 · ما عاندني
ما عاندني
حلقات تقدّم SVG تحتاج عادة إلى محيط محسوب من نصف القطر، ما يضع رقمًا سحريًا في CSS ينكسر لحظة تتغير الهندسة.
pathLength="100" يعيد تعريف طول المسار بـ100 وحدة، فتغدو stroke-dasharray وstroke-dashoffset نسبًا مئوية حرفيًا. يمكن للحلقة أن تكون بأي حجم؛ والحساب لا يتغير أبدًا.
الحلقات والأشرطة والعدّادات ثلاثة آثار تعني كلها «ابدأ عند الظهور». وثلاثة مراقبين ثلاثة أماكن تختبئ فيها العلّة نفسها.
مراقب واحد، وسمة تسجيل واحدة، وثلاثة مصيّرات. إضافة أداة رابعة لاحقًا مصيِّر جديد لا مراقب آخر — ومسار تقليل الحركة مكتوب مرة واحدة.
مخطط SVG زخرفي غير مرئي لقارئ الشاشة، ورقم يتحرك داخله أسوأ من غير المرئي.
كل أداة تحمل role="img" وaria-label يذكر القيمة النهائية بالكلمات، والرقم المتحرك بجانبها ليس في منطقة حية. تُعلَن القيمة مرة واحدة، صحيحةً، أيًا كان إعداد الحركة.
بارالاكس الواجهة بمعامِلات لكل عنصر داخل JavaScript يعني تعديل السكربت لتحريك بطاقة — فالتصميم يسكن الملف الخطأ.
كل بطاقة تعلن data-depth الخاصة بها. السكربت يقرؤها؛ والتكوين يبقى في الترميز حيث يستطيع المصمم تغييره.
07 · ما يستحق البقاء
الأجزاء التي تستحق البقاء
ثلاث خطوات من العالق إلى الموظَّف
العرض كله في صف واحد، قبل أي تسعير أو تفاصيل برنامج.
حلقة، لا قاعة محاضرات
تبويبات المنهج، التي تجعل البنية التكرارية مقروءة دون مخطط.
يدرّسها من يوظّفون
موجّهون يُقدَّمون بالأدوار التي يوظّفون لها — الكتلة الأكثر إقناعًا في الصفحة على الإطلاق.
فقط ما دمت تدرس
تسعير شهري يتوقف حين تتوقف الدورة، مقول بوضوح في العنوان.
مسار البيانات
التحليلات وSQL والإحصاء اللازم للدفاع عن استنتاج في اجتماع. مشروع ملف الأعمال مجموعة بيانات حقيقية مرفقة بسؤال حقيقي من صاحب مصلحة، لأن هذا ما ستدور حوله المقابلة فعلًا.
- SQL
- Python
- Dashboards
- Experiment design
مسار التصميم
تصميم المنتجات من البحث حتى واجهة مسلَّمة، يدرّسه أناس يوظّفون المصممين. المخرَج دراسة حالة، وهي الأثر الذي يقرؤه سوق العمل فعلًا.
- Research
- Systems
- Prototyping
- Case studies
مسار الهندسة
أساسيات الواجهة الأمامية والخلفية بميل صريح نحو التسليم. أربعة مشاريع منشورة على رابط عام تتفوق على اثني عشر درسًا مكتملًا في بيئة تجريبية.
- JavaScript
- APIs
- Testing
- Deployment
08 · شغّله مباشرة
شغّله هنا
البناء الحقيقي، مضمَّن ويعمل. يُحمَّل عند الطلب — لا يُجلَب شيء حتى تطلبه.
تخطَّ المعاينة المباشرة
البناء الحقيقي يعمل داخل الصفحة. المعاينة المباشرة صفحة مضمَّنة؛ اضغط Escape لمغادرتها.
افتح بملء الشاشة ↗
