Frontend-разработка официального сайта PARIVISION

Используемые навыки CSS3 HTML5 JavaScript Веб-анимация Разработка веб-сайта

Описание

Сайт проекта: https://parivision.gg/

Требовалось реализовать frontend официального сайта международной киберспортивной организации PARIVISION на основе готового дизайна.
Проект выполнялся в составе команды веб-студии QIO. Моей зоной ответственности была исключительно клиентская часть сайта: адаптивная вёрстка, интерактивные элементы, анимации и пользовательские состояния.
Сайт должен был одновременно выполнять две задачи:
— представлять организацию и передавать характер бренда;
— предоставлять болельщикам актуальную информацию о командах, игроках, новостях и матчах.
В проект вошли:
— иммерсивная главная страница;
— новостная лента с фильтрацией;
— отдельные страницы публикаций;
— разделы команд по Dota 2 и Counter-Strike 2;
— карточки игроков и тренеров;
— расписание и результаты матчей;
— медиаархив;
— страницы партнёров и контактов;
— форма подписки на запуск магазина;
— русская и английская версии сайта.
Одной из главных задач было перенести выразительную визуальную концепцию в работающий интерфейс, сохранив нестандартную композицию, крупную типографику и насыщенную динамику на разных разрешениях экрана.

Решение

Я реализовала frontend сайта: структуру страниц, адаптивную вёрстку, интерактивные элементы, анимационные сценарии и состояния интерфейса.
Для всего проекта была подготовлена единая система навигации:
— полноэкранное главное меню;
— переключение между русской и английской версиями;
— переходы между основными разделами;
— общие элементы шапки и подвала;
— ссылки на социальные сети и внешние ресурсы.
На главной странице я собрала последовательность полноэкранных и контентных секций: презентацию организации, историю клуба, принципы PARIVISION, направления Dota 2 и CS2, новости, команды и контактную информацию.
Для реализации динамики использовались GSAP и ScrollTrigger. Я настроила:
— появление элементов при прокрутке;
— анимацию крупной типографики;
— движение отдельных визуальных слоёв;
— переходы между секциями;
— интерактивные состояния ссылок и карточек;
— сценарии, связанные с положением страницы.
Анимации были встроены в пользовательский сценарий и помогали раскрывать контент последовательно, сохраняя общее ощущение спортивной динамики.
Для новостного раздела я реализовала:
— сетку карточек материалов;
— фильтрацию по дисциплинам Dota 2 и CS2;
— отображение категории, даты и изображения;
— постраничную навигацию;
— отдельный шаблон страницы публикации;
— блок связанных материалов «Читать больше».
В разделе команд были подготовлены отдельные представления для разных дисциплин и повторно используемые карточки игроков. Карточки поддерживают фотографию, никнейм, настоящее имя, возраст, игровую роль и ссылки на доступные социальные сети.
Также были реализованы общая страница участников и отдельные страницы составов по Dota 2 и Counter-Strike 2.
Для расписания матчей я разработала интерфейс, который отображает:
— дисциплину;
— команду соперника;
— название турнира;
— дату и время;
— текущий или итоговый счёт.
Матчи разделены на прошедшие, текущие и будущие. Пользователь может фильтровать расписание по дисциплине и переходить между страницами списка.
Особое внимание потребовалось адаптивному представлению этого раздела: на небольших экранах табличная структура перестраивается в более компактный и удобный для просмотра формат.
Для медиаархива я реализовала крупный блок последнего материала, сетку публикаций, навигацию между страницами и переходы к видео и другим медиаматериалам.
Также я подготовила frontend для страниц партнёров, контактов и будущего магазина.
На страницах с формами были реализованы:
— поля ввода;
— состояния элементов управления;
— отправка данных;
— сообщение об успешной отправке;
— отдельный сценарий подписки на уведомление о запуске магазина.
Все основные разделы были адаптированы под разные размеры экрана. На мобильных устройствах перестраиваются сетки, карточки игроков, расписание матчей, навигация, типографика и расположение медиаматериалов.
Отдельно я проработала поведение анимаций на небольших экранах, чтобы визуальные эффекты не мешали чтению и взаимодействию с интерфейсом.
Frontend был подготовлен для динамически обновляемого контента: новых публикаций, матчей, игроков и медиаматериалов. Для однотипных сущностей использовались единые шаблоны и повторно используемые компоненты.
Всю описанную frontend-часть я выполнила самостоятельно:
— адаптивную вёрстку страниц;
— общую структуру интерфейса;
— анимации и переходы;
— карточки и контентные шаблоны;
— фильтры и пагинацию;
— состояния форм;
— адаптацию интерфейса под мобильные устройства.
Дизайн, backend, CMS и подготовка контента не входили в мою зону ответственности.

Результат

Получился полноценный многостраничный сайт киберспортивной организации, объединяющий имиджевую презентацию бренда и регулярно обновляемый контент.
Пользователь может пройти весь основной сценарий в одном интерфейсе:
новости → команды и игроки → расписание и результаты матчей → медиаматериалы → социальные сети клуба.
Сайт сохраняет характерную визуальную подачу на разных устройствах и при этом поддерживает практические сценарии: фильтрацию публикаций, просмотр составов, навигацию по новостям, работу с расписанием и отправку форм.
Компонентный подход позволяет добавлять новые материалы, матчи и участников без ручной разработки каждой страницы.
Проект демонстрирует мою работу со сложной адаптивной вёрсткой, scroll-анимациями, динамическими разделами и большим количеством визуального контента в рамках одного frontend-проекта.

Сайт проекта: https://parivision.gg/