بورتفوليو شخصي احترافي ثنائي اللغة (عربي/إنجليزي) — تصميم سينمائي بوضعين فاتح وداكن

موقع بورتفوليو شخصي تم تصميمه وتطويره بالكامل من الصفر كدراسة عملية في فن تطوير الواجهات الأمامية الحديثة. يقدّم الموقع تجربة سينمائية بمستوى الوكالات العالمية مع الحفاظ على الخفة، الوصولية، والاستجابة الكاملة على جميع الأجهزة — من الشاشات الكبيرة إلى الهواتف المحمولة. كل قسم تم تصميمه بعناية واضحة: قسم رئيسي بأسلوب افتتاح فيلم سينمائي، بطاقات مشاريع تشبه عروض المنتجات، خدمات بخلفيات SVG رمزية، آراء عملاء تعزز الثقة، ونموذج تواصل يعمل كنظام إنتاجي حقيقي مع تحقق متقدم. ⭐ الميزات الرئيسية ◀ تجربة ثنائية اللغة (عربي / إنجليزي) تبديل كامل بين اللغتين مع دعم RTL بشكل صحيح. كل النصوص، الـ placeholders، ورسائل الخطأ، ومحتوى HTML تتغير فوراً، مع حفظ التفضيل بين الجلسات. ◀ وضعان داكن وفاتح تصميمان سينمائيان بألوان وتدرجات وظلال دقيقة لكل وضع. تبديل سلس بدون أي وميض (FOUC) مع حفظ تفضيل المستخدم. ◀ قسم رئيسي سينمائي بطاقات كود طافية، شريط تقنيات متحرك، صورة شخصية بإطار متدرج، تأثير parallax يتبع حركة الماوس، وعنوان رئيسي مرن. ◀ شبكة Bento للتعريف تصميم حديث مع عدادات متحركة (سنوات، مشاريع، Lighthouse، عملاء)، اقتباس أنيق، وتأثير ضوئي تفاعلي على البطاقات. ◀ قسم المهارات 9 تقنيات أساسية (PHP، Laravel، Tailwind، JavaScript، MySQL، REST API، Git، Bootstrap، AJAX) مع ألوان رسمية، تأثير 3D، وهالات متدرجة عند التمرير. ◀ معرض المشاريع 9 بطاقات مشاريع بتأثير parallax ثلاثي الأبعاد، إضاءة تتبع الماوس، لمعان متحرك، وإطارات سينمائية، مع بطاقة مميزة بعرض كامل. ◀ خدمات بخلفيات SVG 6 خدمات بهويات بصرية مخصصة: كود، Laravel، dashboards، APIs، wireframes، وحركة — كل خدمة بلون مستقل. ◀ خط زمني تفاعلي خط عمودي متدرج مع نقاط مضيئة وحركات دخول عند التمرير. ◀ آراء العملاء بطاقات احترافية مع تقييم 5 نجوم متحرك، شارات منصات (مستقل / خمسات / Upwork)، وتدرجات مخصصة للصور الرمزية. ◀ نموذج تواصل احترافي تحقق فوري، رسائل خطأ ثنائية اللغة، دعم Unicode للأسماء العربية، عداد أحرف، حالات زر متعددة (تحميل / نجاح)، وحركات تفاعلية عند الأخطاء. ◀ زر واتساب عائم زر تفاعلي مع نبض، موجات انتشار، مؤشر اتصال، وتلميح محادثة يبدو كنظام دعم حقيقي. ◀ تصميم متجاوب للجوال قائمة جانبية مخصصة، عناصر مرقمة، أيقونات تفاعلية، ودعم كامل للـ RTL/LTR من 320px فما فوق. ⭐ المميزات التقنية ◀ HTML / CSS / JavaScript بدون أطر عمل ◀ CSS حديث (conic-gradient, color-mix, @property, backdrop-filter) ◀ Devicon CDN لتقنيات حقيقية ◀ IntersectionObserver لتحسين الأداء ◀ requestAnimationFrame للتمرير السلس ◀ localStorage / sessionStorage لحفظ الإعدادات ◀ دعم Reduced Motion للوصولية ◀ HTML دلالي + ARIA + دعم لوحة المفاتيح ◀ SEO + Open Graph + جاهزية للطباعة ⭐ فلسفة التصميم هذا المشروع يعكس فكرة أن البورتفوليو هو أول منتج يقدمه المطور. كل تفصيلة — من الحركات إلى الظلال والتدرجات — تم تصميمها يدوياً بدون قوالب أو أنماط جاهزة. النتيجة تجربة حية، راقية، ومصممة بعناية تعكس مستوى العمل الحقيقي الذي أقدمه للعملاء.