←بازگشت به وبلاگ‌ها
ساخت پورتفولیوی دوزبانه حرفه‌ای با Next.js 15

ساخت پورتفولیوی دوزبانه حرفه‌ای با Next.js 15

۱۴۰۴/۹/۲۶•8 دقیقه•
nextjsreacttailwinddockeri18nrtl

چالش

ساخت یک پورتفولیوی توسعه‌دهنده که واقعاً متمایز باشد، بیش از لیست کردن پروژه‌ها نیاز دارد. باید توانایی‌های فنی شما را منعکس کند و در عین حال تجربه کاربری استثنایی ارائه دهد. اهداف این پورتفولیو بلندپروازانه بودند:

  • پشتیبانی دوزبانه (انگلیسی/فارسی) با مدیریت صحیح RTL

  • رابط کاربری گلاسمورفیسم حرفه‌ای که مدرن و در عین حال قابل دسترس باشد

  • زیرساخت آماده تولید با Docker و استقرار خودکار

  • بهینه‌سازی عملکرد بدون قربانی کردن جذابیت بصری

    • پشته فناوری

    فریمورک اصلی


  • Next.js 15 با App Router برای کامپوننت‌های سرور و عملکرد بهینه

  • React 18 با قابلیت‌های همزمان

  • Tailwind CSS برای استایل‌دهی utility-first با توکن‌های طراحی سفارشی

    • بین‌المللی‌سازی


  • next-intl برای ترجمه‌های type-safe

  • ابزارهای RTL سفارشی برای چیدمان فارسی

  • فرمت‌بندی تاریخ متناسب با زبان

    • زیرساخت


  • Docker با ساخت چند مرحله‌ای برای حداقل حجم ایمیج

  • Docker Compose برای توسعه محلی و تولید

  • GitHub Actions برای CI/CD

    • ویژگی‌های کلیدی پیاده‌سازی شده

    ۱. سیستم طراحی گلاسمورفیسم

    رابط کاربری از زیبایی‌شناسی گلاسمورفیسم با دقت طراحی شده استفاده می‌کند:

    .glass-card {
      background: rgba(17, 21, 44, 0.8);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(22, 242, 179, 0.1);
    }

    حالت‌های hover با افکت‌های درخشش عمق اضافه می‌کنند:

    .card:hover {
      border-color: rgba(22, 242, 179, 0.4);
      box-shadow: 0 0 30px rgba(22, 242, 179, 0.2);
      transform: translateY(-4px);
    }

    ۲. رویکرد RTL-First

    به جای اینکه RTL را به عنوان یک فکر ثانویه در نظر بگیریم، سیستم طراحی از ابتدا با پشتیبانی دوجهته ساخته شد:

  • واریانت‌های rtl: تیلویند برای استایل‌های جهت‌دار

  • خصوصیات منطقی (ms-4, me-4) به جای فیزیکی (ml-4, mr-4)

  • گرادیان‌ها و انیمیشن‌های آینه‌ای برای فارسی

    • ۳. بهینه‌سازی‌های عملکرد

  • ایمپورت‌های داینامیک برای کامپوننت‌های سنگین (انیمیشن‌های Lottie، Marquee)

  • بهینه‌سازی تصویر با کامپوننت Image نکست

  • زیرمجموعه فونت برای تایپوگرافی فارسی

  • انیمیشن‌های متوالی با استفاده از CSS animation-delay

    • ۴. سیستم وبلاگ

    بخش وبلاگ شامل:

  • چیدمان گرید واکنش‌گرا (۱→۲→۳ ستون)

  • فیلتر بر اساس تگ با جستجو

  • محاسبه زمان مطالعه

  • تاریخ‌های نسبی متناسب با زبان

    • درس‌های آموخته شده

    ۱. نامعتبرسازی کش سخت است - کش ساخت Next.js نیاز به چندین بازسازی کامل در طول توسعه داشت
    ۲. RTL بیش از جهت متن است - سایه‌ها، گرادیان‌ها و انیمیشن‌ها همه نیاز به توجه دارند
    ۳. دسترسی‌پذیری مهم است - حالت‌های فوکوس، ناوبری کیبورد و نسبت‌های کنتراست UX را برای همه بهبود می‌دهند

    قدم‌های بعدی

  • پشتیبانی MDX برای محتوای غنی وبلاگ

  • تغییر تم تاریک/روشن

  • نظارت عملکرد با Web Vitals

  • تست رگرسیون بصری خودکار

    • ---

    این پورتفولیو متن‌باز است. آزادانه کد را بررسی کنید و برای استفاده خود تطبیق دهید.