Recrean Windows XP como portafolio
(mitchivin.com)- El diseñador gráfico Mitch Ivin recreó su sitio de portafolio con estilo Windows XP
- Es necesario tener JavaScript activado para experimentar todos los efectos visuales y funciones
- Todo el sitio imita fielmente la sensación y las interacciones del escritorio de Windows XP
- Los visitantes pueden explorar libremente la interfaz de usuario de inicio de sesión, el menú Inicio, la barra de tareas y más
- La experiencia del portafolio en sí misma resalta una singular capacidad de diseño de interfaces
Mitch Ivin — Introducción al sitio web de portafolio
- Mitch Ivin es un diseñador gráfico que implementó su sitio web de portafolio con gran detalle para que se vea como el entorno de escritorio del sistema operativo Windows XP
- En la pantalla inicial, los visitantes pueden ver elementos visuales que recuerdan al uso real del sistema, como la imagen de fondo de Windows XP (Bliss) y la animación de arranque
- El inicio de sesión se realiza al hacer clic en “Mitch Ivin”, y tras ese proceso el usuario puede navegar el sitio como si estuviera usando un escritorio real
- En toda la UI hay elementos como la barra de tareas, el menú Inicio, el ícono de perfil de usuario y los botones de reinicio y cierre de sesión, que reflejan fielmente la atmósfera y la UX del sistema operativo real
- Este sitio es un portafolio creativo que muestra sus habilidades de diseño y desarrollo frontend a través de la propia “experiencia”, además de ser un ejemplo divertido de interacción web
Funciones y características principales
- El funcionamiento completo requiere JavaScript obligatoriamente
- Al usar la tecla F11 en pantalla completa, la experiencia se acerca más a la de un escritorio real
- Ofrece botones de acceso directo a perfiles externos y trabajos en LinkedIn, GitHub e Instagram
- En dispositivos móviles, aplica animaciones pensadas para el usuario, como una ventana de aviso que pide girar el dispositivo a modo vertical
- Cada ícono, botón y animación tiene un diseño con propósito, es simple y transmite intacta la esencia original de Windows XP
Composición de la interfaz
Pantalla de escritorio e inicio de sesión
- En la pantalla inicial se muestran la imagen de fondo de Windows XP y la animación de arranque
- Al hacer clic en el ícono de usuario “Mitch Ivin”, se inicia el proceso de inicio de sesión
- Tras iniciar sesión correctamente, se activan interfaces como la barra de tareas y el botón Inicio
Barra de tareas (Taskbar) y menú Inicio (Start Menu)
- Se muestra una barra de tareas muy similar a la de Windows XP real
- Incluye botones visuales como Restart (reiniciar) y Log Off (cerrar sesión)
- Al hacer clic en cada botón, se presentan interacciones como en un sistema operativo real
Resumen
- El sitio de portafolio de Windows XP de Mitch Ivin ofrece una presentación personal diferenciada con una UI/UX con personalidad
- Los visitantes no ven solo una lista de proyectos, sino que experimentan un portafolio interactivo de primera mano
- Es un caso de diseño de interfaces y branding que puede servir de referencia para diseñadores digitales y desarrolladores frontend
3 comentarios
Comentarios de Hacker News
La verdad, este proyecto me gusta bastante; creo que está realmente muy bien logrado.
Pero como se presenta como "diseñador gráfico" y rehízo Windows XP tal cual, me queda la sensación de que no se puede ver de inmediato cuánto dominio tiene de un lenguaje visual propio.
Si ves los otros proyectos debajo del ícono de IE, se nota un poco más su estilo personal, pero como algunas partes visuales parecen generadas con IA, eso me baja un poco las expectativas.
La UX también se siente algo rara; por ejemplo, el control del historial funciona como un carrusel dentro del portafolio. Yo esperaba que al presionar atrás/anterior volviera al menú de proyectos, pero no pasa eso.
Si alguien me mandara una postulación con un portafolio así, sí le daría una entrevista. Sin duda impresiona el esfuerzo invertido y el nivel de calidad alcanzado.
Pero lo que mencioné arriba, sobre todo la falta de un enfoque centrado en el usuario, me preocuparía y definitivamente querría preguntarlo en la entrevista.
Y por si acaso lo aclaro: yo también podría hacer un diseño así. En la práctica esto es lo mismo que implementar una propuesta que te entrega un diseñador UX, y he hecho mucho de ese tipo de trabajo.
Me preocupa que suene decepcionante, pero de todos modos es un trabajo bastante genial, me gustó, y como portafolio sin duda puede servir en muchos lados para pasar la “primera barrera”. Solo espero que recuerde que mostrar su verdadera habilidad viene en el siguiente paso.
Cuando dices que de verdad tú también podrías hacer este diseño y que no tienes mucho sentido del diseño, me gustaría preguntarte si de verdad puedes afirmarlo con tanta seguridad.
He visto muchísimas interfaces que imitan XP y siempre tenían algo que se sentía raro.
MitchIvin quizá no haya hecho una copia perfectamente idéntica de XP, pero al menos la experiencia de uso es bastante agradable.
Tengo preocupaciones parecidas.
Como proyecto aislado es interesante, pero si la idea es una réplica de XP, ya existen casos mucho más precisos.
Como portafolio, de hecho, creo que puede generar un efecto más bien negativo. En el diseño actual es mucho más importante mostrar algún intento original.
Se suele juzgar el diseño gráfico solo por el dominio de programas o como la habilidad de dibujar algo vistoso, pero en realidad es comunicación: diseñar visualmente un mensaje considerando restricciones, público, emoción, etc.
No hay atajos, así que hay que estudiar diseños ya existentes y practicar qué quieres mostrar tú con color, layout, tipografía e imagen.
También conviene dibujar por cuenta propia, y es mejor evitar la IA generativa hasta que uno domine bien lo básico por sí mismo.
En esta etapa, como portafolio, me deja con la sensación de que le falta bastante para ser memorable y necesita más práctica.
Aun así, terminarlo y llevarlo hasta lo más alto de HN merece muchísimo reconocimiento, y ojalá esta oportunidad sea un punto de inflexión para que siga creando cosas.
El hecho de que alguien piense “tengo curiosidad por esta parte y podría contratarlo de forma condicional” significa que este sitio ya cumplió la función de un portafolio.
Un portafolio basta con que despierte en alguien la curiosidad de decir “quiero conocer a esta persona”.
En el fondo, su rol es tocar la primera puerta; no se supone que consiga el trabajo por sí solo.
En realidad, el diseño gráfico no es arte.
Es una forma de comunicación que usa texto, imágenes y layout de manera estratégica para transmitir información visualmente de forma efectiva.
La originalidad importa más en branding, temas de copyright, o cuando uno toma cultura existente y la reutiliza sin filtro.
La pregunta más importante es: "¿Por qué quieres mostrarte a ti y a tu portafolio a través de Windows XP?"
Lo que a mí me transmite es, sobre todo, capacidad técnica.
Probablemente la intención sea apelar a la nostalgia de clientes del sector tecnológico, especialmente si busca trabajo freelance.
Si yo fuera director de arte, no lo llamaría a entrevista, aunque probablemente este portafolio no estaba hecho para directores de arte.
Y eso de “yo también podría hacer esto” es algo que se escucha mucho en trabajos de diseño.
La implementación es, de hecho, la parte más fácil del diseño; este portafolio tendría que verse mejor que XP, y ahí es donde está la habilidad.
Cuando se contrata a un diseñador, a nadie le interesa qué tan exactamente reprodujo la rareza de XP.
Si es desarrollador, que pueda implementar algo así es lo esperable, así que no sorprende tanto.
Más bien me impresiona más cuando un desarrollador presta atención a la buena tipografía o al layout. En realidad, lo más difícil es decidir qué elementos van en pantalla y cómo se estructura la información.
Qué incluir y cómo estructurarlo es la clave del éxito.
Yo sí querría contratar a esta persona.
Tiene empuje, perseverancia y creatividad en un nivel que lo diferencia de la competencia.
Miles de usuarios de HN, sus amigos, periodistas de tecnología y muchas más personas disfrutaron este trabajo, y todavía más gente lo conocerá.
Conseguir trabajo no está nada fácil hoy en día, pero si muestras un estilo así, las ofertas van a llegar sí o sí.
De hecho, yo también tengo que actualizar pronto mi portafolio, y esto me inspiró a intentar algo parecido.
Vi que lo presentan como un “portafolio personalizado estilo XP con atención al detalle”, así que quiero hacer algunas observaciones puntuales.
Si yo hubiera hecho algo así, habría omitido el arranque y la pantalla de login. Sobre todo, sería mejor mostrar About Me de inmediato al iniciar para que el cliente lo encuentre fácilmente.
Si haces doble clic en el ícono de la esquina superior izquierda de la barra de título, la ventana debería cerrarse. A diferencia de hacer clic en el cuerpo de la barra de título, eso no maximiza: cierra, que era el comportamiento original.
Creo que el arranque y la pantalla de login aportan bastante al encanto de toda la recreación.
Ese tipo de detalles minuciosos y la inmersión del usuario son puntos realmente importantes en proyectos GUI.
Se siente más fluido que el Windows XP real.
Es difícil de explicar, pero definitivamente tiene un atractivo especial desde el punto de vista UX/UI.
También es interesante cómo se integra de forma natural con la jerarquía de pestañas del navegador.
Gracias a la pantalla de inicio, el login y el sonido, logra muy bien la sensación de entrar a “un espacio propio”.
Sea Windows o cualquier otra cosa, si va rápido se siente mucho mejor.
Tiene que responder en menos de 20 ms para que no se perciba demora y se sienta fluido.
Totalmente de acuerdo.
Estoy usando la beta de macOS 26, pero este clon de Windows XP hasta se siente como una mejora.
La razón es que es simple, rápido y ya sé perfectamente cómo usarlo.
Los Windows antiguos eran flojos para multitarea porque corrían en un solo núcleo, pero justamente por eso ayudaban a concentrarse.
En los sistemas operativos modernos, uno termina repartiendo decenas de ventanas y cientos de pestañas entre varios espacios de trabajo y monitores, y eso se vuelve agotador.
La nostalgia es un factor importante, pero el sonido del login tiene algo adicional que atrae.
Me pregunto si también habrán probado hacer clic en logout.
La velocidad de interacción de la UI es muy alta.
Muchas UI modernas solo hacen rápidas algunas transiciones, pero en conjunto responden lento, y por eso se sienten raras.
Si soy honesto, es interesante, pero siento que el enfoque está algo equivocado.
Entré al ver que se presentaba como “diseñador gráfico”, y al final se siente básicamente como una simple copia del diseño antiguo de otra persona.
También se nota la imagen de IA en la pantalla de login y los íconos que se mueven raro al pasar el mouse.
No recuerdo que Windows XP tuviera ese tipo de efecto, así que hasta dudé si era un bug extraño.
Ahí fue cuando empecé a perder confianza.
Siendo “diseñador gráfico”, usa gráficos generados con IA, y me hizo preguntarme si también delegó la escritura del código de forma similar.
También me resultó frustrante la forma en que muestra el currículum como si fuera un PDF falso.
Varios proyectos están atrapados en ventanitas pequeñas y cuesta verlos bien, y dos de ellos solo muestran animaciones de carga.
Dijo que al principio no tenía experiencia programando, que recibió ayuda de agentes de IA y que “todas las decisiones las tomó un humano”, pero si no tenía habilidad para escribir el código por sí mismo, me pregunto si en la práctica la capacidad real de decisión no la tuvo más bien el LLM.
También me da curiosidad si realmente se siente capaz de volver a hacer este proyecto desde cero por su cuenta.
Es un proyecto interesante y cool, pero como portafolio me da pena que al final termine subestimando su habilidad real.
Además, ya hay muchos casos parecidos win32.run
Antes había intentado publicar esto, pero no pude, y me dio pena.
Me alegra ver que ahora todos lo están disfrutando.
Como recién me registré en HN, yo también quiero ganar algo de karma.
(Soy moderador).
Volví a publicar el Show HN que habías subido originalmente y fusioné también los comentarios.
Además marqué tu cuenta como normal para que no tengas que preocuparte por caer en el filtro de spam.
¡El acabado está buenísimo! Creo que lograste expresar muy bien la vibra de XP e incluso el espíritu de esa época.
Si de verdad hubiera existido en Windows XP una app profesional para “crear portafolios” y el resultado tuviera este nivel de calidad, creo que todos reconocerían que sería un producto impresionante y hermoso.
Es un gran trabajo que muestra tu habilidad y, al mismo tiempo, recrea la belleza de Windows XP de forma moderna e histórica.
¡Está demasiado bien hecho! Es una obra increíble.
En mi navegador (Chrome 138, Windows 10), el menú Inicio aparece unos segundos, se muestra brevemente y desaparece enseguida.
De verdad tiene un nivel de acabado altísimo, un resultado excelente.
Como usuario de XP, este trabajo realmente me encanta.
Si me pongo un poco obsesivo con los detalles:
Yo lo veo como un homenaje: un caso donde la estética clásica de Windows XP se mezcla con una expresión nueva de su época y se actualiza con elegancia.
Reinterpretar y heredar el arte y el estilo de esta manera, en clave moderna pero respetando sus raíces, es una forma común en que evoluciona la sensibilidad estética.
Lo de las pestañas de la barra de tareas: sí, es una observación correcta y le dediqué muchísimo tiempo a intentar que quedara bien.
Al final no quedó exactamente igual, pero creo que logré algo muy parecido.
El resto son decisiones estéticas intencionales. De hecho, creo que hay una diferencia importante que nadie ha mencionado.
Cuando arrastras para seleccionar íconos en el escritorio, el resaltado se parece mucho más a Windows 11 que a XP.
Esa era una parte que yo también quería mejorar más adelante.
Este trabajo es realmente genial, pero me deja con dos puntos flojos.
Primero, no termina de sentirse del todo como una “computadora”. Por ejemplo, si al escribir "dir" en la línea de comandos hubiera una interacción divertida, sería mucho más interesante.
Segundo, la calidad del contenido dentro del portafolio no está a la altura de la sensación que transmite el sitio web. El sitio es de altísima calidad, pero cuando ves los otros trabajos del autor se sienten demasiado simples y vacíos.
Aun así, en conjunto sigue siendo un buen proyecto.
Es un trabajo realmente increíble.
Cada vez que lo veo me hace extrañar el estilo visual de Windows XP.
XP fue el único Windows que realmente intentó ser “divertido”, al punto de poner un perrito mascota en los resultados de búsqueda.
La barra de tareas de abajo también parecía un juguete de Fisher Price, y hasta extraño a Clippy.
Echo de menos esa época en la que el software profesional permitía ese nivel de alegría.
Y aparte, el estilo de tu avatar me recuerda a Simpsons o Bob's Burgers, lo cual me llamó la atención.
Es una obra impresionante, pero me da la impresión de que necesita una reflexión más profunda.
Entre copia y creación existe una tensión fundamental.
Claro, muchas obras nacen de marcos previos. Por ejemplo, en las novelas policiales casi siempre aparecen fórmulas como un cadáver, una botella y diálogos ingeniosos. Pero el verdadero arte está en reinterpretar ese marco a tu manera.
Puedes dejarle la línea narrativa a la IA, pero las elecciones, la voz, la fricción y esa verdadera “presencia” o alma las tiene que aportar una persona.
Aquí siento que falta esa “presencia”.
El proyecto está bien hecho, pero simplemente se siente como Windows XP: bonito de ver, pero plano.
Respeto el esfuerzo y el proceso de aprendizaje del autor, pero al final se siente como una “copia”.
Si yo fuera el protagonista de esto, pensaría que este es el primer paso. “Ya terminé la copia; ahora, ¿qué podría mejorar? ¿Qué partes podría cambiar, en cuáles podría arriesgarme? ¿No podría mostrar un antes y un después?”
La cuestión real es por qué detenerse en la imitación: ¿por qué no ir más allá del límite de la copia, mejorarla, expandirla, volverla propia?
Al colaborar con IA, vale la pena pensar seriamente cómo mostrar un punto de diferenciación personal, o un “alma”, en medio de plantillas infinitas e iteración rápida.
(Por cierto, este texto también lo revisé con Grammarly; me vino a la mente esa famosa frase de “un hombre debe conocer sus límites”).
Una combinación de un proyecto grande y expandido, más un proyecto de copia limpio y memorable, puede resultar más atractiva para quien revisa muchos portafolios rápidamente.
Pero sí, al final coincido en que el portafolio necesita variedad y equilibrio.
Me encanta muchísimo.
Si me pongo obsesivo con algunos errores simples de XP:
Lo veo como un gran homenaje o una reinterpretación moderna de un estilo clásico.
Es un proceso de evolución auténtica: combinar una estética clásica con sensibilidad contemporánea para mostrarla de nuevo sin perder sus raíces.
Lo de las pestañas de la barra de tareas es un señalamiento correcto, y de verdad invertí muchísimo tiempo en eso, pero no logré que saliera idéntico y hasta cierto punto me rendí.
Todo lo demás son decisiones estéticas. De hecho, hay algo que nadie ha mencionado: cuando seleccionas íconos del escritorio arrastrando, se parece mucho más al estilo de Windows 11 que al de XP.
Personalmente también pensé que eso necesitaba cambios.
Es una pieza muy genial, pero le falta un poco esa sensación de “parece una computadora de verdad”.
Por ejemplo, si al escribir ‘dir’ en la línea de comandos apareciera alguna interacción pequeña, sería muchísimo más divertido.
Lo segundo es que el contenido del portafolio es demasiado simple y no combina con la calidad del sitio.
En general, sigue siendo un buen proyecto.
Es un trabajo realmente increíble.
Siempre que lo veo me da nostalgia por el estilo de la era Windows XP.
XP fue el único Windows que perseguía de verdad lo “divertido”, con un perrito adorable como mascota, una barra de tareas que parecía un juguete de Fisher Price y cosas como Clippy.
Se extraña esa época en la que hasta los programas profesionales podían ser así de juguetones.
Y además, el avatar tiene una vibra tipo Simpsons/Bob's Burgers que resulta muy llamativa.
Este proyecto está buenísimo.
Muestra muy bien tu habilidad, capacidad de aprendizaje, perseverancia y atención al detalle.
A diferencia de quienes critican que sea una copia o que tenga fallas en ciertos detalles, yo no creo que ese sea el punto importante.
Es un proyecto genial, felicidades.
Hola, soy un desarrollador backend que está trabajando en un portafolio muy similar a esta publicación. Aunque todavía estoy haciendo ajustes finales, dejo este comentario para ver si yo también podría recibir una retroalimentación honesta y crítica.
Si no hay problema con dejar un comentario así, compartiré el enlace de mi portafolio.
+) Y como es mi primera vez aquí, también me gustaría saber si usar un estilo de escritura informal y telegráfico es la norma.
No es necesario. Por favor, le suplico que usted como desarrollador no haga eso. La verdad es que me desagrada muchísimo verlo, pero como hay mucha información útil y ellos usan esos sonidos de relleno tipo "eh, mm" como un recurso para transmitir la información de forma efectiva, aunque me resulte repulsivo, lo sigo viendo por eso. Le agradecería que compartiera la información con oraciones bien formuladas.