Я хотела сделать портфолио, которое работает как продукт, а не как набор картинок в скролле. Пространство, с которым хочется взаимодействовать
Весь сайт сделан вайбкодингом — в Cowork с Claude. Я описывала задачу, передавала макеты из Figma с координатами и размерами, получала код, смотрела результат, корректировала. Где нужно — правила сама: подкручивала значения в CSS, двигала элементы, чистила анимации. Иногда быстрее поменять пару строк руками, чем формулировать правку словами
Главная страница построена как бесконечное canvas-поле с системой pan и zoom — не вертикальный скролл, а свободное перемещение по пространству, как в рабочей области Figma. Проекты размещены на поле с индивидуальными углами и позициями. При приближении проект раскрывается автоматически. Зум реализован к точке курсора, с поддержкой touch-жестов на мобильных устройствах
Загрузочный экран использует Canvas API: процент загрузки отрисован точками, имитирующими LED-дисплей, вокруг по эллиптической орбите движутся превью реальных проектов с эффектами глубины и вращения. Анимация привязана к фактическому прогрессу загрузки ассетов
Страница My Vibe — многослойная композиция. Первый экран — видеофон с overlay, поверх которого размещены перетаскиваемые информационные карточки. Переход между слайдами реализован через scroll-driven анимацию: sticky-позиционирование внутри секции высотой 500vh. Текстовые элементы позиционированы отдельными слоями с точностью до пикселя по макету из Figma
3D-сфера собирает все работы в объёмную форму. Точки распределены по алгоритму Фибоначчи для равномерного покрытия. Сфера поддерживает drag-вращение с отслеживанием скорости и инерцией. При скролле происходит smoothstep-интерполяция между сферической и линейной раскладкой — работы рассеиваются по тематическим секциям. Технически это CSS 3D transforms с perspective и translate3d на каждом элементе. Видео загружаются лениво, невидимые элементы отключаются через display: none для снижения нагрузки на GPU. Часть оптимизаций — contain: layout style, управление порядком рендера — дописывала вручную
Все изображения сконвертированы в WebP, общий вес уменьшен с 50 до 5 МБ. Реализованы три адаптивных брейкпоинта. Мобильная версия проработана отдельно: touch-события для вращения сферы, блокировка body-scroll при навигации внутри неё, переработанная сетка проектов на canvas
Стек — чистый HTML, CSS и JavaScript без фреймворков и сборщиков. Один файл на страницу. Деплой на GitHub Pages
Сейчас активно дорабатываю проект с новыми фичами
Процесс итеративный: проектирование в Figma → описание задачи → генерация кода → проверка → ручная доводка → следующая итерация. Сочетание AI-генерации и ручного контроля позволило добиться результата, который было бы сложно получить одним только промптингом или одним только кодом