في هذا المشروع، قمت بإعادة بناء وتصميم (Redesign) لواجهة موقع 'ماك مصر' للتركيز على تحسين تجربة المستخدم وسهولة الوصول للخدمات.
قصة التنفيذ والمهارات:
Semantic HTML5: بدأت ببناء الهيكل الأساسي باستخدام وسوم HTML برمجية صحيحة (Semantic) لضمان توافق الموقع مع محركات البحث (SEO).
Advanced CSS3: استخدمت تقنيات الـ Flexbox والـ CSS Grid لتنظيم العناصر بدقة متناهية، مع الاهتمام بتناسق الألوان والخطوط لتناسب الهوية البصرية.
The Responsive Story: التحدي الأكبر كان في جعل التصميم Fully Responsive. قمت بكتابة Media Queries مخصصة تضمن أن الموقع يظهر بامتياز على شاشات الموبايل الصغيرة، التابلت، وشاشات الديسكتوب العريضة دون أي مشاكل في العرض.
Clean Code: حرصت على كتابة كود منظم وسهل القراءة لتسهيل أي عمليات تطوير مستقبلية، وهو ما يضمن أداءً سريعاً للموقع (Performance Optimization)."
Interactive JavaScript: قمت بإضافة لمسات تفاعلية باستخدام الـ Vanilla JavaScript لتحسين تجربة المستخدم، مثل (قائمة التنقل المتجاوبة - Responsive Navbar)، وإضافة تأثيرات حركية عند التمرير (Scroll Animations)، والتحقق من البيانات في نماذج التواصل (Form Validation)، مما جعل الواجهة أكثر حيوية واستجابة لتفاعلات الزوار.