الفصل 08 / 10البناء

ابني البورتفوليو بتاعك

نستخدم الـ agent عشان نبني بورتفوليو بسيط نقدر ننشره.

35 دقيقة قراءة08 / 10

الهدف

نستخدم الـ agent عشان نبني بورتفوليو بسيط نقدر ننشره.

قبل ما تبدأ

  • مجلد مشروع
  • جلسة agent تقدر تراجعها قبل قبول التعديلات

البورتفوليو هو الدليل إنك بتقدر تحول مساعدة AI لنتيجة حقيقية. ما لازم يكون مبهر. لازم يكون بتاعك، واضح، وقابل للنشر.

تحط فيه شنو؟

أول portfolio ممكن يكون فيه أربع أقسام:

  • اسمك وجملة واحدة عنك.
  • الحاجات البتتعلمها حالياً.
  • مشاريعك أو أفكار مشاريعك.
  • روابط التواصل معاك.

اطلب خطة من الـ agent

قبل ما تطلب كود، اطلب خطة:

Prompt
I want to build a simple personal portfolio website. Make a short plan first. It should include a hero, an about section, projects, and contact links. Do not edit files yet.

اقرأ الخطة. لو كبيرة شديد، قول:

Prompt
Make it simpler. I need something I can finish and deploy today.

ابنِ بخطوات صغيرة

اطلب تغيير واحد في كل مرة:

Prompt
Create the first version of the landing page. Keep it simple and responsive. After editing, tell me which files changed.

بعدها شغل المشروع وشوف الصفحة.

راجع قبل ما تقبل

اسأل:

Prompt
Show me the important changes and explain them like I am new to React.

لو في حاجة غلط، أوصفها بوضوح:

  • "The text is too small on mobile."
  • "The colors are too dark."
  • "I want projects to appear before contact links."

Checkpoint البورتفوليو

انت جاهز لـ GitHub لما:

  • الصفحة تفتح محلياً.
  • شكلها مقبول في desktop و mobile.
  • فاهم الملفات الاتغيرت.
  • ما في API keys أو passwords أو .env files في المشروع.

Checklist الدرس

علّم الحاجات بعد ما تتأكد منها. الطلاب الداخلين بحساب بيتزامنوا مع لوحة الورشة؛ والباقي بيتحفظ في المتصفح ده.

تقدم محلي

احفظ الدرس في الجهاز ده.

لسه ما محتاج حساب. ده بخزن slug الدرس في المتصفح بس، ما أوامر ولا أسرار ولا ملفات مشروع.