BrandBoost

BrandBoost — портфолио-проект в формате лендинга для вымышленного digital-маркетингового агентства. Проект сделан как витринная работа: он показывает семантическую HTML-разметку, SCSS-архитектуру, адаптивные изображения, базовую доступность, SEO-метаданные и production-oriented сборку статического сайта.

Контент, контакты, адрес, юридические страницы и сценарий формы являются демонстрационными. Форма не отправляет и не сохраняет данные: она валидирует поля и переводит пользователя на демо-страницу подтверждения.

Состав проекта

• Главная страница с hero-блоком, услугами, описанием компании, превью блога и контактной формой.
• Страница статьи блога.
• Страницы политики конфиденциальности и пользовательского соглашения.
• Демо-страница благодарности с noindex.
• Адаптивная вёрстка от 320px.
• Базовые практики доступности, производительности и SEO.

Quality checks

• npm run lint проверяет JavaScript и SCSS.
• npm run build создаёт production-сборку.
• npm run check запускает линтеры и полную production-сборку.

Сборка

Проект использует локально обновленную версию кастомной Gulp 5 сборки на базе gulp-lonrav.

Публичный репозиторий gulp-lonrav сейчас содержит более старую версию. Реализация сборки внутри этого проекта новее; в дальнейшем ее планируется синхронизировать обратно в репозиторий сборки.

Стек

• HTML-шаблоны с includes.
• SCSS с компонентной структурой в стиле БЭМ.
• CSS custom properties для дизайн-токенов.
• Fluid-типографика и helpers для адаптивных размеров.
• Vanilla JavaScript-модули, собираемые через esbuild.
• Gulp 5 pipeline.
• Оптимизация изображений и генерация responsive AVIF/WebP/JPG/PNG.
• Оптимизация SVG и генерация SVG-спрайта.
• ESLint, Stylelint, Prettier.

Требования

Node.js >=20.

Команды

npm ci
npm run dev
npm run build
npm run preview
npm run check

npm run dev запускает dev-сервер в watch-режиме. npm run build создаёт production-сборку в public/. npm run preview локально поднимает production-сборку. npm run check запускает линтеры и полную production-сборку.

Структура

src/
  assets/      Изображения, иконки, шрифты, Open Graph изображение
  pages/       HTML-страницы верхнего уровня
  scripts/     JavaScript config, modules и utilities
  shared/      Переиспользуемые HTML-шаблоны
  styles/      SCSS core, helpers, layouts, components, sections, pages

config/        Конфигурация проекта и сборки
gulp/          Реализация Gulp-задач
public/        Production-сборка
dist/          Development-сборка

Архитектурные заметки

• Разметка использует БЭМ-подход; утилитарные классы применяются только для переиспользуемых сущностей вроде container, section и visually-hidden.
• JavaScript-модули используют общие селекторы и state-константы из src/scripts/config/.
• SCSS разделен на токены, layout-примитивы, компоненты, секции и стили отдельных страниц.
• Responsive-ширины изображений по возможности генерируются из фактического использования в разметке, без лишних вариантов.
• Генератор sitemap исключает страницы, у которых в meta robots указан noindex.

License

MIT License. See LICENSE.

Production

Проект готов для статического хостинга, например GitHub Pages. Для реального коммерческого сайта нужно заменить демо-контакты, внешние ссылки, юридический текст и обработку формы на production-данные и backend-интеграцию.

Для деплоя на GitHub Pages сборку нужно выполнять с корректными site URL и base path, чтобы canonical, Open Graph URL и sitemap указывали на опубликованный адрес.

The deploy workflow runs npm ci and npm run check, then uploads public/ through the official GitHub Pages artifact flow. CI sets SITE_URL=https://mangust5580.github.io and SITE_BASE_PATH=/BrandBoost.