Проект Internship

---

🌐 Адаптивный сайт с интерактивным UI

Проект представляет собой адаптивный сайт, реализованный по методологии БЭМ, с использованием препроцессора SCSS и сборщика Vite. В проекте реализован набор сложных интерфейсных компонентов и интерактивных сценариев без использования фреймворков.

---

🧱 Общие технические особенности

• Адаптивная вёрстка под мобильные, планшетные и десктопные устройства
• Фиксированный контейнер, фоны растягиваются на всю ширину страницы
• Методология БЭМ
• Препроцессор Sass (SCSS)
• Сборка проекта с помощью Vite
• Модульная организация JavaScript
• Использование CSS-библиотеки Nebo
• Кроссбраузерная поддержка: Chrome, Firefox
• Контентные области стилизуются по каскаду (без классов на контентных элементах)
• Плавная анимация

---

Работа с интерфейсом и состояниями

• Реализация интерактивных компонентов на чистом JavaScript
• Управление состояниями UI (open / close / active / disabled)
• Модальные окна с закрытием по клику вне области или нажатием Esc
• Блокировка фонового взаимодействия при открытых модальных окнах
• Поддержка клавиатурной навигации

---

Слайдеры и навигация

• Интеграция и кастомизация Swiper.js
• Реализация различных конфигураций слайдеров:
  • адаптивное количество слайдов
  • отключение автопрокрутки и зацикливания
  • отключение drag-взаимодействий на десктопе
• Кастомная пагинация:
  • пагинация в виде скроллбара
  • динамическое отображение кнопок пагинации

---

Формы и валидация

• Клиентская валидация форм
• Использование нативных браузерных сообщений об ошибках
• Проверка обязательных полей и чекбоксов
• Маска ввода телефона (+7)
• Отправка форм методом POST
• Обработка результата отправки формы на клиенте

---

Работа с динамическим контентом

• Поддержка переполнения текстами и изменением количества элементов
• Корректная работа с контентом, изменяемым из административной части
• Горизонтальный скролл элементов навигации на мобильных устройствах

---

UI-паттерны и интерактивные компоненты

• Аккордеон:
  • поддержка открытия нескольких элементов одновременно
  • управление состояниями без жёсткой привязки к количеству пунктов
  • интерактивная область — весь заголовок элемента
• Кастомный селект:
  • расширение стандартного <select> без потери базовой семантики
  • управление состояниями и валидацией
• Бургер-меню с вложенными уровнями навигации
• Табы и переключаемые навигационные элементы