- Statut
- Portfolio actif — version 2 publiée
- Responsabilité
- Conception, développement, contenus et qualité
- Périmètre
- SPA bilingue déployée sur Vercel
Le projet
Présenter mon travail sans me réduire à une liste de technologies
My-Website est à la fois mon portfolio professionnel et un espace d’exploration. Il présente des produits réellement construits, rend visibles mes choix techniques et ouvre aussi sur le Web3, les voyages et l’écriture. L’objectif est qu’un recruteur puisse comprendre rapidement mon profil, tout en laissant aux visiteurs curieux plusieurs niveaux de lecture.
Expérience proposée
Une vitrine professionnelle qui reste personnelle
Le site organise les contenus par grands univers et adapte chaque format à ce qu’il doit raconter : étude de cas, prototype interactif, carnet de voyage ou réflexion.
Navigation par univers
Portfolio, Web3, voyages et réflexions possèdent chacun leur page, leur navigation locale et leurs contenus bilingues, tout en partageant une identité visuelle commune.
Images adaptées à chaque écran
Portraits, captures et albums sont servis dans plusieurs tailles et formats modernes afin de conserver une bonne qualité sans imposer les fichiers originaux aux visiteurs.
Interactions utiles
Carte, globe, galeries, frises, outils Web3 et changement de langue enrichissent la visite tout en conservant des parcours clavier et des alternatives lisibles.
Architecture
Comment le site fonctionne
Vite initialise React, l’internationalisation et les mesures de performance.
AppShell porte le lien d’évitement, la navigation, le contenu principal, les états de chargement et les erreurs globales.
Chaque page et son espace de traduction sont chargés à la demande depuis un registre de routes unique.
Les fonctionnalités Home, Web3, Travel et Reflections restent organisées par domaine ; les appels externes passent par des services dédiés.
ResponsiveImage consomme des manifests générés afin de choisir le format et la largeur adaptés au contexte.
Le build statique cible Vercel avec Node 24, une installation reproductible, une vraie 404 et un cache long réservé aux assets versionnés.
Décisions et compromis
Des choix cohérents avec le contenu
Évolution continue
Le site est un produit vivant : les projets, voyages et textes peuvent s’enrichir sans remettre en cause toute l’architecture.
Sources et dérivés séparés
Les originaux servent de sources de travail ; seules les variantes nettoyées et optimisées sont destinées au site public.
Audit avant déclaration
Le RGAA est traité avec une matrice de critères et des preuves manuelles. Les résultats locaux ne deviennent pas une déclaration de conformité avant une contre-vérification de la version déployée.
Dépendances externes isolées
E-mail, Mapbox, RPC, données de prix et inspection de wallet passent par des adaptateurs afin de séparer l’interface des fournisseurs.
Défis de conception
Faire tenir plusieurs expériences dans un même site
Préserver la cohérence
Des albums, articles, outils et études de cas très différents doivent rester identifiables sans fragmenter l’expérience globale.
Rendre l’interactif accessible
Globe, carte, frise, carrousels, dialogues et outils Web3 demandent des alternatives textuelles, une navigation clavier et une gestion rigoureuse du focus.
Rester crédible
Les projets actifs, académiques et historiques doivent être nommés selon leur statut réel, et les résultats limités à ce que le code ou les audits permettent de prouver.
Fonctionnalités
Ce que le visiteur peut faire aujourd’hui
- Parcourir des études de cas qui expliquent le besoin, le fonctionnement, l’architecture et les compromis de chaque projet.
- Explorer des prototypes Web3, inspecter des adresses publiques et comprendre les domaines techniques qui m’intéressent.
- Naviguer dans mes voyages avec un globe, une carte, une frise chronologique et des galeries responsives.
- Lire des réflexions plus longues dans une interface bilingue, navigable au clavier et adaptée aux petits écrans.
Périmètre technique
Les principes qui structurent le produit
- React et React Router structurent une application monopage découpée en routes chargées à la demande.
- Vite produit le build statique, déployé sur Vercel avec des pages SEO générées pour les principales routes.
- Les appels vers Mapbox, les RPC blockchain, les prix et l’e-mail passent par des services dédiés plutôt que par les composants d’interface.
- i18next porte les versions française et anglaise, tandis que les contenus de voyage et les projets restent décrits dans des données structurées.
- Vitest, Testing Library, axe-core, ESLint et TypeScript sécurisent les comportements importants avant construction.
- Les médias responsives, les budgets de build et le chargement différé limitent le coût des pages les plus riches.
Stack
Technologies et contrôles principaux
- React
- Vite
- React Router
- i18next
- Vitest
- axe-core
- Vercel