Construction Dominic Gagné
Website for a general contractor
A responsive website for a renovation contractor in Quebec: a strong visual identity, interactive elements and AI-assisted development (Claude Code).
An interactive React recreation of the site. Fictional contact details and license number, anonymized testimonials, simulated form: no data is sent.
Type
Client project
Status
Live
Main technologies
HTML5 · CSS3 · JavaScript · Vercel
The project.
A one-page showcase website, in French, designed to present a licensed general contractor serving Montérégie and Montreal’s South Shore, and to generate quote requests.
It presents the company and its services (kitchen and bathroom renovations, additions, new construction, doors and windows, exterior siding), a gallery of completed projects, testimonials, service areas, accreditations, an FAQ and a free quote request form.
My role.
- 01Website design and development
- 02Front-end integration
- 03Responsive design
- 04Animations and interactions
- 05Search engine optimization (SEO)
- 06AI-assisted development with Claude Code
Key features.
- Fixed header with a shadow on scroll, smooth-scrolling anchors and a mobile menu
- Full-height photo hero with a slow zoom and a dual call to action (quote or phone)
- Scroll reveals (fades, slides) and an animated “20+ years” counter
- 7 service cards and 3 alternating image-text bands
- 16-photo gallery with a custom viewer (previous, next, Escape and arrow keys)
- Testimonials, service areas and accreditations
- Accordion FAQ
- Quote request form with validation and AJAX submission (success and error states)
- Direct call links and a mobile “Call now” bar
- SEO: meta tags, Open Graph and JSON-LD structured data
Technologies.
Live site
- Semantic HTML5 (ARIA, SEO, JSON-LD)
- CSS3 (custom properties, Grid, Flexbox, clamp())
- Vanilla JavaScript (IntersectionObserver)
- Google Fonts: Manrope
- Formspree
- Vercel (hosting, Web Analytics, Speed Insights)
- Git and GitHub
Preview in this portfolio
- React
- TypeScript
- Next.js
- CSS container queries
AI-assisted development. Claude Code as the assistant, with the direction on my side.
Claude Code was used as an AI development assistant throughout the implementation and iterations of the site. I set the direction, made the design and structure decisions, reviewed the work and approved the final result. I did not write every line of code by hand.
The interactive preview on this page (React and Next.js port, responsive preview through container queries, simulated form) was also produced with Claude Code.
Highlights.
No dependencies
About 930 lines of HTML, 930 of CSS and 180 of JavaScript, with no framework and no build step. The animations (reveals, counter, accordion, viewer) are written by hand.
Responsive
Four breakpoints and fluid typography with clamp().
Local SEO
JSON-LD structured data describes the business as a general contractor.
Conversion path
The call to request a quote comes back from the hero all the way to the footer, with a fixed call bar on mobile.
Visual identity
A restrained olive green, uppercase Manrope headings and real job-site photos as the visual driver.
Live site
constructiondominicgagne.ca (opens in a new tab)Good to know
- The preview is a React recreation of the production site, which is written in HTML, CSS and JavaScript.
- Its contact details and license number are replaced with fictional values, the testimonial authors are anonymized and the form is simulated: no data is sent.
Next project
All projectsAI customer support
Chatbot and knowledge base
Setting up a support chatbot in Intercom and developing automations that structure the product documentation feeding its knowledge base.
From documentation to chatbot
Automations structure the product documentation and turn it into knowledge base articles. The support chatbot, in Intercom, draws on these articles to answer users’ questions.
Support assistant
Answers from the knowledge base