Mon propre chantier
Studio — ce site, celui que vous lisez
J’avais besoin de vendre des sites et des automatisations. J’ai construit ma propre page de vente, seul, avec un budget proche de zéro. Voici les choix que j’ai faits, et ceux que je reprendrais.
Le contexte
Je m’appelle Alexis Le Deunf. Je suis développeur indépendant à Rouen. Au départ, je n’avais pas de client pour témoigner de mon travail. Il me fallait une page de vente crédible pour proposer des sites et des automatisations. J’ai choisi de montrer mes réalisations, d’expliquer mes décisions et d’afficher mes tarifs. Ce site devait lui-même permettre de juger mon travail.
Les contraintes
- Tout écrire en HTML, CSS et JavaScript : aucun constructeur visuel, aucun template, aucun thème acheté.
- Partir avec un budget proche de zéro. Je m’occupe seul du contenu, du code et de la mise en ligne.
- Garder le site rapide sur ordinateur comme sur téléphone. Chaque police, image et interaction doit justifier son poids.
Ce que j’ai fait
- J’ai structuré le parcours : l’accueil présente l’offre, les projets montrent le travail, les tarifs donnent un cadre et la page à propos présente la personne qui répondra.
- J’ai fixé une charte ivoire, encre et laiton, avec des filets fins et des cadres carrés. Bodoni pour les titres, Jost pour le texte : les deux polices sont auto-hébergées en WOFF2 et préchargées.
- J’ai écrit les animations en CSS, déclenchées au défilement par le script commun. Je respecte la préférence
prefers-reduced-motionpour les apparitions et les transitions. - J’ai conçu un script maison pour générer les pages projets et garder leur structure cohérente. La génération et la réécriture des textes passent par la même commande, pour conserver les textes retravaillés.
- J’ai ajouté les balisages structurés en JSON-LD : fil d’Ariane, FAQ et études de cas. Chaque fiche possède son titre, sa description et son URL canonique.
- J’ai prévu une page 404 dans la charte, avec un chemin pour revenir au site.
- J’ai intégré le lien d’évitement, le focus visible au clavier et des contrastes d’au moins 4,5:1 pour le texte. Le menu mobile expose son état avec
aria-expanded. - J’ai placé le site sous Git pour suivre les changements et pouvoir revenir à une version précédente. Les fichiers CSS et JavaScript portent aussi une version dans leur URL pour renouveler le cache après une modification.
Les résultats
| Lighthouse bureau et mobile | 100/100 en performance et en accessibilité |
|---|---|
| Premier écran sur ordinateur | 0,3 s |
| Dépendances | 0 : aucun framework, aucune bibliothèque, aucun CDN |
| Périmètre initial | 9 pages, hors page 404 et présente étude de cas |
Ces chiffres décrivent le site et ses mesures techniques. Ils ne disent pas combien de demandes il apportera. Je n’ai pas de résultat commercial à leur faire dire.
Ce que je ferais autrement
- J’ai d’abord installé le site sur un sous-domaine. J’aurais fixé plus tôt sa place dans le domaine principal : cette adresse me donne aujourd’hui une présence distincte à faire connaître, et un éventuel déplacement demandera des redirections.
- J’ai attendu avant de versionner le code. J’aurais créé le dépôt Git dès le premier fichier : les premiers choix et leurs corrections auraient alors laissé une trace précise.
- J’ai lié la génération des pages à une réécriture de leurs textes. Relancer le générateur seul peut écraser le travail éditorial. J’aurais séparé plus tôt les textes définitifs du code qui assemble les pages.
À voir
Vous êtes sur le site. Son accueil montre le parcours de vente ; les autres études de cas en détaillent les réalisations.
studio
Développement web & automatisation · Rouen
Pour un site ou une automatisation, je détaille mes offres sur la page tarifs. Vous pouvez aussi me décrire votre projet pour que je précise le périmètre et le travail à prévoir.