О проекте
Промо-сайт с большим количеством контента: 15 экранов, несколько типов pop-up, галереи и формы с отправкой. Вёрстка по готовому дизайну (Figma/PSD). Фокус — чистая подача и высокая скорость при сотне+ изображений.
Что сделал
- Pug-шаблоны, модульная структура и сборка на Webpack.
- Обновлённая мини-CSS-библиотека: 12-колоночная сетка, reset и утилиты — отказ от тяжёлого Bootstrap.
- SCSS → минифицированный CSS, оптимизация изображений и LazyLoad для картинок.
- Слайдеры на Swiper.
- SweetAlert для всплывающих окон; exit-intent поп-ап и закрытие модалок по кнопке «назад».
- Формы: отправка на почту + интеграция с amoCRM (OAuth, автообновление токена, UTM-метки).
- Адаптивная вёрстка, включая промежуточные брейкпоинты (нетбуки/планшеты).
Зачем так
Pug заметно ускоряет и упрощает работу на объёмных проектах; своя сетка экономит килобайты и не тащит лишние классы. Lazy-загрузка и минификация дают быстрый старт и плавный скролл, а UX-детали (back-button закрывает поп-ап, exit-intent) повышают конверсию без раздражения.
Итог
Насыщенный по контенту, но быстрый и опрятный сайт: понятная структура, отзывчивый интерфейс и корректная доставка заявок в почту и CRM.
Как бы сделал сейчас
Оставил бы статику на Pug + SCSS с Vite вместо Webpack, <picture> (WebP/AVIF) и критический CSS inline (~5 KB). Поп-апы — на нативном <dialog> или лёгком JS-хелпере; слайдер — только где нужен; интеграцию с amoCRM — отдельным компактным PHP-эндпоинтом с безопасным хранением токена и логированием UTM.
