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

الموقع المباشر · مستودع خاص

نظرة عامة

• الدور: مهندس full-stack وإبداعي مستقل.
• المكدس الحالي: Next.js 16 App Router وReact 19 وTypeScript وTailwind CSS 4 وMDX وnext-intl وFramer Motion وموجات Canvas مخصصة ذات Perlin-style distortion وThree.js وReact Three Fiber وتكامل AI محايد عن المزوّد وMCP/OAuth وNode.js 24 LTS وVercel.
• النتيجة: دليل حي على هندسة full-stack الإبداعية، حيث تكون محفظة الأعمال نفسها المنتج الموثق.
• الملخص: تجمع التجربة لغة glitch البصرية والقراءة التحريرية والتكاملات المضبوطة في منتج واحد متماسك.

تحدي المنتج

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

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

• البنية: ينظم Next.js App Router الوثائق المحلية المعروضة على الخادم ومعالجات routes، بينما تبقى الأغلفة التفاعلية في العميل.
• القرارات الأساسية:
  • محتوى ومسارات تسع لغات: يدير next-intl المسارات والرسائل، ولكل مشروع MDX محلي مع fallback إنجليزي موثق.
  • تفاعل Canvas و3D: تضيف موجات Canvas المخصصة ذات Perlin-style distortion وFramer Motion وواجهة Three.js وReact Three Fiber المركزة expressive motion من دون تحويل المنتج كله إلى مشهد 3D.
  • طرفية FUI تشخيصية: تصنع CRT texture وscanlines وterminal status readout وglitch typography هوية مستقبلية مع الحفاظ على hierarchy واضحة.
  • الصوت والدبلجة الاختيارية: يتبع local browser feedback وdubbing popup وaudio sequencing إعدادات المستخدم ودعم المتصفح.
  • تنسيق التراكب: تستخدم boot screen وnavigation وcursor وscanlines وchat وdubbing popup و3D hero stacking coordination مقصوداً لا fixed layer count.
  • تصميم مساعد Oz: يستخدم /api/chat توجيهًا محايدًا بين خدمة أساسية وخدمة احتياطية، وسياق بيانات محفظة ثابتة ومحتوى MDX أعمق، وأدوات واجهة صريحة.
  • حدود العميل والخادم والحالة: تفصل providers السمة والتدويل والموسيقى؛ وتبقى تفضيلات الدردشة محلية ويظل متجر filter محدود المسؤولية.
  • MCP وOAuth: تحمي OAuth 2.1 وPKCE S256 والنطاق portfolio.read أدوات القراءة فقط.
• المفاضلات: يفضل المنتج Canvas المقصود و3D الاختياري على عرض ثلاثي الأبعاد كامل، والصوت في المتصفح ملاحظة اختيارية لا خدمة صوت للخادم.
• تدفق البيانات: يصل إدخال الزائر إلى /api/chat مع بيانات محفظة ثابتة وسياق MDX أعمق. تعيد الاستجابة المتدفقة نصًا أو إجراء واجهة، وقد يستخدم المتصفح المدعوم صوتًا محليًا اختياريًا.

يعمل النظام البصري التشخيصي ذي الـ glitch وHUD مع سمات النظام والفاتح والداكن. تضيف موجات Canvas المخصصة إحساسًا فيزيائيًا وتشويهًا بأسلوب Perlin، بينما تضيف واجهة React Three Fiber وThree.js طبقة 3D مركزة. يفصل التطبيق بنية الخادم عن أغلفة العميل التفاعلية. تحمل مسارات next-intl ملفات MDX محلية مع الإنجليزية كخيار احتياطي للمحتوى.

النتائج والأدلة

• النتيجة: يقدم الموقع توجيهًا سريعًا وشرحًا أعمق للأنظمة التي تقف خلفه.
• الجودة والتحقق: ESLint وفحص TypeScript وبناء الإنتاج هي بوابات جودة قابلة للتكرار.
• ضوابط الأمان: يستخدم chat إغلاقًا مؤقتًا موقعًا وحدودًا للمعدل، ويستخدم MCP نطاقات قراءة فقط ورموز تفويض لمرة واحدة.
• المقارنة والتطور: يتقدم المنتج من Portfolio: Glass السابق إلى أساس معياري يدعم السرد المحلي ووصول الوكلاء.
• الأثر: يوضح frontend إبداعيًا مع قرارات قابلة للصيانة للمحتوى والتكامل والأمان والنشر.

