تصميم وتطوير موقع شخصي (Portfolio) لعرض الأعمال والمهارات

1. نظرة عامة على المشروع المشروع عبارة عن موقع ويب شخصي (Portfolio) متكامل وتفاعلي يهدف إلى عرض مهاراتك، خبراتك، ومشاريعك بطريقة احترافية وعصرية. تم تصميم الموقع ليكون جذاباً بصرياً وسهل الاستخدام، مع دعم كامل للغتين العربية والإنجليزية ووضعيات الإضاءة المختلفة (الداكن والفاتح). 2. التقنيات والأدوات المستخدمة تم بناء المشروع باستخدام تقنيات الويب الأساسية الحديثة (Pure Front-End) لضمان الأداء السريع والتوافقية العالية: HTML5: لبناء هيكلية الموقع وتقسيم الصفحات (Header, Sections for About, Skills, Projects, etc.). CSS3: لتصميم وتنسيق الموقع، وتم استخدام تقنيات متقدمة مثل: CSS Variables: لسهولة إدارة الألوان والتبديل بين الوضع الداكن (Dark Mode) والفاتح (Light Mode). Flexbox & Grid: لتخطيط الصفحات وجعلها متجاوبة (Responsive) مع جميع أحجام الشاشات. Animations & Keyframes: لإضافة تأثيرات حركية مثل تأثير الكتابة (Typewriter effect)، وتأثيرات الظهور عند التمرير (Fade-in/Slide-up). Glassmorphism: استخدام تأثير الزجاج الشفاف في البطاقات والخلفيات لإعطاء مظهر عصري "Premium". JavaScript (Vanilla JS): لإضافة التفاعل والمنطق للموقع، مثل: تحويل اللغة (En/Ar). تبديل الثيم (Dark/Light). التحقق من وضع المدير (Admin Mode). تأثيرات المؤشر المخصصة (Custom Cursor). جلب البيانات ديناميكياً (مثل التوصيات من JSONBin). مكتبات خارجية: FontAwesome: لأيقونات الموقع. Google Fonts: استخدام خطوط (Inter, Outfit, Cairo) لدعم النصوص العربية والإنجليزية. EmailJS: لربط نموذج الاتصال (Contact Form) لإرسال الرسائل مباشرة إلى بريدك الإلكتروني دون الحاجة لخادم خلفي (Backend). 3. المميزات الرئيسية للمشروع دعم متعدد اللغات (Internationalization): الموقع يدعم التحويل الفوري بين العربية والإنجليزية. يعتمد على سمات البيانات data-en و data-ar في عناصر HTML لتخزين النصوص، حيث يقوم كود JavaScript بتبديل النصوص واتجاه الصفحة (dir="rtl" أو ltr) بناءً على اللغة المختارة. نظام الثيمات (Themes): يدعم الوضع الداكن (الافتراضي بطابع Cyber/Tech) والوضع الفاتح. يتم ذلك عبر تغيير متغيرات CSS (--bg-body, --text-main, إلخ) عند ضغط زر التبديل، ويتم حفظ تفضيل المستخدم في المتصفح (Local Storage). تصميم متجاوب (Responsive Design): الموقع يعمل بكفاءة على الهواتف، الأجهزة اللوحية، وأجهزة الكمبيوتر. قائمة التنقل (Navbar) تتحول إلى "Hamburger Menu" في الشاشات الصغيرة. تأثيرات بصرية متقدمة: Custom Cursor: مؤشر ماوس مخصص يتفاعل مع العناصر القابلة للنقر. Hero Section: يحتوي على تأثيرات حركية للخلفية وصورة شخصية بتصميم ثلاثي الأبعاد وتأثير كتابة للنصوص. Scroll Animations: العناصر تظهر بحركة انسيابية أثناء نزول المستخدم في الصفحة. وضع المدير (Admin Mode): يوجد زر مخفي أو خاص لتفعيل "وضع المدير"، والذي يسمح ربما بإدارة بعض العناصر أو حذف التوصيات (كما ظهر في تحليلاتنا السابقة للكود). 4. هيكلية الملفات index.html : الملف الرئيسي الذي يحتوي على المحتوى والهيكل. styles.css : ملف التنسيق الأساسي الذي يحتوي على جميع الألوان، الخطوط، والحركات. js/ : مجلد يحتوي على ملفات الجافا سكريبت مثل script-netlify-cross-device.js الذي يدير منطق الموقع. images/ و videos/: مجلدات الوسائط لعرض صور المشاريع والفيديوهات التوضيحية. documents/: يحتوي على ملف السيرة الذاتية (CV) للتحميل.