Construction Dominic Gagné
Site web d’un entrepreneur général
Site web responsive pour un entrepreneur en rénovation du Québec : une identité visuelle forte, des éléments interactifs et un développement assisté par l’IA (Claude Code).
Recréation interactive du site en React. Coordonnées et numéro de licence fictifs, témoignages anonymisés, formulaire simulé : aucune donnée n’est envoyée.
Nature
Projet client
Statut
En ligne
Technologies principales
HTML5 · CSS3 · JavaScript · Vercel
Le projet.
Un site vitrine d’une page, en français, conçu pour présenter un entrepreneur général licencié qui dessert la Montérégie et la Rive-Sud de Montréal, et pour générer des demandes de soumission.
Il présente l’entreprise et ses services (rénovation de cuisines et de salles de bain, agrandissements, construction neuve, portes et fenêtres, revêtement extérieur), une galerie de réalisations, des témoignages, les secteurs desservis, les accréditations, une FAQ et un formulaire de demande de soumission gratuite.
Mon rôle.
- 01Design et développement du site
- 02Intégration front-end
- 03Design responsive
- 04Animations et interactions
- 05Référencement (SEO)
- 06Développement assisté par l’IA avec Claude Code
Fonctionnalités clés.
- En-tête fixe avec ombre au défilement, ancres à défilement fluide et menu mobile
- Hero photo pleine hauteur avec zoom lent et double appel à l’action (soumission ou téléphone)
- Apparitions au défilement (fondu, glissements) et compteur animé « 20+ ans »
- 7 cartes de services et 3 bandeaux image-texte en alternance
- Galerie de 16 photos avec visionneuse sur mesure (précédent, suivant, touches Échap et flèches)
- Témoignages, secteurs desservis et accréditations
- FAQ en accordéon
- Formulaire de demande de soumission avec validation et envoi AJAX (états de succès et d’erreur)
- Liens d’appel direct et barre mobile « Appeler maintenant »
- Référencement : balises meta, Open Graph et données structurées JSON-LD
Technologies.
Site en ligne
- HTML5 sémantique (ARIA, SEO, JSON-LD)
- CSS3 (propriétés personnalisées, Grid, Flexbox, clamp())
- JavaScript vanilla (IntersectionObserver)
- Google Fonts : Manrope
- Formspree
- Vercel (hébergement, Web Analytics, Speed Insights)
- Git et GitHub
Aperçu dans ce portfolio
- React
- TypeScript
- Next.js
- Requêtes de conteneur CSS
Développement assisté par l’IA. Claude Code comme assistant, la direction de mon côté.
Claude Code a été utilisé comme assistant de développement IA tout au long de l’implémentation et des itérations du site. J’ai fixé la direction, pris les décisions de design et de structure, révisé le travail et approuvé le résultat final. Je n’ai pas écrit chaque ligne de code à la main.
L’aperçu interactif de cette page (portage React et Next.js, aperçu responsive par requêtes de conteneur, formulaire simulé) a aussi été produit avec Claude Code.
Points forts.
Aucune dépendance
Environ 930 lignes de HTML, 930 de CSS et 180 de JavaScript, sans framework ni étape de build. Les animations (apparitions, compteur, accordéon, visionneuse) sont écrites à la main.
Responsive
Quatre points de rupture et une typographie fluide avec clamp().
Référencement local
Des données structurées JSON-LD décrivent l’entreprise comme entrepreneur général.
Parcours de conversion
L’appel à demander une soumission revient du hero jusqu’au pied de page, avec une barre d’appel fixe sur mobile.
Identité visuelle
Vert olive sobre, titres Manrope en capitales et vraies photos de chantiers comme moteur visuel.
Site en ligne
constructiondominicgagne.ca (nouvel onglet)À savoir
- L’aperçu est une recréation en React du site en production, qui est écrit en HTML, CSS et JavaScript.
- Les coordonnées et le numéro de licence y sont remplacés par des valeurs fictives, les auteurs des témoignages sont anonymisés et le formulaire est simulé : aucune donnée n’est envoyée.
Projet suivant
Tous les projetsSupport client IA
Chatbot et base de connaissances
Mise en place d’un chatbot de support dans Intercom et développement d’automatisations permettant de structurer la documentation produit qui alimente sa base de connaissances.
De la documentation au chatbot
Des automatisations structurent la documentation produit et la transforment en articles de base de connaissances. Le chatbot de support, dans Intercom, s’appuie sur ces articles pour répondre aux questions des utilisateurs.
Assistant de support
Répond à partir de la base de connaissances