Escritorio XP
Empresa: Microsoft Learn
Rol: Microsoft Learn Student Ambassador
Stack: JavaScript, HTML, CSS
Escritorio XP
Mi portafolio de 2021: un escritorio de Windows XP que corre entero en el navegador. Lo escribí siendo Microsoft Learn Student Ambassador, cuando ya me gustaba más hacer juguetes que páginas. El de hoy es un juego 3D, así que al menos soy coherente.
Qué hay dentro
Ventanas de verdad: se arrastran por la barra de título, se redimensionan por la esquina, se minimizan, se maximizan y se apilan según a cuál le hiciste clic. La barra de tareas lleva una entrada por ventana abierta y el reloj va en hora.
Dentro hay mi currículum en los dos idiomas, un buscaminas completo, una calculadora que funciona con el teclado, un Internet Explorer y el léeme.
::carousel images=[{"src": "/media/work-projects/images/escritorio-xp/buscaminas.webp", "alt": "Buscaminas", "caption": "Los ceros se abren en cadena y el clic derecho pone bandera"}, {"src": "/media/work-projects/images/escritorio-xp/apps.webp", "alt": "Varias ventanas abiertas", "caption": "Cuatro ventanas, su barra de tareas y quién tiene el foco"}, {"src": "/media/work-projects/images/escritorio-xp/menu.webp", "alt": "El menú de inicio", "caption": "Las aplicaciones salen de una sola lista"}, {"src": "/media/work-projects/images/escritorio-xp/cv.webp", "alt": "El currículum", "caption": "Se abre en el idioma del navegador"}, {"src": "/media/work-projects/images/escritorio-xp/movil.webp", "alt": "En un teléfono", "caption": "En móvil las ventanas van a pantalla completa y se cambia por la barra"}] height="460px"::
El buscaminas no es una rejilla con bombas
Tiene las tres reglas que lo hacen el de Windows: la primera casilla nunca es mina —las minas se reparten después del primer clic—, los ceros se abren en cadena, y una casilla con bandera no se destapa por accidente. Y el acorde de siempre: clic en un número que ya tiene sus banderas puestas y se destapa el resto de golpe.
Cómo está hecho
HTML, CSS y JavaScript a pelo. Sin framework, sin paso de compilación y sin una sola dependencia externa: ni un CDN, ni una fuente de Google, ni una imagen enlazada de otro sitio.
Por qué el repo se llama «Onboarding»
Por la plantilla que repartía el programa de Microsoft Learn y que forkeábamos todos los embajadores para nuestra página. Seguir plantillas no me gusta, así que la vacié y escribí esto encima. Éramos tantos que aquellas páginas no las revisaba nadie, y la mía se quedó ahí cinco años sin que nadie la abriera.
Lo que encontré al volver en 2026
Que dependía de cinco sitios ajenos y dos ya se habían caído. El botón de inicio llevaba meses enseñando un icono roto porque la banderita venía de Wikipedia y devolvía 400, y la ventana del navegador apuntaba a un dominio mío que ya no existe. Es lo que le pasa a una página que nadie vuelve a abrir.
Ahora las aplicaciones salen de una sola lista y cada una aparece sola en los tres lados: icono, menú y barra de tareas.
::two-columns split="50-50"::
Lo que se arregló
El fondo y los iconos pasaron a vivir aquí dentro —la foto ahora es libre y va acreditada—, la calculadora existe, el navegador abre en pestaña nueva, las medidas volvieron a píxeles —a 2.5vw la barra de tareas medía 64 px en un monitor grande— y el CV es el de hoy.
::column-break::
Lo que se ganó
Sin dependencias de fuera, la Content-Security-Policy se puede cerrar entera a 'self', sin una sola excepción. Antes hacían falta cinco dominios en la lista.
::/two-columns::