ساختن یک نمونه کار سیال و مینیمالیستی

ارسال چالش سال نو، New You Portfolio

–labels dev-tutorial=devnewyear2026

این ارسالی برای چالش سال نو، New You Portfolio است که توسط هوش مصنوعی گوگل ارائه شده است

درباره من

من یک مربی هوش مصنوعی (AIT) با سابقه مدیریت عملکرد، فروش و آموزش هستم. برای این چالش، من یک حداقل نمونه کارها ساخته شده بر روی یک “قانون سه” فلسفه (برجسته کردن 3 پروژه). من می‌خواستم نشان دهم که چگونه یک ذهنیت متمرکز می‌تواند سر و صدا را خاموش کند و از پیچیدگی بیش از حد دور شود و به سمت یک رویکرد مینیمالیستی که در آن هر انتقال سیال است و رابط تقریباً بی‌وزن است، حرکت می‌کند.

نمونه کارها

چگونه آن را ساختم 🐳

برای دستیابی به تأخیر کم، من بر دقت زمان اجرا تمرکز کردم، به طوری که پس از تحویل دارایی های اولیه، تعامل سیال باقی می ماند و رابط احساس بی وزنی می کند.

• Google AI Studio و Flash UI: من استفاده کردم جمینی در استودیوی هوش مصنوعی گوگل برای ایجاد داربست اجزای اولیه UI و ایجاد منطق برای انیمیشن های سفارشی. برای قالب‌های کارت اصلی، از پروژه Flash UI استفاده کردم و منطق CSS و جاوا اسکریپت را استخراج کردم تا در گالری سفارشی سبک بنتو خود ادغام شود.
• نمونه سازی کامپوننت: من از CodePen برای جداسازی و اصلاح اجزای Flash UI قبل از ادغام نهایی استفاده کردم.
• Nano Banana Pro 🍌: این برای بازسازی تصاویر جلد پروژه، حرکت از پیش نمایش های ایستا به صحنه های سینمایی که با زیبایی شناسی تک رنگ نمونه کارها همخوانی دارد، استفاده شد.
• Google Cloud Run ☁️: سایت از طریق a مستقر شده است داکر ساختن من یک استراتژی «مقیاس تا صفر» را با استفاده از آن اجرا کردم تعاریف خدمات Knative، اعمال محدودیت های منابع سختگیرانه برای حفظ ردپایی با عملکرد بالا و هزینه خنثی.
• ارتباط بدون سرور: من با استفاده از یک سیستم تماس سفارشی ساختم اسکریپت Google Apps به عنوان یک میان افزار API. این پیام های کاربر را مستقیماً به داخل می فرستد Google Sheets و از طریق ایمیل به من اطلاع می دهد و یک راه حل پیام رسانی آسان و بدون پایگاه داده را ارائه می دهد.

بهینه سازی عملکرد

• منطق اسکرول محور GSAP: اجرا کردم GSAP برای انتقال های “خراب شده”. پیوند دادن پیشرفت انیمیشن به طور مستقیم به افست اسکرول، حسی لامسه ایجاد می کند که در آن کاربر هدایت کننده اصلی حرکت رابط کاربر باقی می ماند.
• دستکاری مستقیم DOM: ردیابی مختصات ماوس از طریق Virtual DOM دور می‌زند useRef و شنوندگان رویداد بومی برای حفظ 60 فریم بر ثانیه ثابت.
• بارگذاری فیلم تنبل: جریان های HLS فقط زمانی مقداردهی اولیه می شوند که کارت ها وارد حالت فعال یا شناور شوند.
• محدودیت های منابع: ساختار برای ردپای حافظه زیر 256 مگابایت بهینه شده است تا در ردیف همیشه رایگان Google Cloud باقی بماند.

چیزی که بیشتر به آن افتخار می کنم.

استراتژی “تک رنگ به حرکت”.

برای کاهش نویز شناختی، من یک رابط تک رنگ را اجرا کردم که در آن عناصر مولد وجود دارند اما هرگز حواس‌شان را پرت نمی‌کنند.

عناصر گالری پروژه فقط با شناور/فوکوس زنده می‌شوند و از مقیاس خاکستری ساکن به حرکت سینمایی تغییر می‌کنند. فیلتر CSS وضعیت را بر اساس نزدیکی مکان نما تغییر می دهد.

ادغام Mux Video:
برای جلوگیری از بارگذاری اولیه توسط دارایی‌های سنگین، من همه ویدیوهای حلقه را در آن بارگذاری کردم ماکس. این امکان پخش نرخ بیت تطبیقی ​​را فراهم می‌کند و تضمین می‌کند که فاز «حرکت» رابط کاربری بدون توجه به سرعت اتصال کاربر، روان باقی می‌ماند. با بارگذاری این انتقال های با نرخ بیت بالا به GPU مشتری، برای اطمینان از تاخیر صفر.

تبلت-رویکرد اول:
مولفه ها به حالت های تمرکز و فعال پاسخ می دهند و به a “ضربه زدن برای آشکار کردن” رفتاری در تبلت‌ها که اثر شناور را در رایانه‌های رومیزی تقلید می‌کند.

نتیجه گیری: سازماندهی انتقال ⛏

این refactor انتقال من را به روشی عمدی تر برای ساختن پیچیدگی نشان می دهد که از طریق یک لنز مینیمالیستی پالایش شده است. این فقط به این نیست که ابزارها چه کاری می توانند انجام دهند، بلکه نحوه ارائه آنها را انتخاب می کنیم.