Case Study

A Marketing Site That Monitors Itself

A fully engineered enterprise marketing website for Arellano Global's cloud AI platform — featuring a zero-dependency 3D constellation hero, staggered scroll-reveal animations, a live infrastructure status widget, and production-hardened security headers.

Sections

0KB

3D Overhead

60s

Status Poll

2yr

HSTS Preload

Employer

Arellano Global LLC

Live URL

cloud.arellanoglobal.org

Stack

React 18 · Vite 5 · Tailwind 3 · TypeScript

Infra

nginx · Traefik · Docker · Coolify

Built by

Del Rey Valmoria

// 01 — The Problem

Static Marketing Sites Don't Reflect Live Infrastructure

An AI automation agency's marketing website is its most important trust signal. Prospects land there before they book a call, before they read the proposal, before they sign anything. The site needed to do more than describe what the platform does — it needed to demonstrate that it works, live.

The standard pattern is a static brochure site that looks impressive on day one and starts lying by day two — screenshots of dashboards that have been updated, status badges that are hardcoded green, pricing cards that are two revisions behind. Maintenance overhead compounds over time as content drifts from reality.

The constraints were sharp: the site needed to be bilingual (EN/ES), run on a self-hosted stack with zero third-party JS dependencies for the 3D hero, pass strict CSP without unsafe-inline, and include a live health widget that reflects actual deployment status from a running platform endpoint.

The secondary problem was performance. Three.js for a constellation background is 150KB of overhead. A CSS animation approximation looks cheap. The goal was a mathematically correct 3D sphere — with depth sorting, perspective projection, and Y-axis rotation — at exactly zero kilobytes of library weight.

// 02 — The Architecture

React SPA → Express → nginx → Traefik

A clean four-layer delivery stack. Vite builds the React SPA at compile time. An Express static server serves the dist/ bundle with custom security headers. nginx handles proxying and CSP enforcement. Traefik manages SSL termination and routing at the edge.

Build

Vite 5

Compiles TypeScript + Tailwind into optimized dist/ bundle. VITE_* env vars baked at build time.

Serve

Express

Static file server with custom security header middleware. Serves /health endpoint for status widget.

Proxy

nginx

Reverse proxy layer. Enforces HSTS, nosniff, X-Frame-DENY, Referrer-Policy, Permissions-Policy.

Edge

Traefik

SSL termination + routing. Coolify orchestration. Rate-limit middleware chain. Auto-renew Let's Encrypt.

Docker Compose Coolify v4 Let's Encrypt TLS i18next EN/ES AG Tokens design system React 18 + TypeScript

AG BRAND — cloud.arellanoglobal.org

HERO — 3D CONSTELLATION + SCROLL REVEAL

// 03 — How It Works

Four Engineering Problems, Four Clean Solutions

The site is composed of independently interesting systems: a mathematically correct 3D hero built in vanilla JS, a stagger-reveal animation engine, a polling status widget, and a layered security stack — all assembled into a single deployable Docker image.

Feature 01 — 3D Hero

Fibonacci Sphere Constellation

80 nodes distributed across a unit sphere using the Fibonacci lattice formula (phi = (1 + sqrt(5)) / 2). Each frame, nodes are sorted by Z-depth for correct painter's-algorithm rendering. Perspective projection maps 3D coordinates to 2D canvas. The sphere rotates on the Y-axis at a constant angular velocity. Zero libraries — plain canvas 2D API — 0KB added to bundle weight.

Feature 02 — Animation

useScrollReveal() — Staggered Children

A custom React hook using IntersectionObserver with a cubic-bezier(0.22, 1, 0.36, 1) easing curve — the same deceleration used in iOS spring physics. The hook targets .sr-item children and staggers their entrance with a configurable delay multiplier. A companion useReveal() handles single-element entrances. No GSAP, no Framer Motion.

Feature 03 — Live Status

CloudStatus — 60s Poll, Green/Amber/Red

A CloudStatus component polls /health on the AG Bridge API every 60 seconds. Three states: green (200 OK + healthy payload), amber (slow response or partial health), red (timeout or non-2xx). The pill lives both in the marketing page hero and in the navbar on scroll. This means the marketing site surfaces real uptime data to prospects without any manual updates or status-page embeds.

Feature 04 — i18n

