Este proyecto es una recreación de la videoconsola Steam Deck utilizando HTML, CSS y JavaScript. La intención del proyecto es practicar y demostrar las habilidades en el desarrollo web.
- HTML5
- CSS3
- JavaScript
- Animaciones Keyframe
La Steam Deck Videoconsola es una página web que contiene una interfaz gráfica que permite al usuario activar una serie de eventos tras presionar un boton de interacción.
La página web cuenta con animaciones keyframe para dar una sensación de interactividad al usuario. La animación del background permite al usuario visualizar el proceso de carga de la textura de la videoconsola. También se utiliza una animación en el botón de encendido/apagado para que se encienda y se apague con un efecto de transición suave.
Para utilizar la SteamDeck Videoconsola, simplemente abre el archivo index.html en un navegador web.
En la pantalla principal, selecciona el boton de encendido y se reproduciran los efectos
Para la creación de este proyecto se creo primero la estructura en un archivo html, seguido en un archivo CSS se generaron los estilos de cada uno de los elementos que componen el proyecto, en un tercer proceso se dividio en dos partes los temas utilizados:
- Dark-Theme
- Empty-Theme Estos contienen las caracteristicas peculares que le corresponden; se realizo la division entre estos archivos con la finalidad de poder realizar un cambio de los temas una vez finalizadas las animaciones correspondientes. Posteriormente se creó el archivo Js y otro para las animaciones.
Este proyecto fue creado por Oriana Infante como parte de su aprendizaje en desarrollo web en el bootcamp de GeeksHub.