Creative Dev
Next.js
GSAP
WebGL
Awwwards
The FWA
CSSDA
Creative Dev
Next.js
GSAP
WebGL
Сайт-портфолио для фотографа и кинооператора, которая снимает для Netflix и Nike.
Эрин Уэсли — кинооператор из Лос-Анджелеса. Ее портфолио состоит из проектов для Netflix, Nike, NBA и Snoop Dogg. Также она регулярно путешествует по миру в поисках нового визуального вдохновения. Эрин нужен был сайт-визитка, который она использовала бы для поиска новых проектов.
Для создания сайта мы использовали React Next.js, а для интерактивных эффектов — GSAP, шейдеры WebGL и PixiJS. В основе сайта — наш собственный скролл, который помогает повысить производительность.
В центре сайта — невероятный каталог видеоработ Эрин. Легкий и простой в навигации, он создан для того, чтобы пользователь мог быстро и динамично просматривать несколько проектов. Также на этом сайте много «пасхальных яиц», но чтобы их найти, нужно покопаться.
Самым уникальным элементом проекта является галерея Z-Space, она предлагает уникальный взгляд на творчество Эрин. Галерея реагирует на положение курсора, ее можно прокручивать вперед и назад.
С технической точки зрения наиболее сложной частью была видеогалерея на главной странице. Нам потребовалось объединить сразу несколько технологий: мы соединили прокрутку aSNP, элементы DOM с Pixi.js и добавили шейдеры. Основной упор в работе был сделан на оптимизацию работы с видео. Мы должны были сделать так, чтобы видео быстро загружались и плавно воспроизводились на любом устройстве.
Кроме того, на главной странице есть небольшая деталь, которой мы очень гордимся. Это изменение соотношения сторон для миниатюр главной страницы. Это тонкий элемент, позволяющий придать домашней странице кинематографический вид. Нам он показался очень забавным.
Эрин нужна была возможность добавлять новый контент на сайт. Для управления контентом мы использовали систему Strapi: она полностью настраиваема, с ней легко взаимодействовать и работать.
AWWWARDS
The FWA
CSS DESIGN AWARDS
Tagline Awards 2023