چطور یک پورتفولیو ترمینالی ساختم؟ 🚀
سلام به همه دوستان توسعهدهنده! 👋
امروز میخوام براتون توضیح بدم که چطور ایده پورتفولیو ترمینالی به ذهنم رسید، چطور اجراش کردم و چطور شما هم میتونید این کار رو انجام بدید. اگر علاقه دارید که یک پورتفولیوی خفن، ساده و جذاب درست کنید که توی ترمینال قابل اجرا باشه، این پست برای شماست. 😎
ایده از کجا شروع شد؟ 💡
یکی از چالشهای همیشگی من این بود که چطور میتونم رزومه و پورتفولیوی خودم رو متفاوت و جذابتر ارائه کنم. اکثر توسعهدهندهها یک وبسایت شخصی دارند که پروژهها و مهارتهاشون رو توی اون نشون میدن. من هم همین کار رو کرده بودم mahdihazrati.ir ولی احساس میکردم چیزی کم داره. 🧐
ایده از جایی شروع شد که ترمینال رو دوست دارم! استفاده از CLI برای هر توسعهدهندهای حس خوبی داره، پس با خودم فکر کردم چرا پورتفولیوم رو توی ترمینال هم ارائه ندم؟
در نهایت این ایده منجر شد به چیزی که الان میبینید: پورتفولیو تعاملی CLI که با اجرای دستور npx mahdihazrati
در ترمینال، قابل دسترسیه! 🎉
قدم اول: جمعآوری اطلاعات 📋
خب، اولین قدم جمعآوری اطلاعاتی بود که میخواستم توی پورتفولیو نمایش بدم:
- رزومه PDF 📝
- لینکهای شبکههای اجتماعی مثل GitHub و LinkedIn 🌐
- لینک به پروژههای قبلی و وبسایتم mahdihazrati.ir
- معرفی کوتاه و جذاب از خودم 💬
برای جمعآوری و ساختاردهی این اطلاعات یک JSON ساده تعریف کردم:
const information = {
first_name: "Mahdi",
last_name: "Hazrati",
full_name: "Mahdi Hazrati",
title: "Front End Developer",
gmail: "mahdihazratimailbox@gmail.com",
description: `
Mahdi Hazrati is a 23-year-old Computer Science student and highly skilled
front-end developer with three years of experience building dynamic and user-friendly web applications.
Specializing in React, Next.js, and more...`,
cv_pdf: {
download_url: "https://mahdihazrati.ir/assets/files/Mahdi%20Hazrati%20Portfolio%20-%20v3.0.2%20-encrypted.pdf",
},
website: { label: "MahdiHazrati.ir", url: "https://mahdihazrati.ir" },
github: { label: "Github", url: "https://github.com/Mahdi-Hazrati" },
linkedin: { label: "LinkedIn", url: "https://linkedin.com/in/mahdihazratidev" },
npm: { label: "NPM", url: "https://www.npmjs.com/~mahdihazrati" },
};
قدم دوم: ساختن پورتفولیو CLI 🖥️
برای اینکه پورتفولیو رو توی ترمینال به نمایش بذارم، از یک سری ابزارهای محبوب Node.js استفاده کردم:
- chalk: برای رنگبندی متنها توی ترمینال
- boxen: برای قرار دادن محتوا درون یک باکس جذاب
- inquirer: برای ایجاد منوهای تعاملی
- open: برای باز کردن لینکها در مرورگر به صورت خودکار
قدم سوم: انتشار روی NPM 🛠️
بعد از اینکه کد آماده شد، تصمیم گرفتم که این پورتفولیو رو روی NPM منتشر کنم تا دیگران هم به راحتی بتونن با دستور npx mahdihazrati
اون رو در ترمینالشون اجرا کنن.
- اول از همه، توی NPM وارد حساب کاربری شدم:
npm login
- سپس با دستور زیر پکیج رو منتشر کردم:
npm publish
- حالا هر کسی میتونه با اجرای دستور زیر پورتفولیو من رو ببینه:
npx mahdihazrati
چطور کار میکنه؟ 🛠️
وقتی که دستور npx mahdihazrati
رو اجرا میکنید، نود ابتدا پکیج من رو دانلود و اجرا میکنه. این پکیج اطلاعات رزومه، لینکها و موارد دیگه رو توی یک ترمینال به نمایش میذاره. همچنین منویی تعاملی به شما این امکان رو میده که بین گزینههای مختلف انتخاب کنید، مثل مشاهده رزومه PDF یا بازدید از وبسایت.
نتیجهگیری 🏁
ایدهی ساخت پورتفولیو تعاملی CLI برای من تجربهای بسیار لذتبخش بود. این پروژه نه تنها به من کمک کرد تا خودم رو به شکلی متفاوت و خلاقانه معرفی کنم، بلکه نشون داد که چطور میشه از ابزارهای ساده و قدرتمند نود برای ایجاد تجربههای کاربری متفاوت استفاده کرد.
اگر شما هم دوست دارید پورتفولیوی خودتون رو به شکل جذابی ارائه بدید، حتماً امتحان کنید! لینک پورتفولیوی من رو در ادامه میتونید ببینید:
و البته فراموش نکنید:
npx mahdihazrati
امیدوارم این مطلب براتون مفید بوده باشه. نظراتتون رو حتماً با من در میون بگذارید! 😊