پرش به محتوا

کیانا اکبری اصل

پورتفولیو، اتاق شنیدن و مسیر رزرو اجرا در یک سایت، برای نوازنده‌ای که کارش پیش از اطلاعات به فضاسازی نیاز دارد.

کیانا اکبری اصل — موسیقی و اجرا
مشتریکیانا اکبری اصل
صنعتموسیقی و اجرا
سال۲۰۲۶
کشورایران
دامنهطراحی و پیاده‌سازی فرانت‌اند هدلس
وضعیتمنتشرشده
وب‌سایتkianaakbariasl.com
۰۱ / نمای کلی

سه کار روی یک صفحه

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

۰۲ / کاری که انجام دادیم

حوزه‌هایی که این پروژه از آن‌ها شکل گرفت.

۰۱رابط و تجربه کاربری

۰۲معماری هدلس

۰۳توسعه فرانت‌اند

۰۳ / صفحه‌های واقعیثبت‌شده از نسخه تحویل‌شده
کیانا اکبری اصل — بخش شنیدن
بخش شنیدن
کیانا اکبری اصل — گالری تصاویر
گالری تصاویر
کیانا اکبری اصل — بیوگرافی
بیوگرافی
۰۴ / رویکرد

فرانت‌اندی که خود هنرمند تغذیه‌اش می‌کند

سایت یک فرانت‌اند Next.js است که محتوای خود را از یک وردپرس هدلس روی زیردامنه مدیریت می‌خواند؛ بنابراین بیوگرافی، قطعات، تصاویر گالری و تقویم اجراها بدون دست‌زدن به رابط به‌روز می‌شوند. پخش‌کننده‌های صوتی، گالری لایت‌باکس و انیمیشن اسکرول‌محور کامپوننت‌های React هستند و رندر تا جای ممکن سمت سرور و ایستا انجام می‌شود؛ همین است که سایتی پر از مدیا را سریع نگه می‌دارد.

Next.jsReactوردپرس هدلسمحتوا از طریق RESTتولید ایستا
۰۵ / تجربه

اول نور صحنه، بعد متن

ویدئوی تمام‌صفحه اجرا، تایپوگرافی سریف و پالت تیره صحنه‌ای، لحن را در همان نمای اول تعیین می‌کنند. ریتم پایین صفحه آگاهانه گالری‌وار است: اجراهای پیش‌رو، دیسکوگرافی و فرم رزرو، هر کدام با فضای کافی و نه فشرده در یک شبکه. همه چیز با یک کلید تعویض زبان در انگلیسی و فارسی در دسترس است.

۰۶ / نتایج

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

۲زبان‌هاانگلیسی و فارسی از یک فرانت‌اند واحد.
هدلسمدل محتوامدیریت با وردپرس، فرانت‌اند با Next.js.
۲۰۲۶تحویل‌شدهفعال روی kianaakbariasl.com.

چیزی بسازیدکه به کارکردن ادامه دهد.

بگویید چه می‌سازید؛ ما می‌گوییم اولین کاری که انجام می‌دادیم چه بود.