Awards
AWWWARDS / 2022
Site Of The Day / SOTD
AWWWARDS / 2022
Developer Award
AWWWARDS / 2022
Honorable Mention
CSS DESIGN AWARDS / 2022
Website Of The Day / WOTD
CSS DESIGN AWARDS / 2022
Special Kudos Award
Best UI / Best UX / Best Innovation
Adobe Behance Gallery
Adobe Behance Interaction (UI/UX) Gallery
Info
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.