De vez en cuando me da por cambiar esta web y probar alguna idea que me parece divertida. La versión anterior acabó siendo una Game Boy: una consola con su carcasa clara, su pantalla verdosa, su cruceta y sus botones, desde la que podías explorar quién soy, mi trayectoria y dónde encontrarme.
Al entrar estaba apagada. Pulsabas POWER, aparecía el logo de Sergi.io, después mi avatar en pixel art y finalmente el menú principal. Mientras tanto, una pantalla lateral se desplegaba para mostrar los posts del blog.
Me gustaba mucho esa idea. Entrar en mi página, encender una consola y pasar un rato tocando sus botones. Era una forma de convertir algo tan normal como consultar un perfil en una pequeña experiencia con la que jugar.
Mejor verlo en movimiento
He guardado este vídeo para que se pueda ver cómo era. Las capturas enseñan el diseño, pero se pierde bastante de la gracia del encendido, las animaciones y la pantalla desplegable.
La consola Sergi.io en acción: encendido, navegación y pantalla desplegable con los posts. Abrir el vídeo.
Por qué elegí una consola
Los videojuegos y los ordenadores han formado parte de mi vida desde el principio. Siempre me ha fascinado que puedas escribir código y hacer que algo reaccione en una pantalla. Pulsas un botón, aparece un personaje, cambia un menú y, de repente, lo que has construido parece tener un poco de vida.
Una consola encajaba bastante bien con todo eso. También me parecía una forma divertida de contar algo sobre mí antes incluso de leer el contenido. Mi trayectoria estaba dentro de los menús, mis enlaces también, y recorrerlos tenía un poco de esa sensación de estar explorando un juego.
Además, era mi web personal. No había un objetivo de negocio ni una conversión que optimizar. Podía probarlo simplemente porque me apetecía. Como con muchos de mis side projects, disfrutar construyéndolo ya era un motivo bastante bueno.
La estética retro ayudaba a que todo encajase: la pantalla verde, las letras pixeladas, el avatar y los sonidos. Las animaciones seguían lo que esperarías de ese objeto: encenderlo, ver aparecer el contenido y guardarlo al apagar.
Vibecoding con GPT 5.6 Terra / Sol
Para construirla usé GPT 5.6 Terra / Sol haciendo vibecoding. Describía lo que quería, los modelos generaban el código y yo lo probaba en el navegador. A partir de lo que veía, iba pidiendo cambios y ajustando la siguiente versión.
La idea inicial era sencilla, pero después aparecían todas las pequeñas decisiones. ¿Qué debería pasar al encenderla? ¿Cómo aparece el avatar? ¿Dónde pongo los posts? ¿Cómo vuelvo al menú? Y luego estaban las proporciones de la carcasa, el tamaño de las letras o cuánto debía durar una transición para que no se hiciera pesada.
Lo que más me gustó fue poder probar esas cosas directamente. Tener una primera versión delante ayuda mucho más que seguir imaginando cómo podría quedar. Ves que la pantalla es demasiado pequeña, que cuesta leer un texto o que una animación no termina de funcionar, cambias algo y vuelves a probar.
Elegí hacerlo así porque quería experimentar con una interfaz que tenía bastante trabajo visual y de interacción. La IA me permitía avanzar y probar variaciones sin dedicar tanto tiempo a escribir cada cambio a mano. Yo seguía teniendo que decidir si el resultado me gustaba, si se entendía y si merecía la pena conservarlo. Ese ciclo de probar, mirar y corregir fue buena parte del proyecto.
Los botones también funcionaban
La consola estaba hecha con Astro, HTML, CSS y JavaScript. La cruceta permitía moverse entre opciones; A abría, B volvía atrás, SELECT cambiaba la selección y START regresaba al inicio. También se podía navegar con el teclado o pulsar directamente las opciones de la pantalla.
El arranque tenía transiciones breves y tonos retro, y el avatar aparecía en grande antes de entrar en el menú. El blog estaba en una pantalla OLED de expansión conectada por un brazo mecánico. Se desplegaba durante el encendido y se retraía cuando apagabas la consola. Ese detalle me parecía especialmente divertido.
También había trabajo menos vistoso: poder silenciar los sonidos, respetar la preferencia de movimiento reducido, cancelar las animaciones al apagar y dejar el contenido disponible sin JavaScript. Por mucho que me gustase jugar con el diseño, seguía siendo una web donde alguien tenía que poder leer los posts o encontrar un enlace.
Ahora hay un Tamagotchi 🥳
Ahora he quitado la Game Boy y la web tiene otro diseño, con el contenido disponible directamente. Pero sigo teniendo ganas de dejar algún pequeño juguete por aquí.
En su lugar he puesto SergiGotchi, un pequeño Tamagotchi con un LLM basado en Qwen 2.5. Puedes cuidar de la mascota y también conversar con ella. Otra mezcla de videojuegos, interfaces e IA que me apetecía probar. ¡Me encanta poder hacer estas cosas!
Quería dejar la Game Boy guardada en este post porque me lo pasé muy bien construyéndola. El vídeo conserva ese momento de encenderla, probar sus botones y ver cómo responde, y también lo que pude hacer con GPT 5.6 Terra / Sol a partir de una idea que me hacía ilusión.
A veces un experimento solo necesita eso: aprender algo, probar una idea y pasar un buen rato construyéndola.
Gracias por leerme, Hack the Planet!