Aeromir

Technology Stack

About the Project & Task

"Aero-mir" is a full-cycle climate systems engineering company based in Novosibirsk (on the market since 2011).

The business needed to solve two conflicting tasks: to have a modern, fast, sales-driven storefront with solid SEO, while allowing the marketing team to retain their familiar admin panel to independently edit articles, pricing, and portfolios. This led to the architectural decision: splitting the project into Headless WordPress (database and media) and Nuxt 4 (rendering, interactivity, SEO). I am building the site from scratch—from designing the BFF layer to UI development and complex animations.

Under the Hood

BFF Layer Over WordPress REST API

The golden rule of this project is that the browser never communicates with WordPress directly. I separated the logic into the Nuxt application (app/) and the Nitro server (server/). The Nitro server routes act as a BFF (Backend-for-Frontend): they proxy requests via Basic Auth, fetch only the necessary fields from the CMS (via _fields and _embed) to avoid sending bloated JSON to the client, and serve clean data to the frontend.

I wrote a layer of typed transformers: raw WP data (ACF fields, nested media, Yoast SEO) is transformed on the fly into strict TypeScript models (Project, Article). The frontend doesn't need to guess if an object contains a required field—it simply works with ready-made interfaces.

For optimization, I wrapped the list fetching in a cachedEventHandler and cached the category slug to ID resolution in the process memory. Now, WordPress isn't hit every time a page is opened:

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;
}

Animation as an Engineering Task

The "Work Process" section is a complex scene powered by the GSAP MotionPathPlugin, where a mascot moves along a curved path. To ensure this works flawlessly across all devices:

• Three separate SVG paths were drawn (for mobile, tablet, and desktop) instead of relying on a single path with CSS transformations. Progress points are synchronized individually for each breakpoint.
• A clever resize handler was implemented. In mobile Safari, scrolling hides the address bar, triggering a resize event that typically janks animations. I wrote a handler that restarts GSAP only if the viewport width or layout mode actually changes, ignoring height jumps.
• GSAP and its plugins are loaded via dynamic import() exclusively upon IntersectionObserver triggers. On pages without animations, these ~30kb simply do not make it into the bundle.

let resizeRaf = 0;
const onResize = () => {
   if (resizeRaf) cancelAnimationFrame(resizeRaf);
   resizeRaf = requestAnimationFrame(() => {
      const nextWidth = window.innerWidth;
      const nextLayoutMode = getLayoutMode();
      
      // Ignore viewport height-only changes (hack for iOS Safari)
      if (nextWidth === lastViewportWidth && nextLayoutMode === lastLayoutMode) return;
      
      lastViewportWidth = nextWidth;
      lastLayoutMode = nextLayoutMode;
      initAnimation();
   });
};

Custom UI Solutions

I wrote a useHeader composable that locks scrolling when the mobile menu is open without the visual "jump" of content (by compensating for the vanishing scrollbar width via padding-right). Infinite partner carousels are built purely with CSS, featuring a fallback for prefers-reduced-motion. Forms are built with vee-validate + Zod, and accessibility features (aria-invalid, role="alert") are baked directly into the base UI components.

Current Status & Results

The site is in active development. The BFF layer logic is fully complete, along with 9 sections of the homepage (from the hero block to the portfolio showcase and the footer with the contact form). Internal pages (portfolio catalog with filters, articles, services) are currently being finalized. The expected delivery is within the coming weeks.