Play

Mi portfolio convertido en un juego de pixel art: mi casa en una calle de Tenerife, vista en diagonal al estilo de Habbo, por la que mi personaje camina entre el jardín, el salón, la cocina, el estudio, el dormitorio, un baño a la japonesa y el garaje. Cada objeto con una bola violeta botando encima abre una parte del contenido real del portfolio.

Objetivo. Que conocerme sea un juego para quien prefiere explorar a leer una lista, sin dejar fuera a nadie: la casa también es una lista de habitaciones y objetos, se lee entera sin JavaScript y con un lector de pantalla, y su contenido es siempre el mismo que el de la web principal.

Qué hace.

• 17 objetos abren el contenido real: el retrato me presenta, la estantería tiene un libro por artículo con su título en el lomo, el ordenador guarda los proyectos y la terminal funcionando en su pantalla, los cuadros cuentan mi carrera, el calendario mi año en GitHub, la nevera lo que me gusta en imanes y el buzón las recomendaciones. Si una sección está vacía, su objeto desaparece.
• Una casa vivida, llena de mis cosas: la impresora 3D, guiños sin logos a mis videojuegos favoritos, el mapa de Canarias o una cafetera que me prepara un café. Casi todo responde con una frase, que puedo cambiar desde el backoffice, se enciende o se usa: me siento en la silla o en el sofá, me tumbo en la cama o me baño en el ofuro. Un perro y siete gatos pasean, duermen, se saludan, se me acercan y piden caricias.
• Siete momentos del día según el reloj de quien la visita: madrugada, amanecer, día, tarde, atardecer, anochecer y noche, calculados con el sol de Tenerife en su fecha. Al anochecer se encienden las ventanas, las farolas y las pantallas.
• Tenerife alrededor: una fachada canaria de cal y piedra, un drago, un tajinaste rojo, el lagarto tizón al sol y, al otro lado del camino, una plantación de plataneras.
• El garaje guarda mis vehículos. Me subo al coche y se abre la vista desde el asiento del conductor: el salpicadero y, con el mando del garaje, la carretera con el Teide al fondo. También monto en la moto y en la bicicleta.
• Se mueve con WASD o las flechas (también en teclados AZERTY), o con un clic o un toque que calcula el camino; en móviles y tabletas hay una cruceta bajo el pulgar izquierdo y una E grande bajo el derecho. Las paredes y los muebles que tapan al personaje se vuelven casi transparentes, así que siempre se le ve.
• Un armario cambia el aspecto del personaje, con un espejo que muestra mi retrato en píxeles, y un engranaje cambia el idioma, oculta todas las paredes o desactiva los atajos de una tecla. Todo se recuerda solo en el navegador.

SEO. Las mismas reglas que la terminal: una página por idioma con su canónica, hreflang y datos estructurados que apuntan a la persona del portfolio principal. Los paneles van antes que el dibujo en el HTML, para que los buscadores los lean enteros.

Accesibilidad. No hace falta caminar: cada objeto es un enlace a su panel, que se abre también sin JavaScript, y la casa se recorre con el tabulador como una lista. Los paneles son diálogos modales que devuelven el foco al cerrarse, una región en vivo anuncia la habitación y el objeto cercano, las ventanas son interruptores con nombre, todos los botones miden al menos 44 px y nada exige arrastrar. Los animales y todo lo que se mueve se pueden pausar, y con el movimiento reducido nadie camina.

Rendimiento. No usa ningún motor de juegos ni imágenes: el servidor dibuja la casa en SVG, sin saltos de diseño. Cada dibujo es pixel art guardado como datos, con un trazo por color y cada color en una variable CSS, así que la noche y el armario solo cambian variables. Los muebles y el paisaje se dibujan una sola vez, todos los dibujos viajan juntos en un archivo SVG que el navegador guarda en caché, y el movimiento es CSS.

Seguridad y privacidad. Solo puede leer el contenido público y contar las visitas y los paneles que se abren, de forma anónima y sin cookies, y el navegador nunca habla con la API. La política de seguridad de contenido usa un nonce por respuesta y los enlaces solo llevan a mis sitios. Lo que se guarda en el navegador se valida contra listas cerradas al leerlo.

Arquitectura y calidad. Next.js con arquitectura hexagonal en siete módulos y 53 archivos de tests, en español, inglés y japonés. Un test camina desde la verja hasta cada baldosa libre y junto a cada mueble, y un script compara los píxeles de cada par de piezas para que nada se superponga sin sentido.

Estado. Construida; se publicará pronto.