Сайт по продажам авторских портретов

Описание

Моя задача была сверстать и запрограммировать одностраничный сайт для продажи кастомных портретов. Дизайн был готов, я занимался только вёрсткой и функционалом. Использовал HTML, SCSS, Pug, Gulp, нативный JavaScript, animate.js для анимаций и Swiper для слайдеров.

Нужно было реализовать сайт с модальным окном, плавной прокруткой и стрелкой "Вверх", всплывашкой с промокодом, формой для заказа (с drag & drop для загрузки портрета), калькулятором цены, вкладками, слайдером и анимациями. Сайт должен быть удобным, работать на любых устройствах и быстро грузиться.

Решение

Модальное окно: Вся страница свёрстана на Pug, включая окно. Оно появляется с анимацией через animate.js, подгружает форму или текст через JavaScript. Закрывается по кнопке или Esc, адаптивно.

Плавная прокрутка: Настроил через JavaScript. После прокрутки вниз появляется стрелка "Вверх", по клику на неё страница плавно возвращается к началу.

Всплывашка: Показывается один раз при прокрутке до низа страницы, через JavaScript. Даёт уникальный промокод для заказа, сохраняется в localStorage, чтобы не появляться снова. Есть кнопка действия и закрытия.

Форма для заказа: Сделал форму в модальном окне (на Pug), с проверкой полей и отправкой данных на email через AJAX. Добавил drag & drop для загрузки портрета заказчиком, с защитой от спама.

Калькулятор цены: Форма с выпадающими списками и полем для промокода, цена обновляется сразу с анимацией через animate.js.

Вкладки и слайдер: Вкладки переключают контент через JavaScript, слайдер для портфолио сделан на Swiper с поддержкой свайпов на телефонах и анимацией.

Анимации: Использовал animate.js для появления секций при прокрутке, hover-эффектов на кнопках и картинках, а также плавных переходов в слайдере.

Вся вёрстка на Pug, стили на SCSS, сборка через Gulp (компиляция, сжатие файлов). JavaScript нативный, плюс animate.js и Swiper для анимаций и слайдеров.

Сайт адаптивный (от 320px до 4K), грузится быстро, с семантической разметкой и ARIA для доступности.

Результат

Сайт получился удобным, всё работает: модальное окно, прокрутка со стрелкой "Вверх", всплывашка с промокодом, форма с drag & drop, калькулятор, вкладки, слайдер на Swiper и анимации через animate.js. Код чистый, скорость высокая, валидаторы не ругаются.

Презентация проекта