محفظة: Eldora المتحركة

محفظة 3D / Next.js / React Three Fiber / Eldora UI

رابط العرض التجريبي

نظرة عامة

• الدور: تطوير شامل (Full-Stack) وتصميم واجهة المستخدم / تجربة المستخدم (UI/UX)
• التقنيات: Next.js 14, React Three Fiber, Eldora UI, GSAP, Tailwind CSS
• النتيجة الرئيسية: تم تسليم محفظة 3D تفاعلية وغامرة بنجاح
• الملخص: موقع محفظة أعمال 3D متحرك تم إنشاؤه لـ Prince Jeruh Reyes باستخدام Next.js 14 ومكونات Eldora UI و GSAP -- يتميز بمشاهد 3D غامرة وتأثيرات مؤشر (blobity) وانتقالات سلسة للصفحات.

المشكلة

• التحدي: كان التحدي هو التلاعب في DOM ودمج عناصر 3D بسلاسة، خاصة بالمقارنة مع محفظة "glass" السابقة (v1) التي كانت تمتلك مفهومًا أكثر رسوخًا.
• الجمهور: تم بناؤه لـ Prince Jeruh Reyes لدعم تدريبه المهني القادم وبحثه عن عمل كطالب.
• القيود: لم يكن هناك موعد نهائي صارم، مجرد عملية تكرارية لإضافة المعلومات وتحسينها.

النهج والقرارات

• الهندسة المعمارية: هندسة Next.js 14 بسيطة تركز على جانب العميل.
• القرارات الرئيسية: اخترت React Three Fiber و GSAP في المقام الأول بدافع الرغبة في تجربتهما وتعلم قدراتهما في سيناريو واقعي.
• المقايضات: تم تقليل المقايضات إلى أدنى حد؛ النتيجة النهائية هي موقع ويب مثير للإعجاب بصريًا وفعال للغاية بشكل عام.
• تدفق البيانات: تدفق بيانات ثابت / من جانب العميل فقط دون خلفية معقدة.

النتائج والتأثيرات الرئيسية

• النتيجة: كان العميل راضيًا للغاية، مشيرًا إلى أن الموقع "يبدو رائعًا".
• التأثير: يوفر حضورًا احترافيًا ومتميزًا عبر الإنترنت للمساعدة في تدريبه المهني وبحثه عن عمل في عام 2026.

الغوص التقني

• تفاصيل بارزة: تم دمج مؤشر مخصص (blobity) وتطبيق مكونات متحركة مفتوحة المصدر من Eldora UI.
• التحقق: تم الحفاظ على قاعدة بيانات بسيطة حيث يمكن تحرير محتوى الموقع بسهولة في ملف واحد.
• التحسينات: تم تنفيذ العديد من التحسينات على طول الطريق لتحقيق التوازن بين الثراء البصري والأداء السلس عبر الأجهزة.
• جودة الكود: تم تصميم جميع الأقسام (البطل، حول، العمل، الأدوات، جهة الاتصال) بمظهر داكن وتخطيط متجاوب تمامًا.

تأملات

• النجاحات: نجحت في الجمع بين React Three Fiber و Next.js بفعالية، محققًا نتيجة بصرية عالية الجودة ومصقولة دون تنازلات كبيرة.
• الدروس المستفادة: عززت العملية التكرارية من قيمة هيكل المشروع المرن وسهل التعديل.

مساهماتي

• تخصيص القالب: استخدمت قالبًا جاهزًا كأساس للمحفظة وقمت بتخصيص واجهة المستخدم والتخطيط ليناسب احتياجات Prince Jeruh Reyes الخاصة.
• دمج المحتوى: قمت بتبديل المحتوى النائب ببيانات مشروع حقيقية، مع تعديل التكوين والتفاصيل لتعكس بدقة عمل العميل في جميع الأقسام.
• التعديلات الفنية: أدرت عمليات معالجة DOM وعدلت عناصر 3D الحالية (React Three Fiber) ورسوم التمرير المتحركة (GSAP) لتتوافق بسلاسة مع تدفق المحتوى الجديد.

هندسة المشروع

يتبع المشروع هندسة بسيطة ومباشرة من جانب العميل.

• الإطار: Next.js 14 App Router
• محرك 3D: React Three Fiber, Drei, Rapier
• الرسوم المتحركة: GSAP, Framer Motion, Kinet
• واجهة المستخدم: Tailwind CSS, FontAwesome Icons, React Icons
• المؤشر: مؤشر Blobity مخصص
• الأدوات: Leva (لوحة التصحيح)، Meshline (خطوط 3D)
• النشر: Vercel

معاينة العرض التجريبي

• الموقع الحي: pjreyes.vercel.app
• الأقسام المعروضة: أداة التحميل المسبق، البطل، حول، العمل، الأدوات، جهة الاتصال، التذييل
• الميزات الأساسية: بطل تفاعلي 3D باستخدام Three.js، رسوم متحركة سلسة يتم تشغيلها بالتمرير، مؤشر مخصص مع تأثير blobity، عرض للمشاريع مع قسم العمل، ونموذج اتصال في تخطيط متجاوب ذو سمة داكنة.

ملاحظة الاستضافة:
تم نشر المشروع حاليًا وهو متاح على Vercel على رابط العرض التجريبي الموفر.

إسناد العمل:
تم بناء هذا المشروع باستخدام قالب محفظة Eldora UI. يعود الفضل الكامل في تصميم القالب الأصلي والمكونات والتكوينات الأساسية إلى Eldora UI.