وب سایت NextJs Portfolio⭐ با استفاده از Tailwind-CSS و Framer-motion ایجاد کنید

به دنبال ایجاد یک وب سایت نمونه کارها حرفه ای برای به نمایش گذاشتن پروژه ها و مهارت های خود هستید؟ 🤔 این آموزش وب سایت نمونه کارها Next.js برای شما عالی است! با Next.js، Tailwind CSS و Framer Motion، می‌توانید یک وب‌سایت پویا و واکنش‌گرا بسازید که مشتریان و کارفرمایان بالقوه خود را تحت تأثیر قرار دهد. امتیاز فانوس دریایی تقریباً کاملی دارد.

بررسی اجمالی

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

لینک👇: وب سایت نمونه کارها NextJs

اینم آموزش نحوه ساختن این نمونه کارها!👇

آنچه شما یاد خواهید گرفت

با مشاهده این فیلم آموزشی موارد زیر را یاد خواهید گرفت:

• استفاده از nextjs برای ساخت صفحات استاتیک
• اضافه کردن سبک با استفاده از tailwind-css.
• نحوه ایجاد افکت های انتقال صفحه با استفاده از حرکت فریم
• چگونه از Midjourney برای ایجاد تصویر نمایه عالی استفاده کنیم.
• نحوه استفاده از فونت های گوگل در next js
• بهینه سازی تصاویر NextJS
• نحوه پیاده سازی حالت تاریک در نمونه کارها js بعدی
• و بسیاری از انیمیشن های بسیار جذاب با استفاده از حرکت فریم.

ویژگی های کلیدی این وب سایت نمونه کارها

• جلوه های انتقال صاف صفحه
• انیمیشن های باحال
• طراحی مینیمال
• چندین صفحه
• موبایل ریسپانسیو
• رویکرد منحصر به فرد برای نمایش مقالات شما
• فونت ها و بهینه سازی تصویر با استفاده از مولفه تصویر Next.js
• در انیمیشن های اسکرول

کتابخانه های مورد استفاده

برای این پروژه از کتابخانه های زیر استفاده خواهید کرد:

• Next.js
• فریمر حرکت
• Tailwind CSS

پیوندهای کد

کد شروع این پروژه را می توانید در آدرس زیر پیدا کنید: کد شروع برای نمونه کارها nextjs و برای کد نهایی، لینک زیر را بررسی کنید:

لینک کد نهایی (Gumroad): وب سایت نمونه کارها Next.js

منابع

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

با خیال راحت طرح ها و انیمیشن های مختلف را با آن امتحان کنید و همچنین می توانید من را تگ کنید یا لینک خود را در نظرات به اشتراک بگذارید.

هر گونه پیشنهاد استقبال می شود!
فراموش نکنید که نظرات خود را در نظرات به اشتراک بگذارید.

همچنین ممکن است این الگوهای وب سایت را دوست داشته باشید:

• یک قالب نمونه کار زیبا در ReactJS => در اینجا
• صفحه فرود مجموعه NFT در ReactJS => اینجا

با تشکر از خواندن 😄

مقاله دیگر من را بررسی کنید:

یک جزء صفحه بندی سفارشی در ReactJS از ابتدا بسازید

اعتبار سنجی فرم در ReactJS: ایجاد یک قلاب سفارشی قابل استفاده مجدد برای ورودی ها و مدیریت خطا

به کانال یوتیوب من سر بزنید:
@CodeBucks

به تارنمای جدید من سر بزن:
DevDreaming

من را در توییتر دنبال کنید، جایی که من منابع مفید زیادی را به اشتراک می گذارم!
@code_bucks 😉