Аэромир

Технологический стек

О проекте и задаче

«Аэро-мир» — новосибирская компания полного цикла по климатическим системам (на рынке с 2011 года).

Бизнесу требовалось решить две конфликтующие задачи: получить современную, быструю, продающую витрину с хорошим SEO и при этом оставить маркетологам привычную админку для самостоятельного редактирования статей, цен и портфолио. Отсюда архитектурное решение: разделить проект на Headless WordPress (база данных и медиа) и Nuxt 4 (рендеринг, интерактив, SEO). Я разрабатываю сайт с нуля — от проектирования BFF-слоя до верстки и сложных анимаций.

Под капотом

BFF-слой поверх WordPress REST API

Главное правило проекта — браузер никогда не общается с WordPress напрямую. Я разделил логику на Nuxt-приложение (app/) и Nitro-сервер (server/). Серверные роуты Nitro выступают как BFF (Backend-for-Frontend): они проксируют запросы через Basic Auth, запрашивают у CMS только нужные поля (через _fields и _embed), чтобы не тащить на клиент лишний JSON, и отдают фронтенду чистые данные.

Написан слой типизированных трансформеров: сырые данные WP (поля ACF, вложенные медиа, Yoast SEO) на лету превращаются в строгие TypeScript-модели (Project, Article). Фронтенду не нужно гадать, есть ли в объекте нужное поле — он работает с готовыми интерфейсами.

Для оптимизации я завернул списки объектов в cachedEventHandler, а разрешение slug категории в ID закэшировал в памяти процесса. Теперь WordPress не дёргается при каждом открытии страницы:

const categoryCache = new Map<string, number>();

export async function getCategoryId(slug: string): Promise<number> {
   if (categoryCache.has(slug)) return categoryCache.get(slug)!;

   const categories = await wpFetch<WPTerm[]>('/categories', { query: { slug } });
   if (!categories[0]) throw createError({ statusCode: 500, message: `Category not found` });

   categoryCache.set(slug, categories[0].id);
   return categories[0].id;
}

Анимация как инженерная задача

Секция «Этапы работ» — это сложная сцена на базе GSAP MotionPathPlugin, где маскот движется по кривой. Чтобы это работало идеально на любых устройствах:

• Отрисованы три отдельные SVG-траектории (под мобильный, планшет и десктоп), а не одна общая с CSS-трансформациями. Точки прогресса синхронизированы индивидуально под каждый брейкпоинт.
• Реализован хитрый resize-хендлер. В мобильном Safari при скролле скрывается адресная строка, что вызывает событие resize и дёргает анимацию. Я написал обработчик, который перезапускает GSAP только если реально изменилась ширина экрана или layout-режим, игнорируя прыжки высоты.
• GSAP и его плагины грузятся через динамический import() и только по IntersectionObserver. На страницах без анимации эти ~30кб просто не попадают в бандл.

let resizeRaf = 0;
const onResize = () => {
   if (resizeRaf) cancelAnimationFrame(resizeRaf);
   resizeRaf = requestAnimationFrame(() => {
      const nextWidth = window.innerWidth;
      const nextLayoutMode = getLayoutMode();
      
      // Игнорируем изменение только высоты вьюпорта (хак для iOS Safari)
      if (nextWidth === lastViewportWidth && nextLayoutMode === lastLayoutMode) return;
      
      lastViewportWidth = nextWidth;
      lastLayoutMode = nextLayoutMode;
      initAnimation();
   });
};

Кастомные UI-решения

Написан composable useHeader, который блокирует скролл при открытии мобильного меню без визуального «прыжка» контента (компенсируя ширину скроллбара через padding-right). Бесконечные ленты партнеров сделаны на чистом CSS с фолбеком для prefers-reduced-motion. Формы собраны на vee-validate + Zod, а доступность (aria-invalid, role="alert") заложена прямо на уровне базовых UI-компонентов.

Текущий статус и результаты

Сайт находится в активной разработке. Полностью готова логика BFF-слоя, а также 9 секций главной страницы (от hero-блока до витрины реализованных объектов и подвала с формой). В данный момент дорабатываются внутренние страницы (каталог объектов с фильтрами, статьи, услуги). Ожидаемый срок сдачи — ближайшие недели.