06L'Abeille Angloye Qui RitDelivered

“the club's website ranks well but it's really old, could you give it an update?”

a beekeeping association, in Anglet

A site painted in layers, that the association runs itself.

A scene painted in three planes, a bee flying above it, a typeface drawn for a single title. And behind it all, a calendar the committee updates from its own inbox, with no password.

From the first file to the site online
5 days
What's left of it today
The association publishes on its own, with no password
Build
12 June to 1 July 2026

See the public mockup→ Design, code, launch and handover, solo

L'Abeille Angloye Qui Rit

L'abeille
d'Anglet
prend
son envol.

Entre transmission du savoir, communauté autour de l'apiculture et lutte contre le frelon asiatique, découvrez l'association.

Poser une question→
The site's hero, rebuilt with its real layers. The planes arrive out of register and settle back into place in 2.5 seconds; after that the pointer moves them just as it does on the site (PortailHero.tsx). Nothing moves on touch or under reduced motion.

What the sentence meant

Search ranking was, for the association, the one asset not to break. Everything else could move, on one condition: that the people who run the association, amateur beekeepers, could go on using it without help.

Here is what was there before.

The old site: a honeycomb-patterned banner, the association's round logo, four menu entries, a photo banner of bees on a frame with the word Bienvenue, and three lines of welcome text.
The home page.
The Adhésions page of the old site: a three-column table, Donateur, Adhérent non pratiquant, Adhérent pratiquant, with four Adobe PDF icons, and an animated drawing of a hive at the bottom.
Memberships: a table and four PDFs.
The Contact page of the old site rendered with no stylesheet: at the top, a PHP Deprecated error message naming a Google Map plugin, then underlined blue links and a bare form.
The Contact page.

Joomla, a weather widget frozen in January 2019, a form behind a captcha. None of it was carried over.

What was built

Everything was built twice over, so they could choose

The association is a committee of amateur beekeepers. Asking them “which art direction do you prefer?” on paper would have got nowhere. So at every decision, instead of one proposal, I built two or three, complete and there to be looked at on a screen. They decided, and the green light opened two or three new branches underneath.

The nineteen days of the build are not nineteen days of code: they are the time it takes to walk down that tree, one decision after another.

THE ART DIRECTION backlit five plates, one kept THE BEE IN THE HERO the one that flies, cut out and looped THE HERO ON A PHONE Immersion Editorial Diptych three approaches mocked up, one kept and so on: the navigation, the cards, the footer, the title typeface. One branch closed, two opened.

A painted scene, cut into planes

The hero is a hive frame held up against the light, its cells glowing through, a blurred meadow behind. Two images were generated under a single style contract (naturalist plate, gouache and watercolour, a palette of wax, sepia and meadow green, never a 3D render), then cut up locally: the master becomes a background and a pierced scene, the accents plate becomes cut-out flowers and bees. The offset between the layers is what makes the depth.

TWO PAINTED IMAGES the master, 16:9 the accents plate, 3:2 THE CUT-OUT, DONE LOCALLY pixels of light hollowed out edge feathered over 14 px paper ground made transparent wings hollowed out, veins kept THE STACK, BACK TO FRONT 1 · background 2 · pierced scene 3 · flowers 4 · bees 5 · bee on the thread video on a transparent ground 893 KB for the layers, 364 KB for the video THE SCREEN title, token, cards

The hole was not cut out by hand. A small program looks for the light in the image, erases it, and softens the edge so that no cut shows: a halo has no outline. The bees had a pass of their own, one that keeps the line and makes the wings translucent. Glass wings, that sit on any background.

The two images are laid one on top of the other. The button pulls them apart.

La couche d'arrière-plan, seule : la prairie floue au soir, deux ruches pâles, les herbes à contre-jour.1 · arrière-plan
La scène, seule : le cadre de ruche peint, dont les alvéoles lumineuses ont été évidées ; un damier montre la transparence.2 · scène trouée
Un accent détouré : une tige de bourrache aux fleurs étoilées bleu pâle, sur fond transparent.Un accent détouré : une abeille peinte, posée, vue de dos, ailes translucides.3 · accents
L'abeille au fil, une image de la vidéo à fond transparent : une abeille en vol vue de trois quarts, ailes ouvertes.4 · abeille au fil

The site's real layers: the background, the scene and its hole, two accents, the bee on the thread. Stacked, they make the hero.

The pointer moves each plane at its own speed

