Comment KM/OS a été fait
Ce guide explique comment KM/OS a été construit : à quoi il sert, les décisions qui le sous-tendent et les détails techniques qui méritent d'être écrits.
KM/OS est le portfolio de Karim Masmoudi, étudiant ingénieur en troisième année à MedTech en Tunisie, construit comme un système d'exploitation de bureau qui tourne dans un onglet.
Le principe est simple : un CV est une liste d'affirmations, un système d'exploitation est une chose dont on se sert. Chaque rubrique d'un portfolio classique est ici une application, et les applications fonctionnent.
Projet
Périmètre
L'objectif était un environnement techniquement honnête plutôt qu'un habillage : des conventions empruntées à macOS pour la barre de menus, le dock et la gestion des fenêtres, à Linux pour un terminal aux commandes réelles, au mobile pour la disposition téléphone.
- Un gestionnaire de fenêtres avec déplacement, redimensionnement à huit poignées, agrandissement, réduction et ordre de focus.
- Des applications qui marchent : explorateur sur un système de fichiers virtuel, terminal, éditeur visuel, traitement de texte, lecteur de musique, calculatrice et assistant IA local.
- Un chat en direct et un fil de présence partagés par toutes les personnes présentes sur le site au même moment.
- Trois langues, anglais, français et arabe, cette dernière de droite à gauche.
- Cinq thèmes de couleur appliqués comme des échanges de jetons, si bien qu'aucun composant ne sait lequel est actif.
- Navigation au clavier et étiquetage pour lecteur d'écran sur toute l'interface.
Projet
Planification
Le travail s'est fait par phases, chacune terminée avant la suivante :
- Guide de stylePalette, échelle typographique et jetons de design avant tout composant.
- Architecture du systèmeGestionnaire de fenêtres, barre de menus, dock et état de session.
- Le shellLe système d'exploitation, sans contenu réel pour l'instant.
- ApplicationsChaque application construite sur le shell terminé.
- ContenuProjets, technologies, formation et contact comme données de dictionnaire.
- TraductionFrançais et arabe, y compris la passe de droite à gauche.
- ServicesLe salon de présence et le point d'envoi du formulaire.
- FinitionsMesuré face à la référence, écran par écran.
Projet
Coût et infrastructure
Le coût de fonctionnement est un nom de domaine. Tout le reste tient dans une offre gratuite, et c'est une contrainte de conception plutôt qu'un hasard : le site est statique, il n'y a presque rien à exécuter.
L'hébergement est Vercel. La compilation produit un dossier de fichiers servis depuis une seule origine. Deux fonctions serverless gèrent les seules choses qu'un fichier statique ne peut pas faire : le salon de discussion et l'assistant - qui doit tourner sur un serveur pour que la clé du modèle de langage n'arrive jamais jusqu'au navigateur.
Il n'y a pas de base de données. Le salon vit dans la mémoire d'une unique instance de fonction encore chaude, ce qui correspond au trafic d'un portfolio et se réinitialise sans dommage quand elle refroidit.
Projet
Risques
Les risques intéressants dans un projet comme celui-ci ne sont pas des pannes techniques. Ce sont les façons dont il peut cesser d'être utile sans bruit :
- Une métaphore de système d'exploitation peut masquer le contenu. Chaque application s'ouvre en un clic depuis le dock, le bureau ou la recherche, et la première fenêtre est une introduction toute simple.
- Un site fait de pièces mobiles peut devenir inutilisable sur téléphone. La disposition mobile est un design à part, pas un bureau compressé.
- Les recruteurs ne lisent pas la documentation. Rien d'important n'est caché derrière une étape de découverte.
- L'animation peut devenir du bruit. Le mouvement est bref, et il s'arrête complètement pour qui a demandé à son système de le réduire.
Projet
Qualité
Il n'y a pas de suite de tests. À la place, les vérifications tournent sur la chose réelle dans un vrai navigateur : chaque application ouverte dans chaque langue, en surveillant les erreurs de console, les images cassées, les débordements horizontaux et les fenêtres qui sortent de l'écran.
La mise en page se mesure au lieu de s'apprécier à l'œil. Les styles calculés et la géométrie sont relevés sur la page en cours d'exécution et comparés à des valeurs attendues ; seules les différences sont rapportées.
Design
Concept
La direction visuelle est un noir chaud : surfaces presque noires, panneaux ivoire et un seul accent champagne. Elle est volontairement discrète, parce que l'interface demande déjà beaucoup au visiteur.
La retenue est la règle. Une couleur d'accent, une serif, une sans, et un petit jeu de pas d'espacement. Tout ce qui voulait être décoratif devait d'abord se justifier comme information.
Design
Bureau et mobile
La version bureau est un environnement fenêtré : barre de menus, dock, icônes de bureau, colonne de widgets et fenêtres qui se recouvrent.
La version téléphone est un autre produit qui partage les mêmes données. Un écran d'accueil avec icônes et widgets, un dossier d'applications paginé, et des applications en plein écran au lieu de fenêtres. Les applications qui n'ont pas de sens sans pointeur ne sont tout simplement pas sur téléphone.
À l'intérieur d'une fenêtre, la mise en page répond à la fenêtre, pas à l'écran. Ce sont des container queries de bout en bout : la même page disposée autrement dans une fenêtre étroite et dans une large, sur le même écran.
Design
Couleur
Chaque couleur de l'interface est une propriété personnalisée. Les composants ne nomment jamais une couleur ; ils nomment un rôle, et un thème fournit la valeur.
C'est cette indirection qui rend cinq thèmes possibles sans toucher à un seul composant : champagne, midnight, terminal, sandstone et ember sont des jeux de jetons, appliqués comme une classe sur l'élément racine.
Design
Typographie
Deux familles. Source Serif 4 porte les titres et tout ce qui doit sembler écrit ; Inter porte l'interface. Une police à chasse fixe est réservée au terminal et aux chiffres qui doivent s'aligner en colonne.
L'arabe n'est pas la typographie latine à une autre taille. La direction droite à gauche touche la mise en page, la ponctuation et l'orientation de chaque icône qui suggère un mouvement ; elle a été traitée comme un mode de mise en page, pas comme une traduction.
Détails techniques
Technologies
JavaScript standard en modules ES, assemblé par esbuild en un seul fichier. CSS écrite à la main sur un unique jeu de jetons de design. Deux dépendances en tout, et seulement au moment de la compilation.
Pas de framework. Pour une interface presque entièrement sur mesure, un framework aurait ajouté un runtime, une étape de compilation et un ensemble de conventions, en échange de très peu de ce dont ce projet a réellement besoin.
- Les fenêtres sont clonées depuis un <template> et pilotées par des classes d'état, ce qui garde le mouvement en CSS.
- Pointer Events pour chaque geste, si bien qu'un glissement se comporte pareil à la souris, au stylet ou au doigt.
- Un système de fichiers virtuel partagé par le terminal, l'explorateur et le traitement de texte : une modification dans l'un est visible dans les autres.
- Un service worker qui sert depuis le cache et rafraîchit en arrière-plan.
Détails techniques
Sécurité
Deux choses sortent de ce site, et autant le dire d'abord. Une question posée à KM Intelligence est envoyée au serveur du site, puis de là à un fournisseur de modèle de langage, puisque c'est là que tourne le modèle ; la clé du fournisseur reste sur le serveur et n'est jamais envoyée au navigateur. Le formulaire de contact est transmis au service qui l'achemine par courriel. Rien d'autre ne sort : une Content-Security-Policy stricte fait que tout ce que la page charge vient de sa propre origine, et c'est aussi pourquoi il n'y a ni script d'analyse ni CDN de polices.
Il n'y a ni cookies ni traçage. Quelques préférences d'interface vivent dans le stockage local du navigateur, ne quittent jamais l'appareil, et disparaissent en redémarrant KM/OS.
Le salon de discussion est le seul endroit où du texte venu d'Internet est montré à d'autres personnes. Les messages sont limités en longueur, débarrassés des caractères de contrôle et soumis à une limite de débit côté serveur, puis écrits dans la page comme du texte et jamais comme du balisage.
Les villes des visiteurs dans le widget de sécurité viennent des entêtes que l'hébergeur attache à la requête. Rien ne demande sa position au navigateur, et aucune position n'est conservée.
Détails techniques
Intelligence artificielle
KM Intelligence répond à partir des données du site lui-même. Chaque projet, technologie, certificat et coordonnée figure déjà dans les sources, écrits par Karim en trois langues et tenus à jour parce que le reste de l'OS s'en sert pour s'afficher : l'assistant ne peut donc pas se tromper sur un fait qu'il n'a jamais eu à inventer.
Un modèle de langage transforme ces données en une réponse qui se lit comme une réponse, et non comme un paragraphe recopié. Il tourne derrière le serveur du site, si bien que la clé du fournisseur n'est jamais envoyée au navigateur ; plusieurs clés sont essayées dans l'ordre, et si aucune ne répond, les données répondent seules. Rien à télécharger, et cela fonctionne sur un téléphone.
Détails techniques
Crédits
KM/OS est conçu et développé par Karim Masmoudi.
Les polices sont Inter et Source Serif 4, sous licence SIL Open Font. La géométrie des icônes suit le jeu Tabler, sous MIT.