Yannick Gregoire

For Yannick Gregoire’s website, we used Gatsby, a lightweight JavaScript framework that generates static websites, resulting in fast loading times and a lean digital experience.

The website is built around a typography-based grid. Using a custom-designed monospace typeface, we established a grid derived from the width of the site’s title, “Yannick Gregoire”, which spans 16 characters, including the space. Every heading, subheading and paragraph is then sized in multiples of 16, creating a consistent alignment system reminiscent of the fixed-width structure of a typewriter.

To extend the typewriter and command-line aesthetic, we developed an introduction based on ASCII art. A video is loaded onto a canvas, where the colour of each pixel is analysed and mapped to a character from the sequence “x/c=⮐;+,. ”, progressing from dark to light. The result is a typographic interpretation of the moving image.

We further developed the command-line feel through a typewriter effect applied to headings in the introductory view and to the content revealed when visitors select projects or services. When a project is opened, its video is briefly drawn onto a background canvas before the background is reset.

Finally, the website’s dark mode is handled through CSS custom properties (variables). By toggling a single class on the body element, the colour scheme can be inverted without changing the underlying structure.