Portfolio comme un OS #2 — les icônes du bureau

Mon site personnel se présente comme un embryon de système d'exploitation avec lequel on interagit. Chaque icône du bureau ouvre une fenêtre : un site web intégré (iframe), le terminal, le programme de contact, mon App Store…

J'ai créé une liste de données structurées sous forme de tableau d'objets JSON. Les propriétés : un ID, la source de l'image de l'icône, le titre du programme, la couleur de fond de l'icône, un attribut disant si c'est un site intégré ou un programme interne, l'URL à intégrer le cas échéant, le contenu de la fenêtre et ses propriétés (je te l'avais dit, c'est comme un OS 😁).

Ça fait beaucoup de propriétés juste pour afficher des icônes — concentrons-nous sur l'ID, l'image, le titre et la couleur de fond. C'est à partir de ce tableau que j'affiche les icônes du bureau, une liste que je peux compléter à tout moment dans un seul fichier. Et derrière, encore un peu de coloriage CSS pour la disposition.

Voilà pour le système des icônes de bureau. Le prochain billet parlera des propriétés restantes et de leur rôle dans le système de fenêtres. ✌🏾