// هذا الكود: محفظة الزجاج المبسطة

محفظة الزجاج المبسطة

محفظة مبسطة بتصميم الزجاج (Glassmorphic) / موقع شخصي / مشروع Next.js App Router

ملخص في سطر واحد:
A premium portfolio built with Next.js, featuring digital glitch aesthetics, canvas-based wave physics, interactive AI voice chatbot, and smooth GSAP ScrollTrigger parallax.

مدة التطوير: يونيو 2025 - يوليو 2025

ملاحظات:

• إخلاء مسؤولية استضافة/توفر الكود:
  الكود المصدري الكامل متاح عند الطلب. المشروع مباشر، ولكنه غير منشور للجمهور لتجنب كشف نقاط الضعف المحتملة.
• للتواصل لمزيد من المعلومات أو العروض التوضيحية:
  تواصل مع Franz Phillip G. Domingo عبر franzdomingo.dev.
• ملاحظة التنقل:
  صفحات المدونة والمشاريع يمكن الوصول إليها عبر تنقل الموقع.

الميزات

• Physics-Based Canvas Transitions (animated Perlin noise wave distortion)
• Interactive AI Voice Chatbot with TTS, context-awareness, and next-intl support
• GSAP ScrollTrigger Parallax with staggered section entry triggers
• Bento Grid Skill Showcases for language proficiency and cloud expertise
• Accessibility and Performance optimizations (reduced-motion fallbacks, edge runtime)
• Multi-agent Orchestration Pipeline Architecture
• Dark/Cyberpunk signature palette with Coral, Cream, and Glitch Cyan/Magenta

مساهماتي (الدور والمسؤوليات)

Frontend Architecture:

• Developed physics-based canvas transitions and custom scroll snap engines.
• Integrated an AI chatbot with vocal synthesis and local storage persistence.

Multi-Agent Orchestration:

• Orchestrated a pipeline of specialized agents (Coder, Front-End, QA, Tech Writer, Infra).

Performance & DevOps:

• Configured Vercel Edge Runtime and DNS routing for optimal performance.
• Ensured accessibility with reduced-motion fallbacks and Core Web Vitals audits.

التحديات التي واجهتها

• Synchronizing complex animations:
  Coordinating canvas-based wave physics with React state and GSAP ScrollTrigger.
• AI Chatbot Performance:
  Optimizing TTS vocal synthesis and LLM streaming within a Next.js Edge environment.
• Agent Orchestration:
  Managing a complex multi-agent orchestration pipeline for feature delivery.
• Accessibility:
  Balancing high-performance visual glitch effects with strict reduced-motion accessibility standards.

بنية المشروع

• نمط البنية:
  React وظيفي ونمطي مع Next.js App Router.
  فصل واضح للاهتمامات: المكونات الأساسية لواجهة المستخدم ووحدات الميزات والخطافات (hooks) والأدوات المساعدة.

• تنظيم المكونات:

  • app/: التوجيه، التخطيطات، الأنماط العالمية
  • components/: مكونات واجهة المستخدم الأساسية، شريط الرسو، روبوت المحادثة، تأثيرات الحركة
  • hooks/: خطافات React مخصصة
  • lib/: أدوات مساعدة وثوابت مشتركة
  • types/: واجهات TypeScript

• إدارة الحالة:
  حالة محلية بسيطة، مع تفضيل مكونات خادم React (React Server Components) والسياق حيث دعت الحاجة.

• التكاملات:
  Framer Motion للرسوم المتحركة، Radix UI لإمكانية الوصول، Shadcn UI لمكونات التصميم الأساسية.

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

• لقطات الشاشة/فيديو:
  العرض التوضيحي المباشر لمحفظة الزجاج المبسطة متاح على franzdomingo.dev. جميع ميزات واجهة المستخدم والتخطيطات والتفاعلات متاحة للاستكشاف مباشرة.

• طرق عرض النظام الأساسي:
  الويب (متجاوب، يعطي الأولوية للهواتف المحمولة)

• الوظائف المعروضة:

  • صفحة هبوط بتصميم زجاجي
  • تنقل شريط رسو متحرك
  • قائمة أوامر (CMD+K)
  • صفحات المدونة والمشاريع
  • روبوت محادثة وإشعارات منبثقة (toast)

• تعليمات العرض التوضيحي:
  قم بزيارة الموقع المباشر على franzdomingo.dev.
  للحصول على المصدر الكامل أو العرض التوضيحي الخاص، اتصل بالمؤلف.

إذا كنت بحاجة إلى مزيد من التفاصيل أو تريد الاطلاع على كود المصدر، يرجى الاتصال بالمؤلف مباشرة.