Websites / WordPress website

Leclo

An editorial, bilingual website for a boutique marketing agency in Outaouais.

Visit site ↗︎

Leclo — project preview
WordPressPHPJavaScriptCSSFR / EN

The challenge

Leclo is a boutique marketing agency in the Outaouais region of Québec that builds brand identities, visual content and social media strategies for brands such as Lululemon, Land Rover and local businesses. Its own website had to feel like a fashion magazine rather than a typical agency site, show the work up front, and speak to both French and English clients.

My contribution

Built the site as a set of custom page templates on Blocksy: home, services, work, about and contact, each hand-coded with its own layout and styles. The design is editorial and image-led, with large serif typography, a full-screen hero, a client logo strip, image cards for each service and a carousel of the agency's creations.

How it works

Every piece of text on the site carries both its French and English version, and a language menu in the header switches the whole page instantly in the browser, including the navigation and the mobile menu. Sections reveal as they enter the screen with an IntersectionObserver, the client logos scroll in a marquee, a custom cursor follows the pointer on desktop, and the mobile layout has its own full-screen menu with a language toggle.

PROJECT FLOW / Visitor journey

An editorial route to the agency

  1. Choose French or English

    The header switches the page text in the browser.

  2. Discover the services

    Explore the agency’s service cards and editorial sections.

  3. Browse the work

    View creations, client logos and supporting content.

  4. Reach the contact page

    Continue through the desktop navigation or mobile menu.

IntersectionObserver reveals sections on scroll; the language switch also updates navigation.

What it covers

Outcome

A distinctive, magazine-style site that presents Leclo's services and work to French and English clients in the same visual language as the brands it creates.