هذا تقديم لـ Frontend Challenge V24.09.04 ، glam up my tarmup: Space

ما قمت ببنيه

تتميز الصفحة المقصودة بتصميم مستوحى من الفضاء مع اعتبارات قابلية الاستخدام الحديثة مثل تبديل الوضع الخفيف/الظلام ، والتمرير السلس ، وتخطيط مستجيب تمامًا. يمكن للزوار استكشاف الكواكب والأقمار والأشياء السماوية عبر كاروسيل تفاعلي ، ويتم تصميم المحتوى ليكون تعليميًا ولكنه ممتع للتنقل.

تشمل الميزات الرئيسية:

• تبديل الوضع الخفيف/الظلام : يمكن للمستخدمين التبديل بين الضوء والموضوعات المظلمة لتجربة أكثر تخصيصًا.
• carousel التفاعلية : تسمح الكارويلات الديناميكية للزائرين باستكشاف الكواكب والأقمار والكائنات السماوية المختلفة.
• التمرير السلس : زر "ابدأ الاستكشاف" يؤدي إلى تمرير سلس إلى قسم نظرة عامة على النظام الشمسي.
• تصميم مستجيب تمامًا : تم تصميم الموقع لتبدو رائعة على كل من أجهزة سطح المكتب والجهاز المحمول.

العرض التوضيحي

يمكنك عرض الكود على GitHub: GitHub Restository

وتحقق من العرض التوضيحي المباشر هنا: عرض مباشر

لقطات الشاشة

وضع الضوء:

الوضع المظلم:

مثال كاروسيل:

عرض الهاتف المحمول:

رحلة

ذهبت إلى هذا بدون خطة تصميم ، وتغيرت الخطة عندما عملت من خلال المشروع ، والتي يمكن أن تحاكي ما يحدث في العالم الحقيقي. ومع ذلك ، أتمنى لو كنت قد قضيت المزيد من الوقت في عرض مشروعي وجوانب العصف الذهني لجمع كل شيء معًا.

ذهبت في الأصل بأسلوب طرفي عتيق. بينما شعرت بالمرح ، شعرت كما لو أن النيون الأخضر لم يعطني المظهر المهني الذي كنت أسعى إليه.

لذا ، اخترت إلقاء نظرة أكثر حدودًا في النهاية ، مع الحفاظ على بعض العناصر الممتعة. كانت رؤيتي الجديدة مستوحاة من كتاب مدرسي عتيق ، والذي يمكن رؤيته بالألوان المستخدمة وبعض عناصر التصميم مثل مقسم ASCII والخطوط.

كان التحدي الأكبر الذي واجهته بصرف النظر عن التصميم هو ضمان أن المشروع بدا رائعًا على الأجهزة المحمولة. اضطررت إلى كتابة CSS المحمولة المحددة لعدة أقسام لتحسين التصميم. ساعد Flexbox في تعديلات التصميم ، ولكن إنشاء تجربة سلسة حقًا استغرق بعض التجربة والخطأ.

بشكل عام ، دفعني هذا المشروع إلى التفكير الإبداعي ، والتكيف مع الطيران ، والتوازن في تصميم جماليات التصميم مع قابلية الاستخدام ، وهي مهارات قيمة في تطوير الواجهة الأمامية.