Bilingual EN/ES via i18next

All copy lives in locales/en/translation.json and locales/es/translation.json. Language detection uses the browser navigator.language with a manual toggle in the navbar. Switching language is instant — no page reload — because React re-renders from the i18n store. The design system tokens (AG_COLORS, AG_SHADOWS, AG_GRADIENTS) are defined in a shared ag-tokens.ts file that both sites import.

Feature 05 — Security

Full Production Hardening — No Exceptions

nginx.conf is hardened beyond the Coolify defaults. HSTS with 2-year max-age and preload directive submitted to the HSTS preload list. Strict CSP with no unsafe-inline or unsafe-eval — all CSS is Tailwind-generated at build time, no runtime style injection. X-Frame-Options: DENY prevents clickjacking. X-Content-Type-Options: nosniff prevents MIME sniffing. server_tokens off strips nginx version from response headers. Referrer-Policy: strict-origin-when-cross-origin and Permissions-Policy lock down browser feature access. Traefik middleware chain adds rate limiting on top.

Left: CloudStatus pill with three states. Right: useScrollReveal() state machine — from invisible to animated entry.

// 04 — Engineering Decisions

Three Choices That Defined the Build

"Every dependency is a liability. If you can solve it with the platform, solve it with the platform."

Vanilla JS for 3D — not Three.js

Three.js is 150KB gzipped. The constellation required exactly three math operations: Fibonacci point generation, Y-axis rotation via a 2×2 rotation matrix, and perspective projection. Writing those 80 lines of vanilla JS eliminated the dependency entirely, reduced LCP by removing a parser-blocking render path, and meant the CSP could stay strict — Three.js's shader compilation requires unsafe-eval in some configurations.

CSP without unsafe-inline

Getting CSP strict enough to pass Content-Security-Policy-Report-Only audits required eliminating all inline styles and event handlers from the bundle. Tailwind generates all CSS at build time into a single stylesheet — no runtime style injection. All dynamic class toggling uses Tailwind utility classes applied via React's className prop. The result: a CSP header that specifies only self and specific CDN origins, with no inline escapes.

Live status on the marketing page itself

Adding a live infrastructure status widget to a marketing page is an unusual choice — it creates a real-time trust signal but also exposes downtime to prospects. The deliberate decision was that transparency builds more trust than hiding status. The widget hits the same /health endpoint that internal monitoring uses, so the status the prospect sees is identical to what the ops team sees. Amber and red states are styled with copy explaining what "maintenance window" means rather than showing a raw error.

React 18 Vite 5 TypeScript Tailwind 3 i18next Express nginx Traefik Docker Coolify v4 HSTS preload Strict CSP Canvas 2D API IntersectionObserver

Security Header Matrix

✓

HSTS 2yr Preload

max-age=63072000; includeSubDomains; preload — submitted to browsers' preload lists.

✓

Strict CSP

No unsafe-inline, no unsafe-eval. Tailwind build-time CSS eliminates the need for inline styles.

✓

X-Frame-Options: DENY

Prevents clickjacking attacks. No <iframe> embedding allowed from any origin.

✓

X-Content-Type-Options: nosniff

Prevents MIME type sniffing. Browser must honor declared Content-Type.

✓

Referrer-Policy

strict-origin-when-cross-origin — only sends origin on cross-origin requests, not full URL.

✓

server_tokens off

Strips nginx version from Server response header to prevent version-targeted exploits.

// 05 — Proof

By the Numbers

A production deployment with zero 3D library overhead, live status transparency, and headers that pass the strictest CSP audits.

Page Sections

0KB

3D Library

60s

Status Poll

2yr

HSTS Preload

CASE STUDIES

ABOUT

OUR STORY

Need a Site That Works as Hard as Your Infrastructure?

Engineering-first web builds with real observability, strict security, and zero bloat.

View All Work →

VIEW LIVE → GITHUB →

LIVE PROOF

AG Cloud — Live Site Assets

Brand assets and visual components from the live production site at cloud.arellanoglobal.org.

BRAND MARK — AG LOGO

MAIN WEBSITE — ABOUT HERO

MAIN WEBSITE — CASE STUDY LAPTOP VIEW

MAIN WEBSITE — CASE STUDY MIAMI

MAIN WEBSITE — HERO REFERENCE