البورتفوليو مش مجرد صفحة بتعرض شغلك. هو أول انطباع، وأحيانًا الفرصة الوحيدة اللي حد هياخدها عنك. عشان كده لازم يكون سريع، واضح، وسهل التحديث — مش مجرد شكل حلو.
في المقال ده هشرح القرارات اللي بنيت بيها الموقع ده: من التخطيط والتصميم، لـ Next.js وTypeScript، للتصدير الثابت والـ SEO. مش هقول لك “استخدم التقنية دي” وبس، لكن هقول لك ليه، وإمتى يكون الاختيار غلط.
ابدأ بالهدف قبل الستاك
قبل ما تفتح أي أداة، اسأل نفسك: الموقع ده هيخدم مين؟ لو بتقدم شغل للعملاء، فالأهم إن الزائر يفهم بسرعة إنت بتعمل إيه، ويشوف دليل حقيقي، ويعرف يتواصل معاك. لو بتقدم لنفسك كوظيفة، فالأهم إن الـ recruiter يوصل للسيرة والمشاريع في أقل عدد كليكات.
القرارات اللي طلعت من الأسئلة دي كانت بسيطة: عربي وإنجليزي من أول يوم، تحميل سريع على الموبايل، صفحات مفهومة لمحركات البحث، ونشر من غير سيرفر. أي ستاك يحقق الأربع نقاط دول يبقى مرشح كويس.
ليه Next.js؟
Next.js بيديك React مع routing وrendering وmetadata في إطار واحد. للبورتفوليو، أهم ميزة عندي كانت إن الصفحات بتتولد HTML كامل وقت البناء. يعني جوجل والزائر بيشوفوا المحتوى فورًا، مش shell فاضي بيستنى JavaScript.
كمان التصدير الثابت (output: 'export') بيحوّل الموقع لملفات HTML وCSS وJS عادية. مفيش سيرفر، مفيش قاعدة بيانات، ومفيش أسرار runtime. الموقع ينفع يتنشر على أي استضافة ثابتة، والتكلفة غالبًا صفر.
التصميم قبل الكود
أسهل طريقة تخلي البورتفوليو شبه أي بورتفوليو تاني هي إنك تبدأ من template. الأحسن تبدأ من قرار: إيه الإحساس اللي عايز الزائر يحسه؟ أنا اخترت إحساس ورقي تحريري: خلفية فاتحة، حبر داكن، ولون برتقالي واحد بيشتغل كإشارة مش كديكور.
حددت نظام بسيط: لونين أساسيين، لون إشارة، خطين للعرض والنص، ومقياس أحجام صغير. بعدها كل قرار في الصفحة بيرجع للنظام ده. لما تحس إنك محتاج لون خامس أو حجم خط سادس، غالبًا المشكلة في التخطيط مش في النظام.
في Next.js، التصميم بيتنفذ بـ Tailwind CSS v4 مع CSS variables. الميزة إن الـ tokens بتعيش في مكان واحد، والمكونات بتستخدمها من غير ما تكرر القيم. والـ dark mode؟ مش شرط. الموقع هنا light فقط، وده قرار تصميمي مش نقص.
الثنائية اللغوية من أول يوم
لو هتضيف العربي بعدين، هتكتشف مشاكل المسافات والاتجاه في كل صفحة. الحل إنك تعتبر اللغة جزء من الـ routing والـ layout من البداية. استخدمت route groups: (en) للصفحات الإنجليزية و(ar) للعربية، وكل واحدة ليها root layout بيحدد lang وdir والخطوط.
src/app/
(en)/
layout.tsx // lang="en" dir="ltr"
page.tsx // /
(ar)/
layout.tsx // lang="ar" dir="rtl"
ar/
page.tsx // /arنفس الفكرة في المحتوى: كل نص ليه نسخة إنجليزية ونسخة عربية في نفس الـ type. لو نسيت الترجمة، TypeScript هيرفض يبني. ده بيخلي الترجمة جزء من تعريف الشغل، مش حاجة بتتضاف في الآخر.
SEO مش بس meta tags
الـ SEO الجيد بيبدأ من محتوى واضح وهيكل صفحات مفهوم. بعدها تجي التقنيات: عنوان ووصف لكل صفحة، canonical، وhreflang بين النسختين. الصفحة الإنجليزية بتشاور على العربية، والعكس، وx-default بيحدد النسخة الافتراضية.
كمان أضفت sitemap وrobots وRSS، وJSON-LD بيوصف الشخص والموقع والمشاريع والمقالات. مش لأن ده هيضمن المركز الأول، لكن لأن البحث بقى أذكى: لما تحدد هويتك وروابطك بوضوح، بتقلل الاحتمالات الغلط.
حاجة مهمة: المقالات العربية والإنجليزية هنا مش ترجمات لبعض. كل مقال مكتوب لجمهور مختلف، فمش صح تربطهم بـ hreflang كنسختين لنفس المحتوى. اربط الصفحات اللي فعلًا ليها نسخة مقابلة، وسيب المقالات مستقلة.
الأداء قرار معماري
أغلب الصفحة مكونات سيرفر. الـ JavaScript اللي بيوصل للمتصفح محدود: قائمة الموبايل، تبديل اللغة، فورم التواصل، فلتر المشاريع، ومراقب صغير للـ reveal. الأنيميشن كله CSS، مش مكتبة حركة.
السبب بسيط: كل client component تكلفة. المستخدم لازم ينزّل الكود، يفهمه المتصفح، وينفذه قبل ما الصفحة تحس إنها حية. لموقع محتوى، أحسن تفاعل غالبًا هو اللي بيحصل في CSS من غير JS.
- استخدم خطوط self-hosted عبر next/font بدل طلبات خارجية.
- اضغط الصور واستخدم أحجام مناسبة، أو استغنى عنها لو التصميم مش محتاجها.
- اختبر الصفحة بـ JavaScript متوقف. المحتوى لازم يفضل مقروء.
- قلل مكتبات الحركة. CSS transitions بتعمل 90% من اللي محتاجه.
النشر
مع التصدير الثابت، النشر بيبقى نسخ ملفات out على أي استضافة. لا سيرفر، لا cold starts، لا تكاليف تشغيل. تقدر تربط الدومين وتضيف HTTPS من لوحة الاستضافة. ولو احتجت لاحقًا لدوال سيرفر، تقدر تنقل جزء من الموقع لمنصة تدعمها من غير ما تعيد بناء كل حاجة.
خلاصة
البورتفوليو الناجح مش أكتر واحد فيه تأثيرات. هو الأوضح، والأسرع، والأصدق. ابدأ بالهدف، اختار ستاك يخدمه، صمم نظام بسيط، واختبر العربي والإنجليزي من أول يوم. الباقي تفاصيل — مهمة، لكنها تفاصيل.