Mon site est prêt !

Après des jours et des jours de travail, la première version de mon site est enfin terminée ! Je voulais partager avec vous les technologies que j'ai utilisés et comment je m'y suis pris pour le développer.

La première version du site

Au tout départ, j'avais comme idée de créer un site totalement en 3D, avec des sons, des transitions, et un style inspiré de mes vidéos sur YouTube, tout cela en utilisant Vite et Three et ça ressemblait à ça: Site V1 L'utilisateur n'avait qu'à cliquer sur la catégorie représentée en 3D, puis un effet de transition l'envoyait à l'endroit souhaité.

Pour moi, c'était le meilleur site que je pouvais proposer pour me promouvoir, un site qui aliait tout ce que je savais faire :

Des sites web
De la 3D
"De l'audiovisuel."

La phase de réflexion

Tout content, je montre mon travail à certains de mes amis, puis je me rend compte d'une chose, je n'avais pas du tout pensé au côté responsive, lisible et accessibilité. En effet, gérer le responsive d'un site totalement 3D n'est pas une tâche facile, et la navigation encore moins.

La seconde version du site (celle-ci)

Avec toutes ces considérations, je me suis dit qu'il fallait un peu alléger tout ça, j'ai donc pris la décision de faire un site "normal" mais avec des éléments intégrés en 3D.

Choisir les bonnes technologies

J'adore React, mais le problème avec cette librairie c'est que c'est assez compliqué de gérer le SEO, le référencement, les rendus côtés serveur et j'en passe. Mon choix s'est alors porté sur NextJS, un framework open source basé sur React qui permet différents modes de rendus, mais également le fait qu'on puisse créer des API et donc créer des routes côtés serveur, ce qui m'a permis de faire la page de contact par exemple.

Ensuite, parlons du CSS. Je déteste ça, en plus je ne sais jamais quoi mettre comme nom de classe. J'ai donc voulu tester TailwindCSS et j'en suis tout de suite tombé amoureux. J'adore la façon de faire le style directement dans le HTML (comme ça même pas besoins de chercher des noms de classes !).

Pour le côté 3D, inclure Three directement dans le site n'était pas vraiment possible, enfin, c'était assez moche car ça ne suit pas vraiment les conventions de React, mais par chance, j'ai trouvé comment résoudre ce problème en utilisant React Fiber, qui permet de faire du Three sous forme de composants, par exemple :

<mesh ref={myMesh}>
    <boxBufferGeometry />
    <meshPhongMaterial color="royalblue" />
</mesh>

pour afficher un cube.

Et j'ai également utilisé Drei qui offre une collection d'abstraction pour React Fiber.

Déploiement

Pour déployer, ce n'était en soi pas très compliqué, j'ai juste eu à acheter un nom de domaine et déployer le site sur Vercel qui simplifie beaucoup de choses (build automatique lors des pushs par exemple).