Isometric Qwerty Keyboard

August 2020


Without lingering too much on the US Open tennis court pixel art construction (lol), I suddenly have the urge to try constructing isometric views purely with CSS (as deep down we all know CSS is holy powerful if you decide drill into it...)
The idea of a QWERTY Keyboard is very random, so I cannot recall and detail out the reasonings (mega-lols). I realise my 'sudden' obsession with isometric view wasn't all that sudden when I look at the logo of Ctrl N Code, which we created around 4 years ago.
Doodle mainly using CSS transform, and add typewriter sound with HTML audio API as the keyboard starts typing. It's interactive, by hovering, typing on actual keyboard or play designated paragraphs.

CSS transform

Built with Gatsby ^5.3 + Notion Email šŸ“„Ā Twitter šŸ’¬Ā Github šŸ‘©ā€šŸ’»Ā LinkedIn