هذا المشروع عبارة عن موقع بورتفوليو (Portfolio) شخصي من صفحة واحدة (Single Page Application)، تم تصميمه وبناؤه من الصفر ليعكس مهارات تطوير الواجهات الأمامية (Front-End Development) وبناء تجارب مستخدم (UX) فخمة وسلسة. لا يقتصر الموقع على عرض المشاريع كروابط صامتة، بل يعتمد على أسلوب "دراسة الحالة" (Case Study) لشرح التحديات البرمجية وكيفية حلها، مما يجعله منصة قوية لجذب العملاء وأصحاب الشركات.
تم تزويد الموقع بأحدث التقنيات التفاعلية لضمان بقاء الزائر أطول فترة ممكنة، مع تسهيل طرق التواصل المباشر وتوفير ردود فورية عبر الذكاء الاصطناعي.
المميزات التقنية والتفاعلية الأساسية:
مساعد ذكي مدمج (AI Assistant): يحتوي الموقع على مساعد افتراضي عائم مدعوم بواجهة برمجة تطبيقات Gemini (Gemini API). يعمل هذا المساعد كممثل شخصي لصاحب البورتفوليو، حيث يمكنه الإجابة على أسئلة الزوار حول المهارات، الخبرات، وكيفية التواصل بشكل فوري وذكي.
عرض المشاريع بنظام "دراسات الحالة" (Case Studies): قسم مخصص للمشاريع المتميزة (مثل متجر Props Store) يشرح فكرة المشروع، التحديات، والحلول البرمجية التي تم تطبيقها (مثل سلة المشتريات المرنة ونظام الـ Lightbox)، مما يبرز القدرة على حل المشكلات.
نظام المظهر المتكيف (Advanced Theme Switcher): ميزة التبديل السلس بين الوضعين الداكن (Dark Mode) والفاتح (Light Mode) باستخدام متغيرات CSS، مع حفظ تفضيلات المستخدم تلقائياً.
تكامل احترافي مع قنوات التواصل (WhatsApp Integration): يضم الموقع زر واتساب عائم يتيح للعملاء بدء محادثة مباشرة بضغطة واحدة، بالإضافة إلى روابط سريعة للبريد الإلكتروني، مما يرفع من معدل التحويل (Conversion Rate) واستقطاب العملاء.
مؤشر ماوس مخصص وتفاعلي (Custom Cursor): إضافة لمسة بصرية فريدة عبر مؤشر ماوس مخصص يتفاعل بمرونة عند المرور فوق الأزرار والروابط، مع نظام ذكي يقوم بتعطيل الميزة تلقائياً على الأجهزة التي تعمل باللمس (الهواتف والأجهزة اللوحية) لضمان أداء خالٍ من التقطيع.
نظام تنبيهات مخصص (Custom Toasts): واجهة تنبيهات (Notifications) منبثقة وناعمة تظهر عند تفاعل المستخدم مع عناصر معينة (مثل تبديل المظهر أو نسخ الروابط)، كبديل عصري لرسائل المتصفح التقليدية المزعجة.
التقنيات المستخدمة (Tech Stack):
الهيكلة والتنسيق: HTML5 Semantic Markup, Advanced CSS3 (Flexbox, Grid, CSS Variables).
البرمجة التفاعلية: Vanilla JavaScript (ES6+).
الذكاء الاصطناعي: Google Gemini API Integration.
التصميم والتجاوب: Mobile-First Responsive Design