التعمق التقني

• تفاصيل بارزة: تشترك CRT texture وglitch typography وCanvas و3D hero والموسيقى والمحتوى المحلي في مسؤوليات واضحة من دون حاوية حالة عامة ثقيلة.
• التحقق: تشكل lint وفحص الأنواع وبناء الإنتاج بوابات جودة متكررة، وتراجع فروع responsive وreduced-motion وcoarse-pointer مع تغيير الواجهة.
• التحسينات: تعزل client-only shells قدرات المتصفح، وتحافظ MDX والبيانات والمكوّنات المعيارية على تحميل التفاعل عند الحاجة فقط.
• جودة الشفرة: توضح TypeScript types والمعالجات المنظمة وproviders المركزة وstores الضيقة ووحدات الخدمة والأمان ملكية الشفرة.
• الروابط والمراجع: راجع components/sections وcomponents/ui وcomponents/chatbot وcomponents/providers وcontent/projects وmessages وdata وlib/mcp وlib/security وlib/services وstores.

Oz، مساعد محفظة الأعمال

يبث Oz عبر /api/chat باستخدام توجيه محايد متعدد الخدمات وخيار احتياطي مضبوط. يجيب من بيانات محفظة ثابتة ومحتوى MDX أعمق. تساعد الإجراءات الواعية باللغة على التنقل والبحث عن المشاريع والتواصل والتحكم بالموسيقى والسمة واللغة. تظل ملاحظات الصوت أو الدبلجة الاختيارية في المتصفح، والتفضيلات المحلية، وتشغيلات الاستدلال أو الوكلاء الفرعيين الاختيارية، والإغلاق المؤقت الموقّع ضد jailbreak أو الإساءة المتكررة ضمن حدود صريحة بين العميل والخادم.

الوصول عبر MCP والوكلاء

وصول MCP للقراءة فقط ومحمي بـ OAuth 2.1 Authorization Code flow وPKCE S256 والنطاق portfolio.read. النقل الأساسي هو Streamable HTTP. تجعل OpenAPI واكتشاف .well-known وبطاقات الوكلاء ووثائق المهارات هذه الواجهة قابلة للاكتشاف. يوفر Upstash Redis على Vercel استبدالًا ذريًا لرمز يستخدم مرة واحدة، مع بديل محلي ونقاط توافق عند الحاجة.

الأنظمة الداعمة للمنتج

تدعم نقاط Spotify لتسجيل الدخول وcallback والتشغيل الحالي تجربة الموسيقى. تطبق مسار التواصل SMTP حماية عند حد التكامل. يوفر Vercel Analytics وSpeed Insights المراقبة مع خيار إيقاف التحليلات. يتضمن المنتج أيضًا PWA manifest وJSON-LD وrobots وsitemap وhumans.txt وllms.txt وllms-full.txt وصفحات خصوصية وقانونية محلية.

تأملات

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

مساهماتي

• الواجهة والتصميم: صممت النظام البصري والأقسام المتجاوبة وتركيب HUD وCanvas و3D hero وعرض المحتوى.
• الذكاء الاصطناعي وOz: بنيت سطح المساعد المتدفق والتوجيه الأساسي والاحتياطي وسياق المحفظة وMDX وإجراءات الواجهة.
• التفاعل والحركة: ضبطت الحركة والتمرير وreduced-motion والسلوك المتجاوب. صممت ونفذت المنتج ونظام التصميم بالكامل، وتفاعل الواجهة الأمامية، وCanvas و3D، والمحتوى المحلي، وOz والذكاء الاصطناعي، وMCP والأمان، وتكاملات الموسيقى والتواصل والتحليلات والاكتشاف.

البنية المعمارية

