بورتفوليو: سايبربانك

معرض أعمال (بورتفوليو) تفاعلي للمطورين يتميز بجمالية الخلل الرقمي (glitch) وواجهة مستخدم مستقبلية (FUI)، تم بناؤه باستخدام Next.js 16 و React 19 وفيزياء مخصصة من GSAP/Canvas

العرض التجريبي المباشر • مستودع GITHUB (وصول خاص)

نظرة عامة

• الدور: المبتكر، مهندس متكامل (Full-Stack) فردي ومهندس إبداعي
• التقنيات: Next.js 16 (App Router) و React 19 و TypeScript و Tailwind CSS 4 و GSAP و WebGL (Three.js) و Web Audio API (Text-to-Speech) وحزمة أدوات Google Generative AI ومكتبة next-intl (تعريب كامل للمحتوى عبر اللغات الإنجليزية والتاغالوغية والألمانية والإسبانية والفرنسية والعربية والكورية واليابانية والصينية)
• النتيجة الرئيسية: تغطية تفاعلية للمحفظة بنسبة 100% مع ملاحة تفاعلية مدفوعة بالصوت عبر روبوت دردشة وأوقات تحميل للصفحة تقل عن ثانية
• الملخص: بورتفوليو رقمي متميز واستعراض للهندسة الإبداعية مصمم بجماليات الخلل الرقمي. يتميز بمحادثة صوتية تفاعلية مع الذكاء الاصطناعي، وانتقالات فيزياء الأمواج القائمة على canvas، وتجارب تمرير سلسة لإظهار التصميم عالي المستوى والتمكن من واجهات المستخدم الأمامية.

المشكلة

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

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

• البنية: Next.js App Router للمسارات الدولية المفسرة على الحافة (Edge)، مقترنة بسياق React العالمي لحالات المظهر، والموسيقى، وروبوت الدردشة.
• القرارات الرئيسية:
  • بنية متعددة اللغات: تم بناء إطار عمل i18n قوي باستخدام next-intl لتعريب التوجيه، والبيانات التعريفية للصفحة، ومطالبات الدردشة، وهياكل وثائق المشروع (مع صفحات معربة بالكامل بـ 9 لغات).
  • الانتقالات القائمة على Canvas: دمج تشويه أمواج ضوضاء بيرلين المخصص بدلاً من انتقالات CSS البسيطة لإنشاء تأثير أمواج رقمي ملموس عند انتقالات الصفحة.
  • التركيب الصوتي وروبوت دردشة تفاعلي بالذكاء الاصطناعي: تم تكوين حزمة أدوات Google Generative AI مع طوابير تركيب صوت مخصصة، باستخدام توجيه الحافة (Edge) لتدفق الاستجابات بسرعة.
  • طبقات Z-Index: وضع سياق تكديس z-index صارم من 15 طبقة لمنع تضارب التخطيط والتفاعل بين التراكبات والمؤشرات المخصصة والمشاهد ثلاثية الأبعاد.
• التنازلات: تقرر استخدام تراكبات CSS وتأثيرات canvas ثنائية الأبعاد خفيفة الوزن بدلاً من الأصول ثلاثية الأبعاد الثقيلة للحفاظ على الحد الأدنى من حجم حزمة الصفحة البدئية وسرعات تحميل أقل من 100 مللي ثانية.
• تدفق البيانات: إدخال المستخدم -> معالج مسار Next.js -> Google Generative AI -> تدفق النص -> طابور التركيب الصوتي -> مشغل الصوت المخصص للويب.

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

• النتيجة: تحقيق رسوم متحركة سلسة بمعدل 60 إطارًا في الثانية عبر الأجهزة، ووقت استجابة لأول بايت (TTFB) يقل عن 100 مللي ثانية، ومساعد صوتي ثنائي اللغة تفاعلي بالكامل.
• أداء Lighthouse: إحراز نتيجة مثالية 100/100/100/100 في Lighthouse عبر جميع الفئات الرئيسية (الأداء، إمكانية الوصول، أفضل الممارسات، وتحسين محركات البحث).
• الامتثال الأمني: إحراز نتيجة مثالية 100/100 في عمليات تدقيق التحقق الأمني عبر تقييم isagentready من Cloudflare.
• المقارنة: الترقية من بورتفوليو المبتكر الأول غير المثالي، Portfolio: Glass، إلى طرفية تفاعلية مخصصة، مما أدى إلى زيادة تفاعل المستخدم والاستفسارات التقنية المباشرة.
• الأثر: إثبات القدرة على بناء واجهات مستخدم حديثة ومعقدة وبنية تحتية متكاملة وجاهزة للإنتاج.

