وب
آتلیه ووس
لندینگپیج تکصفحهای یک استودیوی عکاسی، با تمرکز بر تایپوگرافی و کارگردانی اسکرول
calendar_today
تاریخ انجام۱۴۰۵
timer
مدت زمانحدود پنج روز
person
نقش منطراح و توسعهدهنده فرانتاند
business
کارفرماپروژه شخصی
درباره پروژه
یک لندینگپیج تکصفحهای برای یک استودیوی عکاسی فرضی در کپنهاگ، که عمداً یک کار خالص فرانتاند است: هر چیزی روی صفحه میبینید تایپوگرافی، چیدمان و حرکت است و تنها بخش سمت سرور، فرم تماس است. این پروژه برای من تمرین جدی حرکت بود: اسکرول نرم با Lenis، متنی که کلمهبهکلمه همراه اسکرول جوهری میشود، گالری نامتقارن با پارالاکس، و وردمارکی که یکی از حروفش با تصویر جایگزین شده.
تصاویر پروژه
تکنولوژیهای استفاده شده
codeNext.js 15
codeReact 19
codeTypeScript
codeTailwind CSS v4
codeMotion
codeLenis
codeZod
ویژگیهای کلیدی
check_circleپریلودر با شمارنده و پردهی کناررونده
check_circleاسکرول نرم با Lenis و پرشهای لنگری نرمشده
check_circleکرسر اختصاصی که روی عناصر تعاملی بزرگ میشود
check_circleوردمارک با تصویری که درونخطی جای یک حرف نشسته
check_circleمارکیی دوردیفهی بیدرز که با اسکرول تند و کند میشود
check_circleبیانیهای که کلمهبهکلمه با پیشرفت اسکرول پررنگ میشود
check_circleگالری نامتقارن با قابهای پارالاکس، آکاردئون خدمات و شمارندههای عددی
check_circleفرم تماس با اسکیمای zod مشترک بین فرم و مسیر API، فیلد honeypot و محدودیت یک دقیقه برای هر آدرس
چالشها
extensionهماهنگکردن انیمیشنهای وابسته به اسکرول با اسکرول نرم Lenis، که موقعیت اسکرول را خودش مدیریت میکند
extensionنگهداشتن خوانایی و نظم در طراحیای که عمداً نامتقارن است
extensionتعریف یکبارهی قواعد اعتبارسنجی با zod و استفادهی همزمان از آن در فرم و در سرور