ملف أعمال تفاعلي متعدد اللغات ونظام إدارة محتوى شخصي
- التاريخ : 2026
- تطوير الويب
- قيد الإنجاز
إنجاز هذا الموقع: ملف أعمال وسيرة ذاتية تفاعلية ويوميات مصوّرة بالإنجليزية والفرنسية والعربية (من اليمين إلى اليسار)، يُدار بالكامل من نظام إدارة محتوى.
نظرة عامة
هذا الموقع هو في حدّ ذاته أحد مشاريعي: ملف أعمال شخصي يجمع سيرة ذاتية تفاعلية وواجهة للمشاريع وملفًا مهنيًا ويوميات مصوّرة لأنشطتي، ويُدار كلّه من نظام إدارة محتوى شخصي.
يأتي كل المحتوى من قاعدة البيانات ويُترجم إلى ثلاث لغات، مع واجهة حقيقية من اليمين إلى اليسار بالعربية. ويتّبع كل عنصر المستويين نفسيهما: معاينة قصيرة، ثم عرض مفصّل بالصور والتعليقات.
حُدّدت مواصفات المشروع أولًا (نموذج البيانات، قواعد العمل، نظام التصميم، أهداف إمكانية الوصول والأداء)، ثم أُنجز على مراحل مع اختبارات آلية في كل خطوة.
أرقام رئيسية
- لغات، منها العربية من اليمين إلى اليسار
- 3
- لغات، منها العربية من اليمين إلى اليسار
- اختبارًا وحدويًا
- 164
- اختبارًا وحدويًا
- درجة إمكانية الوصول في Lighthouse
- 100
- درجة إمكانية الوصول في Lighthouse
التقنيات
Next.js
React
TypeScript
Payload CMS
MongoDB
Tailwind CSS
Node.js
Docker
Vitest
Playwrightالمشكلة
يتقادم ملف الأعمال الثابت بسرعة، وتصعب ترجمته، ونادرًا ما يعرض المسار كاملًا — المشاريع والخبرات والجمعيات والفعاليات — بشكل واضح وسهل الوصول.
الحل
تطبيق Next.js 15 (App Router) يدمج Payload CMS 3 و MongoDB: عرض من جهة الخادم لتحسين الظهور في محركات البحث، وترجمة أصلية للمحتوى (en/fr/ar) مع لغة احتياطية، وواجهة مترجمة بـ next-intl، وخصائص Tailwind v4 المنطقية لدعم الكتابة من اليمين إلى اليسار، ومسودات مع إعادة تحقق عند الطلب ليُحدَّث الموقع فور النشر.
مساهمتي
تصميم المشروع وإنجازه بالكامل: المواصفات، ونموذج البيانات والمجموعات، ونظام التصميم (سمة فاتحة وداكنة ولون مميّز قابل للضبط)، والمكوّنات العامة، وتخصيص لوحة الإدارة، وتحسين الظهور في محركات البحث، والاختبارات الوحدوية والشاملة.
الميزات
- ثلاث لغات مع واجهة حقيقية من اليمين إلى اليسار بالعربية، وروابط مترجمة، وتغيير للّغة يحافظ على الصفحة والمرشّحات والنافذة المفتوحة
- انتقال من البطاقة إلى التفاصيل بحركة مشتركة، وروابط مباشرة، وإدارة للتركيز بلوحة المفاتيح، ولوحة سفلية على الجوّال
- قصص مصوّرة بتعليقات مع عارض بملء الشاشة (سحب، تكبير، أسهم معكوسة في الاتجاه من اليمين إلى اليسار)
- سيرة ذاتية تفاعلية: فصول مرقّمة، وعناصر تتوسّع في مكانها، وخط زمني للسنوات، وإبراز المهارات
- إدارة متقدمة: منشئ للصفحة الرئيسية، وإعدادات جاهزة، ومؤشر اكتمال الترجمة لكل لغة، ورفع عدة صور دفعة واحدة، ومعاينة مباشرة
- لوحة أوامر (Ctrl/⌘ + K)، وصور Open Graph ديناميكية، وصفحة سيرة ذاتية قابلة للطباعة، وخريطة موقع متعددة اللغات و JSON-LD
لقطات الشاشة
الصفحة الرئيسية: غلاف السيرة الذاتية التفاعلية مع الصورة والتوفّر وأزرار التواصل (واتساب، لينكدإن، غيت هاب).
التربّصات والمشاريع: كل تربّص على الخط الزمني مع المشروع المنجز فيه؛ «عرض المشروع» يفتح تفاصيله.
الشهادات: معرض واحد ينتقل من فئة إلى أخرى، يُدار بالكامل من لوحة الإدارة.
واجهة حقيقية من اليمين إلى اليسار بالعربية، إلى جانب الإنجليزية والفرنسية.
لوحة الإدارة (Payload CMS): تُبنى الصفحة الرئيسية من أقسام يمكن ترتيبها وإخفاؤها وضبطها.
تحرير مشروع في لوحة الإدارة مع حالة الترجمة بالإنجليزية والفرنسية والعربية.
فئات الشهادات، تُنشأ وتُرتَّب بالسحب والإفلات في لوحة الإدارة.