Pour rendre l'expérience de mon portfolio vraiment mémorable, je savais que la navigation classique avec un simple menu textuel en haut de l'écran ne suffirait pas. Je voulais que l'utilisateur soit plongé dans mon univers dès la première seconde. L'idée m'est alors venue d'utiliser une carte de ville isométrique sombre, rappelant une cité en proie au chaos comme dans les jeux Resident Evil, et de m'en servir comme point central de navigation. Cependant, je faisais face à un problème technique majeur : une image classique au format JPEG ou PNG est complètement plate et inerte. Il m'était impossible de dire au navigateur internet de réagir uniquement quand la souris de l'utilisateur passait précisément sur le toit de l'hôpital, sur l'église ou sur le commissariat. Il me fallait une technologie capable de superposer des zones interactives sur-mesure par-dessus mon image de fond de ville ruinée, et c'est là que j'ai découvert toute la puissance du format SVG.

Avant de me lancer dans l'écriture du code, j'ai dû étudier ce qu'est réellement un fichier SVG (Scalable Vector Graphics). Contrairement à une photographie classique qui est composée de millions de petits carrés de couleur minuscules appelés pixels, le SVG est en fait un dessin généré par des mathématiques et du texte. C'est littéralement du code qui explique au navigateur web comment tracer des lignes, des cercles ou des formes géométriques complexes. Le premier énorme avantage de ce format vectoriel, c'est qu'il ne devient jamais flou ou pixelisé, peu importe à quel point on zoome dessus. Mais l'avantage le plus crucial pour mon projet interactif, c'est que chaque forme dessinée en SVG est considérée par le navigateur internet comme un véritable élément HTML à part entière. Cela signifie que je pouvais interagir avec ces formes géométriques de la même manière que j'interagis avec un lien ou un bouton classique sur une page web.

La phase de réalisation de la carte a été un véritable travail de précision. J'ai importé mon image de la ville en arrière-plan, puis j'ai dû coder manuellement une surcouche invisible en SVG par-dessus. L'objectif était de créer des polygones mathématiques qui épousent parfaitement les contours des bâtiments importants de la carte. Comme la ville est dessinée avec une perspective isométrique (vue de trois quarts et légèrement de biais), je ne pouvais pas me contenter de tracer de simples rectangles bien droits. J'ai dû placer une par une les coordonnées X et Y de chaque point de mes polygones pour qu'ils suivent les angles des toits, les façades et les murs de l'hôpital ou du poste de police avec une très grande exactitude. C'était une tâche particulièrement minutieuse et répétitive, mais absolument nécessaire pour que l'illusion soit parfaite et que l'utilisateur ait réellement l'impression de manipuler un radar de ciblage tactique de haute précision.

Une fois mes zones invisibles correctement placées sur la carte de la ville, il fallait les rendre visuellement intéressantes et réactives pour l'utilisateur. J'ai donc relié mon code SVG géométrique à mon code CSS pour l'habillage visuel. L'idée de conception était de simuler un système informatique de ciblage ou de scanner. J'ai programmé le CSS pour que, lorsque le curseur de la souris survole un bâtiment spécifique, le polygone invisible s'allume instantanément. J'y ai ajouté des effets de lueur colorée, des bordures vives qui se détachent de la pénombre de la ville, et de légers changements d'opacité. Grâce à ces manipulations visuelles, la carte statique de base a soudainement pris vie. Le simple fait de glisser son curseur sur les différents quartiers de la ville donne une sensation immédiate de contrôle et d'exploration, transformant un simple menu de navigation web en une véritable interface de jeu vidéo.

L'étape finale, et de loin la plus complexe sur le plan algorithmique, a consisté à rendre ces zones vectorielles SVG réellement interactives au clic. Il ne suffisait pas qu'elles s'allument au survol, il fallait impérativement qu'elles déclenchent des actions concrètes dans le reste du portfolio. J'ai dû utiliser le JavaScript pour "écouter" et capter les clics de l'utilisateur sur ces bâtiments. Par exemple, le fait de cliquer sur une zone spécifique devait pouvoir changer le thème de couleur global du terminal, lancer une nouvelle piste audio d'ambiance en fond, et mettre à jour dynamiquement les informations textuelles affichées sur le moniteur de contrôle. La manipulation du format SVG via le JavaScript n'est pas évidente quand on débute, car le code réagit parfois de manière très différente des éléments HTML classiques. Pour surmonter ces obstacles techniques et éviter les bugs de collision de clics, j'ai passé de nombreuses heures à faire des recherches sur internet et à décortiquer des tutoriels sur YouTube. J'ai analysé des exemples de code complexes pour comprendre la logique sous-jacente et l'adapter de manière sécurisée à mon propre projet de carte.

L'intégration et la manipulation avancée de cette carte SVG interactive a été l'un des défis techniques les plus stimulants de la création de ce portfolio. Ce composant spécifique m'a permis de démystifier complètement l'utilisation des images vectorielles dans le développement web moderne. J'ai concrètement appris qu'une image ne doit pas forcément être un élément passif et décoratif sur une page, mais qu'elle peut devenir le cœur même de la navigation et de l'interactivité d'une application web. Ce travail méticuleux m'a demandé de la rigueur mathématique pour le tracé exact des zones géométriques, de la créativité pour concevoir l'habillage visuel réactif en CSS, et une forte logique de programmation pour gérer la synchronisation des événements en JavaScript. Au final, le résultat dépasse mes attentes de départ : j'ai réussi à construire une interface de navigation atypique, totalement immersive, et techniquement très robuste, qui démontre ma capacité à lier un design ambitieux à un développement front-end exigeant.