تصميم وتطوير موقع تفاعلي متكامل لنشاط طلابي (Momenta Student Club)

قمت بتصميم وتطوير موقع إلكتروني (Landing Page) عصري وتفاعلي لنادي "Momenta" الطلابي، يهدف إلى استعراض تاريخ النادي، إنجازاته، فريقه القيادي، وفعالياته بشكل جذاب يعكس روح الشباب والابتكار. تم بناء الموقع بالاعتماد على أحدث تقنيات تطوير الواجهات الأمامية (Front-End)، مع التركيز الشديد على تقديم تجربة مستخدم (UX) تفاعلية مليئة بالحيوية من خلال دمج تأثيرات حركية متقدمة (Animations)، وتصميم واجهات عصرية (UI) تعتمد على التدرجات اللونية الحديثة والتخطيط الشبكي المتقدم، مع ضمان التجاوب التام (Fully Responsive) لجميع الشاشات. أهم الميزات والتقنيات التي تم تنفيذها في المشروع: - نظام فعاليات متقدم (Interactive Event Calendar): دمج وتخصيص مكتبة FullCalendar.js لإنشاء تقويم تفاعلي يعرض الفعاليات وورش العمل بشكل منظم، مع نوافذ منبثقة (Modals) تعرض تفاصيل كل فعالية بطريقة ذكية على شاشات الجوال. - مشغل فيديو مخصص (Custom Video Player & Playlist): برمجة نظام عرض فيديوهات مدمج من YouTube، يحتوي على قائمة تشغيل تفاعلية (Playlist)، أزرار لفرز الفيديوهات (الأكثر مشاهدة، الكل)، وميزة الترتيب العشوائي (Shuffle) مع تأثيرات بصرية سلسة. - ربط ذكي للنماذج (Serverless Form Integration): برمجة نموذج انضمام (Join Us Form) متكامل ومربوط برمجياً مع Google Apps Script لتسجيل بيانات الطلاب مباشرة في جداول بيانات جوجل (Google Sheets)، مما يوفر بيئة عمل ديناميكية بدون الحاجة لخادم (Backend) مكلف. - ميزة "Meet Memo" التفاعلية: ابتكار وتكويد زر عائم ذكي متحرك لتميمة النادي يفتح نافذة منبثقة (Popup) مخصصة لعرض فيديو تعريفي، مما يضيف لمسة احترافية وتفاعلية غير تقليدية للموقع. - معرض صور تفاعلي (Custom Lightbox Gallery): بناء معرض صور بشبكة متداخلة (CSS Grid) مع نظام عرض مكبر (Lightbox) مبرمج من الصفر بالـ JavaScript، يدعم التنقل بين الصور بالأسهم ولوحة المفاتيح. - تأثيرات حركية وتمرير سلس: استخدام مكتبة AOS و Animate.css لبرمجة تأثيرات ظهور العناصر عند التمرير (Scroll Animations) لضمان تجربة تصفح غير مملة وجذابة للعين. التقنيات (Technologies) المستخدمة في العمل: - HTML5 / CSS3 / JavaScript (ES6+) - إطار العمل Tailwind CSS (لتكويد سريع وتجاوب مرن) - مكتبات: FullCalendar.js / AOS / Animate.css - واجهات برمجة التطبيقات (APIs): Google Apps Script / YouTube Embed - FontAwesome Icons النتيجة: موقع إلكتروني حيوي، تفاعلي، وسريع التحميل، يخدم المنظومة الطلابية بكفاءة عالية، ويعتبر واجهة رقمية مشرفة تجذب الطلاب الجدد ويسهل عليهم استكشاف أنشطة النادي والانضمام إليه.