skip to content
lav.ren / projects / volta

Volta

The agency's own website, replacing a site that had been running the first generation of its in-house theme. One theme effort, delivered to two live sites at once.

live·2025Design by Volta
Year
2025
Role
Developer at Volta — theme build and front-end interaction
Stack
DrupalTwigTailwind CSSPHPJavaScriptGSAPLottie

The shoemaker’s kids finally got shoes. The agency needed a site that pitched the agency, and the one it had — now offline — was still running the first generation of the in-house theme, a Drupal 9 starter kit that the rest of its client sites had long since moved past. I built the replacement’s theme.

The hero: a video in a hole cut out of the page

The homepage opens on a circle of showreel footage punched through a full-screen colour field. Behind it sits the reason the page feels alive before anyone has scrolled: soft colour blobs that drift on their own timing and lean toward the cursor as it moves.

That leaning is where the work went. The effect could not be expressed one way across both rendering engines, so Safari and Chrome get separate implementations rather than a lowest-common-denominator version that looks wrong in both. A visitor never learns which one they were served, which is rather the point.

A gradient an editor can switch on

A Volta services section, a soft blue gradient bleeding out behind the heading, with rows of service tags scrolling past

The gradient system is not welded to the hero. It is a switch on a paragraph: a block of text or a services block can carry it or not, and that is something an editor ticks rather than something a developer deploys.

Doing it that way costs more up front, because the gradient then has to survive being dropped into containers it was never sized for. It is also the difference between a site the agency can rearrange itself and a site the agency has to file a ticket about. The Lottie animations elsewhere on the page work the same way, with GSAP starting and stopping them as they scroll into view.

Cases, not portfolio

Volta's 'Ons werk' overview page, a grid of case cards over client photography

The work overview runs on a case content type with its own full-page template. An older “portfolio” type covered roughly the same ground, and it was removed once case superseded it rather than left in place as a second way to do the same job.

That is a small deletion with a long tail. An agency site with two competing ways to present the same work gets edited badly: the next person picks whichever one they find first, and six months later the overview is half one type and half the other.

One theme run, two sites

The theme is a copy-and-rename of the shared in-house starter rather than a from-scratch build, which is exactly why it shipped on the schedule it did. Drupal 11, Twig, Tailwind, and a set of paragraph types the editors compose pages out of.

It was also not built for one site. The same run went out to deschoolbrug.be at the same time, near-identical file for file — one effort, two live sites, and one place to fix anything that turned out wrong.

It is the site the agency has pitched itself with since 2025.

TILL SLIP

  • First commit2025.01.20
  • Last commit2025.06.04
  • Commits by me80 of 500
  • Sites sharing this theme2

Share of the repo16% — on the theme end, over four and a half months.

made of

  • 01Drupal
  • 02Twig
  • 03Tailwind CSS
  • 04PHP
  • 05JavaScript
  • 06GSAP
  • 07Lottie

not returnable · it shipped