• هيكل طبقي: تدير server components اللغة وبنية الوثيقة، وتدير client components التفاعل، وتعزل API chat وcontact وmedia وMCP.
• وحدات الميزات:
• يحتوي app على صفحات محلية ومعالجات API ووثائق اكتشاف.
• يفصل components الأقسام وواجهة UI وروبوت الدردشة وproviders.
• تحفظ content وmessages وdata ملفات MDX والترجمات والحقائق المتحقق منها.
• يتولى lib MCP والأمان والخدمات، وتحتوي stores على custom chatbot filter store.
• تستخدم السمة والتدويل والموسيقى providers خاصة بها، وتبقى إعدادات جلسة روبوت الدردشة محلية للمكوّن في تخزين المتصفح.
• إدارة الحالة: تملك providers السمة واللغة والموسيقى، بينما تبقى تفضيلات الدردشة وحالة filter ضمن أضيق نطاق ممكن.
• إعادة البناء والتحسينات: تسمح الحدود المعيارية بتطور features المرئية والroutes والمحتوى والتكاملات استقلالًا.

تفاصيل الوحدات والتشغيل

• يحتوي src/app/[locale] على الصفحات المحلية وlayouts وloading وerror ومسارات المشاريع.
• يضم src/components/sections أقسام Hero وAbout وExperience وSkills وProjects وContact وCertification.
• يوفر src/components/ui عناصر GlitchText وWaves وCustomCursor وHeroModel وSkillGraph البصرية.
• يدير src/components/layout التنقل وتجربة البدء وسلوك الرجوع إلى أعلى الصفحة.
• يفصل src/components/chatbot الودجت وواجهة المحادثة وخدمات الدردشة في العميل.
• يضع src/components/providers حدود client-only shells وmusic-player provider.
• يمثل src/content/projects مصدر MDX لتفاصيل المشروع لكل لغة.
• يحفظ src/data وsrc/messages الحقائق الثابتة المتحقق منها وكتالوجات الترجمة.
• تجمع src/lib وsrc/hooks وsrc/stores الخدمات المشتركة والسلوك القابل لإعادة الاستخدام وحالة UI/filter المحدودة.
• تدير route وserver components اللغة وبنية الوثيقة، بينما تدير client components التفاعل وbrowser-only APIs.
• تستخدم themes وproviders سياقات منفصلة بدلاً من حاوية global واحدة.
• تبقى تفضيلات جلسة الدردشة في component-local browser storage عندما يكون ذلك مناسباً.
• لا يخدم chatbot filter store إلا concern الواجهة الخاص به.
• يتحقق Cover component من local asset path على الخادم قبل رسم الوسائط.
• يستخدم التنقل الداخلي helpers من i18n routing module.
• يختفي ghost navigation عند scroll-down ويعود عند scroll-up.
• يعوض body layout هذه navigation state المؤقتة.
• يمر contact form عبر SMTP handler ولا يكشف mail credentials للعميل.
• تعتمد تجربة Spotify على login وcallback وnow-playing endpoints.
• يمثل /api/gallery/[slug] سطحاً محدود المعدل لوسائط المشاريع ومعارض المشاريع المدعومة.
• يمكن لإجراءات Oz المعتمدة في الواجهة فتح معرض مشروع عندما يكون enabled وsupported، من دون عرضه كإجراء mobile شامل.
• يتحقق /api/chat من same-origin requests. عند تفعيل abuse controls، يحمل signed temporary lockdown cookie منفصل restriction، ولا يكون request نفسه signed.
• تتضمن analytics سلوك opt-out وتبقى خارج critical page content.
• يشكل manifest وrobots وsitemap وJSON-LD وlocalized metadata سطح PWA وSEO.
• يوفر /[locale] ومسارات المشاريع hierarchy مدركة للغة عبر next-intl.
• يوفر /api/mcp وOpenAPI و.well-known read-only agent discovery، بينما /api/chat هو Oz stream surface.
• عمليات Oz: يوفر /api/chat و/api/chat/health و/api/gallery/[slug] واجهات البث وفحص الحالة وproject-media المحدود المعدل، فيما تتولى أدوات الواجهة المعتمدة التنقل وتصفية المشاريع والمعرض المفعّل ومراجعة التواصل والموسيقى والسمة وإجراءات اللغة.
• يقدم llms.txt وllms-full.txt وauth.md ووثائق discovery سياقاً واضحاً للـ LLM وللقارئ البشري.
• يظل authorization scope هو portfolio.read لذلك لا يصبح MCP write surface.
• يقلل one-time code redemption من replay risk في deployed environment.
• يحسن fallback provider التوفر لكنه لا يغير portfolio source of truth.
• يمكن للchatbot المساعدة في التنقل والبحث، لكنه لا يعدل المحتوى بحرية.
• يوفر signed temporary lockdown حداً ضد jailbreak والإساءة المتكررة.
• يمكن اختبار أو إيقاف كل visual primitive من دون تغيير content model.
• يستخدم Tailwind v4 PostCSS configuration وCSS token system الخاص بالمشروع.
• توضح TypeScript types عقود portfolio data وMDX module.
• يجمع production build التحقق من routes وcontent وserver boundaries.
• تجعل static portfolio data الصفحة والمساعد يعتمدان الحقائق المتحققة نفسها.
• يفصل MDX سرد المشروع عن component presentation.
• يمنع locale fallback تحول نقص ترجمة واحد إلى فشل كامل للمسار.
• تبقي server integrations الأسرار خارج browser bundle.
• لا يتم hydrate للinteractive shell إلا عند الحاجة إلى browser API.
• تحترم motion branches تفضيلات المستخدم مع الحفاظ على التخطيط الأساسي.
• يحافظ semantic layout على reading order رغم visual overlays.
• تساعد labelled controls استخدام لوحة المفاتيح وassistive technology.
• يحافظ غياب custom cursor على تجربة native pointer الطبيعية في touch devices.
• لا يمنع غياب طبقة 3D قراءة project details أو العثور على contact.
• يبقى هيكل MDX صالحاً حتى إذا لم تتوفر cover media.
• تجعل localized metadata سياق اللغة متسقاً في المشاركة ونتائج البحث.
• تصف public discovery documents عقد agent integration بوضوح.
• يقدم OpenAPI وصفاً machine-readable للendpoints.
• يبقى OAuth client registration وauthorization flow منفصلين عن page navigation العادي.
• يخدم Upstash Redis اتساق code redemption في Vercel deployment.
• يتيح local compatibility behavior فحص التكامل أثناء التطوير.
• تدار SMTP configuration وAPI keys في .env ولا تدخل المستودع.
• Node.js 24 LTS هو أساس package engines وdeployment runtime.
• يكشف npm run lint مشاكل style وstatic analysis.
• يتحقق npm run typecheck من TypeScript contracts.
• يتحقق npm run build من production routes وbundle معاً.
• تمنع هذه التحققات كسر server integration عند تغيير الواجهة بصرياً.

