مسار البرمجة · مشروع 3 من 3

مشروع: موقعك الشخصي — معرض أعمالك الحي

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

ليش هالمشروع بالذات؟

لأن العميل ما بيشتري كلاماً — بيشتري دليلاً بيفتح برابط

كل عرض رح تقدمه على خمسات أو مستقل أو Upwork بينتهي بنفس السؤال الصامت عند العميل: «طيب، ورجيني». الموقع الشخصي هو جوابك الجاهز — رابط واحد بيحط قدام عينه صفحة الهبوط وتطبيق المهام وأي شغل جاي، كله حي وبيشتغل. العرض اللي فيه رابط معرض حي بيتقرأ بجدية مختلفة كلياً عن عرض كله كلام.

وفي بعد ثانٍ أذكى: موقعك الشخصي هو بحد ذاته عينة شغل. العميل اللي بدو موقعاً لمحله بيشوف موقعك سريعاً ومرتباً عالموبايل، فبياخد الجواب عملياً: «هيك رح يطلع موقعي». يعني القطعة بتسوّق لنفسها وبتسوّق لباقي القطع بنفس الوقت — ما في مشروع ثانٍ بالمسار بيشتغللك هالشغلتين سوا.

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

التنفيذ

الخطوات التنفيذية الكاملة — 8 خطوات

المدة الواقعية أسبوع لأسبوعين. الهدف صفحة وحدة ممتازة — مو موقع من خمس صفحات نصهم فاضي.

  1. الخطوة 1 — جرد مشاريعك واختر الأقوى (ساعتان): اكتب قائمة بكل شي بنيته وقيّمه بعين العميل: هل بيشتغل برابط حي؟ هل بيشبه شغلاً بينطلب فعلاً؟ اختر 3 عالأقل: صفحة الهبوط، تطبيق المهام، ومشروع من المرحلة الرابعة. المشروع نص الشغال أو المكسور ما بيدخل — قطعة مكسورة وحدة بتشكك العميل بكل الباقي.
  2. الخطوة 2 — اكتب النصوص كلها قبل ما تفتح المحرر (نص يوم): بملف نصي بسيط: جملة تعريف رئيسية («مطور واجهات مبتدئ بيبني صفحات سريعة للأعمال الصغيرة»)، فقرة قصيرة عنك، ولكل مشروع: اسمه، سطران شو بيعمل ولمين، وسطر عن التقنيات. الكتابة قبل التصميم بتمنع أشهر مصيبة بالمواقع الشخصية: تصميم فخم حواليه نص «سأكتبه لاحقاً».
  3. الخطوة 3 — خطط صفحة من عمود واحد (ساعة): الهيكل المجرب: بطل فيه اسمك وجملتك وزر تواصل، قسم المشاريع (وهو القلب — خليه أول شي بعد البطل)، قسم مهارات مختصر، فقرة «من أنا»، وتذييل تواصل. قاوم إغراء التعقيد: صفحة عمودية وحدة بتمرير سلس أفضل من أي «إبداع» ببنية الملاحة.
  4. الخطوة 4 — ابنِ بطاقات المشاريع أولاً (يومان): لكل مشروع بطاقة فيها: لقطة شاشة مضغوطة، الاسم، سطرا الوصف، ورابطان واضحان: «شوفه حياً» و«الكود على GitHub». اللقطات بمقاس موحد لكلها — الفوضى بالمقاسات بتعطي انطباع إهمال فوراً. هاد القسم هو 70% من قيمة الموقع، فاصرف عليه 70% من الوقت.
  5. الخطوة 5 — قسم التعريف والتواصل (نص يوم): فقرة «من أنا» بثلاثة أسطر صادقة: مين أنت، شو بتبني، وشو عم تتعلم هلق — الصدق عن مستواك أقوى من ادعاء خبرة رح تنكشف بأول محادثة. التواصل: إيميل واضح وزر واتساب أو تيليغرام، بحيث يوصلّك العميل بكبستين كحد أقصى من أي مكان بالصفحة.
  6. الخطوة 6 — نسّق بهوية بسيطة وثابتة (يومان): لونان وخط عربي-لاتيني واضح وقواعد مسافات ثابتة — وطبّقها بانضباط عالصفحة كلها. موبايل أولاً كالعادة، مع اهتمام خاص بشكل بطاقات المشاريع عالشاشة الصغيرة لأنها أطول قسم. بساطة متقنة بتقرأ «محترف»؛ زخرفة كثيرة بتقرأ «مبتدئ عم يثبت حاله».
  7. الخطوة 7 — افحص السرعة وكل رابط (نص يوم): اضغط كل الصور، وجرّب الموقع على نت موبايل حقيقي — لازم يفتح خلال ثوانٍ قليلة حتى ببيئة نت ضعيفة. بعدها افتح كل رابط بالصفحة بإيدك: المشاريع الحية، مستودعات GitHub، الإيميل، الواتساب. رابط مكسور واحد بموقع مهمته إثبات الإتقان بيهد الرسالة كلها.
  8. الخطوة 8 — انشر وثبّت الرابط بكل مكان (نص يوم): ارفعه على GitHub Pages وجرّب الرابط من جهاز غير جهازك. بعدين وظّفه فوراً: حطه ببروفايل GitHub، وبحسابات منصات العمل الحر، وبتوقيع إيميلك. ومن اليوم، كل مشروع جديد بتخلصه بينضاف للموقع بنفس الأسبوع — المعرض الحي بيضل حياً بالتحديث، وإلا بيتحول لأثر قديم.
قيّم نفسك بصرامة

