در حال بارگذاری...
بازگشت به نمونهکارها
وبسایت شخصی و پورتفولیو
وبسایت شخصی و نمونهکار من؛ ساختهشده با Next.js و Supabase، با پنل مدیریت اختصاصی برای مدیریت پروژهها بدون دست زدن به کد.
درباره پروژه
این پروژه وبسایت شخصی و پورتفولیو من هست که از صفر با Next.js 16 (App Router) و TypeScript طراحی و پیادهسازی شده. هدف اصلی ساخت یه سایت سریع، مدرن و کاملاً فارسی (RTL) بود که هم نمونهکارهام رو نشون بده و هم خودش یه نمونهکار باشه.
بخش عمومی سایت شامل صفحه اصلی (Hero، درباره من، مهارتها، پروژهها، فرم تماس)، صفحه لیست پروژهها و صفحه جزئیات هر پروژه هست. فرم تماس از طریق Web3Forms بدون نیاز به بکاند کار میکنه.
بخش مدیریت (CMS) یه داشبورد کامل با احراز هویت Supabase Auth هست که امکان ایجاد، ویرایش و حذف پروژهها رو همراه با آپلود عکس به Supabase Storage فراهم میکنه. Middleware اختصاصی مسیرهای /admin رو محافظت میکنه.
سایت روی Vercel دیپلوی شده و از CI/CD خودکار استفاده میکنه. لایه SEO شامل Open Graph، Twitter Cards و OG Image داینامیک برند هست.
ویژگیهای کلیدی
طراحی کاملاً ریسپانسیو
پشتیبانی از Dark Mode
پنل مدیریت اختصاصی
سیستم احراز هویت کاربران
بهینهسازی شده برای SEO
سرعت بارگذاری بالا
آپلود و مدیریت فایل
طراحی مدرن و مینیمال
کد تمیز و معماری اصولی
مسیر توسعه پروژه
1
راهاندازی پروژه
ساخت پروژه با Next.js 16، TypeScript و Tailwind CSS 4. تنظیم فونت وزیرمتن، RTL و ساختار App Router.
2
طراحی بخشهای عمومی
پیادهسازی کامپوننتهای Hero، درباره من، مهارتها (با انیمیشن IntersectionObserver)، پروژهها و فرم تماس Web3Forms.
3
اتصال به Supabase
ساخت دیتابیس PostgreSQL، تعریف جدول projects با ۱۶ ستون، تنظیم RLS Policy ها و Storage Bucket برای تصاویر.
4
ساخت پنل مدیریت
پیادهسازی احراز هویت با Supabase Auth، Middleware محافظتی، فرم CRUD پروژهها با آپلود عکس و داشبورد مدیریت.
5
دیپلوی و دامنه
دیپلوی روی Vercel با CI/CD خودکار، اتصال دامنه nima-ahmadi.ir، تنظیم SSL و Environment Variables.