معاينة العرض

• صفحة glitch: تدعم الطباعة الواضحة وتفاصيل HUD ونسيج Canvas أولوية المحتوى.
• محادثة Oz: تقدم إجابات متدفقة ومدركة للغة من سياق المحفظة المتحقق منه.
• استكشاف المشاريع: تنقل دراسات MDX والوسائط والغلاف والأقسام المنظمة الزائر من شبكة المشاريع إلى القراءة المتعمقة.
• واجهة FUI تشخيصية: تصنع CRT texture وscanlines وterminal-style status readouts وglitch typography هوية واجهة مستقبلية واضحة.
• الصوت والدبلجة الاختيارية: يمكن للمتصفحات المتوافقة تقديم local voice feedback وdubbing popup يتحكم به المستخدم، لكن audio ليس شرطاً لاستخدام الموقع.
• شبكات متجاوبة: تنظم projects وskills وexperience وcredentials في sections كثيفة وواضحة تناسب fine pointer وtouch وreduced-motion.
• تفاصيل محلية: يستطيع الزائر قراءة project architecture وcontribution narrative نفسيهما باللغة التي يختارها.
• اكتشاف جاهز للوكلاء: تشرح OAuth وpublic discovery documents كيف يتعايش read-only machine access المقيد مع human-facing portfolio.
• تنسيق التراكب: تنسق boot screen وnavigation وcursor وscanlines وchat وdubbing popup و3D hero عمداً في stacking يحافظ على القراءة والوصول.
• قاعدة شفرة خاصة: تصف public case study المنتج المباشر بينما تبقى قاعدة الشفرة خاصة.

ملاحظة الاستضافة: قاعدة الشفرة هذه هي محفظة الأعمال المباشرة الموثقة على franzdomingo.dev.