Задача:
Реализовать демонстрационный проект стриминговой платформы с несколькими страницами и большим количеством интерактивных элементов для демонстрации навыков современной вёрстки и UI-разработки.
Решение:
Проект реализован на Minista с использованием TypeScript и SCSS. Вёрстка выполнена по методологии БЭМ с разбиением интерфейса на переиспользуемые компоненты. Особое внимание уделено доступности, семантике и пользовательскому опыту.
Страницы:
— Home
— Movies
— Support
— Subscriptions
Функциональность:
— слайдеры (Swiper)
— аккордеон с нативной логикой и анимацией
— табы
— кастомный селект для десктопа и нативный для мобильных устройств
— форма с валидацией и маской телефона
— адаптивные страницы с трансформацией сетки в карточки
Особенности:
— семантичная вёрстка
— соблюдение гайдлайнов доступности W3C
— активное использование ARIA-атрибутов
— CSS-переменные для гибкой стилизации
— полностью кастомные UI-компоненты (кроме слайдера)
— адаптивная и кроссбраузерная реализация
Технологии:
Minista (React), TypeScript (TSX), SCSS, HTML, JavaScript, Swiper
Формат работы:
Вёрстка по дизайн-макету, проектирование UI-логики, реализация интерактивных компонентов и адаптивных интерфейсов.
Результат:
Создан демонстрационный проект стриминговой платформы, показывающий уровень вёрстки, архитектуру компонентов и работу со сложным интерактивным интерфейсом.
https://sergey-bondarenko-dev.github.io/stream-vibe/