My Portfolio
موقعي الشخصي بالإنجليزية والعربية، بتخطيط RTL كامل وصفحات مولّدة مسبقاً، ونموذج تواصل عبر Postmark يحميه Turnstile، وصفحة للآراء والتوصيات، وصفحات لوكلاء الذكاء الاصطناعي.
التقنيات المستخدمة :
1 / 2
نظرة عامة على المشروع
هذا الموقع هو معرض أعمالي الشخصي: تطبيق ثنائي اللغة متعدد الصفحات يعرض مشاريعي ومسيرتي وشهاداتي والتوصيات التي تلقيتها لمسؤولي التوظيف والعملاء وأصحاب العمل الدوليين.
غالباً ما تُضحّي مواقع المطوّرين بالسرعة لأجل التعقيد البصري، أو تتخلى عن الشخصية سعياً للسرعة. يسعى هذا الموقع إلى الأمرين معاً، عبر حركات متعددة الطبقات لا تنتظر JavaScript لإظهار المحتوى، وتدويل كامل بالعربية والإنجليزية، ووضعين داكن وفاتح مبنيّين على رموز ألوان مشتركة، في قاعدة كود واحدة.
يشمل عملي فيه النسخة العربية بتخطيط من اليمين إلى اليسار بالكامل، ونموذج تواصل يُرسل الرسائل عبر Postmark ويحميه Cloudflare Turnstile، وصفحة الآراء والتوصيات، وطبقة لوكلاء الذكاء الاصطناعي (llms.txt ونسخة Markdown من كل صفحة وأدوات WebMCP)، وطريقة تحميل تُولَّد فيها كل صفحة مسبقاً فلا يُحجب أي محتوى خلف هيكل تحميل.
الميزات الرئيسية
- تجربة ثنائية اللغة: الإنجليزية في الجذر والعربية تحت /ar، مع تخطيط RTL كامل وخط عربي أصيل
- الوضع الداكن والفاتح: تبديل السمة بانتقال مرئي ورموز ألوان مشتركة
- دراسات حالة للمشاريع: دراسات MDX مع معارض صور وعروض حية وروابط إلى مراحل المسيرة والشهادات المرتبطة بها
- المسيرة والإنجازات: خط زمني للأدوار والتعليم، وشهادات مع عروض تفصيلية
- آراء وتوصيات: توصيات من عملاء ومرشدين وأساتذة، في صفحة خاصة بها وفي بطاقة على الصفحة الرئيسية تفتح كل توصية في نافذة حوار
- نموذج تواصل: رسائل مُتحقَّق منها تُرسل عبر Postmark، مع حماية من الرسائل المزعجة، وزر لطلب السيرة الذاتية يعبّئ الرسالة مسبقاً، ورابط في كل دراسة حالة للاستفسار عن مشروع مشابه
- قابل للقراءة آلياً: فهرس llms.txt، ونسخة Markdown من كل صفحة، وأدوات متصفح لوكلاء الذكاء الاصطناعي (WebMCP)
أبرز الجوانب التقنية
- Next.js 16 App Router: كل صفحة مولّدة مسبقاً وقت البناء، مع مكونات خادم حيثما لا يحتاج المكوّن إلى المتصفح
- بلا شاشات تحميل: تصل كل صفحة مولّدة مسبقاً دون هياكل تحميل، ولا يظهر شريط تقدّم رفيع إلا إذا استغرق الانتقال أكثر من 150 ملّي ثانية
- التدويل: next-intl مع توجيه اللغات وبيانات وصفية مترجمة ورسائل تراعي صيغ الجمع وتبديل RTL تلقائي
- محتوى مقروء دون JavaScript: حركات دخول الصفحات تُحرّك المحتوى فقط، ولا ينتظر أي نص تشغيل JavaScript ليظهر
- JavaScript أخف على العميل: ميزات الحركة تُحمَّل في جزء منفصل خارج المسار الحرج، والمؤشر المخصص والتمرير السلس لا يُحمَّلان إلا على الأجهزة التي تستخدمهما
- مصدر واحد للبيانات: صفحات Markdown وllms.txt والبيانات المنظمة وسنوات الخبرة كلها مولّدة من البيانات نفسها التي تعرضها الصفحات
- SEO: بيانات وصفية لكل صفحة مع روابط hreflang، وبيانات منظمة، ومسارات تنقّل، وصورة مشاركة بمقاس 1200x630 لكل مشروع
- إمكانية الوصول: رابط للانتقال مباشرة إلى المحتوى، ونوافذ حوار للتوصيات والشهادات تُبقي التركيز داخلها وتُغلق بـ Esc وتُعيد التركيز إلى العنصر الذي فتحها، ودعم إعداد تقليل الحركة في حركات دخول الصفحات والتمرير السلس والمؤشر ونموذج التواصل
- الأمان والمراقبة: رؤوس أمان، وسياسة أمان محتوى (CSP) تُبلغ عن المخالفات دون أن تحظرها، وCloudflare Turnstile على نموذج التواصل، وتتبع الأخطاء بـ Sentry
- فحوص الجودة: TypeScript صارم وESLint وPrettier، مع خطاف قبل كل commit على الملفات المُجهّزة
مساهماتي
- أضفتُ النسخة العربية: /ar بتخطيط من اليمين إلى اليسار، وخط عربي، ودراسات حالة باللغتين، وروابط hreflang
- بنيتُ مسار التواصل: تحقق مشترك بين النموذج والخادم، وإرسال عبر Postmark، وCloudflare Turnstile، وحقل خفي لاصطياد الرسائل الآلية (honeypot)، وحد لعدد الطلبات، إضافة إلى مسارَي طلب السيرة الذاتية والاستفسار عن مشروع
- بنيتُ صفحة الآراء والتوصيات التي تعرض كل التوصيات مجمّعةً حسب العملاء والمرشدين والأساتذة، وبطاقة الصفحة الرئيسية التي تفتح كل توصية في نافذة حوار، ويمكن في النسخة العربية التبديل في كل توصية بين الترجمة العربية والنص الإنجليزي الأصلي
- بنيتُ طبقة لوكلاء الذكاء الاصطناعي: llms.txt، ونسخة Markdown من كل صفحة (عبر /api/md وعبر Accept: text/markdown)، وأدوات WebMCP في المتصفح
- أزلتُ هياكل التحميل من المسارات لتعرض كل صفحة مولّدة مسبقاً محتواها مباشرة، ووضعتُ مكان مؤشر التحميل العلوي شريط تقدّم واحداً لا يظهر إلا في الانتقالات البطيئة
- عملتُ على الأداء وSEO وإمكانية الوصول: JavaScript أخف على العميل، وبيانات منظمة وصور مشاركة، ونوافذ حوار تعمل بلوحة المفاتيح، ورابط للانتقال مباشرة إلى المحتوى
- صمّمتُ رموز الألوان للوضعين الفاتح والداكن في متغيرات CSS، والتبديل بين السمتين بانتقال مرئي، ومؤشراً مخصصاً يُظهر أسماء الأيقونات والشعارات والروابط المصوّرة التي لا يظهر اسمها على الشاشة
التحديات والحلول
التحدي: الجمع بين حركات غنية ودعم ثنائي اللغة كامل ووضعين داكن وفاتح دون أن ينتظر الزائر تحميل JavaScript.
الحل: كل صفحة مولّدة مسبقاً بمكونات خادم، فيصل HTML كاملاً دون هياكل أو شاشات تحميل. تُضاف الحركات فوق محتوى موجود أصلاً، ولا يُحمَّل كود العميل الأثقل إلا في أجزاء منفصلة خارج المسار الحرج، أو على الأجهزة التي تستخدمه فقط.
النتيجة: موقع غني بصرياً وثنائي اللغة بالكامل، صفحاته مقروءة قبل تشغيل أي JavaScript.
التقنيات المستخدمة
Frontend: Next.js 16، React 19، TypeScript، Tailwind CSS 4، Framer Motion، Lenis
المحتوى: MDX، React Markdown، gray-matter، next-intl
الحالة: Zustand
الخدمات: Postmark، Cloudflare Turnstile، Sentry، Vercel Analytics
البنية التحتية: Vercel
الأدوات: Turbopack، ESLint، Prettier، Husky، lint-staged، pnpm
تحتاج شيئاً مشابهاً؟أخبرني عن مشروعك