Mode code activé — la page montre sa structure
GLG — AtelierPreprod v0.1
000
⎇ mainhero.tsxUTF-8 · LF · TypeScript ReactPrettier ✓Gary Le Grill — dev
Directeur artistique digital & développeur.
// whoamiDéveloppeur web & apps,
avec l'œil d'un directeur artistique.

WordPress, WooCommerce, React, TypeScript, Supabase, API — du repo à la prod.

Survolez : la lentille montre le design.

Je conçois des identités, des campagnes, des apps et des sites — du concept à la mise en ligne.

Bougez la souris : passez aux rayons X.

GaryLe Grill

Depuis 2002 · Londres → ParisDA · Dev · Apps · IA↓ Scroll
$ git log --since=2002WordPress · React · apps mobiles↓ npm run scroll
( Manifeste — 01 )

Je viens du design, et ça se lit dans mon code : des interfaces fidèles au pixel, des CMS que le client édite seul, des apps qui passent les stores. WordPress pour les marques, React + Supabase pour les produits, Claude dans la boucle — et une relecture humaine.

Quinze ans à imaginer des campagnes pour L'Oréal, Sephora, Renault ou Air France. Aujourd'hui, je les construis aussi : des apps publiées, des sites WordPress, des outils IA. Une même main, du premier croquis au dernier commit.

Ma méthode,
en nodes.

Chaque projet est un workflow : des idées, des modèles d'IA, des choix humains, du code, une mise en ligne. Le workflow tourne sous vos yeux.

Deux pratiques,
un seul atelier.

Glissez la poignée ↔
Brassin
d'hiver
Grimbergen × Au Bureau
Une campagne food & goodies, générée sans shooting — puis déployée en ligne.
Grimbergen × Au Bureau2025
↔
Ce que vous voyez Ce que je construis

projets.json

Statuts réels · survolez : la loupe · cliquez pour ouvrir
studio-pepperandjoyStudio Pepper & Joy
01 · studio-pepperandjoy● en développement

Studio Pepper & Joy

Éditeur React de faire-part : créations structurées, calques, aperçus, back-office des formats d'impression.

{ "stack": ["React 19", "TypeScript", "TanStack Start", "Tailwind 4", "PostgreSQL", "Better Auth", "Sharp", "Docker · Coolify"],
  "flux": "modèle validé → produit WooCommerce (brouillon)" }
tapping-nowTapping Now
02 · tapping-now● migration en cours

Tapping Now

Bibliothèque audio de tapping avec monétisation web et mobile.

{ "stack": ["React", "Tailwind", "Node.js", "Supabase", "Capacitor", "Stripe", "RevenueCat"],
  "flux": "achat store → RevenueCat → droits premium" }
daily-vinyl+bookDaily Vinyl · DailyBook
03 · daily-vinyl+book● en ligne

Daily Vinyl · DailyBook

Un album, un livre par jour. 32 langues, archives, notifications.

{ "stack": ["React", "TypeScript", "TanStack Start", "Supabase", "pg_cron", "OneSignal", "Traduction IA"],
  "flux": "prepare-daily → Supabase + cache → interface" }
radioRadio
04 · radio● Android · Mac · Windows

Radio

Stations issues d'une API externe, recherche, lecture audio, compte unique multi-appareils.

{ "stack": ["Capacitor", "API REST", "GitHub", "Coolify"],
  "flux": "API stations → recherche → URL de flux → lecture" }
assurances-multimarquesAlliance Mutualiste
05 · assurances-multimarques● en ligne

Alliance Mutualiste

Intégration, maintenance, navigation et responsive sur les sites WordPress du groupe : Nostrum Care, MMC, Praeco, Essenza…

{ "stack": ["WordPress", "Elementor", "HTML/CSS", "JavaScript", "UTM"],
  "flux": "page partenaire → lien + UTM → prise de RDV" }
king-okazKing Jouet · King Okaz
06 · king-okaz● environnement de test

King Jouet · King Okaz

Outil de seconde main : recherche par QR code, statuts de suivi, tableau de bord.

{ "stack": ["Bubble", "Postmark", "n8n"],
  "flux": "action magasin → Bubble → API → Postmark → client" }
pepper-and-joy-boutique
07 · pepper-and-joy-boutique● préproduction

Pepper & Joy — boutique

