Proyecto rápido hecho por diversión para tratar de recrear unos teclados mecánicos a mi gusto estéticamente placenteros usando únicamente HTML/CSS/JS sin ayuda externa de librerías ni frameworks. El objetivo era intentar recrear la sensación satisfactoria de tipear usando uno de esos teclados a través del sonido y visualmente en pantalla animando el movimiento.
Me dejé llevar un poco y lo que inicialmente era un único teclado terminaron siendo 3 con un theme-selector con su diseño y fondos animados personalizados.
- HTML5
- CSS3(SCSS)
- JS
- Google Fonts
- Git para control de versiones
- Referencia visual de teclados + fondos Iqunix keyboards
- Samples de audio de teclados
- Edición de samples de audio hecha en Audacity
- Imágenes libres de royalties obtenidas de YAWD
- Edición gráfica de imágenes hecha en Adobe Photoshop
A quick project made for fun trying to recreate some aesthetically pleasing mechanical keyboards using vanilla HTML/CSS/JS. The goal was to try and recreate the satisfactory feeling of typing in a mechanical keyboard while recreating it visually on screen and sound.
I got a little carried away and ended up implementing a theme selector that allows 3 color variants all with their own custom background animations.
- HTML5
- CSS3(SCSS)
- JS
- Google Fonts
- Git for version control
- Keyboards + background visual reference Iqunix keyboards
- Keyboard original sound samples
- Sound edition done in: Audacity
- Royalty free Images from YAWD
- Edition on Adobe Photoshop