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 > 2022). 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 2022/2023, mais je n'ai jamais trouvé le temps de l'implémenter. Je commence à 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 rappelle un burger menu et la croix présente dans l'ampoule permet de le quitter le menu. 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 électrons 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.

L'originalité du Case study

Le case study est en quelque sorte caché au sein du site, car il est représenté sous forme de chiffres et lettres comme s'il s'agissait du numéro de série du circuit imprimé. Pour montrer qu'il s'agit d'un lien cliquable, j'ai ajouté un effet boucing lorsqu'on survole l'élément.