sfx.by
Вёрстка на Tailwind CSS и Alpine.js, интегрированная в MODX, для сайта компании спецэффектов: анимированная главная, 9 категорий эффектов с переключаемыми вариантами оборудования и живой слайдер портфолио.
Что было сделано
- Вёрстка на Tailwind CSSАдаптивная вёрстка главной страницы, чередующейся сетки эффектов и страниц каждого эффекта на Tailwind CSS.
- Интерактивность на Alpine.jsВкладки вариантов оборудования, слайдер миниатюр и слайдер портфолио работ — на Alpine.js без тяжёлого фреймворка.
- Интеграция с MODXПодключил вёрстку к ресурсам MODX: список эффектов, варианты оборудования и портфолио работ менеджер ведёт сам.
- 9 категорий эффектовCO2-криоэффект, тяжёлый дым, огонь, конфетти, серпантин, пена, искры, туман, кабуки-система — с отдельными страницами и вкладками вариантов.
Технологии
Результат
Компания получила динамичный сайт с анимированной главной страницей, чередующейся подачей 9 эффектов и живым слайдером портфолио — всё на Tailwind CSS и Alpine.js, интегрированное в MODX. Каждый эффект получил отдельную страницу с переключаемыми вариантами оборудования, фотогалереей и техническими характеристиками, которые менеджер редактирует сам.
Вкладки вариантов оборудования на каждой странице эффекта
Каждая категория эффекта — например, CO2-криоэффект — включает несколько вариантов оборудования: стационарный джет, поворотный криоджет, ручная криопушка. У каждого варианта свой набор фото и технических характеристик, а переключение между ними должно быть мгновенным, без перезагрузки страницы.
Собрал переключение вкладок и галереи миниатюр на Alpine.js поверх шаблонов MODX: менеджер заполняет фото, преимущества и технические условия для каждого варианта оборудования через ресурсы MODX, а вёрстка сама собирает вкладки без участия разработчика.
Чередующаяся сетка из 9 эффектов и слайдер портфолио
Главная страница показывает сразу 9 категорий эффектов — CO2-криоэффект, тяжёлый дым, огонь, конфетти, серпантин, пена, искры, туман, кабуки-система — чередующимся блоком с крупными фото, плюс живой слайдер портфолио выполненных работ. Всё это должно редактироваться менеджером без разработчика и оставаться быстрым на мобильных.
Свёрстал чередующуюся сетку эффектов и слайдер портфолио на Tailwind CSS, а вывод карточек эффектов и фото работ подключил к спискам ресурсов MODX — добавление нового эффекта или фото в портфолио не требует правки вёрстки.
Нужен похожий сайт или сервис?
Расскажите о задаче — оценю сроки и стоимость, отвечу в течение дня.
Другие проекты
Дистрибьютор медицинского оборудования Inomed
Интеграция вёрстки в MODX для официального дистрибьютора медицинского оборудования Inomed: каталог продукции по категориям и области применения с глубокой технической структурой и якорной навигацией.
Гостиница «Фатима» в Казани
Перенос сайта гостиницы с WordPress на конструкторе Elementor на Hugo и Decap CMS ради максимальной скорости: новая вёрстка с нуля, исправлены все ошибки, 92 балла Google PageSpeed за производительность и 100 за SEO.
Интернет-магазин сценического оборудования MAINFX
Вёрстка, интегрированная с Laravel, для интернет-магазина сценического оборудования: карточки товаров с техническими таблицами и аксессуарами, страница фирменного приложения ShotControl App и полностью двуязычный интерфейс.