FOR A POINTER AT THE EDGE, EACH PLANE SLIDES BY THE BACKGROUND 22 px the ground, seen through the hole THE SCENE 10 px the pierced plate THE BEES 22 to 30 px breathe, move aside THE FLOWERS 38 to 46 px the foreground, blurred smoothing: 6 % of the gap per frame breathing: 2.2 px over 2.4 s repulsion: 400 px radius, no bounce
The site's hero on a wide screen: on the left, the title L'abeille d'Anglet prend son envol in Arverna capitals on the cream veil, its paragraph and the wax token Poser une question; in the centre and on the right, the painted scene, the hive frame against the light and its glowing cells, bees in flight, a pale hive in the blurred meadow, borage and lavender flowers in bokeh; the three glass cards at the bottom right.
Wide screen.
The site's hero on a phone: the painted plate full screen, the wordmark and the menu button at the top, the title L'abeille d'Anglet prend son envol in cream Arverna capitals on a warm veil, the subtitle, and the Poser une question token.
Phone.

A typeface drawn by hand, for this project alone

The site's title is set in a typeface that exists nowhere else: Arverna, drawn for this project from the name laid out in solid letters on the front of a Basque house. The letters of the sign were vectorised, the missing letters completed from a reference alphabet, and the whole assembled into a font of 80 glyphs: capitals only, figures, accented capitals, punctuation, a floral ornament on the middle dot. It weighs 16 KB, and it is what gives the site its identity, taken off a wall in the region.

Photograph of a house name plate: the word ARVERNA in solid serif letters, framed by two rosettes, on a pale wall streaked with the shadows of leaves.
The starting photograph, taken on site especially for this project.

L'abeille d'Anglet prend son envol.

ABCDEFGHIJKLM
NOPQRSTUVWXYZ

0123456789 ÀÂÇÉÈÊËÎÏÔÙÛ

·ARVERNA·

The middle dot draws the floral ornament from the sign.

The images, and what they are

Not one image on the site is a photograph taken in the field. All of them are painted or generated under the same style contract, and the caption of each says so, on the site as here.

Close-up of a bee resting on pine needles beaded with droplets, in warm light; the downy thorax, a pellet of pollen on the back leg, the cream background blurred.
GeneratedA bee on a pine branch, an image generated (Gemini) for the section on wildlife. It is not a photograph, and the site does not let anyone think it is.
A comparison on a branch: on the left a honey bee, stocky and downy with amber stripes; on the right an Asian hornet, distinctly larger, with a black thorax and a dark abdomen ringed with orange, and yellow-tipped legs. Generated image.
GeneratedBee and Asian hornet side by side, an image generated on 22 June 2026 in three passes (Gemini), the hornet brought back to its true scale, 1.8 times the bee. An illustration for the hornet card, not a photograph from the field, and the site says so.

The phone, studied on its own

The plate is wide, the phone screen is tall: where do you put the text? Three compositions were mocked up, with the real type and the real copy. Immersion was the one kept: the plate full screen, a warm veil at the bottom for legibility, and a single flat image, lighter than the layers.

The three approaches to the mobile hero, side by side in phone frames: Immersion, the text on the plate; Editorial, the text on cream with the plate in a window; Diptych, the light melting into the cream. Same copy, same Arverna type.
The three mockups put forward to steer the mobile version.
The Immersion approach, the one kept: the plate full screen, the bee at the top right, the title in cream Arverna set in the light, the subtitle and the Poser une question link.
Immersion, the mockup that was kept.
The mobile menu open: a warm ink ground with a honey glow, five destinations in large Fraunces letters anchored at the bottom, Contact in honey.
The menu: five destinations, within the thumb's reach.

The site keeps itself up to date without a password

WHEN THE COMMITTEE CHANGES THE CALENDAR the committee an email a signed link valid 15 min no password COMMITTEE SPACE 8 h session calendar, access, messages a commit THE REPOSITORY through the GitHub API content/agenda.json Vercel THE SITE redeployed ON THE 1ST OF EACH MONTH, AT 8 AM GITHUB READS BACK the site's content scripts/verif.mjs “checked on” notes over a year old legal fields still empty past events, empty calendar dead external links four checks ! one issue, one email only otherwise, silence and the issue closes

Somebody on the committee types in their email address and receives a link, valid for a quarter of an hour. The click opens the management space for eight hours. There is no password to remember or to lose, and taking an address off the list cuts its access on the spot.

When the committee saves the calendar, the site rewrites itself and puts itself back online on its own. Access rights and where the form's messages go travel the same road.

And the site reads itself back. On the 1st of each month at 8 am, it goes over its own content: information checked more than a year ago, legal notices left empty, events already past, links that lead nowhere any more. If it finds something, it says so, once, with the list. If it finds nothing, it keeps quiet. Nobody has to think about it: the site is the one keeping watch over itself.

What is coming next

The result

“Ranks well but really old” became: 5 days from the first file to the site online, 19 days to the handover (the time it takes to walk down the tree of choices, two or three branches built at every level), and a booklet handed to the committee. The association has its hands on its own calendar, with no password.

  1. 12 June 2026First commit

    111 files: five art directions built in full, so the association could decide on the evidence. The backlit hive wins.

  2. 17 June 2026Online

    The chosen direction takes the root of the production address.

  3. 1 July 2026Handover

    A PDF booklet handed to the committee: the management space, the domain, the public launch.