Case Study

Quel est le problème ?

Lors de mon bachelier à la Haute École Albert Jacquard en techniques infographiques, j'ai appris de nombreuses choses comme la création de sites web. J'ai toujours eu plus de difficultés avec le JavaScript mais cela ne m'a pas empêché de réaliser un TFE rempli de JavaScript. Une fois diplômée, j'ai réalisé un site simple, qui faisait office de portfolio (voir projets > Édition 2023). Malgré une DA cohérente d'un style noir & blanc, cela ne me ressemblait pas, car je suis quelqu'un qui porte toujours de la couleur.

Lors de mon deuxième bachelier en technologies de l'informatique à la Haute École Namur-Liège-Luxembourg, j'ai pu découvrir le côté hardware de l'informatique. J'aime particulièrement les cours orientés hardware/concrets comme les cours de systèmes embarqués, DAO, physique et télécommunication : des domaines très axés maths-physique, pourtant cela a toujours été complexe à comprendre. Je découvre alors la soudure électronique...

La solution : un design original

Le design sur Figma a été pensé en 2023/2024, mais je n'ai jamais trouvé le temps de le mettre en place. Je commence alors à coder tout ça en juin 2025, afin de montrer quelque chose d'original, créatif et innovant. Tout est pensé à partir de l'univers électronique/électricité, car je voulais quelque chose orienté technologie et les circuits imprimés reflètent bien cela.

Le burger menu est composé de deux symboles électriques : la masse et une ampoule. La masse, grâce à ses lignes horizontales me rappelle un burger menu et la croix présente dans l'ampoule me permet de le fermer. La présentation des différentes sections est réalisée grâce à des résistances d'un circuit imprimé, le tout relié à des morceaux de cuivre et une puce pour y inscrire mon nom et prénom. Pour voyager dans les photos ou les créations, je me suis inspirée du symbole d'une diode pour faire des flèches.

Rendre le design vivant

L'entièreté du site est réalisé en HTML, CSS et JavaScript. Toutes les illustrations et circuits sont en format vectoriel, ce qui rend la chose plus facile à animer. J'ai tenté d'animer les circuits pour illustrer les signaux passant dans les circuits. On peut donc voir dans la navigation les circuits apparaitre. Je tente toujours de faire ce qui est possible en animation CSS, avant de tester des librairies comme GSAP par exemple. Je pourrais utiliser Bootstrap pour les classes CSS, cependant, je n'ai utilisé cela que dans un environnement de stage donc je ne me sens pas suffisamment à l'aise avec.

Un petit défi, histoire d'apprendre quelque chose

Afin de rester dans le thème, je me suis dit que ça pouvait être sympa de résoudre un puzzle pour pouvoir voir le site. J'ai donc créé un circuit électrique simple et il suffit de fermer l'interrupteur pour que le circuit puisse s'allumer et ainsi, dévoiler le contenu du site.