Portfolio spatial interactif

Ce portfolio est une application Next.js bilingue dont les quatre destinations de l’accueil partagent un même système de navigation spatiale et mènent vers des études de cas localisées.

L’interface doit garder les contenus longs lisibles tandis qu’une scène 3D persistante donne un monde distinct à chaque destination et suit la page sans prendre le contrôle du défilement.

J’ai développé le portfolio en React et TypeScript, dont le carrousel de projets, les routes localisées, la persistance du thème et un canvas React Three Fiber partagé entre les quatre destinations principales.

Les planètes utilisent des textures de couleur, relief, normales et rugosité générées en amont, avec des détails de surface instanciés. Leur position orbitale suit la progression du document, tandis que leur lente rotation axiale dépend du temps écoulé entre les images.

Les sections HTML sémantiques restent la source de navigation et de contenu. Un contexte de destination mesure leurs ancres et transforme le scroll en progression orbitale ; le contrôleur WebGL reprojette ensuite les positions des mondes dans le DOM pour fournir des cibles d’interaction accessibles.

Un canvas unique évite de multiplier les contextes WebGL. Les ressources procédurales sont générées hors exécution, le DPR responsive est plafonné et le mode de réduction des animations supprime le mouvement continu tout en conservant le contenu et la navigation.

Le principal défi consistait à garder les planètes projetées visuellement au premier plan sur petit écran sans bloquer les liens ni le texte. Le canvas ignore les entrées de pointeur et des contrôles sémantiques séparés assurent l’accès au clavier et au tactile.

L’implémentation montre comment les mesures de scroll, la projection WebGL, les calques CSS et le HTML accessible peuvent fonctionner ensemble sans faire de la scène 3D l’unique moyen d’utiliser le site.