matthiasg.dev

Ce site est un remplacement de mon ancien portfolio :

Il ne contenait qu’une seule page. Cette page avait des animations au scroll, du lerp et autres grâce à locomotive scroll. Une de mes premières librairies utilisée et une de mes préférées.

Pourquoi remplacer ?

Cet ancien site (je vais essayer de le host qq part) ne me convenait plus. Il n’avait pas réellement de message et seulement quelques liens. Mais surtout, il ne me représentait pas…

J’ai donc tenté, par ce site, de me représenter (subtilement, le site parle de moi, mais ne dois pas être une autobiographie). Par exemple : les couleurs sombres (je suis un adepte du dark mode), Linux (page de chargement), Watch dogs (le profiler).

Processus

J’ai commencé par faire des listes de ce que je voulais dans ce site. J’ai pris de l’inspiration de portfolios d’autres développeurs, mais également de designer (souvent plus intéressants). J’ai aussi choisi de la faire avec mon premier framework : SvelteKit.

Ensuite est venue la partie du design. Je voulais le faire sur une alternative open source et gratuite à Figma. J’ai alors trouvé Penpot, mais après l’avoir utilisé pour tout ce projet, je ne suis pas très content du produit. Il n’existe qu’en version web (à part des packages obsolètes), le programme enlève des éléments sans que vous fassiez et ctrl+z ne fonctionne pas tout le temps. D’un autre côté, c’est un très beau projet maintenu qui utilise le SVG pour une meilleure compatibilité (source).

Une fois le design fait, j’ai commencé par faire les constantes SCSS des couleurs, polices et autres. Puis, j’ai fait le layout et quelques composants Svelte.

Transitions entre les pages

Comme je l’ai dit dans le TFE 2021-2022, j’adore les transitions entre les pages. C’est d’ailleurs un des premiers points notés dans mes listes de choses que je voulais dans ce site.

SvelteKit pouvant donner une SPA, les transitions entre les pages peuvent être plus fluides, et surtout sans effet flash bang. Je voulais une transition de ‘swipe’ de droite à gauche ou inversement en fonction de la position de la page comme lien dans le header.

Exemple

Si je suis sur la page ‘Accueil’ et que je clique sur ‘Mes projets’, la transition va faire venir la page ‘Mes projets’ depuis la droite vers la gauche, car elle se trouve après ‘Accueil’ dans le header

Pour savoir cet ordre, j’ai créé un fichier contenant une liste indexée avec un indice d’ordre et d’autres informations sur les pages utilisées ailleurs.

Projets

Les pages présentant un projet comme celle-ci, sont écrites en Markdown. Elles sont transformées en composant grâce à mdsvex.

J’y ai ajouté quelques plugins et modification comme la colorisation de code avec shiki :

console.log("Hello world !");

Des admonitions :

Ou encore des abbr (GitHub).