Réalisé en
2026
Portfolio perso - Septembre 2026
Assisté par Claude Code
N2
Mise à jour de mon portfolio perso, conçu sur Laravel et Vue.js
Sections
Description
Après quasiment 1 an de bon et loyaux services, j'ai décidé de mettre à jour ce site internet. Ma priorité était de simplifier son architecture et d'améliorer sa conception, qui était devenue malgré elle, relativement polluée en raison des nombreux fonctionnalités ajoutées sur le site. C'était également pour moi l'occasion de lui refaire une beauté. Et cette fois-ci, ayant le budget pour, j'ai décidé de faire appel à un graphiste, Stefan Hadžović. :)
Le développement du projet a un peu tardé, mais tout s'est dégoupillé relativement rapidement. Tout d'abord, j'ai profité de mon expérience acquise au fil de cette année scolaire 2025-2026 (oui, je pense encore en année scolaire 😉), qui s'est trouvée être riche en apprentissage et chargée en terme de projets. Si vous lisez ces mots, vous savez certainement que j'ai été recruté chez Ospi, ce qui m'a permis de renforcer mes connaissances avec Laravel.
Mais j'ai également profité d'outils et méthodes de travail que j'ai découvert durant la fin de l'année 2025. L'ancien projet de ce site internet en avait un peu bénéficié sur la fin, mais sans que ce soit significatif. Sa conception était restée la même. Je sais que cela fait débat, mais parmi ces outils se trouve Claude Code. 
Mon article de fin d'année 2025 le montre plutôt bien ; j'ai complètement adopté Claude Code dans mon quotidien. Et en même temps, il est difficile d'y voir des inconvénients. Pourquoi continuer à développer à la main quand on peut faire mieux, et bien plus rapidement ? Donc voilà. Au risque d'en décevoir certains, oui, j'ai utilisé Claude Code pour réaliser ce projet. Et pas qu'un peu d'ailleurs. 
Toutefois, contrairement à l'ancien projet, j'ai décidé de ne pas rendre son code source accessible. D'abord car je trouve personnellement que cela n'a pas beaucoup d'intérêt, vu que c'est un projet dont le développement a été grandement assisté par une IA, mais aussi pour des raisons de sécurité. Même si je suis toujours contre l'ajout d'une partie utilisateur, où les invités pourront écrire du contenu tel que des commentaires, je reste plus confiant quant au fait d'héberger un site dont le code est clos. Surtout à l'heure de l'IA, où les attaques se font de plus en plus fréquentes.
Alors, quoi de neuf ?
Backoffice amélioré
Tout d'abord, le backoffice a été mis à jour. Finie la template shadcn vue un peu bancale, développée à la va vite avec juste le strict minimum qui fonctionne, finie l'architecture bancale avec le double site Inertia, qui mettait des plombes à se compiler... 
Images de couvertures dynamiques
C'est une vieille idée que j'avais depuis très longtemps ! Au moins 2022 quand j'ai créé mon premier site. J'étais à ça 🤏 de concrétiser l'idée avec la première version de ce site, mais le manque de temps aura eu raison de la feature. Mais ça y'est, c'est enfin implémenté ! 
Stefan (mon graphiste) m'a donné une superbe opportunité pour créer des designs génériques convaincants, et Claudio s'est avéré être plus qu'utile dans l'implémentation de ce système. Basiquement, il s'agit d'une page Laravel Blade générique, capturée par Chromium via un container séparé. Ingénieux non ? 😏
Usage de ClickHouse
Les requêtes enregistrées en base de donnée à des fins de statistiques sont désormais stockées sur un serveur ClickHouse. L’afflux croissant des requêtes effectuées par des bots, observé ces derniers mois, m'a poussé à migrer ce système vers un moteur de DB plus efficace vis-à-vis du stockage.
Profiling Spotify et Steam
Alors, je ne sais pas combien de temps ça va rester. C'est un test. 😂
C'est quelque chose que j'avais hésité à implémenter sur l'ancienne version du site, mais bon... On va dire que c'est un bonus. À voir si ça ne me dessert pas un peu (à voir ma liste des jeux Steam on dirai que je suis un gros g4m3r, alors qu'en vrai je code les 3/4 de mon temps libre xD)
- Niveau 1 Assistance légère Revue de code, propositions et maintenance.
- Niveau 2 Développement assisté Environ 50/50 entre l’IA et moi.
- Niveau 3 Développement intégral L’essentiel du code écrit par l’IA, sous ma direction.
Les choix techniques sont conçus, décidés et approuvés à la main en amont ; l’IA développe une bonne moitié du projet, avec relecture manuelle systématique.
Toute la partie publique (style et design) a été réalisées à la main.
- Amélioration de la conception — Refacto quasi intégrale, l'architecture a entièrement été revue grâce à Claude Code selon mes choix personnels
- Portage du backoffice — Portage du backoffice initialement intégré au site via Inertia.js, vers un projet vue.js séparé.
- Design du backoffice — À partir des maquettes réalisées pour le frontend, les interfaces du backoffice ont été entièrement retravaillées.
Fonctionnalités clés
Conversion des images
Les images sont systématiquement converties dans différentes résolutions et différents formats tels qu'AVIF, WEBP et JPG.
Traductions dynamiques stockées en base
Chaque contenu textuel pouvant être créé depuis le dashboard est stocké en base de données, et peut être disponible dans diverses langues.
Usage de BunnyCDN et Bunny Stream
Les images sont automatiquement envoyées sur le CDN, limitant la bande passante sur le serveur. Les vidéos sont envoyées et transcodées sur Bunny Stream.
Enregistrement des visites à des fins de statistiques
À des fins statistiques, chaque visite du site est enregistrée en base de données via ClickHouse. Les adresses IP et les user agents sont automatiquement analysés afin d’identifier s’il s’agit d’un robot ou d’un utilisateur humain.
Technologies utilisées
Typescript
Langage de programmation basé sur Javascript qui ajoute le typage statique.
VueJS
Framework Javascript front-end.
Figma
Outil de maquettage.
GitLab CI/CD
Système d'intégration et de déploiement continue intégré à GitLab.
Laravel
Framework PHP pour construire des applications web
Tailwind
Framework CSS.
