Yannick Gregoire

For Yannick Gregoire we used Gatsby, a light-weight javascript framework that generates a static website. This makes loading the website really fast. The website is based on a font sized grid. This means, using the custom designed monospace typeface we can extrapolate a grid. The title of the site is "Yannick Gregoire" which is 16 characters wide (including the white space). From here, every heading, subheading or paragraph font is a multiplication of 16, which results in a perfectly aligned grid. Kind of how typewriters produce that same sort of grid.

To stay in the "typewriter / command line" feel we developed an intro based on ascii art. We load a video onto a canvas and then calculate the colour of each pixel, and map that colour to a character. In this case colours are mapped to "x/c=⮐;+,. " going from dark to light.

Furthermore we used a typewriter effect for headings that scroll intro view, and are shown when projects or services are clicked, to amplify this command line aesthetic. Upon opening a project, the project video gets drawn to a canvas in the background for a couple of frames, until the background gets reset.

Using CSS "--variables" implementing dark-mode is a breeze. All we have to do is toggle a class on the body element to invert the colours.