דף הפורטפוליו שיפתח לכם דלתות - איך בונים אותו בריאקט ומעלים לאוויר

אני אגיד לכם משהו שרוב המדריכים לא אומרים בקול רם: קורות חיים לא מספיקים יותר. כשמעסיק פוטנציאלי בודק מועמד לתפקיד פרונט, הדבר הראשון שהוא עושה הוא לחפש קישור לפורטפוליו. אם אין לכם אחד, נוצר רושם - אולי צודק ואולי לא - שאתם לא ממש בנתם דברים בעצמכם. דף פורטפוליו בריאקט פותר את זה, וגם משמש כהוכחה חיה שאתם יודעים לעבוד עם הכלים שכתבתם עליהם בקורות החיים.

בפוסט הזה נעבור על איך בונים דף כזה נכון - לא רק מבחינת עיצוב, אלא מבחינת מבנה קוד ופריסה לאוויר.

למה זה חייב להיות ריאקט ולא רק HTML

אפשר לבנות פורטפוליו עם HTML ו-CSS פשוטים, וזה לגיטימי. אבל אם אתם לומדים ריאקט, בניית הפורטפוליו עצמו בריאקט משיגה שני דברים בבת אחת: יש לכם דף שאתם צריכים בכל מקרה, וגם פרויקט ריאקט אמיתי להראות בתוך אותו פורטפוליו. זה יעיל במיוחד.

מבנה הדף - אילו סקשנים חובה

דף פורטפוליו טוב, גם בגרסה מינימלית, מכיל:

• אודות (Hero/About) - מי אתם, מה אתם עושים, ולמה שמישהו ימשיך לגלול
• פרויקטים - הלב של הדף. שם, תיאור קצר, טכנולוגיות, וקישור ל-GitHub ולדמו חי
• כישורים - רשימה קצרה וממוקדת, לא ענן תגיות אינסופי
• יצירת קשר - מייל, לינקדאין, וקישור לגיטהאב

זהו. אל תוסיפו עוד עשרה סקשנים "כי אפשר". דף פורטפוליו טוב הוא ממוקד, לא מלא.

חלוקה לקומפוננטות

כל סקשן הופך לקומפוננטה נפרדת - Hero, About, Projects, Skills, Contact - וקומפוננטת App פשוט מרכיבה אותן זו אחרי זו:

function App() {
  return (
    <>
      <Hero />
      <About />
      <Projects />
      <Skills />
      <Contact />
    </>
  );
}

זו דוגמה מצוינת לחלק מהעקרון החשוב ביותר בריאקט - כל קומפוננטה אחראית לדבר אחד. קומפוננטת Projects לא צריכה לדעת כלום על מה שקורה ב-Contact. זה הופך את הקוד לקריא, ומקל עליכם להוסיף או להסיר סקשנים בלי לפחד לשבור משהו.

קומפוננטת פרויקט חוזרת

במקום להעתיק-להדביק HTML לכל פרויקט, בנו קומפוננטת ProjectCard שמקבלת props ומשתמשים בה בלולאת map על מערך של אובייקטי פרויקטים:

const projects = [
  { title: "אפליקציית מזג אוויר", tech: "React, API", link: "..." },
  { title: "רשימת משימות", tech: "React, localStorage", link: "..." },
];

{projects.map((p) => (
  <ProjectCard key={p.title} {...p} />
))}

זה לא רק חוסך קוד - זה גם אומר שכשתסיימו פרויקט חדש (למשל את אחד הפרויקטים האחרים בסדרה הזו), כל מה שצריך זה להוסיף שורה אחת למערך.

רספונסיביות - לא אופציונלי

חלק גדול מהתעבורה לפורטפוליו מגיעה ממובייל, כי הרבה מעסיקים בודקים קישורים מהטלפון בין פגישות. השתמשו ב-CSS גמיש - flexbox או grid עם flex-wrap, יחידות יחסיות כמו % ו-rem במקום פיקסלים קשיחים, ו-media queries לפחות לנקודת שבירה אחת בסביבות 768px. בדקו את הדף בפועל בכלי הפיתוח של הדפדפן במצב מובייל לפני שאתם קוראים לזה גמור.

העלאה לאוויר

דף פורטפוליו שיושב רק במחשב שלכם לא עוזר לכם בכלום. הדרך הכי מהירה להעלות אפליקציית ריאקט לאוויר בחינם היא Vercel או Netlify - שניהם מתחברים ישירות לריפו ב-GitHub, ובכל פעם שאתם עושים push הם בונים ומפרסמים גרסה חדשה אוטומטית. GitHub Pages היא אופציה נוספת, פשוטה יותר אבל דורשת קצת יותר קונפיגורציה לאפליקציות ריאקט. תבחרו אחת, תעלו את הדף, ותשימו את הקישור בראש קורות החיים שלכם.

המכשול הכי נפוץ

מתחילים רבים משקיעים שבועות בעיצוב מושלם של הפורטפוליו לפני שיש בו אפילו פרויקט אחד להראות. הפכו את הסדר - קודם תבנו פרויקטים אמיתיים (כמו אלה שאנחנו עוברים עליהם בסדרת הפוסטים הזו), ואז תבנו סביבם דף פשוט וברור. דף מכוער עם שלושה פרויקטים טובים שווה הרבה יותר מדף מושלם עם פרויקט "הלו וורלד" יחיד.

אם אתם רוצים להבין את היסודות של קומפוננטות, props וארגון קוד בריאקט לפני שאתם בונים את הפורטפוליו, בקורס פיתוח צד לקוח אני מסביר את זה מהבסיס, כולל תרגילים שמכינים אתכם בדיוק לסוג העבודה הזו.

סיכום

פורטפוליו הוא לא "עוד פרויקט" - הוא הכרטיס ביקור שלכם בעולם ההייטק. תבנו אותו בריאקט, תשמרו אותו ממוקד וקריא, ותעלו אותו לאוויר כדי שהוא באמת יעבוד בשבילכם.

אם אתם רוצים ללמוד את היסודות בצורה מסודרת ובחינם, מוזמנים להתחיל בקורס פיתוח צד לקוח.

ואם אתם תקועים באמצע העבודה על הפורטפוליו - יש קהילה שתשמח לתת פידבק.

הצטרפו לקהילה בדיסקורד