دراسة الحالةCustomer Hosting - Production
بورتفوليو أ. علي الجابري
بورتفوليو احترافي للأستاذ علي الجبري، خبير اللغة العربية، يعتمد على هوية بصرية مستوحاة من طراز 'The Modern Majlis' الذي يمزج بين فخامة التراث العربي والذكاء الرقمي الحديث. يتميز بتصميم متجاوب تماماً باللون الأخضر الملكي والذهبي، مع رسوم متحركة سلسة وتجربة مستخدم تركز على وضوح المحتوى التعليمي.

التقنيات الأساسية
- Next.js
- React
- TypeScript
- Tailwind CSS
- Framer Motion
الأداء
- الاستفادة من توليد صفحات ثابتة SSG لسرعة استثنائية
- تحسين الصور وتصغير حجمها تلقائياً
- تقليل استهلاك الـ JavaScript في الأماكن غير الضرورية
- استخدام Tailwind CSS 4 لتقليل حجم ملف الـ CSS النهائي
الأمان
- اتباع معايير الأمان في Next.js
- حماية البيانات في روابط التواصل الاجتماعي
- دعم بروتوكول HTTPS عند النشر
الميزات الرئيسية
تصميم عصري ومتجاوب مع جميع أنواع الشاشات (responsive Design)
رسوم متحركة جذابة وسلسة باستخدام مكتبة Motion
دعم كامل للغة العربية واتجاه النص من اليمين لليسار (RTL)
قسم مفصل للمميزات والخدمات التعليمية المقدمة
عرض لآراء الطلاب وتقييماتهم (Testimonials Section)
جداول أسعار واضحة ومنظمة للباقات التعليمية
تكامل مع واتساب للتواصل المباشر مع المستر
سرعة تحميل ممتازة بفضل تقنيات Next.js الحديثة
قائمة تنقل (Navbar) ذكية وسهلة الاستخدام
بنية المشروع
src/ ├── app/ │ ├── components/ # مكونات الواجهة (Navbar, Hero, Pricing, etc...) │ ├── layout.tsx # الهيكل العام ودعم الـ RTL │ ├── page.tsx # الصفحة الرئيسية │ └── globals.css # أنماط Tailwind CSS ├── public/ │ ├── images/ # صور المدرس، الشعار، ولقطات الشاشة (Screenshots) │ └── icons/ # أيقونات المتصفح ├── package.json # إدارة المكتبات والمشروع └── tsconfig.json # إعدادات TypeScript
استراتيجيات التطوير
- استخدام مكونات العميل (Client Components) حصراً للتفاعلات والرسوم المتحركة
- تصميم مستوحى من طراز الـ Modern Majlis الذي يجمع بين الأصالة والحداثة
- توزيع المحتوى بشكل يضمن تجربة مستخدم مريحة (UX)
- تطبيق مبادئ الـ Accessibility لضمان وصول الجميع للمحتوى
- إدارة الحالة باستخدام الـ React Hooks الأساسية
واجهة المستخدم



