Case study 06 / 06
DataGem
Software studio · Website
This website, redesigned and rebuilt around the logo's own lines
- Software engineering
- Cloud & infrastructure
Key figures
- Lighthouse performance score on desktop
- 100
- Layout shift as pages load
- 0
- Compressed JavaScript to load a page, down from 440 kB
- 130 kB
The brief
The challenge
Our previous site was a dark design over a persistent 3D background, with animation and smooth-scrolling libraries, rendered only in the browser: every page loaded about 440 kB of compressed JavaScript and showed nothing until it ran, and Google Fonts and Google Analytics loaded without asking for consent.
What we built
A new design, Current (paper, ink and the logo's blue, set in Bodoni Moda, Archivo and IBM Plex Mono), and a WebGL engine that draws the logo's 12 lines live, from the home's hero through its scroll journey to the 404. Every page is pre-rendered to static HTML and served by nginx on Cloud Run, with Google Analytics only after consent.
Outcome
A lighter site whose text is there before any script runs and stays still as it loads, that works with a keyboard and with reduced motion, and that sends nothing to Google until the visitor accepts.
Related services: Full-stack developmentCloud infrastructure
Expertise
What it took.
Software engineering
- A WebGL line engine on three.js: the logo's 12 lines, extracted as exact vectors from its Illustrator source, drawn live in the hero, carried through the four chapters of the home's scroll journey and torn on the 404, with ripples that follow the pointer.
- React pages pre-rendered to static HTML at build time and hydrated in the browser, so the text shows before any JavaScript runs and every page has its own title, description and canonical URL.
- Accessibility: axe finds no violations on any page, the journey, menus and case files work with the keyboard, and reduced motion or a device without hardware graphics gets still images.
Cloud & infrastructure
- nginx on Google Cloud Run, built and deployed by Cloud Build on every push to main.
- Real 404s, permanent redirects for old addresses, long-term caching of hashed assets and security headers.
- Self-hosted fonts and a cookie banner under CNIL rules: no request reaches Google before the visitor accepts analytics.
Project 01
Design: Current
Design system · Tailwind CSS
A new design for the studio's site, taken from the logo itself: paper, ink and the logo's blue, Bodoni Moda for display, Archivo for text and IBM Plex Mono for labels. Pages read like documents, with numbered sections, hairline rules and case files that open over the list, and the journey's last chapter turns the page to night.
- Goal
- Replace a dark, effect-driven site with one that reads first and carries the brand in every detail.
- Highlights
- One set of tokens for colour, type, spacing and motion, with a night palette
- Self-hosted fonts with metric-matched fallbacks, so text doesn't jump when they arrive
- Case files: each client's brief, build and key figures in a dialog, one click from the list
- Client screenshots taken from the real apps on demo data, and tagged as such
- Stack
- Tailwind CSS
- Bodoni Moda
- Archivo
- IBM Plex Mono
Project 02
The living mark
three.js · WebGL2 · GLSL
The logo's 12 lines, extracted as exact vectors from its Illustrator source and drawn live by a WebGL engine. In the home's scroll journey, The Current, they leave the mark and travel left and right between Discover, Design, Build and Run while the text appears on the other side, then close back into the logo at night. On the 404 the outer line is torn and its free ends drift toward the pointer; everywhere, the pointer leaves ripples.
- Goal
- Make the logo the site's motion, without costing visitors speed or comfort.
- Highlights
- One WebGL context and one canvas that moves from the hero into the journey
- three.js and the engine (139 kB compressed) in their own chunk, fetched once the page has loaded and started on the first scroll, pointer move or key press
- Still images for reduced motion, the Motion toggle, Save-Data and devices without hardware graphics
- A chapter timeline that works with the arrow keys, and a link to skip the journey
- Stack
- three.js
- WebGL2
- GLSL
- React 18
Project 03
Pre-rendered, served on Cloud Run
React 18 · Vite · nginx · Cloud Run
Every route, each case study included, is rendered to static HTML at build time and then hydrated: the text is on the page before any JavaScript, and search engines and link previews get each page's own title, description and structured data, with a share image per case study. nginx on Cloud Run serves it with real 404s, long-term caching of hashed assets and security headers, and Cloud Build deploys every push to main.
- Goal
- A site that is quick on a phone, easy to find and to share, accessible, and private by default.
- Highlights
- Routes and sitemap generated from the same case-study data as the pages
- A build that fails if a page lacks its title, description or canonical URL
- Google Analytics only after Accept in the cookie banner, under CNIL rules
- No violations found by axe on any page; keyboard navigation and focus handled throughout
- Stack
- React 18
- Vite
- nginx
- Cloud Run
- Cloud Build
