Une recréation de Windows XP en guise de portfolio
(mitchivin.com)- Le graphiste Mitch Ivin a recréé son site portfolio dans le style de Windows XP
- JavaScript doit être activé pour profiter de tous les effets visuels et des fonctionnalités
- L’ensemble du site reproduit fidèlement l’ambiance et les interactions du bureau Windows XP
- Les visiteurs peuvent explorer librement l’interface de connexion, ainsi que le menu Démarrer, la barre des tâches, etc.
- L’expérience du portfolio elle-même met en avant de façon originale ses compétences en design d’interface
Mitch Ivin — Présentation du site portfolio
- Mitch Ivin est un graphiste qui a reproduit avec soin son site portfolio pour qu’il ressemble à l’environnement de bureau du système d’exploitation Windows XP
- Dès le premier écran, les visiteurs retrouvent des éléments visuels évoquant l’environnement réel, comme l’image de fond Bliss de Windows XP et l’animation de démarrage
- La connexion se fait en cliquant sur « Mitch Ivin » ; une fois cette étape passée, l’utilisateur peut parcourir le site comme s’il utilisait un véritable bureau
- L’interface intègre partout des éléments comme la barre des tâches, le menu Démarrer, l’icône de profil utilisateur, ainsi que les boutons de redémarrage et de déconnexion, reflétant fidèlement l’ambiance et l’UX du système d’origine
- Ce site est à la fois un portfolio créatif qui présente ses compétences en design et en développement frontend à travers l’« expérience » elle-même, et un exemple amusant d’interaction web
Principales fonctionnalités et caractéristiques
- Le fonctionnement complet du site nécessite impérativement JavaScript
- Avec la touche F11 en plein écran, l’expérience se rapproche encore davantage de celle d’un véritable bureau
- Des boutons de raccourci permettent d’accéder à des profils externes et à ses réalisations sur LinkedIn, GitHub et Instagram
- Sur mobile, une animation conviviale affiche un message invitant à faire pivoter l’appareil en mode portrait
- Chaque icône, bouton et animation repose sur un design intentionnel, simple, qui retransmet fidèlement l’esthétique originale de Windows XP
Composition de l’interface
Écran de bureau et connexion
- L’écran initial affiche l’image de fond de Windows XP ainsi qu’une animation de démarrage
- Un clic sur l’icône utilisateur « Mitch Ivin » lance la procédure de connexion
- Une fois la connexion réussie, l’interface avec la barre des tâches et le bouton Démarrer s’active
Barre des tâches (Taskbar) et menu Démarrer (Start Menu)
- Une barre des tâches très proche de celle de Windows XP s’affiche
- Présence de boutons visuels comme Restart (redémarrer) et Log Off (déconnexion)
- Le clic sur chaque bouton déclenche des interactions rappelant celles d’un véritable OS
Résumé
- Le site portfolio Windows XP de Mitch Ivin propose une présentation personnelle différenciante grâce à une UI/UX pleine de personnalité
- Les visiteurs ne voient pas simplement une liste de projets, mais découvrent un portfolio à expérimenter directement
- C’est un exemple d’architecture d’interface et de branding dont les designers numériques et développeurs frontend peuvent s’inspirer
3 commentaires
Commentaires Hacker News
J’aime beaucoup ce projet, honnêtement je trouve qu’il est vraiment très bien réalisé
Cela dit, comme il se présente comme « graphic designer » tout en reproduisant Windows XP presque à l’identique, c’est un peu frustrant de ne pas pouvoir juger immédiatement l’étendue de son propre talent de designer
En regardant les autres projets sous l’icône IE, on perçoit un peu plus sa patte personnelle, mais certains visuels semblent générés par IA, ce qui réduit un peu l’enthousiasme
L’UX paraît aussi un peu étrange ; par exemple, le contrôle d’historique se comporte comme un carrousel à l’intérieur du portfolio. En appuyant sur les boutons précédent/suivant, je m’attendais à revenir au menu des projets, mais ce n’est pas le cas
Si quelqu’un postulait chez moi avec un portfolio comme celui-ci, je lui accorderais un entretien. Le niveau d’effort et la qualité obtenue sont clairement impressionnants
Mais les points évoqués plus haut, en particulier l’absence apparente d’une approche centrée utilisateur, m’inquiéteraient suffisamment pour vouloir absolument en parler pendant l’entretien
Et pour préciser : moi aussi, je pourrais faire ce type de design. En pratique, c’est exactement le même travail que d’implémenter une maquette fournie par un UX designer, et j’en ai beaucoup fait
J’espère que ça ne paraît pas trop sévère, car malgré tout c’est un travail très réussi que j’ai apprécié, et ce sera clairement un portfolio capable de passer la « première barrière » dans beaucoup d’endroits. Il faut simplement se rappeler que la vraie démonstration de niveau vient à l’étape suivante
Tu dis vraiment que tu pourrais faire ce design toi aussi, tout en précisant ne pas avoir spécialement le sens du design ; j’aimerais bien savoir si tu peux l’affirmer avec autant d’assurance
J’ai vu énormément d’interfaces qui imitaient XP, et il y avait toujours quelque chose qui sonnait faux
Ce XP de MitchIvin n’est peut-être pas une copie parfaitement fidèle, mais l’expérience d’utilisation est tout de même assez agréable
J’ai des réserves similaires
Comme simple projet, c’est intéressant, mais s’il s’agit d’une copie de XP, il existe déjà beaucoup d’exemples plus fidèles
Comme portfolio, cela risque même d’avoir un effet plutôt négatif. Dans le design actuel, il est bien plus important de montrer une tentative d’originalité
On évalue souvent le graphisme comme une simple maîtrise d’outils ou comme la capacité à dessiner de jolies choses, alors qu’en réalité c’est une forme de communication qui consiste à structurer visuellement un message à partir de contraintes, d’un public cible, d’émotions, etc.
Il n’y a pas de raccourci : il faut étudier les designs existants et s’exercer à exprimer ce qu’on veut montrer par la couleur, la mise en page, la typographie et l’image
Il faut aussi dessiner soi-même, et mieux vaut éviter l’IA générative tant qu’on n’a pas encore acquis une vraie aisance
À ce stade, c’est malheureusement un peu trop faible pour marquer les esprits comme portfolio, et il lui faut davantage de pratique
Cela dit, le simple fait de l’avoir terminé et de l’avoir amené jusqu’en haut de HN mérite de grands compliments ; j’espère que cette occasion sera un tournant et qu’il continuera à créer
Le fait qu’on puisse se dire « j’ai des questions à lui poser en entretien, donc je pourrais l’embaucher sous conditions » signifie à mes yeux que ce site a rempli son rôle de portfolio
Un portfolio n’a pas besoin de plus que de susciter chez quelqu’un l’envie de se dire « j’aimerais bien rencontrer cette personne »
Au final, il sert à frapper à la première porte, pas à décrocher un emploi à lui seul
En réalité, le graphisme n’est pas de l’art
C’est une forme de communication qui utilise stratégiquement texte, images et mise en page pour transmettre une information de manière visuellement efficace
L’originalité devient surtout importante dans le branding, les questions de copyright, ou lorsqu’on réutilise directement une culture existante
La vraie question est plutôt : « Pourquoi cherchez-vous à vous présenter, vous et votre portfolio, à travers Windows XP ? »
Ce qui me saute aux yeux ici, c’est surtout une compétence technique
L’intention est probablement de viser des clients du secteur tech, surtout en freelance, en jouant sur la nostalgie
Si j’étais directeur artistique, je ne le convoquerais probablement pas, mais ce portfolio n’était sans doute pas destiné à des directeurs artistiques
Et le fameux « moi aussi je peux faire ça », on l’entend tout le temps dans le travail de design
L’implémentation est en fait la partie la plus facile du design ; ce portfolio devrait naturellement être plus beau que XP, et c’est là que se mesure le talent
Quand on recrute un designer, on ne s’intéresse pas à sa capacité à reproduire exactement les maladresses de XP
Pour un développeur, savoir implémenter ça n’a rien de surprenant
En revanche, je suis bien plus impressionné lorsqu’un développeur fait attention à la typographie ou à la mise en page. En pratique, le plus difficile est de décider quels éléments doivent figurer à l’écran et comment structurer l’information
Le choix du contenu et de sa structure est la clé de la réussite
Moi, j’aurais envie d’embaucher cette personne
Elle a du cran, de la persévérance et de la créativité, suffisamment pour se démarquer des autres candidats
Des milliers d’utilisateurs de HN, leurs amis, des journalistes tech et beaucoup d’autres ont apprécié ce travail, et encore davantage de monde le découvrira
Trouver un emploi n’est pas facile en ce moment, mais avec un style comme ça, les propositions vont forcément arriver
D’ailleurs, il faut aussi que je mette mon portfolio à jour bientôt, et ça me donne envie d’essayer quelque chose dans le même esprit
En voyant la description « un portfolio personnalisé dans le style XP, avec le souci du détail », j’ai envie de relever quelques points précis
Si c’était moi qui avais fait ça, j’aurais probablement supprimé le boot et l’écran de connexion. En particulier, il vaudrait mieux afficher directement About Me au démarrage pour que les clients le trouvent facilement
Si on double-clique sur l’icône en haut à gauche de la barre de titre, la fenêtre devrait se fermer. Le comportement original est bien une fermeture, pas un agrandissement comme lorsqu’on clique sur le corps de la barre de titre
Je pense que le boot et l’écran de connexion participent beaucoup au charme de la reproduction complète
Ce genre de détail minutieux et cette immersion utilisateur sont vraiment essentiels dans un projet GUI
Ça paraît plus fluide que le vrai Windows XP
C’est difficile à expliquer, mais il y a clairement quelque chose de séduisant du point de vue UX/UI
C’est aussi intéressant de voir à quel point ça s’intègre naturellement à la hiérarchie des onglets du navigateur
L’écran de démarrage, la connexion et les sons créent bien la sensation d’entrer dans « un espace à part »
Que ce soit Windows ou autre chose, dès que c’est rapide, ça paraît nettement mieux
Si ça réagit en moins de 20 ms, on ne perçoit pas le délai et l’expérience devient agréable
Entièrement d’accord
J’utilise la bêta de macOS 26, et pourtant ce clone de Windows XP me donne presque l’impression d’une mise à niveau
Parce qu’il est simple, rapide, et que je sais déjà parfaitement l’utiliser
Les anciens Windows étaient moins bons en multitâche à cause du single-core, mais justement ça aidait à rester concentré
Sur les OS modernes, on disperse des dizaines de fenêtres et des centaines d’onglets sur plusieurs espaces de travail et écrans, et je trouve ça mentalement épuisant
La nostalgie joue beaucoup, mais il y a aussi quelque chose de très accrocheur dans le son de connexion
Je me demande si certains ont aussi cliqué sur logout
La vitesse des interactions UI est très élevée
Beaucoup d’interfaces modernes n’ont que certaines transitions rapides, mais restent globalement lentes à réagir, ce qui produit une sensation étrange
Honnêtement, c’est intéressant, mais j’ai l’impression qu’il y a quelque chose de fondamentalement bancal dans l’approche
En arrivant sur un portfolio présenté comme celui d’un « graphic designer », on a en fait l’impression de voir surtout une simple reproduction d’un ancien design fait par quelqu’un d’autre
L’image IA sur l’écran de connexion et les icônes qui bougent bizarrement au survol sautent aussi aux yeux
Je ne me souviens pas de ce genre d’effet sous Windows XP, donc je ne sais pas si c’est censé être un bug étrange
À partir de là, ma confiance commence à baisser
Même en tant que « graphic designer », il utilise des graphismes générés par IA, ce qui m’a aussi fait me demander s’il avait confié l’écriture du code à l’IA de façon comparable
La manière de présenter le CV comme un faux fichier PDF est également frustrante
Les autres projets sont enfermés dans de petites fenêtres, donc difficiles à voir correctement, et deux d’entre eux n’affichent qu’une animation de chargement
Il a expliqué qu’au départ il n’avait pas d’expérience en code et qu’il s’était fait aider par des agents IA, en ajoutant que « toutes les décisions ont été prises par un humain », mais s’il n’était pas capable d’écrire lui-même le code, j’ai du mal à ne pas penser que le LLM avait en pratique davantage de pouvoir de décision
Je me demande aussi s’il est réellement sûr de pouvoir reconstruire ce projet de zéro par lui-même
C’est un projet intéressant et cool, mais au fond, comme portfolio, il donne malheureusement l’impression de sous-vendre ses compétences
Et il existe déjà beaucoup d’exemples similaires, comme win32.run
J’avais essayé de le publier autrefois, sans succès, et j’étais un peu déçu
Je suis content de voir que vous en profitez maintenant
Je viens juste de créer mon compte HN, alors j’aimerais bien gagner un peu de karma moi aussi
(modérateur ici)
J’ai republié votre ancien post Show HN et j’ai fusionné les commentaires
J’ai aussi marqué votre compte comme compte normal pour éviter qu’il ne soit repris par le filtre antispam
Très belle finition ! Je trouve que l’ambiance XP et même l’esprit de cette époque sont remarquablement bien retranscrits
S’il avait vraiment existé sous Windows XP une application professionnelle de « génération de portfolio », et que le résultat avait été de ce niveau, tout le monde aurait reconnu un produit magnifique et impressionnant
C’est un excellent travail, qui montre ses compétences tout en recréant la beauté de Windows XP de manière à la fois moderne et historiquement parlante
C’est extrêmement bien fait ! Un travail remarquable
Sur mon navigateur (Chrome 138, Windows 10), le menu Démarrer apparaît brièvement après quelques secondes puis disparaît aussitôt
Le niveau de finition est vraiment élevé, c’est un excellent résultat
En tant qu’utilisateur de XP, j’aime vraiment beaucoup ce travail
Pour chipoter un peu
J’y vois un hommage, c’est-à-dire une version modernisée et raffinée de l’esthétique classique de Windows XP, mélangée à une expression plus contemporaine
Réinterpréter et prolonger un style ancien de manière actuelle tout en respectant ses racines, c’est une manière très courante de faire évoluer la sensibilité esthétique
Les onglets de la barre des tâches : critique juste, et j’ai passé énormément de temps à essayer de les faire correspondre
Au final, il reste une légère différence, mais je pense être arrivé à quelque chose de très proche
Pour le reste, ce sont des choix esthétiques assumés. En fait, je crois que personne n’a relevé l’une des différences les plus importantes
Quand on fait une sélection par glisser-déposer sur les icônes du bureau, le surlignage ressemble bien plus à Windows 11 qu’à XP
C’est un point que j’aurais aimé encore améliorer
C’est un travail vraiment chouette, mais j’ai quand même deux regrets
D’abord, on n’a pas complètement cette impression de « vrai ordinateur ». Par exemple, s’il y avait eu une petite interaction amusante en tapant "dir" dans la ligne de commande, cela aurait été encore plus intéressant
Ensuite, la qualité du contenu du portfolio n’est pas au niveau de l’habillage du site. Le site lui-même est très haut de gamme, mais quand on regarde ses autres travaux, tout semble trop simple et un peu vide
Au final, ça reste un bon projet
Vraiment très beau travail
À chaque fois que je le vois, ça me rend nostalgique du style Windows XP
XP a été le seul Windows à vraiment chercher à être « fun », au point d’avoir un chien mascotte dans les résultats de recherche
La barre des tâches en bas faisait presque jouet Fisher Price, et Clippy me manque aussi
Je regrette l’époque où les logiciels professionnels pouvaient se permettre ce genre de fantaisie
Au passage, le style de son avatar rappelle Simpsons ou Bob's Burgers, ce qui le rend marquant
C’est une réalisation impressionnante, mais j’ai l’impression qu’elle demanderait une réflexion plus poussée
Il existe une tension fondamentale entre copie et création
Bien sûr, beaucoup d’œuvres naissent à partir de cadres préexistants. Dans le roman policier, par exemple, on retrouve presque toujours un cadavre, une bouteille d’alcool, une réplique spirituelle, etc. Mais le véritable art consiste à se réapproprier ce cadre à sa manière
On peut confier à l’IA la trame d’une histoire, mais les choix, la voix, les aspérités, cette vraie « présence » et cette âme, c’est à l’humain de les apporter
Ici, j’ai l’impression que cette « présence » manque
Le projet est bien exécuté, mais il ressemble juste à Windows XP : c’est agréable à voir, mais assez plat
Je respecte l’effort et l’apprentissage derrière ce travail, mais au bout du compte il donne quand même une impression de « copie »
Si j’étais à sa place, je considérerais cela comme un premier pas. « Maintenant que j’ai terminé la copie, qu’est-ce que je peux améliorer ? Qu’est-ce que je peux changer ? Quel risque puis-je prendre ? Est-ce que je pourrais montrer un avant/après ? »
Le vrai sujet, c’est : pourquoi s’arrêter à l’imitation ? Pourquoi ne pas dépasser les limites de la copie pour améliorer, étendre, se réapproprier le résultat ?
Quand on travaille avec l’IA, avec ses modèles infinis et ses itérations rapides, il faut se demander sérieusement comment faire apparaître son propre point de différenciation, ou son « âme »
(Au passage, j’ai moi aussi fait relire ce texte par Grammarly ; ça me rappelle la célèbre réplique « un homme doit connaître ses limites »)
Par exemple, un grand projet plus ambitieux d’un côté, et de l’autre un projet de reproduction propre et mémorable ; cette combinaison peut être plus séduisante pour quelqu’un qui parcourt rapidement de nombreux portfolios
Mais je suis d’accord sur le fond : un portfolio doit malgré tout rester équilibré et diversifié
J’aime beaucoup
Pour chipoter sur quelques erreurs XP
J’y vois un bel hommage, ou une réinterprétation moderne d’un style classique
C’est une évolution légitime qui combine une esthétique ancienne avec une sensibilité contemporaine tout en respectant ses racines
Les onglets de la barre des tâches : remarque juste, et j’y ai vraiment consacré énormément de temps, mais je n’ai pas réussi à obtenir une correspondance parfaite, donc j’ai fini par accepter un certain écart
Tout le reste relève de choix esthétiques. En fait, personne n’a mentionné un point : lors de la sélection par glisser-déposer des icônes du bureau, le style est bien plus proche de Windows 11 que de XP
Personnellement, je pensais aussi que cela méritait d’être revu
C’est une réalisation très sympa, mais il manque un peu cette sensation d’un vrai « ordinateur »
Par exemple, si taper « dir » en ligne de commande déclenchait une petite interaction, ce serait beaucoup plus amusant
Deuxième point : le contenu du portfolio est trop simple et n’est pas à la hauteur de la qualité du site
Dans l’ensemble, ça reste un bon projet
Vraiment très beau travail
Chaque fois que je le vois, le style de l’époque Windows XP me manque
XP a été le seul Windows à vraiment chercher le « fun », avec son petit chien mignon, sa barre des tâches façon jouet Fisher Price, Clippy, etc.
Je regrette cette époque où les logiciels professionnels pouvaient être aussi joyeux
Et l’avatar, dans un style Simpsons/Bob's Burgers, est très marquant
Ce projet est vraiment excellent
Il montre très bien ses compétences, sa capacité d’apprentissage, sa ténacité et son attention au détail
Contrairement à ceux qui critiquent le fait que ce soit une copie ou qu’il y ait quelques erreurs de détail, je ne pense pas que ce soit là l’essentiel
Très beau projet, félicitations
Bonjour, je suis un développeur back-end en train de créer un portfolio très similaire à ce post. Il est encore en cours de finalisation et de retouches,
mais j’ai laissé ce commentaire pour voir si je pourrais moi aussi recevoir des retours francs.
S’il n’y a pas de problème à laisser un commentaire comme celui-ci, je publierai le lien de mon portfolio.
+) Et comme c’est ma première fois ici, je me demande aussi si utiliser le style télégraphique sans terminaisons est une règle.
Ce n’est pas nécessaire. S’il vous plaît, j’aimerais vraiment que vous, les développeurs, ne fassiez pas ça. En réalité, ça me donne vraiment envie de mourir tellement c’est pénible à regarder, mais il y a beaucoup d’informations utiles et je ne les regarde que parce que ces hésitations du type « euh, hum » sont leur moyen de transmettre efficacement l’information, même si c’est répugnant. Je vous serais reconnaissant de partager les informations avec des phrases correctement formulées.