چالش
ساخت یک پورتفولیوی توسعه‌دهنده که واقعاً متمایز باشد، بیش از لیست کردن پروژه‌ها نیاز دارد. باید توانایی‌های فنی شما را منعکس کند و در عین حال تجربه کاربری استثنایی ارائه دهد. اهداف این پورتفولیو بلندپروازانه بودند:
- پشتیبانی دوزبانه (انگلیسی/فارسی) با مدیریت صحیح RTL
- رابط کاربری مستندات سیستم با جلوه‌های محدود که مدرن و در عین حال قابل دسترس باشد
- زیرساخت مناسب تولید با ساخت Docker و اعتبارسنجی در CI
- بهینه‌سازی عملکرد بدون قربانی کردن جذابیت بصری
پشته فناوری
فریمورک اصلی
- Next.js 15 با App Router و کامپوننت‌های سرور
- React 19 برای لایهٔ کامپوننت‌ها
- Tailwind CSS برای استایل‌دهی utility-first با توکن‌های طراحی سفارشی
بین‌المللی‌سازی
- next-intl برای ترجمه‌های type-safe
- ابزارهای RTL سفارشی برای چیدمان فارسی
- فرمت‌بندی تاریخ متناسب با زبان
زیرساخت
- Docker با ساخت چندمرحله‌ای ایمیج تولید
- Docker Compose برای توسعه محلی و تولید
- GitHub Actions برای lint، ساخت برنامه و اعتبارسنجی ایمیج تولید؛ این گردش‌کار ایمیج را منتشر یا مستقر نمی‌کند
ویژگی‌های کلیدی پیاده‌سازی شده
۱. سیستم طراحی مستندات سیستم
رابط کاربری از زبان بصری مستندات سیستم با دقت طراحی شده استفاده می‌کند:
.systems-panel {
background: #0D1A2B;
border: 1px solid rgba(148, 163, 184, 0.18);
}حالت‌های تعاملی با تغییر مکان محدود و حلقهٔ فوکوس قابل مشاهده تعریف می‌شوند:
.systems-panel:focus-within {
border-color: rgba(34, 211, 238, 0.65);
}۲. رویکرد RTL-First
به جای اینکه RTL را به عنوان یک فکر ثانویه در نظر بگیریم، سیستم طراحی از ابتدا با پشتیبانی دوجهته ساخته شد:
- واریانت‌های
rtl:تیلویند برای استایل‌های جهت‌دار - خصوصیات منطقی (
ms-4,me-4) به جای فیزیکی (ml-4,mr-4) - گرادیان‌ها و انیمیشن‌های آینه‌ای برای فارسی
۳. بهینه‌سازی‌های عملکرد
- ایمپورت‌های داینامیک برای کامپوننت‌های سنگین (انیمیشن‌های Lottie، Marquee)
- بهینه‌سازی تصویر با کامپوننت Image نکست
- زیرمجموعه فونت برای تایپوگرافی فارسی
- انیمیشن‌های متوالی با استفاده از CSS
animation-delay
۴. سیستم وبلاگ
بخش وبلاگ شامل:
- چیدمان گرید واکنش‌گرا (۱→۲→۳ ستون)
- فیلتر بر اساس تگ با جستجو
- محاسبه زمان مطالعه
- تاریخ‌های نسبی متناسب با زبان
درس‌های آموخته شده
- نامعتبرسازی کش سخت است - کش ساخت Next.js نیاز به چندین بازسازی کامل در طول توسعه داشت
- RTL بیش از جهت متن است - سایه‌ها، گرادیان‌ها و انیمیشن‌ها همه نیاز به توجه دارند
- دسترسی‌پذیری مهم است - حالت‌های فوکوس، ناوبری کیبورد و نسبت‌های کنتراست UX را برای همه بهبود می‌دهند
مرزهای اعتبارسنجی
- نوشته‌های وبلاگ به‌صورت محتوای ساخت‌یافتهٔ JSON نگهداری می‌شوند و این مقاله ادعایی دربارهٔ پشتیبانی MDX ندارد.
- مخزن یک بررسی محلی نما در چند مسیر و عرض منتخب دارد. این بررسی دو اسکرین‌شات موبایل ثبت می‌کند، اما آن‌ها را با خط مبنای تأییدشده مقایسه نمی‌کند؛ بنابراین تست خودکار رگرسیون بصری نیست.
- گردش‌کار بررسی‌شده lint و ساخت برنامه را اجرا و ایمیج Docker تولید را اعتبارسنجی می‌کند، اما ایمیج را منتشر نمی‌کند و استقرار تولید را خودکار نمی‌سازد.
- در این مقاله ادعایی دربارهٔ یکپارچه‌سازی پایش Web Vitals مطرح نمی‌شود.