گام به گام نحوه ایجاد نمونه کارها و شما چگونه می توانید همین کار را انجام دهید

سلام بچه ها،

من یک توسعه دهنده وب هستم و می دانم که داشتن یک نمونه کار جالب برای به نمایش گذاشتن مهارت ها و تجربه حرفه ای شما بسیار مهم است. من همچنین می‌دانم که گم شدن و ندانستن از کجا شروع کنم، غیرمعمول نیست، بنابراین تصمیم گرفتم نکات و کمی تجربه خود را هنگام توسعه اولین نسخه وب‌سایت خود به اشتراک بگذارم.

می خواهید دامنه بخرید اما نمی دانید چگونه؟

احساس خاصی نکنید، من همچنین نمی دانستم چگونه یک دامنه سفارشی بخرم. اساساً من فقط می دانستم چنین چیزی وجود دارد و بنابراین کاری را انجام دادم که هر برنامه نویسی به بهترین وجه انجام می دهد، آن را در گوگل جستجو کردم و متوجه شدم که بسیار آسان است!

در اینجا مراحل اساسی برای خرید شما وجود دارد:

1. به وب سایت Google Domains بروید

2. نام دامنه ای را انتخاب کنید که می خواهید برای وب سایت خود استفاده کنید. این مانند آدرس وب سایت شما در اینترنت است، به عنوان مثال “dellamora.dev”.

3. مطمئن شوید نام دامنه ای که انتخاب کرده اید در دسترس باشد. اگر اینطور باشد، پیامی با مضمون “در دسترس” مشاهده خواهید کرد.

4. با کلیک بر روی دکمه “افزودن به سبد خرید” نام دامنه را به سبد خرید خود اضافه کنید.

5. برای تکمیل خرید خود مراحل را دنبال کنید، از جمله وارد کردن اطلاعات پرداخت.

آماده! شما اکنون صاحب یک دامنه جدید هستید اما هنوز باید یک وب سایت ایجاد کنید و آن را منتشر کنید (:

آنچه را که نمی توان از مجموعه شما حذف کرد

یک وب سایت شخصی مانند یک کارت ویزیت مجازی برای دنیاست تا بدانند شما کی هستید، چه محتوایی تولید کرده اید، تجربیات حرفه ای شما و چگونه با شما ارتباط برقرار کنند. بنابراین ضروری است که وب سایت شما دارای بخشی به هر یک از این موضوعات باشد.

من یک برنامه نویس هستم و نه طراح، چه کار کنم؟

شانس من این است که چندین دوست در منطقه دارم و اولین نسخه صفحه نمایش توسط دوستم تولید شد @TheLittleLuiz، در زیر می بینید که کاملاً با نتیجه نهایی متفاوت است.

واقعیت مهمی که می‌خواهم به آن اشاره کنم این است که در طول فرآیند خلقت، چندین تغییر اتفاق می‌افتد و طبیعی است که شما ایده‌ها را کنار بگذارید و دوباره احیا کنید.
در مورد من، پس از تحقیقات و اکتشافات فراوان، بالاخره طرحی را یافتم که تمام نیازهای من را برآورده می کرد و اگر احساس می کنید خلاقیت ندارید و به منابع نیاز دارید، این سه سایت مورد علاقه من برای جستجوی الگوها و یافتن الهام است:

1. فیگما
2. دریبل
3. awwwards

معضل: انتخاب اینکه از کدام فناوری استفاده شود

انتخاب پشته چالشی است که هر برنامه نویسی هنگام شروع یک پروژه جدید با آن روبرو می شود، با من تفاوتی نداشت و از این بابت بسیار سپاسگزارم. @yungbzz که در طول این فرآیند به من کمک کرد.

پس از بحث در مورد بهترین فناوری های موجود در بازار، یک برنامه کاربردی را شروع کنید NextJS com TypeScript طبیعی به نظر می رسید زیرا آنها فناوری هایی هستند که یکدیگر را تکمیل می کنند و من می توانستم آن را به صورت رایگان روی آن نصب کنم Vercel.

به دلیل سادگی پروژه تصمیم گرفتم از آن استفاده کنم Tailwind CSS، زیرا این به من اجازه داد تا صفحه بارگیری را سریعتر تکمیل کنم. علاوه بر این، این کتابخانه به لطف استفاده از کلاس های قابل استفاده مجدد به جای سبک های فردی، مزایای دیگری مانند طراحی سازگار و قابل نگهداری را ارائه می دهد.

برای ساخت انیمیشن ها از Framer Motion در آن است Intersection Observer API، که در صورت ترکیب، قادر به ایجاد اثرات باورنکردنی هستند. اگر می خواهید در مورد موضوع بیشتر بدانید، توصیه می کنم مقاله من “Framer Motion and Intersection Observer: A Powerful Duo for Animations in React” را مطالعه کنید.

برای پیاده سازی چرخ فلک در بخش مقالات، استفاده از کتابخانه را انتخاب کردم Swiper، که به طور گسترده به عنوان یکی از بهترین گزینه های موجود برای این منظور شناخته شده است. همچنین، برای رسیدگی به درخواست‌ها و مدیریت کارآمد و قابل اعتماد داده‌ها، از آن استفاده کردم React Query، که برای پروژه بسیار مفید بود.

خوب، پروژه تمام شد، بیایید دریابیم Vercel چیست و چگونه آن را گسترش دهیم

Vercel یک پلتفرم میزبانی ابری است که به توسعه دهندگان اجازه می دهد پروژه های خود را به سرعت و به راحتی در اینترنت منتشر کنند. به طور خلاصه، ویژگی‌های بسیاری را برای بهینه‌سازی سرعت و عملکرد پروژه ارائه می‌دهد و به شما امکان می‌دهد مراحل زیر را دنبال کنید:

1. یک حساب کاربری Vercel ایجاد کنید و به داشبورد وارد شوید.

2. روی دکمه “پروژه جدید” کلیک کنید و گزینه “Import Git Repository” را انتخاب کنید.

3. مخزن پروژه خود را انتخاب کنید و شاخه که می خواهید مستقر کنید.

4. Vercel پروژه را وارد می کند و یک پیش نمایش ایجاد می کند. بررسی کنید که همه چیز درست است و واردات را تأیید کنید.

5. تنظیمات پروژه مانند نام، دامنه، محیط و غیره را تعریف کنید.

6. در صورت لزوم، متغیرهای محیطی که پروژه برای عملکرد صحیح به آنها نیاز دارد را تعریف کنید.

7. برای استقرار پروژه برای اولین بار گزینه “Deploy” را انتخاب کنید.

8. چند دقیقه صبر کنید تا Vercel پروژه را بسازد و آن را در اینترنت منتشر کند.

9. با دسترسی به URL ارائه شده توسط Vercel تأیید کنید که پروژه به درستی منتشر شده است.

آماده! پروژه شما منتشر شده است و هر کسی می تواند به آن دسترسی داشته باشد، اکنون فقط باید دامنه سفارشی خود را پیکربندی کنید و از آنجایی که راه های مختلفی وجود دارد، Vercel خود مرحله به مرحله برای هر مورد (:

به یاد داشته باشید که ایجاد یک نمونه کار فقط مربوط به طراحی و فناوری نیست، بلکه در مورد برجسته کردن مهارت ها و تجربه حرفه ای شما نیز هست. با گذشت زمان، پورتفولیوی شما می تواند به ابزاری ارزشمند برای پیشبرد حرفه برنامه نویسی شما تبدیل شود.