Refonte de la home en plugin dédié, configurateur d'options et de prix.

{ "stack": ["WordPress", "WooCommerce", "Flatsome", "Plugin PHP", "JS natif"],
  "flux": "[pj_home] → pj-home.css + pj-home.js" }

Cas client —
Martell VS.

Pernod Ricard · exploration de key visuals cognac générés par IA, de la bouteille officielle aux déclinaisons.

Voir l'étude de cas →

Apps —
conçues, codées, publiées.

Des produits à moi : je dessine l'interface, je code le front et les données (React, Supabase), je package pour les stores avec Capacitor. Même exigence que pour une campagne — mais ça tient dans la poche.

Inspirez…
Tapping Now — bibliothèqueTapping Now — séance

Tapping Now

Séances audio de tapping contre le stress. Abonnements web (Stripe) et achats in-app (RevenueCat).

Fiche de l'app →
EN DIRECT98.2
Radio — bibliothèqueRadio — découverte

Radio

Stations via une API externe, recherche, lecture audio. Android, Mac et Windows, un seul compte.

Fiche de l'app →
Daily VinylDaily Vinyl — archives
Album du jourDaily Vinyl
DailyBookDailyBook — archives
Lecture du jourDailyBook
WOW
Artiste du jourDailyStreetArt
▶ Press start
Jeu du jourDailyGame

Collection Daily

Une découverte par jour : un album (32 langues, lecteur intégré), un livre, un artiste, un jeu. Un seul système, quatre univers.

Collection →
Collection Daily →

Gary,
en vrac.

Tout se déplace. Lancez les objets.
Et oui : vous pouvez tirer sur ma joue.

Bordeaux voit grand
Brassin d'hiver
Gift Finder
Tessan
Noël magique
Air France 90
2011Londres. Publicis, Saatchi & Saatchi, Ted Baker.
2013Paris. Renault, Nissan, Michelin.
2017 →L'Oréal, Sephora, Air France, Disney.
DA + Devune seule personne.
Tapping
98.2Radio
Vinyl
AaBook
DA ✳
</DEV>
IA inside
Made in Paris ★
gary.jsx
<Gary
  role="DA"
  also="dev"
  ship />
Boarding passLON → PARGate DA · Seat 01
Figma
React
Claude
Midjourney
n8n
WordPress
⚠ Ne pas tirer
sur la joue
~/clients — zsh

  

Sites
WordPress & sur mesure.

Le design ne s'arrête plus à la maquette. Thèmes sur mesure, blocs éditables par vos équipes, intégrations, mise en ligne : ce que je dessine, je le livre.

  • WordPressThèmes · plugins · WooCommerce
  • Front-endReact · JS · HTML/CSS
  • AppsCapacitor · Supabase · Stripe
  • DeployGitHub · Docker · Coolify · OVH
  • IAClaude · Agents · Automations

Le tableau
des éléments.

Ma stack, celle de mes CV et de mes projets en production, classée comme une table périodique. Cliquez un élément : l'éditeur charge du vrai code, et le rendu tourne en direct à côté.

● Rendu livelocalhost:5173
—Ko pour cette page
0framework, 0 librairie
1shader WebGL écrit main
60fps visés partout

Le studio
augmenté.

Neuf compétences, une seule direction. L'IA fait partie du process — le sujet reste la création livrée.

01Cœur

Direction
créative l'œil, d'abord.

  • Concept
  • Identité
  • Key visual
02Code

Dev
WordPress livré, éditable.

  • Thèmes
  • Blocs
  • Perf
03Produit

Apps
mobiles du Figma au Store.

  • UI
  • Android
  • Publication
04IA

Image
générative zéro shooting.

  • Prompting
  • Retouche
  • Séries
05IA

Vidéo
générative films & motion.

  • Casting
  • UGC
  • Brand films
06Jeu

Game
design jouer, convertir.

  • Activation
  • Opt-in
  • AR
07IA

Stratégie
IA les bons outils.

  • Audit
  • Skills
  • Workflows
08Système

Automa­tisation moins de friction.

  • Agents
  • Pipelines
09Proto

Proto­typage tester vite.

  • Lab
  • Démo
  • Interaction
( On en parle ? )
$ ./contact.sh --projetParlons
de votre projet.
On
construit ?

Campagne, site, app, ou les trois. Pas de brief à remplir : un mail suffit.