إليك وصف احترافي ومفصل لمشروعك (معرض الأعمال الشخصي) لترفق مع الصور والكود على منصة مستقل، حيث يركز هذا الوصف على الجوانب التقنية والفلسفة التصميمية للعمل:
عنوان المشروع: تطوير موقع معرض أعمال (Portfolio) تفاعلي بتصميم عصري (Dark Mode)
وصف المشروع:
قمت بتصميم وتطوير موقع "معرض أعمال" شخصي متكامل يهدف إلى تقديم الهوية المهنية والمهارات البرمجية بشكل احترافي وجذاب. يعتمد المشروع على واجهة مستخدم (UI) عصرية بنظام "الوضع الداكن" مع استخدام تناغم لوني يجمع بين الأسود الملكي واللون الذهبي لإضفاء طابع من الفخامة والتميز التقني.
المشروع ليس مجرد صفحة عرض، بل هو تجربة مستخدم (UX) متكاملة تعتمد على فلسفة "وضوح المسار"، حيث تم تقسيم الموقع إلى محطات واضحة تبدأ بالتعريف ثم التعليم والمهارات وصولاً إلى عرض المشاريع الحية.
المميزات التقنية والجمالية:
تجربة بصرية متميزة: استخدام خلفية داكنة #181818 مع نصوص فاتحة وتباين ذهبي #D4AF37 للتركيز على العناصر الهامة.
تصميم متجاوب (Responsive): الموقع متوافق تماماً مع جميع الشاشات (Desktop, Tablet, Mobile) لضمان تجربة تصفح مثالية.
تفاعلية عالية: إضافة تأثيرات حركية (Hover Effects) على البطاقات والصور، مع استخدام خاصية Smooth Scroll للتنقل السلس بين الأقسام.
هيكلة برمجية نظيفة: الكود مكتوب بلغة HTML5 وCSS3 بشكل منظم ومعياري، مما يسهل عملية التطوير المستقبلي.
أقسام المشروع بالتفصيل:
القسم الرئيسي (Hero Section): يضم مقدمة تفاعلية وصورة شخصية احترافية مع روابط التواصل الاجتماعي.
من أنا (About Me): استعراض السيرة الذاتية والخلفية الأكاديمية كطالب في كلية الحاسبات والذكاء الاصطناعي.
المسار التعليمي (Education): عرض مفصل للمؤهلات الدراسية والدورات التدريبية المتخصصة في تطوير الويب.
المهارات (Skills): استعراض المهارات التقنية مثل حل المشكلات (Problem Solving) وتطوير الويب باستخدام بطاقات (Cards) ذات تصميم فريد.
الخدمات (Services): قسم يوضح الخدمات التي أقدمها مثل بناء الهوية الرقمية وتطوير المواقع المخصصة.
معرض المشاريع (Projects): عرض لمشاريع حقيقية مثل تطبيق "Rapido Eats" مع توفير روابط مباشرة للمعاينة.
التواصل (Contact): توفير قنوات اتصال مباشرة تشمل نموذج مراسلة، ورقم الهاتف، ورابط واتساب مباشر.
الأدوات والتقنيات المستخدمة:
HTML5 & CSS3: لبناء الهيكل وتنسيق الواجهات.
Google Fonts (Poppins): لتحسين المظهر البصري للنصوص.
Font Awesome Icons: لإضافة أيقونات تفاعلية تعزز من تجربة المستخدم.