3D Interactive Space -Themed Portfolio

لو فكرتك عن البورتفوليو إنه صفحة بسيطة فيها صورة وكلام، الموقع ده هيغيرلك الفكرة من الأساس.

صممت ونفذت هذا المشروع بالكامل من الصفر بهوية بصرية فضائية فريدة، مع عناصر ثلاثي الأبعاد تفاعلية حقيقية، لإثبات إن التصميم والتنفيذ المتقن مش مجرد "إضافة جانبية" — ده بالذات اللي بيفرق بين موقع عادي وموقع بيسيب انطباع لا يُنسى عند أول زيارة.

الموقع مبني بالكامل بـ React 18 و Vite 8، بأداء سريع جدًا وتجاوب كامل على كل المقاسات، ويتضمن:

روبوت ثلاثي الأبعاد (3D) حقيقي يتفاعل مع حركة الماوس مباشرة، باستخدام Spline مدمج مع Three.js

خلفية نجوم متحركة بالكامل (Canvas Animation) مبنية بـ Three.js و React Three Fiber

خريطة مهارات على شكل "كوكبة نجوم" تفاعلية، مقسّمة بصريًا حسب Frontend / Backend / Tools

كوكب يدور حول الصورة الشخصية بتأثير سينمائي في قسم About

تأثير كتابة متحرك (Typing Animation) لعرض المسميات الوظيفية بشكل ديناميكي

بطاقات عرض مشاريع (Carousel) لـمشاريع Full-Stack حقيقية ومنشورة فعليًا (Live)، مع روابط مباشرة لـ Demo و GitHub

قسم تواصل بتأثير أوربيتال حول كرة مضيئة، يجمع WhatsApp وLinkedIn والبريد وملف CV قابل للتحميل

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

التقنيات والمكتبات المستخدمة:

الإطار الأساسي: React 18+ Vite 8

التنسيق: Tailwind CSS v4

الرسوميات والتأثيرات الثلاثية الأبعاد: Three.js, React Three Fiber, @react-three/drei, Spline

الحركة والانتقالات: Framer Motion, GSAP

الأيقونات: Lucide React

النشر: Vercel

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