Energy · Advisory
Tracemont
A ten-language site for an independent intermediary in renewable gas and low-carbon fuels.
- Duration
- May – Sep 2026
- Role
- Design and development
- Languages
- 10
- Audiences — consumers & producers
- 2
The brief
Tracemont connects buyers and producers in European markets for renewable gas and low-carbon fuels. It speaks to two very different audiences, in ten markets, and has to explain a complex business simply.
The challenge
Buyers want verified supply; producers want qualified buyers. One site had to speak to both without turning generic. And the first chart for the service models looked like a crypto dashboard — the client runs a commodity brokerage, not a trading app.
What I built
A calm, editorial site with a video hero and a switch that tailors the opening message — and the whole colour scheme — to consumers or producers. Animated graphics explain its two ways of working, a converging spot price and a rising long-term curve, and a protected contact form keeps enquiries clean across ten languages.
Inside the build
The parts that do the work
01One switch, two audiences
A consumer/producer switch under the headline rewrites the hero message and swaps the whole colour theme: navy for buyers, onyx for producers.
02Graphics that explain the model
Tracemont Strike: supply lines converging on a ticking spot price. Tracemont Mandate: one rising curve. Each in a light and a dark version.
03Ten languages, full SEO
Every page in ten languages at its own URL, with hreflang links, structured data (financial service, breadcrumbs) and a 48-URL sitemap.
04Video hero that plays on phones
A looping hero video. When a phone blocks autoplay, playback starts on the visitor's first touch or scroll instead of showing a blank frame.
05Protected contact form
A contact form with a hidden honeypot field against bots, a thank-you page and a cookie consent banner (accept or essential only).
06Hosting the client owns
The code lives in the client's own GitHub repository and deploys to Vercel. A password gate kept it private until launch.
Recreated with demo data — no real client information.
Built with
- React 19
- React Router
- Tailwind
- Motion
- Vercel
How it came together
From brief to live
Duration: May – Sep 2026
May 2026
Strategy & planning
Built from the client's site structure and visual identity deck. The first version went to a Vercel preview on 29 May for review.
Jun – Aug 2026
Design & build
Six rounds of written feedback. Round 1 swapped the hero buttons for the consumer/producer switch and the first chart for the convergence and curve graphics.
Aug – Sep 2026
Launch & automate
The full site sat behind a password for the client's final review from 5 August. The password came off on 22 September and the site went public.
Results
Measured on the live site
- Indexed pages
- 48
- Languages
- 10
Measured with Google Lighthouse · Sep 2026
Next step
Want something like this?
Tell me about your project — a first take within one working day, and a fixed price in writing before anything starts.
Step by step · from first call to launch
Have a project in mind? Let's build it.
Tell me what you sell and what you need. I reply within one working day with next steps — or an honest “this isn’t for me”.
Next project