معايير التقييم الذاتي — 7 بنود قبل ما تعتبره منجزاً

  • فيه 3 مشاريع حية عالأقل وكل رابط بيشتغل. جرّب كل «شوفه حياً» وكل رابط GitHub من جهاز ثانٍ ومن موبايل — مو من متصفحك اللي حافظ كل شي بالكاش.
  • الغريب بيفهمك خلال دقيقة. الاختبار الحقيقي: ابعت الرابط لشخص ما بيعرف شي عن البرمجة واسأله بعد دقيقة «شو بشتغل أنا؟ وشو بتشوف إني بعرف أعمل؟» — إذا جاوب صح، نجحت.
  • بيفتح بسرعة على نت موبايل عادي. صور مضغوطة، لا خطوط زايدة ولا ملفات بلا داعي. موقع شخصي بطيء لمطور واجهات هو تناقض بيقتل المصداقية.
  • التواصل بكبستين كحد أقصى. من أي نقطة بالصفحة، الوصول لإيميلك أو واتسابك ما بياخد أكثر من ضغطتين — العميل المستعجل ما بيدوّر.
  • النصوص مكتوبة بلغة قيمة، مو لغة أدوات. كل وصف مشروع بيجاوب «شو بيعمل ولمين» قبل «شو التقنيات» — والتقنيات موجودة بسطر أخير مختصر.
  • الهوية البصرية ثابتة بكل الصفحة. نفس اللونين، نفس الخط، نفس المسافات، ولقطات المشاريع بمقاس موحد — الاتساق هو أول علامة احتراف بيلتقطها العين.
  • الموقع نفسه كود نظيف. افترض إن العميل أو مسؤول التوظيف رح يعمل «عرض المصدر»: HTML دلالي مرتب وCSS منظم — لأن الموقع الشخصي لمطور هو عينة كود قبل ما يكون صفحة.
من مشروع لبضاعة

كيف تعرضه بمعرض أعمالك؟

هو المعرض نفسه — بس لازم تسوّقه صح: رابط الموقع بيصير سطراً ثابتاً بكل عرض بتكتبه: «بتلاقي نماذج شغلي الحية هون: [الرابط]» — بلا مقدمات طويلة. وعلى بروفايلات المنصات، حطه بخانة الموقع الشخصي وبنهاية النبذة التعريفية. الهدف إنه ما يطلع عرض من عندك بلا هالرابط.

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

قصة القطعة: بالمقابلات وبمحادثات العملاء، احكِ القرار مو الأداة: «اخترت صفحة وحدة سريعة لأن العميل بيقرر بأول 30 ثانية، وخليت المشاريع الحية بالواجهة لأنها أقوى حجة عندي». وإذا بدك تبني فوق هالأساس معرضاً أوسع بمنهجية كاملة، عندك دليل بورتفوليو بلا خبرة خطوة بخطوة.

انتبه

الأخطاء القاتلة بهالمشروع

موقع فخم لمشاريع ما بعدها موجودة

بطل متحرك وجمل رنانة وقسم مشاريع فيه قطعة وحدة أو «قريباً». اعكسها: بساطة بالشكل وامتلاء بالمحتوى — الترتيب الصحيح دائماً: مشاريع أولاً، تلميع ثانياً.

قالب جاهز من الإنترنت

العميل شايف هالقالب عشرين مرة، والأسوأ: موقعك الشخصي هو عينة شغلك — إذا مو مبني بإيدك، فأنت عم تعرض شغل غيرك باسمك. بإمكانياتك الحالية بتبني أفضل منه أصلاً.

سيرة ذاتية منسوخة بدل معرض

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

النشر ثم النسيان

موقع آخر تحديث له من 8 أشهر بيحكي عنك قصة مش حلوة. خصص ساعة بنهاية كل شهر: أضف الجديد، شيل الأضعف، وحدّث «شو عم أتعلم» — المعرض الحي كائن بينمو.

أسئلة بتتكرر

سؤالان قبل ما تبلّش

لازم أشتري نطاقاً مدفوعاً (دوت كوم) من هلق؟

لأ، مو لازم. رابط GitHub Pages المجاني بيكفي تماماً لمرحلة أول عميل، والعملاء عالمنصات ما بيدققوا عالنطاق بيدققوا عالشغل. النطاق المدفوع خطوة حلوة بس تصير عم تقبض بانتظام (بحدود 10–15$ سنوياً) — وقتها بينضاف بربع ساعة بلا أي تغيير بالموقع نفسه. لا تخلي شراء النطاق عذراً يأخر النشر ولو يوماً واحداً.

بالعربي ولا بالإنكليزي؟

حسب سوقك المستهدف أول سنة: إذا رح تشتغل على خمسات ومستقل فالعربي هو الأساس، وإذا عينك على Upwork من البداية فالإنكليزي. والحل الأذكى بجهد إضافي معقول: نسختان بزر تبديل بسيط — وهي نفسها بتصير قطعة إضافية بمعرضك بتثبت إنك بتتعامل مع اتجاهين للنص (RTL/LTR)، وهي مهارة نادرة ومطلوبة بالسوق العربي.

خلصت الثلاثية؟ صرت جاهزاً للسوق

معك هلق سلسلة كاملة: صفحة هبوط لمحل حقيقي، وتطبيق مهام بجافاسكريبت، وموقع شخصي بيجمعهم برابط واحد. هاد بالضبط مستوى «أقدر أسلّم لعميل» — فخطوتك الجاية مو مشروعاً رابعاً، بل أول عرض حقيقي: اقرأ دليل أول عميل فريلانس خلال 30 يوم وبلّش قدّم.

ابدأ التعلم مجاناً كيف أقبض؟