Ápice HQ

Context

Ápice combines two distinct businesses under one brand: audiovisual production (Ápice Filmmaking) and digital infrastructure, automation and AI (Ápice Infra).

The problem

Communicate two lines of business without confusing the prospect. Someone looking for a video shouldn't get lost among automation services — and someone looking for automation shouldn't have to scroll past a showreel to find it.

Architecture

Rendering diagram…

• Modular structure. One landing page per division, each with its own funnel, tied together by a common brand narrative and a shared contact page.
• Visual direction. Editorial typography, high contrast and restrained motion, on a custom design system built with React, Tailwind and Radix primitives.
• Accessibility. A skip-to-content link, visible focus rings that adapt to dark sections, ARIA on the navigation and mobile menu, a labeled contact form with a live status region, and prefers-reduced-motion respected across the site's animations.
• Performance on a heavy site. The 3D hero is split into its own chunk and loaded lazily, and its render loop pauses whenever it scrolls out of view. Images get multi-width WebP sets, loading="lazy" below the fold, fetchpriority="high" on the one that decides the largest paint, and explicit dimensions so nothing shifts while loading. Code is split per route.
• Infrastructure. A React single-page app where every route gets its own prerendered HTML file with its title, description and Open Graph tags, plus a preload of that route's code. It's served as static files by nginx behind Traefik on a VPS, with security headers, pre-compressed assets and self-hosted, cookieless analytics.

Key decisions & trade-offs

The hard part

After a deploy, returning visitors could get a blank page.

Why it happened. Each route's index.html was served without a Cache-Control header. The deploy syncs files with rsync, which preserves modification times, so browsers applied heuristic caching and kept the old HTML. That old HTML pointed at JavaScript chunks with content hashes in their names — and the deploy's --delete had just removed them from the server. Old HTML, missing scripts: a blank page.

The fix. Two cache policies, decided by path:

• /assets/ — content-hashed files whose name changes when their content does — are cached forever as immutable.
• Everything else (each route's HTML, the 404 page, robots.txt, the sitemap) is no-cache, must-revalidate: the browser can keep a copy, but must check it's current on every visit.

The trap inside the fix. In nginx, add_header isn't inherited by a location block that declares its own. Setting Cache-Control inside the two locations would have silently dropped every security header from exactly those responses — which is all of them. The policy is resolved with a map instead and emitted once at the server level, next to the security headers, so nothing is overridden.

Results

Lighthouse · Accessibility (mobile)

100 / 100

Lighthouse 13, 3 runs, September 2026.

Lighthouse · Best Practices and SEO (mobile)

100 / 100

Same runs, both categories.

Cumulative Layout Shift

0

Same runs — every image has explicit dimensions.

Stack