Engineering Firm Website
A multilingual company website, fully prerendered, with a procedurally generated steel structure in Three.js that assembles as the visitor scrolls — and falls back to a technical drawing on devices that cannot run it.
- Client
- Engineering & construction company (name withheld until launch)
- Role
- Visual direction, development and testing
- Year
- 2026
- Status
- Preview delivered, awaiting client approval
100
Lighthouse Accessibility and Best Practices (lab)
89–99
Lighthouse Performance on mobile (lab)
40
prerendered pages in 4 languages
132
unit and end-to-end tests
Context
An engineering and construction company needed a site that communicates technical rigour to clients in several countries, and that works on the phones those clients actually use.
The problem
Deliver a premium, multilingual site with a 3D signature element — without sacrificing performance, accessibility or the experience on low-end devices.
What I did
- 01
Defined the visual direction and design tokens, and built every page and component.
- 02
Modelled a parametric steel frame that drives both an SVG drawing and the WebGL scene.
- 03
Wrote unit, end-to-end and accessibility tests, plus scripts for contrast and Lighthouse checks.
What it does
- Home, about, services with detail pages, projects, contact and privacy — in Portuguese, English, Spanish and German
- Scroll-driven 3D sequence in five reversible steps
- Circular theme reveal and directional page transitions
- Localized URLs with hreflang, sitemap and per-language Open Graph images
- Contact endpoint with abuse protection
Engineering highlights
- 01
One model, two renderers
A single parametric model produces both the server-rendered SVG drawing and the WebGL scene: 465 pieces in 8 draw calls with instanced meshes, and zero bytes of model download.
- 02
Quality tiers per device
Capability detection — WebGL probe, software-renderer detection, memory, CPU cores, Save-Data — chooses high, medium or low 3D, a 2D drawing or a static section.
- 03
Hardened by default
A strict Content Security Policy and security headers; the contact endpoint has a honeypot, a minimum fill time, a body-size limit and per-IP rate limiting.
Hard parts
- 01
3D without hurting LCP
Three.js loads lazily as the sequence approaches the viewport, so the first paint is text and the largest paint is never delayed.
- 02
Testing WebGL
Playwright runs one project on a real GPU and another with WebGL disabled, to prove the fallback works.
Results
- Lighthouse (lab, local production build): Accessibility 100 and Best Practices 100 on every page measured; Performance 89–99 on mobile and 100 on desktop; CLS 0.
- 27 unit and 105 end-to-end tests passing, including axe accessibility checks and layouts from 320 to 3840 px wide.
Figures come from the repository: tests, measurements and documented reports.
Stack
- Next.js 16
- React 19
- TypeScript
- Three.js
- CSS Modules
- Vitest
- Playwright
- axe-core
- Lighthouse
- Vercel
ProcessBuilt with an AI-assisted workflow that I directed and reviewed, validated by the automated test and audit suite.
Code and client are private. Details are shared to the extent the work allows.