بورتفوليو تفاعلي — Next.js · TypeScript · GSAP

موقع شخصي مبني من الصفر بـ Next.js و TypeScript، الهدف منه إن كل عنصر فيه يتحرك بشكل مدروس — بدون ما يأثر على سرعة التصفح.

اللي اتنفذ في المشروع:

الحركة والأنيميشن (GSAP)

انتقالات مرتبطة بالسكرول — كل قسم بيتفاعل مع حركة الزائر في الصفحة

حركة على مستوى الحروف في العناوين الرئيسية

تسلسل زمني (Timeline) للأقسام بحيث العناصر تظهر بترتيب منطقي مش دفعة واحدة

قسم الخبرات بحركة أفقية مرتبطة بالسكرول العمودي

عدّادات رقمية متحركة عند الوصول لقسم الإحصائيات

التقنيات والبنية

Next.js مع TypeScript وبنية مكوّنات قابلة لإعادة الاستخدام

Tailwind CSS للتصميم

تصميم متجاوب بالكامل — نسخ مختلفة للحركة على الديسكتوب والموبايل عشان الأداء

تحسين الصور تلقائيًا وتحميل الأصول بشكل تدريجي

تهيئة كاملة لمحركات البحث (SEO) وبطاقات المشاركة على وسائل التواصل

الأداء

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

نتيجة المشروع:

موقع بيفتح بسرعة، وبيدي إحساس إن كل تفصيلة فيه مقصودة — وده الفرق بين موقع شغّال وموقع بيفضل في ذاكرة الزائر.