معرض الأعمال: زجاجي

موقع معرض أعمال تبسيطي بتصميم زجاجي (glassmorphic) تم بناؤه باستخدام Next.js 15 App Router و TypeScript و Tailwind CSS و MDX

العرض التجريبي الحي (V1) • [GITHUB: كود خاص]

Overview

• الدور: منشئ مستقل، مصمم UI/UX ومطور واجهات أمامية
• التقنيات: Next.js 15 (App Router)، React 18، TypeScript، Tailwind CSS 4، Framer Motion، Radix UI، MDX، next-intl
• النتيجة الرئيسية: درجة PageSpeed مثالية 100/100/100/100 وتحسين محركات البحث (SEO)
• الملخص: معرض أعمال مطور تم إنشاؤه بشكل ثابت يستعرض جماليات التبسيط الراقية، تم بناؤه خلال فترة البحث عن فرص تدريب في هندسة الواجهات الأماسية (والتي انضممت خلالها بنجاح إلى Trend Micro). يتميز بعناصر واجهة مستخدم نمطية، ومحتوى محلي، وواجهات زجاجية متجاوبة تمامًا.

The Problem

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

Approach & Decisions

• البنية المعمارية: استخدام Next.js App Router لدعم اللغات المتعددة للصفحات. يعتمد على React Server Components (RSC) لتقديم صفحات markdown الثابتة (MDX)، مدمجًا مع Client Components فقط حيث تكون العناصر التفاعلية (الرسوم المتحركة، الشريط السفلي "dock"، الأوامر) ضرورية.
• القرارات الرئيسية:
  • البدء مع Tailwind CSS 4: الاستفادة من النسخ المبكرة لـ Tailwind 4 لتنفيذ متغيرات زجاجية مرنة في CSS، وفلاتر خلفية مخصصة، وتدرجات للحدود.
  • عناصر واجهة مستخدم نمطية: بناء كتل تخطيط قابلة لإعادة الاستخدام (ui/, motion-primitives/, dock/) لتركيب طرق عرض مختلفة بسهولة دون تراكم الديون التقنية.
  • استخدام next-intl للدعم متعدد اللغات: هيكلة الكود المصدري لدعم التدويل عبر اللغة الإنجليزية واللغات الأخرى المستهدفة بشكل مباشر.
• المقايضات: اختيار التوليد الثابت (SSG) مع ترطيب المكونات من جانب العميل بدلاً من التقديم الديناميكي من جانب الخادم لتحسين أوقات التحميل، على الرغم من أن ذلك حد من التفاعلات الديناميكية في الوقت الفعلي مع قواعد البيانات.
• تدفق البيانات: تم تعيين طلبات الصفحات مباشرة إلى تجميعات MDX الثابتة المغلفة في قوالب التخطيط. تم إدارة حالات العميل عبر خطافات (hooks) React للقوائم، وتبديل السمات، والنوافذ المنبثقة.

Key Results & Impact

• النتيجة: واجهة زجاجية مصقولة وحديثة يتم تحميلها بسرعة مذهلة وتحظى بترتيب عالٍ في محركات البحث.
• أداء Lighthouse: تسجيل درجة مثالية تبلغ 100 / 100 / 100 / 100 على PageSpeed Insights للهواتف المحمولة وأجهزة سطح المكتب في مجالات الأداء، وإمكانية الوصول، وأفضل الممارسات، وتحسين محركات البحث (SEO).
• السياق: تم بناؤه خلال فترة البحث النشط عن فرص تدريب، مما أدى في النهاية إلى الحصول على دور في Trend Micro.
• حدود التحسين: خلال مشروع V1 هذا، كان التحسين مقتصرًا بصرامة على تحسين محركات البحث القياسي (SEO). لقد كان يفتقر تمامًا إلى نماذج التحسين الحديثة مثل تحسين الذكاء الاصطناعي (AIO)، وتحسين محركات الإجابة (AEO)، وتحسين محركات التوليد (GEO) والتي تم معالجتها لاحقًا في تصميم V2.
• المقارنة: كان هذا هو تصميم V1. على الرغم من أنه كان عالي الأداء، إلا أنه يفتقر إلى تفاعلية الطرفية المخصصة، وفيزياء 3D Canvas، وروبوت الدردشة المدعوم بالذكاء الاصطناعي والمفعل بالصوت والموجود في تصميم V2 (معرض الأعمال: سايبربانك).
• الأثر: القدرة المثبتة على تنفيذ تصميمات واجهات مستخدم عالية الدقة وبناء كود مصدر React محسن للبحث.

Technical Deep Dive

