هذا الموقع
البورتفوليو الذي يقول «أنا أصمم و أبني» عليه أن يثبت ذلك. فجعلت الموقع نفسه دراسة الحالة: نظام تحريري صممته، ثم بنيته بالكود، بلغتين.
- الدور
- تصميم · بناء الواجهة الأمامية · تعدد اللغات
- المدة
- مستمر · 2026
- الموقع
- زيارة الموقع
الادعاء سهل — الإثبات هو المشكلة
أغلب المصممين يعرضون صور أعمالهم. قليلون يستطيعون أن يُروك البناء نفسه. و أنا أصمم و أبني معاً، فلم يكن يكفيني موقع يقول ذلك — أردت موقعاً يفعله أمامك. أردته أيضاً أن يخاطب جمهوري بلغتيه، العربية و الإنجليزية، كلغتين أصليتين لا كترجمة ملحقة. فكان الشرط الذي وضعته لنفسي واضحاً: موقع سريع، سهل الوصول، مبني بعناية ظاهرة — و لا يشبه أي قالب جاهز.
نظام واحد، من التصميم إلى الكود
تعاملت مع الموقع كمنتج كامل لا كواجهة عرض: نظام تصميم واحد يحمل لغتين، و طبقة حركة هادئة، و معايير أداء و وصول صارمة — و كل ذلك مكتوب بالكود، قراراً قراراً.
- صممت نظاماً تحريرياً دافئاً: ورق، و حبر، و لون واحد مميز (Deep Teal) — مع وضع داكن دافئ يتبدل عبر متغيرات CSS، لا عبر نسخة ثانية من التنسيقات.
- بنيت اللغتين من الأساس: العربية و الإنجليزية عبر next-intl، بدعم كامل لاتجاه العربية (RTL)، مع خطين عربيين مختارين بعناية (Amiri و IBM Plex Sans Arabic) و عزل سليم للمصطلحات اللاتينية داخل النص العربي.
- أبقيت الحركة قليلة و مقصودة: transform و opacity فقط، و انتقال مشترك من بطاقة المشروع إلى صفحة دراسته — و كل حركة تحترم خيار «تقليل الحركة».
- جعلت الأداء و الوصول شرطي بناء لا تحسينات لاحقة: خطوط مستضافة ذاتياً بلا إزاحة تخطيط، و تباين AA، و مسارات لوحة مفاتيح كاملة، و ميزانية Lighthouse لا تقل عن 95.
- و اعتنيت بالتفاصيل التي تكشف الحرفة: بيانات وصفية لكل صفحة، و صور مشاركة بخط عربي مدمج، و لوحة أوامر سريعة، و نظام تسميات دقيقة يربط الصفحات كلها.
الدليل هو الصفحة التي تقرأها الآن
صار البورتفوليو يجيب عن السؤال قبل أن يُطرح: هو الموقع نفسه بالعربية كما بالإنجليزية، يُقرأ و يتحرك بالجودة نفسها في الاتجاهين، و يفتح بسرعة، و يلتزم معايير وصول صارمة. لا أقول للزائر إني أصمم و أبني — هو يرى ذلك بنفسه. و الأهم أن الأساس صار جاهزاً: أي مشروع جديد ينضمّ إلى النظام نفسه، باللغتين، من دون إعادة بناء.
- Next.js (App Router)
- React 19
- TypeScript
- Tailwind CSS v4
- Framer Motion
- next-intl
- Vercel