Sala X (lasalax.com) — разработка сайта площадки и афиши мероприятий
Цель проекта
Собрать современный сайт для концертной/клубной площадки, где пользователь быстро:
понимает “кто мы”, чем занимаемся и где находимся,
находит мероприятия в афише и переходит к покупке билетов,
получает информацию по правилам посещения/логистике,
может связаться с командой по разным вопросам.
Сайт реализован с двухъязычной структурой (ENG/CAS) и отдельными страницами под ключевые сценарии (Home/Agenda/Room/Clubbing/Info/Contact). Sala X+1
Моя роль
Front-end / интеграции / анимации / адаптив.
Я отвечал за сборку интерфейса, семантичную структуру, адаптивную верстку, интерактив (включая анимационные состояния), подключение внешних сервисов и финальное QA.
Что я сделал: этапы от старта до релиза
1) Аудит и план работ
разобрал структуру сайта и пользовательские сценарии (афиша → событие → билет, информация → FAQ, контакт → нужный email);
согласовал набор страниц, повторяющиеся компоненты и шаблоны (шапка/меню, футер, карточки мероприятий, блоки соцсетей, формы).
2) Архитектура страниц и компонентный подход
Собрал повторно используемые блоки, чтобы сайт был консистентным и поддерживаемым:
Header / меню с навигацией по разделам и переключателем языка; Sala X+1
типовые секции (hero, текст+медиа, галереи/ленты изображений);
Footer с адресом и контактами + соцсети (единый паттерн на всех страницах). Sala X+1
3) Афиша (Agenda) и логика фильтрации
сверстал страницу Agenda как отдельный продуктовый раздел;
реализовал UI фильтров по типам событий (Clubbing/Conciertos/Teatro и т.д.) и по месяцам, чтобы пользователь быстро отсеивал лишнее; Sala X
обеспечил корректную адаптацию карточек (сеткой) для разных экранов.
4) Шаблон страницы мероприятия
Собрал шаблон события с ключевыми полями:
дата/время/цена, кнопка “Comprar”;
блок с описанием (BIO), ссылки на соцсети (RRSS), медиа-блок “Suena así” и требования по возрасту/допуску (где применимо). Sala X
5) Информационный раздел и формы
собрал страницу Info/Information с FAQ-логикой (“вопрос-ответ”) и формой “My question isn’t on the list” для обращений; Sala X
собрал Contact как отдельный раздел с распределением обращений по направлениям (Info/Programming/Production/Communication) и формой отправки. Sala X
6) Интеграции с внешними сервисами
связал сценарий покупки билетов с внешним билетным провайдером (в т.ч. подсказка, где искать события/покупать билеты); Sala X+1
подключил внешние каналы (Instagram/Twitter/Facebook/Youtube/Spotify) как часть навигации и доверия; Sala X+1
добавил ссылку на streaming-платформу (внешний переход). Sala X+1
7) Адаптив, качество верстки, UX-детали
переделал/выстроил адаптив так, чтобы меню, карточки, сетки и типографика сохраняли иерархию на mobile/tablet/desktop;
проработал интерактивные состояния (hover/focus/active), чтобы сайт ощущался “живым” и управляемым клавиатурой;
следил за тем, чтобы контент не ломал сетку (длинные названия событий, разные форматы картинок, разные языковые длины).
8) Производительность и финальная полировка
оптимизировал загрузку медиа (логика размеров изображений, аккуратная работа с DOM/JS, минимизация лишних эффектов);
финальный прогон по ключевым страницам и сценариям: афиша → событие → покупка, info → вопрос, contact → отправка.
9) Передача проекта
подготовил проект к поддержке: понятная структура классов/секций, повторяемые компоненты, логичная организация кода;
дал рекомендации, как обновлять контент и добавлять новые события без поломки верстки.
Технический фокус (для портфолио)
Адаптивная верстка: CSS Grid / Flex, mobile-first логика, масштабируемые компоненты
Кастомный код: JS для UI-логики (фильтры/состояния/мелкие интеракции), аккуратная структура скриптов
Интеграции: внешняя покупка билетов, streaming, соцсети, контактные формы
UX/качество: семантика, доступность (focus-состояния), кроссбраузерный QA