نظرة عامة
الموقع الرسمي لوكالة The Studio: موقع تسويقي سريع وحركي لوكالة إبداعية، بمشاهد ثلاثية الأبعاد وحركة مدفوعة بالتمرير وتجربة ثنائية اللغة (EN / AR). مبني كتطبيق صفحة واحدة بـ React 19 وVite، ومصمّم بـ Tailwind.
الدورمطوّر فل ستاك
السنة2025
التقنيات
- React 19
- Vite
- TypeScript
- Tailwind CSS
- Three.js / R3F
- GSAP
- Framer Motion
- Lenis
- i18n / RTL
- 01بنيت الموقع كتطبيق صفحة واحدة بـ React 19 وVite مع تفعيل React Compiler، مصمّماً بـ Tailwind CSS ومُنسَّقاً عبر متغيّرات CSS.
- 02بنيت مشاهد ثلاثية الأبعاد بـ Three.js وReact Three Fiber: حقل جزيئات وشعار ثلاثي الأبعاد متحرّك تتبدّل ألوانه المميِّزة بين الأقسام.
- 03قُدت الحركة بـ GSAP ScrollTrigger لكشف الأقسام وFramer Motion لانتقالات المكوّنات، مع تمرير سلس عبر Lenis في كل مكان.
- 04جعلته ثنائي اللغة (الإنجليزية / العربية) بدعم RTL كامل عبر react-i18next ومساحات أسماء ترجمة محمّلة كسولاً.
- 05بنيت الصفحات — الرئيسية، الخدمات، الأعمال، ودراسات حالة لكل مشروع — بمسارات محمّلة كسولاً (React Router) وبيانات ثابتة جاهزة للاستبدال بـ CMS/API.
- 06أضفت سمات فاتح / داكن / النظام محفوظة بـ Zustand، تحسين محركات بحث عبر React Helmet، ونموذج تواصل بـ React Hook Form + Zod.
- 07نشرته إلى الإنتاج على nginx إلى جانب نطاقي إدارة المحتوى والـ API المنفصلين.
- تطبيق React 19 + Vite · React Compiler
- مشاهد وشعار ثلاثي الأبعاد بـ Three.js / R3F
- حركة GSAP ScrollTrigger + Lenis
- ثنائي اللغة (EN / AR) بدعم RTL