پورتفولیوی من؛ از نسخه قدیمی تا نسخه جدید

(سلام دوستان من محمد جوادم و این اولین بلاگ من هست که دارم داخل سایت شخصی خودم میذارم) حالا موضوع چیه؟ **مسیر ساخت نسخه جدید پورتفلیوی جدیدم** میخوام درباره همش صحبت کنم، از طرح و تکنولوژی هایی که استفاده کردم، هوش مصنوعی، روند توسعه و پیاده سازی ۱- نسخه قدیمی اول میخوام درباره نسخه قدیمی صحبت کنم اینم آدرسش: (https://mrmohammadjr.github.io/portfolio-app/) این نسخه رو با (React JS، Typescript، Tailwind CSS، Reduxtoolkit) درست کردم که خیلی ساده اومدم خودمو معرفی کردم و تخصصم رو گفتم و مهارتهایی که بلدم و پروژه هایی که انجام دادم و آدرس صفحه هام در فضای مجازی گذاشتم طرح کار رو بالای ۲۰ تا ۳۰ تا نمونه کار دیدم، یکم تو ذهنم طراحیش کردم و بقیش تو مسیر توسعه به ذهنم میرسید ابزارای کار که React JS پایه کار بود و Typescript برای بهبود کارایی پروژه استفاده کردم و Tailwind CSS رو برای استایل های کلاسای المنت ها انتخاب کردم و از Reduxtoolkit برای تغییر تم (حالت شب و روز) استفاده کردم و برای مرحله بارگذاری پروژه از Github استفاده کردم حالا اینو چه زمانی درستش کردم؟ آخرای ۱۴۰۳ ۲- تازه سازی، بخش ها و ابزار های جدید گذشت و گذشت مرداد ماه اومد و یه نمونه کار با GSAP درست کرده بودم بعد از بارگذاری با خودم گفتم من که GSAP بلدم چرا داخل سایت خودم استفاده نکنم شروع کردم به گشتن دنبال طرح های جدید تو اینترنت و کمک گرفتن از هوش مصنوعی که کدوم قسمت کجا باشه، اولویت با کدوم بخش باشه و خروجی که هوش مصنوعی داد بیشتر نظرمو جلب کرد و همونو استفاده کردم و وارد مرحله پیاده سازی شدم برای اینکه بتونم ایده هایی که داشتم و پیاده سازی کنم از Next JS به جای React JS استفاده کردم. Typescript و Tailwind CSS که همیشه به صورت پیش فرض تو پروژه هام بودن حالا وقت این بود نمونه کارایی که درست کرده بودم و بزارم تو نسخه قبلی اومدم داخل خود برنامه یه فایل جدا برای اینکه اطلاعات پروژه ها رو نشون بدم ساخته بودم و عکس های مربوط به پروژه ها داخل خود برنامه بود ولی این دفعه اومدم از پایگاه داده استفاده کردم و رفتم سراغ Supabase. چون قبلا استفاده کرده بودم و کارمو راه انداخته بود این دفعه هم از همون استفاده کردم یه پایگاه داده درست کردم و یه جدول که مربوط میشه به نمونه کار هام و اطلاعات و عکس کاور هاشونو اونجا گذاشتم و پایگاه داده رو به برنامه وصل کردم و یکی از دلایلی که از Next JS استفاده کردم قابلیت Intercepting Parallel Routes بودش. یه لیست از پروژه ها که روش کلیک میکنی یه مودال باز میشه که داخل اطلاعات مربوط به پروژه هست. وقتی صفحه تازه سازی میشه منتقل میشی به یک صفحه جزییات پروژه و مودالی نشون داده نمیشه و اینکه یه بخش جدید که به پورتفلیو اضافه کردم **مقاله** بود، بیام و هر چند وقت یه بار یه مقاله ای بزارم و ساختار این بخش هم مثل بخش نمونه کار ها بود. و در آخر از GSAP برای انیمیشن بخش ها وقتی کاربر داره اسکرول میکنه استفاده کردم. اول خواستم این شکلی باشه که وقتی کاربر به بخش مقاله ها میرسه انیمیشن اجرا بشه و زمانی اون بخشو ترک میکنه برگرده به حالت اولیه و دوباره که کاربر برمیگرده انیمیشن دوباره اجرا بشه انجامش دادم، وقتی چند بار بالا پایینش کردم دیدم زیاد جالب در نیومده بخاطر اینکه انیمیشن اجرا میشه و بر میگرده به حالت اولیه و تجربه کاربری خوبی نداره. اومدم تغییرش دادم و وقتی کاربر میرسه به بخش ها انیمیشن فقط یکبار اجرا بشه و تمام ۳- مرحله آخر رسیدیم مرحله آخر، استقرار پروژه دفعه قبلی برای این موضوع از گیت هاب استفاده کردم و اینبار هم قصد همین کارو داشتم ولی به پیشنهاد یکی از دوستام از هاست ابری cloudflare استفاده کردم که خودش تو چند تا نمونه کار هاش استفاده کرده بود (https://saliwan.ir) و یکی از مزایای هاست cloudflare سرعت بارگذاری بالایی که داشت بود نسبت به سرویس های دیگه سخن پایانی این مسیری بود که من برای ساخت پورتفلیو جدید طی کردم و امیدوارم از خوندن این مطلب لذت برده باشید.