• تفاصيل بارزة: شريط تنقل سفلي متحرك تفاعلي، تأثيرات زجاجية غير لامعة مخصصة باستخدام أدوات الخلفية المساعدة، قائمة بحث الأوامر CMD+K.
• التحقق: تم بناؤه واختباره محليًا باستخدام next build وإجراء تحليل الأداء أثناء التشغيل باستخدام Lighthouse و Vercel Analytics والتحقق اليدوي من التخطيط عبر Safari و Chrome و Firefox.
• التحسينات: توليد الصفحات الثابتة (SSG) لجميع صفحات MDX، وتأجيل تحميل مكونات العميل التفاعلية الثقيلة، وتحسين الصور باستخدام إعدادات صور Next.js القياسية.
• جودة الكود: فرض قواعد صارمة لفحص TypeScript، والتنسيق، وأدوات التدقيق (linting).
• الروابط: تحقق من هياكل المجلدات لملف package.json و components/.

Reflections

• بشكل مختلف: كنت سأقوم بإنشاء نظام تصميم أو إرشادات مرئية في Figma مسبقًا. أدى التصميم مباشرة في الكود لمرة ثانية فقط إلى دورات تكرار تخطيط متعددة قبل الوصول إلى الجمالية الزجاجية المتماسكة النهائية.
• النجاحات: تحقيق درجة PageSpeed مثالية 100/100 وتقديم جمالية زجاجية مصقولة أنيقة ونظيفة.
• الدروس المستفادة: يبدو التصميم التبسيطى بسيطًا ولكنه يتطلب تباعدًا دقيقًا، وهرمًا خطيًا، وهوامش داخلية ليبدو احترافيًا. يتطلب تنفيذ الأسطح الزجاجية أيضًا بدائل دقيقة لـ backdrop-filter لضمان التوافق مع المتصفحات المختلفة.

My Contributions

• الملكية الكاملة: تصميم وهيكلة وتنفيذ 100% من المشروع من الصفر، بما في ذلك تصميم واجهة المستخدم، وأنظمة التخطيط، وهيكل المكونات، والرسوم المتحركة، وإعدادات التدويل.

Project Architecture

يستخدم هذا التطبيق نمط Next.js App Router مهيكل تم تهيئته للتوليد الثابت من جانب العميل.

• الهيكل الطبقي: تدير التكوينات العالمية ومغلفات التخطيط الأساسية موفري السمات والتنسيق الأساسي، بينما تقوم أدوات تحميل MDX بتحليل ملفات markdown الخام.
• الوحدات البرمجية للميزات:
  • components/ui/ - وحدات التخطيط ومكونات الرؤية الأساسية.
  • components/motion-primitives/ - مغلفات متحركة للانتقالات السلسة.
  • components/dock/ - أداة تنقل عائمة قابلة للتخصيص.
• إدارة الحالة: تحافظ على حالة جانب العميل محليًا داخل المغلفات الفردية (على سبيل المثال، مؤشرات العناصر النشطة، رؤية التراكب).

تخطيط المسارات والمصادر

على عكس بنية V2 (سايبربانك)، فإن V1 هي بنية خفيفة الوزن خاصة بالعميل فقط:

• ما تحتويه:
  • الجذر الثابت والمثبتات: هيكل صفحة واحدة يستخدم توجيه الأجزاء (#home, #about, #featured-projects, #experience-education-certificates, #blog, #connect).
  • البيانات التعريفية والاكتشاف: ملفات manifest محلية (/site.webmanifest, /browserconfig.xml).
  • حزم الترطيب المجهزة: أجزاء next ثابتة للتخطيط، وعناصر الصفحة، وحالات التحميل المؤجل.
• ما تفتقر إليه:
  • لا توجد واجهات برمجة تطبيقات للخلفية: يفتقر إلى نقاط نهاية البث، أو مسارات الموسيقى، أو معالجات روبوت الدردشة (/api/chat, /api/music).
  • لا توجد تكاملات للذكاء الاصطناعي / الوكلاء: يفتقر تمامًا إلى نقاط نهاية بروتوكول سياق النموذج (MCP) (/api/mcp) ومخططات نصوص اكتشاف نماذج اللغة الكبيرة (/llms.txt, /llms-full.txt).

Demo Preview

• الصفحة الرئيسية الزجاجية: ألواح زجاجية غير لامعة، وخلفيات ملونة خفيفة، ومحاذاة خطية دقيقة.
• تنقل شريط سفلي متحرك: توسيع سلس لأيقونة الشريط السفلي يعتمد على حركة الماوس واستهداف الأقسام.
• قائمة الأوامر (CMD+K): قائمة تراكب فورية للتنقل المباشر في الصفحة والاختصارات.
• رابط العرض التجريبي الحي: يمكن مشاهدة المشروع المباشر على franzdomingov1.vercel.app.

ملاحظة الاستضافة:
تم نشر معرض الأعمال الزجاجي V1 على Vercel ويمكن الوصول إليه عبر روابط العرض التجريبي المباشر أعلاه. يرجى ملاحظة أنه تم ترقية معرض الأعمال الرئيسي منذ ذلك الحين إلى تصميم سايبربانك (V2).