Retour au laboratoire
Développement WebProgrammation

Développement de dvernin.com

décembre 2025En cours
Développement de dvernin.com

Ce site n'est pas qu'une vitrine : c'est le meilleur témoin de ma façon d'apprendre et de progresser. Partir d'une base simple, la confronter au réel, me heurter à de vraies limites, comprendre pourquoi elles existent, puis reconstruire mieux — plus solide, plus mesurable.

L'adresse que vous lisez a connu plusieurs vies. Elle a commencé comme un exercice de code artisanal et elle est devenue une plateforme pensée pour être trouvée sur Google et pour transformer un visiteur en client. Voici cette évolution, étape par étape — parce que le chemin en dit souvent plus long que le résultat.

Version 1 — tout à la main, en HTML et CSS

La toute première version de dvernin.com a été écrite ligne par ligne, à la main, en HTML et CSS pur. Aucun framework, aucun générateur, aucune bibliothèque : chaque marge, chaque couleur, chaque animation et chaque media query sortait directement de mon éditeur de texte.

Le site tenait en quelques pages — accueil, services, à propos, projets et contact — et remplissait honnêtement son rôle de carte de visite. Mais surtout, cette approche sans filet m'a obligé à comprendre les fondations du web en profondeur : la structure sémantique d'un document, la cascade CSS et ses subtilités, la logique du responsive design qui adapte une même page au téléphone comme à l'écran large. Ce sont des bases qui me servent encore chaque jour, précisément parce que je ne les ai pas déléguées à un outil au départ.

Version 1 — tout à la main, en HTML et CSS
La toute première version du site, codée intégralement à la main en HTML/CSS.

Premier virage — la mise en ligne sur Vercel

Coder un site sur sa machine est une chose ; le publier proprement en est une autre. Pour bénéficier d'un déploiement continu, du HTTPS automatique et d'une diffusion mondiale rapide, j'ai choisi Vercel, une plateforme d'hébergement moderne taillée pour les applications web.

Plutôt que de tout réécrire à l'aveugle, j'ai converti mon site existant en vibecodant : l'intelligence artificielle comme accélérateur, mon code HTML/CSS comme cahier des charges précis, et moi aux commandes pour valider chaque écran et chaque comportement. Le résultat : le même site, au pixel près, mais désormais déployé automatiquement à chaque modification. Ce fut ma première vraie leçon d'outillage professionnel — et un aperçu concret de ce que le développement assisté par IA permet d'accomplir quand on sait exactement ce que l'on veut obtenir et qu'on garde la main sur le résultat.

Le révélateur — mes premières campagnes Google Ads

Le déclic n'est pas venu de la technique, mais du terrain. En lançant mes premières campagnes Google Ads pour attirer des clients, j'ai découvert l'envers du décor, et il n'était pas flatteur : mon site n'était optimisé ni pour le référencement naturel, ni pour la conversion.

Concrètement, il lui manquait tout ce qui transforme une visite en contact. Pas de balisage structuré pour que Google comprenne qui je suis et ce que je propose. Pas de pages de destination dédiées à chaque service ou à chaque ville. Aucun parcours de contact réfléchi pour guider un visiteur intéressé jusqu'à la demande de devis. Les clics arrivaient — et me coûtaient — mais repartaient sans laisser de trace. En creusant ces sujets (SEO technique, vitesse de chargement, expérience de conversion), un nom revenait systématiquement : Next.js.

Reconstruction complète sous Next.js

J'ai alors pris la décision qui définit ce projet : recréer l'intégralité du site sur de nouvelles fondations. Cette fois, plus rien n'est laissé au hasard — chaque choix technique sert un objectif mesurable :

  • Rendu statique et régénération incrémentale (ISR) — les pages s'affichent quasi instantanément, un critère décisif à la fois pour le classement Google et pour l'expérience du visiteur ;
  • SEO technique de bout en bout — données structurées JSON-LD, images de partage Open Graph générées automatiquement, plan de site, maillage interne cohérent entre les pages ;
  • Des dizaines de pages ciblées — services, zones d'intervention, ressources, portail client… là où l'ancien site en comptait cinq ;
  • Contenu piloté par base de données — projets, avis clients et actualités gérés dans Supabase, modifiables sans jamais toucher au code ;
  • Conversion travaillée — parcours de contact repensés, suivi analytique fin et mesure précise des conversions issues des campagnes.

D'une poignée de pages statiques, dvernin.com est devenu une véritable plateforme — celle que vous parcourez en ce moment même.

Reconstruction complète sous Next.js
La version actuelle : même exigence visuelle, une tout autre mécanique sous le capot.

Un laboratoire permanent

Un site n'est jamais « fini ». Celui-ci est devenu mon terrain d'expérimentation permanent : je mesure le comportement des visiteurs, je formule des hypothèses, je teste, je conserve ce qui fonctionne et j'écarte le reste. Chaque page est l'occasion d'affiner un détail de SEO, de gagner quelques millisecondes de chargement ou de rendre une intention plus claire.

Je conserve d'ailleurs précieusement la toute première version en HTML/CSS. Elle refera peut-être surface un jour, accessible aux curieux qui voudraient mesurer d'un coup d'œil le chemin parcouru — de la page codée à la main à la plateforme d'aujourd'hui.

Un projet d'ingénierie, d'électronique ou de conception en tête ?

Discutons-en