الغوص التقني العميق

• تفاصيل بارزة: فلتر خطوط مسح شاشة CRT تم بناؤه خصيصًا، وتتبع مخصص ومستجيب للمؤشر، ومصور صوتي ديناميكي، وتوجيه متعدد اللغات مخصص عبر next-intl.
• التحقق: تم التحقق باستخدام عمليات تدقيق Lighthouse، وفحوصات إمكانية الوصول (نسب التباين >= 4.5:1)، ومحاكاة الأجهزة المحمولة منخفضة الأداء.
• التحسينات: تكوين أنماط الصور البعيدة لـ Next.js، وتحميل أصول canvas لـ Three.js بكسل كسول، وتبسيط أنماط tailwind لتقليل قواعد CSS غير المستخدمة.
• جودة الكود: تكوين صارم لـ ESLint، وتعيين الأنواع عبر TypeScript، ومكونات نمطية ذاتية الاحتواء.
• الروابط: راجع package.json و next.config.ts و app/data.ts.

تأملات

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

مساهماتي

• بنية الواجهة الأمامية: تصميم وتنفيذ واجهة المستخدم الأساسية، بما في ذلك المؤشرات المخصصة وشاشات العرض الموجهة (HUD) وشبكات bento ومزود الموسيقى.
• دمج روبوت الدردشة: برمجة روبوت الدردشة الصوتي مع التركيب الصوتي وتعليمات النظام والسياق المدرك للغة.
• ضبط الرسوم المتحركة: تنسيق خطوط زمن GSAP ScrollTrigger ومزامنتها مع انتقالات تشويه أمواج canvas.

بنية المشروع

يتبع هذا التطبيق نمط Next.js App Router القائم على الميزات المعيارية مع مجلدات مسار معربة.

• هيكل طبقي: تتعامل مكونات الخادم مع معلمات التعريب والتوجيه الهيكلي، بينما تعرض مكونات العميل عناصر واجهة مستخدم تفاعلية.
• وحدات الميزات:
  • components/sections/: أقسام التخطيط (البداية، حول، المشاريع، المهارات، التواصل).
  • components/ui/: نقاط واجهة مستخدم تفاعلية (ASCIIText، CustomCursor، MusicPlayer، VerticalHUD).
• إدارة الحالة: يتحكم React Context API في حالة تشغيل الصوت العالمية، واختيار المظهر، وحالات اللغة.
• إعادة الهيكلة والتحسينات: ترقية التكوين إلى Next.js 16 مع Turbopack للاستبدال الفوري للمكونات أثناء التطوير.

هيكل المسار المترجم (App Router)

يتم ترجمة التطبيق إلى هيكل المسار الثابت (○) والديناميكي (ƒ) التالي (باستثناء مسارات مشاريع البورتفوليو الفردية):

• البنية التحتية لـ PWA وتحسين محركات البحث (○ ثابت):
  • /_not-found — معالج خطأ 404 عالمي ثابت.
  • /manifest.webmanifest — بيان تطبيق الويب.
  • /robots.txt و /sitemap.xml — أدلة برامج الزحف.
• التوجيه ثنائي اللغة (ƒ ديناميكي):
  • /[locale] و /[locale]/[...rest] — غلاف تخطيط مدرك للغة باستخدام next-intl.
• بروتوكول سياق النموذج (MCP) ووكلاء الذكاء الاصطناعي (ƒ ديناميكي):
  • /.well-known/mcp.json و /openapi.json — مخططات إمكانات الخادم القابلة للقراءة آليًا.
  • /.well-known/agent-skills/ — أدلة المهارات (مثل SKILL.md) للتكامل مع الذكاء الاصطناعي.
  • /api/mcp و /api/mcp/sse — نقاط نهاية اتصالات SSE لوكلاء العملاء.
• روبوت الذكاء الاصطناعي التوليدي ونظام الوسائط (ƒ ديناميكي):
  • /api/chat و /api/chat/health — معالجو مسار التدفق الذين يدعمون معالج صوت روبوت الذكاء الاصطناعي.
  • /api/music و /api/music/health — توجيه التحكم في تدفق الصوت.
• مصدرو سياق LLM (ƒ ديناميكي):
  • /llms.txt و /llms-full.txt — صادرات نصوص موفرة للرموز المميزة لحقائق المحفظة والسياق والشهادات المحسنة لقراءة LLM.

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

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

ملاحظة الاستضافة:
المشروع مباشر ومستضاف على Vercel على franzdomingo.dev. يرجى ملاحظة أن هذا الكود نفسه هو مشروع معرض الأعمال؛ أنت تشاهد وتشغل هذا المشروع بالذات حاليًا.