موقع شخصي مبني باستخدام Next.js وTailwind CSS، مع دعم كامل للغتين العربية والإنجليزية. بدأت الواجهة بنماذج أولية على Figma تركّز على تجربة المستخدم ووضوح تدفّق التصفح، ثم تم تطويرها وتحسينها تدريجيًا بمساعدة Claude Code. صُمّم ليكون أكثر من مجرد سيرة ذاتية — تجربة رقمية تُظهر طريقة التفكير قبل عرض الأعمال.
المشكلة
بكيف أبني بورتفوليو يعكس أسلوبي؟
كنت أبحث عن طريقة لبناء بورتفوليو يعكس أسلوبي الحقيقي في التصميم والتطوير، ويقدّم تجربة استخدام واضحة ومريحة. كان الهدف إنشاء موقع لا يكتفي بعرض الأعمال، بل يعبّر عن طريقة التفكير في بناء المنتجات، مع مراعاة تجربة قراءة طبيعية للمحتوى العربي دون أن يؤثر ذلك على جودة التجربة العامة.
الحل
بتصميم يبدأ بتجربة المستخدم
تم تصميم الموقع مع التركيز على تجربة المستخدم أولًا، لضمان وضوح التصفح وسلاسة التفاعل منذ اللحظة الأولى. تم بناء الواجهة بحيث تدعم اللغة العربية بشكل طبيعي ضمن التجربة دون أن تكون إضافة لاحقة، مما ساهم في الحفاظ على انسجام التصميم واتجاه القراءة. اعتمدت على هوية بصرية داكنة تعكس طابعًا تقنيًا حديثًا، مع اهتمام بالتسلسل البصري والتفاصيل الدقيقة في التباعد والقراءة. كما تم تصميم نظام محتوى مرن يسهّل إدارة وتحديث المشاريع ودراسات الحالة بشكل مستمر.
الأثر بالأرقام
مراحل العمل
التعريف والبحث
راجعت بورتفوليوهات مصممين ومطورين بارزين. لاحظت أن أقوى المواقع تجيب على سؤال واحد بوضوح: لماذا أنا تحديداً؟ حددت رسالتي: مصمم يبني منتجات كاملة لا فقط واجهات.
التصميم والهوية البصرية
اخترت نظام ألوان داكناً مع بنفسجي كلون accent يوحي بالتقنية والإبداع في آن. صممت كل قسم كوحدة مستقلة مع التركيز على RTL من اليوم الأول وليس كخطوة لاحقة.
التطوير والتنفيذ
بعد الانتهاء من التصميم الأولي في Figma، تم الانتقال إلى التطوير باستخدام Next.js مع TypeScript. تم الاعتماد على Claude Code في بناء وتطوير الواجهة وتنفيذ جزء كبير من المنطق، مع توجيه عملية التنفيذ وتحسين تجربة المستخدم أثناء البناء.
الإطلاق والتحسين
اعتمدت في مرحلة التحسين على خبرتي في تجربة المستخدم وفهمي لتدفق التفاعل، مع دراسة مفاهيم DevOps لتحسين الأداء والاستقرار. تم تحليل الموقع من حيث السرعة والبنية وتجربة الاستخدام، مع الاستعانة بأدوات الذكاء الاصطناعي لتحسين القرارات والتفاصيل بشكل مستمر.
قرارات مفصلية
التحدي
هل أستخدم قالباً جاهزاً لتوفير الوقت؟
القرار
رفضت القوالب وبنيت من الصفر
لماذا؟
البورتفوليو نفسه هو الدليل الأقوى على قدرتي — قالب جاهز يتناقض مع رسالة الموقع كاملاً. الوقت الإضافي كان استثماراً لا تكلفة.
التحدي
دعم اللغتين من البداية أم لاحقاً؟
القرار
دعم ثنائي اللغة منذ اليوم الأول
لماذا؟
إضافة اللغة لاحقاً يعني إعادة بناء كل مكوّن. بناؤها من البداية أطال التطوير أسبوعاً لكنه أعطى مرونة كاملة لاحقاً.
التحدي
CMS خارجي أم ملفات TypeScript ثابتة للمحتوى؟
القرار
ملفات TypeScript في lib/data.ts
لماذا؟
CMS يضيف تعقيداً وتكلفة لموقع شخصي. TypeScript يعطي type safety كاملاً وتحديث المحتوى لا يأخذ أكثر من دقيقتين.
التقنيات والأدوات
Next.jsالإطار الأساسي
TypeScriptType Safety
Tailwind CSSالتصميم والستايل
Claude Codeمساعد التطوير
النتائج
“كل مشروع أعمل عليه هو انعكاس لطريقة تفكيري، وليس مجرد واجهة.”
— بلال مزياني ✦
أعجبك هذا المشروع؟
يسعدني أشرح أي قرار تصميمي أو تقني بالتفصيل.