بناء موقع شخصي يمثلك كمطور: دروس من رحلتي

الموقع الشخصي بتاعك كمطور هو بطاقتك الرقمية — أول حاجة حد يشوفها لما يبحث عنك أو حد يرشحك لفرصة. لما بدأت أبني ziadamr.me، كان هدفي أعمل مكان يجمع كل مشاريعي الـ 14، يعرض مهاراتي، ويكون فيه مدونة ثنائية اللغة بتشارك خبراتي. في المقال ده هشرح إزاي بنيت الموقع ده والدرس اللي تعلمتها في كل خطوة.

أول قرار كان اختيار التقنيات. استخدمت Next.js طبعًا — ده إطار العمل اللي بستخدمه في كل مشاريعي، وكنت عارفه كويس. بس الموقع الشخصي مختلف شوية — محتاج SEO ممتاز عشان يظهر في جوجل لما حد يبحث عن اسمك، محتاج سرعة تحميل عالية عشان الانطباع الأول، ومحتاج يكون متجاوب على كل الأجهزة. Next.js بـ Server-Side Rendering وStatic Generation وفّر كل ده. استخدمت App Router عشان أستفيد من أحدث الميزات.

تصميم قاعدة البيانات كان خطوة مهمة. استخدمت PostgreSQL مع Prisma كالعادة. الـ Schema كان فيه تلاتة موديلات أساسية: BlogPost للمدونة، Project للمشاريع، وUser للإدارة. موديل BlogPost كان أكتر موديل معقد — فيه حقول للعربي والإنجليزي (title_ar، title_en، content_ar، content_en)، slug فريد، تاريخ النشر، والتاجات. الفصل بين المحتوى العربي والإنجليزي في حقول مختلفة بدل ما أعمل جدول ترجمة منفصل خلى الـ Queries أبسط وأسرع.

نظام المدونة الثنائية اللغة كان تحدي ممتع. كل مقال لازم يكون متاح بالعربي والإنجليزي بنفس الـ Slug. المستخدم بيقدر يبدل بين اللغات بضغطة واحدة. التصميم نفسه بيتكيف — لما تختار العربي، كل حاجة بتتحول لـ RTL: القوائم، النصوص، الأزرار. استخدمت dir="rtl" وdir="ltr" دايناميكيًا حسب اللغة المختارة. كمان الخطوط بتتغير — Cairo للعربي وInter للإنجليزي — عشان كل لغة تكون مقروءة بشكل أمثل.

عرض المشاريع كان من أمتع الأجزاء. كل مشروع من الـ 14 مشروع ليهم بطاقة فيها: الاسم، الوصف المختصر، التقنيات المستخدمة، رابط الديمو الحي، ورابط الكود على GitHub. استخدمت تصنيفات (Filters) عشان الزائر يقدر يفلتر حسب التقنية — مثلاً يختار Next.js ويشوف كل المشاريع اللي اتعملت بيه. البطاقات نفسها اتعملت بـ CSS Grid المتجاوب اللي بيغير عدد الأعمدة حسب حجم الشاشة. كمان أضفت Animation بسيط لما الماوس بيمر على البطاقة — حاجة خفيفة بتخلي التجربة حية.

الوضع الداكن (Dark Mode) كان مطلب أساسي. معظم المطورين بيستخدموا الوضع الداكن، وموقع بيتمثلني لازم يكون فيه. استخدمت next-themes عشان أدير الثيمات بسهولة. التحدي كان إن كل لون في التصميم لازم يكون ليه نسختين — فاتحة وداكنة. عملت نظام ألوان متكامل في tailwind.config فيه primary, secondary, accent, background, surface, وكلهم ليه نسخة dark. النتيجة كانت تصميم متناسق في الوضعين.

SEO كان أولوية من الأول. كل صفحة ليها title وdescription مخصصين بالعربي والإنجليزي. استخدمت next/metadata عشان أضيف Open Graph tags — ده بيخلي الروابط لما تتهاوت في سوشيال ميديا تظهر ببطاقة حلوة فيها عنوان ووصف وصورة. كمان عملت sitemap.xml وrobots.txt تلقائيًا عبر Next.js. وأضفت Schema.org markup للمقالات عشان جوجل يفهم المحتوى أحسن. النتيجة: الموقع بيظهر في أول نتائج البحث لما حد يبحث عن اسمي.

الدومين الخاص خطوة مش هتبخل عليها. داشاري ziadamr.me كان استثمار بسيط بس قيمته كبيرة. الدومين الخاص بيك بيدي انطباع احترافي، بيخلي الناس تفتكر عنوان موقعك، وبيخلي الإيميل بتاعك يبقى professional@ziadamr.me بدل ما يكون gmail. كمان استضافة Vercel كانت مثالية — مجانية للمواقع الشخصية، نشر تلقائي من GitHub، وSSL مجاني. كل مرة بدوس push على main، الموقع بيتحدث تلقائيًا.

الحاجة اللي بتميز بورتفوليو عن التانيين هي المشاريع الحقيقية. مفيش حاجة بتأثر أكتر من إنك تعرض مشاريع اتعملت فعلاً واستخدمها ناس حقيقية. مواقع Tutorial وTodo App مش بتأثر. بس إسمع راديو اللي عليه مستخدمين حقيقيين، وطمني اللي بيحمي خصوصية ناس، ومعركة الأسئلة اللي الناس بتلعبها — دول اللي بيخلو الزائر يحترمك كمطور. عشان كده البورتفوليو بتاعي بيربط كل الـ 14 مشروع مع بعض، وكل واحد فيهم ليه رابط ديمو حي مش مجرد صورة.

نصيحتي لأي مطور لسه ماعملش بورتفوليو: ابدأ النهاردة مش بكرة. حتى لو الموقع بسيط في الأول، وجوده على الإنترنت أهم من عدم وجوده. واعمل تحديثات مستمرة — كل مشروع جديد ضيفه، كل حاجة بتتعلمها اكتب عنها. البورتفوليو مش مشروع بتخلصه، ده كائن حي بيكبر معاك. وأهم حاجة: خليه أنت — مش نسخة من بورتفوليو حد تاني. الشخصية والأسلوب الخاص بيك هم اللي هيميزوك.