En cours

Ce portfolio

Next.js en export statique, un fond animé en canvas 2D et des animations en CSS. Léger, rapide, déployé sur GitHub Pages à chaque push.

Next.js
TypeScript
Canvas 2D
Tailwind CSS

Code

Le concept : simple et fluide

Une première version misait sur une scène 3D lourde. Les retours ont été clairs : trop chargé, pas assez rapide. Cette version fait l'inverse : un fond noir où ondulent des fils fins, de grandes typographies, des cartes sombres, et le contenu qui passe avant tout.

La technique

Next.js en export statique, déployé sur GitHub Pages par une action à chaque push ;
un fond animé en canvas 2D écrit à la main : des étoiles et deux rubans de fils, quelques milliers de points par image, sans aucune librairie ;
des animations en CSS (uniquement transform et opacity) et un seul IntersectionObserver pour les apparitions au scroll ;
le rack du homelab dessiné en CSS, chaque unité à sa vraie hauteur ;
Tailwind CSS v4 pour le design system.

Les règles que je me suis fixées

le texte s'affiche tout de suite ; le fond ne s'anime qu'au premier geste du visiteur ;
un mode calme (et le réglage « réduire les animations » du système) fige le fond et coupe les animations, sans rien retirer du contenu ;
tout se fait au clavier : menu et un terminal caché (essaie Ctrl + K) ;
aucun tracker, aucun cookie.

Le code est public sur GitHub.