macOS Style Portfolio
یک پورتفولیوی تعاملی با الهام از macOS که مرورگر را به یک محیط دسکتاپ با پنجرههای قابل تعامل تبدیل میکند.
این پروژه چیست؟
این پروژه یک پورتفولیوی شخصی است که بهجای صفحهی اسکرولی معمول، یک محیط دسکتاپ کامل را در مرورگر بازسازی میکند: پنجرههای قابل جابهجایی، داک و برنامههایی که هرکدام بخشی از رزومه را نشان میدهند.
- دستهبندی
- Creative Frontend Experience
- سال
- ۱۴۰۳
- تیم
- NextUp
- تکنولوژیها
- 5 مورد
از کجا شروع شد و چطور حلش کردیم
یک پورتفولیوی فرانتاند باید خودش نمونهی کار باشد، نه فقط فهرستی از کارها. صفحهی معمولی هرچقدر هم تمیز باشد، توانایی ساخت تعاملهای پیچیده را نشان نمیدهد.
کل رابط را به شکل یک سیستم پنجرهای طراحی کردیم: هر بخش رزومه یک «برنامه» است که در پنجرهی خودش باز میشود، قابل جابهجایی و بستن است و ترتیب لایههایش مثل یک سیستمعامل واقعی مدیریت میشود.
مهمترین قابلیتهای محصول
سیستم پنجرهای
باز و بسته کردن، جابهجایی و مدیریت ترتیب لایهی پنجرهها.
داک تعاملی
داک پایین صفحه با انیمیشن بزرگنمایی و اجرای برنامهها.
برنامههای محتوایی
هر بخش از رزومه به شکل یک برنامهی مستقل با محتوای خودش.
انیمیشنهای روان
باز و بسته شدن پنجرهها و تعاملهای ریز با GSAP اجرا میشوند.
با چه چیزی ساخته شده
انتخاب هر تکنولوژی بر اساس نیاز همین پروژه انجام شده، نه عادت.
- React
- Vite
- Tailwind CSS
- GSAP
- Zustand
ساختار فنی پروژه
مدیریت وضعیت پنجرهها
وضعیت باز بودن، موقعیت و ترتیب لایهی هر پنجره در یک Store مرکزی با Zustand نگهداری میشود.
جداسازی محتوا از پوسته
پوستهی پنجره از محتوای داخلش مستقل است، بنابراین افزودن یک «برنامه»ی جدید فقط یک کامپوننت محتوا میخواهد.
سختترین بخشهای کار
روان ماندن انیمیشنها
جابهجایی همزمان چند پنجره میتواند نرخ فریم را پایین بیاورد. انیمیشنها را روی خصوصیتهای کمهزینه نگه داشتیم تا تعامل روان بماند.
تجربهی موبایل
محیط دسکتاپ روی صفحهی کوچک معنا ندارد. برای موبایل چیدمان سادهشدهای در نظر گرفته شد که همان محتوا را بدون پنجره ارائه میکند.
چه چیزی تغییر کرد
پورتفولیو خودش تبدیل به نمونهی کار شد؛ توانایی فنی را نشان میدهد نه فقط ادعا میکند.
افزودن بخش جدید به رزومه بدون دست زدن به منطق پنجرهها ممکن است.