Мобильная версия портфолио: как доработать существующий fron
Сайт изначально проектировался под desktop: фиксированные хиро-секции, орбитальная навигация в разделе «Обо мне», canvas-анимации, боковой сайдбар. Мобильной версии не было — страница просто сжималась, ломая вёрстку. Отдельная сложность: на сайте уже жил самостоятельный модуль TerraIntel со своим фронтендом, который нельзя было задеть. Подход
Вместо переписывания с нуля интерфейс дорабатывался точечно: новые mobile-правила добавлялись через брейкпоинты (≤900px, ≤700px, ≤480px) и override-блоки, не затрагивающие исходные desktop-стили. Это снижает риск регрессий и позволяет откатить любой фрагмент отдельно.
Навигация и «Обо мне»
Бургер-меню получило touch-таргеты около 44px, закрытие после перехода по ссылке и safe-area отступы для устройств с чёлкой. Самый сложный раздел — «Обо мне» с четырьмя интерактивными состояниями («Мой путь», «Мои ценности», «Куда я иду», «Вне работы») поверх орбитальной анимации. На mobile выявилась реальная проблема: панель с деталями состояния при определённой высоте контента перекрывала саму орбиту. Позиционирование узлов и панели пересчитано отдельно под mobile-breakpoint.
Проекты и сертификаты
Projects остался полностью динамическим — данные приходят через /api/projects, ничего не захардкожено под мобильный вид. Карточки получили full-bleed обложку и короткий mobile display-title для длинных названий, при этом полный заголовок не теряется и виден в detail-view. Фильтры и переход в детальный просмотр работают как на desktop. Карточки категорий сертификатов переработаны в тёмной стилистике с SVG-иконками — улучшен контраст, счётчики остаются реальными данными с бэкенда.
Контакты и AI-ассистент
В контактах emoji-иконки заменены на SVG, форма по-прежнему отправляет данные через /api/contact без изменений бэкенда. Отдельное внимание — AI-ассистенту: интерфейс переведён на 100dvh вместо 100vh, добавлена обработка visualViewport для работы с выезжающей клавиатурой, поле ввода зафиксировано на 16px, чтобы iOS не делал авто-зум. Кнопка закрытия панели всегда доступна. На экранах ≤480px плавающая кнопка запуска уменьшена с текстовой «таблетки» до иконки 50×50px, чтобы не перекрывать контент Home. Производительность и доступность Убран неиспользуемый блокирующий скрипт Supabase CDN. Canvas-анимации останавливаются, когда элемент скрыт, и уважают prefers-reduced-motion. Новые изображения — WebP минимального веса. Hover-эффекты ограничены устройствами с реальной поддержкой hover. Добавлен aria-label для AI-кнопки, диалоги адаптированы под мобильный скролл, исправлены страницы Legal/Privacy.
Тестирование
Проверка прогонялась на 13 комбинациях viewport — от 320×568 до 1920×1080, включая планшетные (768×1024, 1024×768) и landscape-ориентации. Во всех случаях: ноль горизонтального переполнения, ноль ошибок в консоли. Автотесты — 79 из 79 пройдено. Desktop-версия и TerraIntel на всех этапах оставались нетронутыми, backend и API не менялись. Процесс Работа велась в отдельной feature-ветке через pull request #24, с несколькими раундами доработки — в том числе уже после версии, «похожей на макет», когда выяснилось, что сходства ещё недостаточно. После финальной проверки PR смержен в main, commit 4c368d428731cfa0e287fd491b322f12fbec39ad.
Что осталось
Основная мобильная версия завершена и работает в production. Из крупных следующих шагов — добавить интеграцию с MAX для уведомлений.
Итог
Получился мобильный интерфейс, построенный без полного rewrite: архитектура сохранена, данные остались динамическими, а UX, производительность и доступность доработаны точка за точкой. Desktop-версия и независимый модуль TerraIntel на всём протяжении работы остались стабильными.
