Première version

Mon site de portfolio personnel a été refait plusieurs fois. La version initiale a été faite en HTML/CSS/JS et est ce qui est montré ci-dessous. Ce site a été réalisé au début de mes études de premier cycle en génie logiciel à uOttawa.

J’expérimentais également le design pour créer un nouveau portfolio, comme vous pouvez le voir ci-dessous :

Deuxième version

Après avoir acquis plus de connaissances sur React et JavaScript, je voulais un moyen de présenter mes projets de GitHub sur mon site Web. J’ai donc codé un script qui appelle l’API REST de GitHub et récupère les fichiers README de tous mes répertoires publics. Voici mon deuxième portfolio. (N.B. : la page des projets peut ne pas fonctionner car l’API GitHub peut avoir changé)

Troisième version

Je n’étais pas encore satisfait de la dernière version, alors je l’ai améliorée, j’ai supprimé la plupart des fenêtres modales et ajouté mon CV. J’ai opté pour un design plus sombre et j’ai changé la façon dont les projets étaient récupérés. Maintenant, les projets seraient manuellement récupérés et poussés vers GitHub au lieu de faire les requêtes sur le navigateur du client (qui dans certains cas atteindrait la limite de l’API GitHub et en retour ne montrerait aucun projet sur mon site web).

Version actuelle

Je n’étais pas satisfait de la mise en page et du contenu de mon site web, j’ai donc décidé de mettre des contraintes sur mon design et d’écrire tout le contenu de mon site web sans utiliser l’API GitHub. J’ai opté pour un style rétro hack où l’on peut voir les projets sur lesquels je travaille, qu’il s’agisse de répertoires publics ou privés sur GitHub, et qu’ils soient sur GitHub ou non. Vous avez actuellement une idée de la version actuelle de mon portfolio en visonnant ce site web.

Ce site utilise toujours React avec Gatsby (et ses multiples plugins utiles) tout en étant écrit en TypeScript avec les projets écrits en markdown. Pour le style, il utilise maintenant Tailwind.css qui est un cadriciel utile pour styliser un site web en utilisant uniquement les classes CSS.

De plus, ce que j’écoute actuellement sur Spotify est maintenant affiché sur mon portfolio. Je voulais partager ce que j’écoute, ajouter une fonctionnalité en temps réel et ajouter plus de contenu à mon portfolio. J’ai rendu le serveur open source, consultez mon projet currently_playing_spotify pour plus d’informations.

De plus, j’ai une tâche CRON qui s’exécute sur GitHub Actions et qui vérifie et met à jour le nombre d’étoiles GitHub sur mes projets. S’il y a des changements, il écrit dans les fichiers appropriés et les commet dans le référentiel.

S’éloigner de Gatsby

Récemment (vers la fin de l’année 2022), j’ai voulu mettre à jour mon site Web et j’ai décidé d’abandonner Gatsby, qui utilisait beaucoup de JavaScript pour un simple site statique. Mon site Web utilise désormais Astro sans React et avec un minimum de JavaScript. Le site n’a pas changé, sauf qu’il s’agit maintenant d’une application multi-pages (MPA) et non plus d’une application monopage (SPA).

Voici la comparaison entre les deux versions pour le chargement de la page d’accueil :

Sur le même réseau, la page Astro était plus rapide, faisait moins de demandes et utilisait moins de données. En outre, Astro fonctionne même si JavaScript est désactivé (seules certaines petites parties interactives échouent).