Как сделан AirHead

Начал с идеи сайта-портфолио. Три раунда вопросов «рекурсивного брифинга» показали: работ слишком много и они слишком разные — сайт вышел бы перегруженным. Решение: один проект, который сам по себе показывает связку «дизайн + код».

Из пяти идей выбрал промо-лендинг в духе продуктовых страниц Apple. Продукт — вымышленный космический шлем: свой бренд без NDA и простор для иронии.

Из семи вариантов названия победил AirHead — по-английски «пустоголовый». Отсюда слоган «Голова в облаках. Официально.» и все шутки на странице.

Без 3D и без бюджета — весь визуал сгенерирован нейросетями. Сначала в Krea искал образ и проверял, держит ли модель один и тот же шлем в разных ракурсах. Когда закончились бесплатные кредиты, финальный набор — 5 кадров и видео — собрал в Gemini.

Водяные знаки убраны, картинки ужаты с 6 МБ до 60–120 КБ, видео — с 2,9 до 1,2 МБ.

Макет собран в Figma через Figma MCP: Claude рисовал фреймы прямо на холсте, я задавал направление и утверждал. Сначала десктоп 1440, потом мобильная версия 390 — рекрутеры часто открывают ссылки с телефона.

Astro — статичный и быстрый, картинки сам переводит в WebP под размер экрана. Анимации — на GSAP ScrollTrigger, плавный скролл — на Lenis:

• шлем проявляется из размытия и «наезжает» на зрителя при скролле
• рамка видео растёт до полного размера
• слова манифеста загораются по одному
• картинки фич раскрываются из окошка и едут внутри рамки
• цифры характеристик набегают от нуля

Если в системе включено «уменьшить движение», сайт работает без анимаций.

Код — на GitHub, хостинг — на Vercel. Каждый git push сам обновляет сайт.