المحفظة: البداية

إثبات المفهوم للإصدار 0 حيث تعاملت لأول مرة مع Three.js و Vercel وميزات الويب المتقدمة.

رابط العرض التوضيحي

نظرة عامة

• الدور: مطور (المحاولة الأولى)
• التقنيات: React, Three.js, Framer Motion, Vercel
• النتيجة الرئيسية: تجاوزت بنجاح ارتباك تعلم تطوير الويب ثلاثي الأبعاد والنشر للمرة الأولى.
• الملخص: كانت هذه محفظتي "الإصدار 0". كانت المرة الأولى التي أجرب فيها Three.js و Vercel والرسوم المتحركة الثقيلة لواجهة المستخدم. وعلى الرغم من أنها تضمنت ميزات طموحة مثل روبوت محادثة مدمج وبطاقة هبوط ثلاثية الأبعاد، إلا أن واجهة وتجربة المستخدم كانت فوضوية باعتراف الجميع. إنه يمثل بفخر دليلي الخام وغير المصفى على محاولتي الأولى.

المشكلة

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

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

• البنية: إعداد React معياري يعتمد بشكل كبير على بدائيات Framer Motion غير المحسنة و CSS الذري.
• القرارات الرئيسية: قررت إلقاء كل ميزة رائعة يمكنني العثور عليها (الأزرار المغناطيسية، المرسى القابل للسحب، البطاقات ثلاثية الأبعاد) في مشروع واحد فقط لمعرفة كيف تعمل.
• المقايضات: ضحيت تمامًا بالبساطة والأداء وتجربة المستخدم باسم التجريب التقني الخام.
• تدفق البيانات: تم التعامل معه عبر سياق React القياسي، على الرغم من أنه كان مثقلًا بشكل كبير بحالات الرسوم المتحركة المتداخلة وعمليات التقديم ثلاثية الأبعاد غير المحسنة.

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

• النتيجة: بيئة اختبار معيبة وظيفيًا ولكنها تعليمية للغاية مهدت الطريق لعملي الحالي.
• التأثير: علمني بالضبط ما لا يجب فعله فيما يتعلق بأداء الويب، مما ألهم بشكل مباشر تكرار "الإصدار 1" الأنظف بكثير.

نظرة تقنية متعمقة

• تفاصيل ملحوظة: حاولت أنظمة نموذجية متقدمة مع انتقالات متغيرة، وساعات حية، ومؤشرات مخصصة، تعمل جميعها بشكل متزامن.
• التحقق: تم الاختبار بصرامة عبر الفحوصات البصرية اليدوية - التجربة والخطأ في أبهى صورها.
• التحسينات: معدومة عملياً. كان الأداء عبارة عن أفعوانية مستمرة ترتفع وتنخفض، والتي أصبحت أكبر عقبة في المشروع.
• جودة الكود: ليس أفضل عمل لي باعتراف الجميع. كانت بيئة فوضوية مخصصة بحتة للتعلم.

تأملات

• بشكل مختلف: تعلمت أن رمي الرسوم المتحركة الثقيلة معًا بشكل أعمى يدمر الأداء. يركز التكرار التالي الخاص بي بشكل صارم على الأداء وتجربة المستخدم النظيفة (راجع مشروع المحفظة النشط الخاص بي).
• النجاحات: إنها تمثل "إثبات محاولتي الأولى". لقد أثبتت أنني كنت على استعداد للغوص في تقنيات مربكة وصعبة وجهاً لوجه.
• الدروس: الأداء وتجربة المستخدم النظيفة أكثر قيمة بلا حدود من تكديس الميزات ثلاثية الأبعاد المبهرجة ولكن غير المحسنة.

مساهماتي

• التصميم والهندسة: صممت ونفذت جميع تأثيرات واجهة/تجربة المستخدم ثلاثية الأبعاد والميزات التفاعلية عبر التجربة والخطأ.
• الرسوم المتحركة والتفاعل: بنيت بدائيات Framer Motion مخصصة، أزرار مغناطيسية، مرسى قابل للسحب، ولوحة أوامر.
• طبقة المحتوى: دمج MDX لتأليف المدونات والمشاريع المرنة.
• التوثيق الفني: تمت أرشفة المشروع لتوثيق تحديات البنية الأولية والعقبات التقنية للرجوع إليها في المستقبل.

بنية المشروع

استخدم هذا المشروع نظام مكونات React معياري ولكنه مثقل بشكل كبير.

• تنظيم المكونات:
  • ui/, core/, motion-primitives/: مكونات ذرية قابلة لإعادة الاستخدام
  • محتوى MDX للمدونة والمشاريع
  • التوجيه تحت app/projects/, app/blog/, طرق [slug] الديناميكية
• إدارة الحالة: إدارة السمة المستندة إلى السياق، localStorage لحالة المرسى/المؤشر.
• التكاملات: Framer Motion, Radix UI, Tailwind CSS, cmdk, embla-carousel, lucide-react.

معاينة العرض التوضيحي

توثق هذه الصفحة بناء الإصدار 0 الأصلي. للحصول على العرض التوضيحي المؤرشف المباشر، قم بزيارة archivedportfolio.franzdomingo.dev.

• عرض المنصة: ويب (سريع الاستجابة، للهاتف المحمول أولاً)
• الوظائف المعروضة:
  • بطاقة هبوط ثلاثية الأبعاد غير محسنة وواجهة مستخدم تفاعلية
  • انتقالات متحركة ونماذج وخلفيات
  • لوحة الأوامر، المرسى، الأزرار المغناطيسية
  • روبوت محادثة مدمج

ملاحظة حول الاستضافة:
مؤرشف كمشروع عرض. المحفظة المحدثة والأنظف بكثير متوفرة الآن على portfolio.franzdomingo.dev.