هذا هو تقديم تحدي Frontend - الإصدار ديسمبر ، وامسد العلامات الخاصة بي: الشتاء الانقلاب

ما قمت ببنائه

قمت بإنشاء تطبيق تفاعلي من صفحة واحدة تعليمية يستكشف أهمية الانقلاب الشتوية العلمية والثقافية في جميع أنحاء العالم. يقوم المشروع بتحويل محتوى HTML الأساسي إلى تجربة ويب حديثة وجذابة باستخدام CSS React و TypeScript و Tailwind.

ميزات المفتاح:

• التنقل المستجيب مع التمرير السلس
• عناصر واجهة المستخدم التفاعلية مع تأثيرات Hover
• التدرجات الجميلة والرسوم المتحركة
• تحسين الأداء مع مكونات React
• تصميم تركز على إمكانية الوصول
• أيقونات ديناميكية باستخدام React React
• صور مذهلة من Unsplash

Demo
يعرض الموقع المباشر:

• قسم بطل مع رموز شمس/القمر المتحركة
• التنقل اللزج الذي يظهر على Scroll
• أقسام محتوى مصممة بشكل جميل
• تخطيطات قائمة على البطاقات للاحتفالات والتقاليد
• التحولات السلسة وتأثيرات التحويم
• تصميم مستجيب للجوال

رحلة
التنفيذ الفني

• المستخدمة للهندسة المعمارية القائمة على المكونات
• تم تنفيذ TypeScript لنوع السلامة
• استخدم CSS Tailwind للتصميم المستجيب
• إنشاء مكونات قابلة لإعادة الاستخدام من أجل الصيانة
• أضاف التمرير السلس التنقل
• رموز رد فعل Lucide المتكاملة للمرئيات المتسقة

بنية مكون

1. التنقل: smart navbar مع اكتشاف التمرير
2. أقسام المحتوى: مكونات معيارية لكل موضوع
3. مكونات البطاقات: بطاقات قابلة لإعادة الاستخدام للاحتفالات والتقاليد
4. تذييل: تذييل استجابة مع روابط التنقل

تعلم المفاتيح
1. تحسين الأداء

• نفذت التحميل كسول للصور
• تستخدم الرسوم المتحركة CSS للتحولات السلسة
• عرض مكون محسّن

2. إمكانية الوصول

• هيكل HTML الدلالي
• aria تسميات للعناصر التفاعلية
• دعم التنقل في لوحة المفاتيح

3. تصميم متجاوب

• النهج المحمول الأول
• تخطيطات مرنة باستخدام CSS Tailwind
• تكييف المحتوى الديناميكي

إنجازات فخورة

1. هيكل رمز نظيف يمكن صيانته
2. تجربة مستخدم سلسة وبديهية
3. تصميم بصري جميل مع الاهتمام بالتفاصيل
4. تخطيط مستجيب يعمل عبر الأجهزة
5. اعتبارات إمكانية الوصول عبر

تحسينات في المستقبل

1. إضافة رسوم متحركة تفاعلية لشرح الانقلاب
2. تنفيذ تبديل وضع الظلام/الضوء
3. إضافة المزيد من الاحتفالات الثقافية
4. إنشاء جدول زمني تفاعلي لتاريخ الانقلاب
5. إضافة دعم متعدد اللغات