Uber Partners — редизайн лендинга

Бизнес-проблема

Старая версия — типовой учебный лендинг эпохи «Bootstrap + стоковые картинки». Для живого портфолио это минус: сайт выглядит на пять лет старше, а его техническая начинка не отвечает тому уровню, который я сдаю заказчикам.

• Устаревший вид: светлый шаблонный дизайн, фоновые JPG-картинки, шрифты из 2019-го
• Внешние зависимости: Font Awesome подключался сторонним CDN-китом — точка отказа и лишний запрос
• Сетка на костылях: bootstrap-grid вместо нативного CSS Grid — лишний вес и меньше гибкости
• Никакой доступности: нет prefers-reduced-motion, нет осмысленных aria-атрибутов, форма без валидации

Что изменилось

• Дизайн: тёмная тема (#0a0a0a) с брендовым лаймовым акцентом (#EBFF01), стеклянные карточки, единый ритм секций через clamp(72px, 10vw, 140px)
• Герой: вместо стокового фото — вращающийся каркас автомобиля, собранный процедурно в three.js (профиль кузова → экструзия → рёбра), с параллаксом от курсора
• Контент: сохранён и причесан — 8 преимуществ карточками, две схемы работы сравнительной таблицей, четыре шага подключения, форма заявки
• Сборка: Bootstrap и Sass убраны; чистый CSS на custom properties и ES-модули — сайт работает без сборки и без node_modules
• Доступность: семантические секции, aria-атрибуты, focus-стили, prefers-reduced-motion, форма с валидацией и live-статусом

Эволюция героя: от примитивов к реальной фотографии

Три итерации, каждая — по качеству, а не по расписанию:

• Итерация 1 — процедурный каркас: профиль кузова из 10 точек, экструзия и рёбра в three.js. Работало, но выглядело эскизом
• Итерация 2 — реальная 3D-модель: CC-BY спорткар, поданный каркасом (тёмный корпус + полная триангуляция + силуэтные рёбра), с двухступенчатым fallback. Технически насыщенно, но на маленьком экране линии «сливались»
• Итерация 3 (финал) — реальное фото: чёрный Mercedes-AMG E53 Night Edition (CC0, Wikimedia Commons) — тот класс авто, что работает в Uber Black. Медленный Ken Burns (22 с, scale 1.04→1.14) даёт жизнь, параллакс от курсора (±14px через CSS-переменные) — глубину, оверлей-вуаль и CSS-фильтр (brightness 0.62) — кинематографичность и читаемость заголовка

Урок для процесса: 3D-эксперименты обошлись в 2,3 МБ в репозитории и два цикла отладки (битый GLB-экстрактор поймала только автоматическая проверка рендера, а не curl). Финальная версия легче и продаёт идею лучше — но именно итерации показали границу между «эффектно» и «убедительно».

Архитектура

Ноль внешних запросов: шрифты — системный стек, анимации — CSS, JS — один модуль 2 КБ. Параллакс и Ken Burns отключаются при prefers-reduced-motion; на тач-устройствах параллакс не активируется (pointer: fine).

Метрики редизайна

• Файлы: 49 → 23
• Вес репозитория: 1182 КБ → 744 КБ (фото-герой — 662 КБ, CC0)
• Внешние CDN: 1 → 0
• Фреймворки: Bootstrap grid/reboot + Sass → нативный CSS и ES-модули
• Адаптив: единая mobile-first сетка от 320px до 4K вместо брейкпоинтов Bootstrap
• Автопроверка: headless Edge по CDP — скриншот героя и консоль без ошибок на каждом цикле правок