دراسة الحالة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 الأساسية

واجهة المستخدم

بورتفوليو أ. علي الجابري لقطة شاشة 1
بورتفوليو أ. علي الجابري لقطة شاشة 2
بورتفوليو أ. علي الجابري لقطة شاشة 3
بورتفوليو أ. علي الجابري لقطة شاشة 4

مهتم بهذا المشروع؟

أنا متاح لفرص جديدة وتعاونات احترافية. دعنا نبني شيئا مميزا معا.

تواصل معي
Mostafa Abdellraheem | Full-Stack Engineer & AI Automation Specialist