Aeromir

Technologie-Stack

Über das Projekt & die Aufgabe

„Aero-mir“ ist ein Full-Service-Unternehmen für Klimasystemtechnik mit Sitz in Nowosibirsk (seit 2011 auf dem Markt).

Das Unternehmen musste zwei widersprüchliche Anforderungen erfüllen: Eine moderne, schnelle und verkaufsfördernde Website mit exzellentem SEO sollte entstehen, während das Marketing-Team sein gewohntes Admin-Panel behalten wollte, um Artikel, Preise und das Portfolio selbstständig bearbeiten zu können. Daraus resultierte die Architektur-Entscheidung: Aufteilung des Projekts in Headless WordPress (Datenbank und Medien) und Nuxt 4 (Rendering, Interaktivität, SEO). Ich entwickle die Seite von Grund auf neu – vom Design der BFF-Schicht bis hin zur UI-Entwicklung und komplexen Animationen.

Unter der Haube

BFF-Schicht über die WordPress REST API

Die wichtigste Regel dieses Projekts: Der Browser kommuniziert niemals direkt mit WordPress. Ich habe die Logik in die Nuxt-Anwendung (app/) und den Nitro-Server (server/) getrennt. Die Nitro-Server-Routen fungieren als BFF (Backend-for-Frontend): Sie leiten Anfragen über Basic Auth weiter, rufen nur die zwingend benötigten Felder aus dem CMS ab (über _fields und _embed), um keine unnötigen JSON-Daten an den Client zu senden, und liefern dem Frontend saubere Daten.

Ich habe eine Schicht aus typisierten Transformern geschrieben: Rohe WP-Daten (ACF-Felder, verschachtelte Medien, Yoast SEO) werden on the fly in strikte TypeScript-Modelle (Project, Article) umgewandelt. Das Frontend muss nicht raten, ob ein Objekt das benötigte Feld enthält – es arbeitet einfach mit fertigen Interfaces.

Zur Optimierung habe ich den Abruf von Listen in einen cachedEventHandler verpackt und die Auflösung des Kategorie-slugs zur ID im Arbeitsspeicher des Prozesses gecacht. Nun wird WordPress nicht bei jedem Seitenaufruf belastet:

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 als Engineering-Aufgabe

Die Sektion „Arbeitsprozess“ ist eine komplexe Szene, die vom GSAP MotionPathPlugin angetrieben wird, bei der sich ein Maskottchen entlang einer gekrümmten Bahn bewegt. Damit dies auf allen Geräten einwandfrei funktioniert:

• Es wurden drei separate SVG-Pfade (für Mobile, Tablet und Desktop) gezeichnet, anstatt sich auf einen einzigen Pfad mit CSS-Transformationen zu verlassen. Die Fortschrittspunkte werden für jeden Breakpoint individuell synchronisiert.
• Es wurde ein intelligenter Resize-Handler implementiert. Im mobilen Safari wird durch Scrollen die Adressleiste ausgeblendet, was ein resize-Ereignis auslöst, das normalerweise Animationen zum Ruckeln bringt. Ich habe einen Handler geschrieben, der GSAP nur dann neu startet, wenn sich die Breite des Viewports oder der Layout-Modus tatsächlich ändert – Höhenänderungen werden ignoriert.
• GSAP und seine Plugins werden über dynamische import()-Aufrufe ausschließlich bei IntersectionObserver-Triggern geladen. Auf Seiten ohne Animationen landen diese ~30kb gar nicht erst im Bundle.

let resizeRaf = 0;
const onResize = () => {
   if (resizeRaf) cancelAnimationFrame(resizeRaf);
   resizeRaf = requestAnimationFrame(() => {
      const nextWidth = window.innerWidth;
      const nextLayoutMode = getLayoutMode();
      
      // Ignoriere reine Höhenänderungen des Viewports (Hack für iOS Safari)
      if (nextWidth === lastViewportWidth && nextLayoutMode === lastLayoutMode) return;
      
      lastViewportWidth = nextWidth;
      lastLayoutMode = nextLayoutMode;
      initAnimation();
   });
};

Maßgeschneiderte UI-Lösungen

Ich habe ein useHeader-Composable geschrieben, das das Scrollen bei geöffnetem mobilem Menü blockiert, ohne dass der Inhalt optisch „springt“ (indem die Breite der verschwindenden Scrollbar durch padding-right kompensiert wird). Endlose Partner-Karussells sind rein mit CSS erstellt, inklusive eines Fallbacks für prefers-reduced-motion. Formulare werden mit vee-validate + Zod gebaut, und Aspekte der Barrierefreiheit (Accessibility wie aria-invalid, role="alert") sind direkt in die Basis-UI-Komponenten integriert.

Aktueller Status & Ergebnisse

Die Website befindet sich in aktiver Entwicklung. Die Logik der BFF-Schicht ist vollständig abgeschlossen, ebenso wie 9 Sektionen der Startseite (vom Hero-Bereich bis zur Portfolio-Übersicht und dem Footer mit Kontaktformular). Die internen Seiten (Portfolio-Katalog mit Filtern, Artikel, Dienstleistungen) werden derzeit finalisiert. Die Fertigstellung wird in den kommenden Wochen erwartet.