قمت بتطوير موقع K Frame Agency ليكون واجهة رقمية متطورة تدمج بين الأداء الفائق والجماليات البصرية. المشروع ليس مجرد موقع تعريفي، بل هو تجربة مستخدم (User Experience) غامرة تعتمد على الرسوم المتحركة المتقدمة والتفاعل الحيوي مع الزائر.
المميزات التقنية التي تم تنفيذها:
تجربة دخول غامرة (Immersive Loading): شاشة تحميل مخصصة (Custom Loader) مع انتقالات ناعمة للشعار تضمن عدم ملل المستخدم وتزيد من فخامة الموقع.
تفاعلات فيزيائية (Physics-based UI): استخدام مكتبة Matter.js لإضافة نصوص وعناصر تفاعلية تخضع لقوانين الفيزياء عند التحريك أو اللمس.
أنظمة حركة متطورة: دمج GSAP و Framer Motion لعمل (ScrollTrigger) وانتقالات احترافية بين الصفحات والعناصر.
نظام تنقل ذكي: شريط تنقل (Navbar) يتفاعل مع اتجاه التصفح، بالإضافة إلى قائمة جانبية (Sidebar) تظهر بتأثير (Staggered animation).
مؤشر ماوس مخصص (Custom Cursor): تصميم مؤشر "Camera style" يتفاعل مع العناصر القابلة للنقر لزيادة التفاعلية.
أداء استثنائي: الموقع مبني بأحدث نسخة من Next.js 16 مع Tailwind CSS v4 لضمان سرعة تحميل لحظية وتوافق كامل مع محركات البحث (SEO).
3. الأدوات والتقنيات المستخدمة (Stack)
Framework: Next.js 16 (App Router)
Language: TypeScript (لضمان كود نظيف وخالي من الأخطاء)
Styling: Tailwind CSS v4
Animations: GSAP, Framer Motion, Matter.js
Icons: Lucide React
Carousel: Embla Carousel
