- Status
- Active portfolio — version 2 published
- Responsibility
- Design, development, content and quality
- Scope
- Bilingual SPA deployed on Vercel
The project
Present my work without reducing myself to a list of technologies
My-Website is both my professional portfolio and a space for exploration. It presents products I have actually built, makes my technical decisions visible and also opens onto Web3, travel and writing. A recruiter can understand my profile quickly, while curious visitors can explore the site at several levels.
Experience
A professional showcase that remains personal
The site organizes content into distinct worlds and gives each one the right format: product case study, interactive prototype, travel journal or reflection.
Navigation by world
Portfolio, Web3, travel and reflections each have their own page, local navigation and bilingual content while sharing a coherent visual identity.
Images for every screen
Portraits, screenshots and albums are served in several sizes and modern formats to preserve quality without sending original files to visitors.
Useful interactions
The map, globe, galleries, timelines, Web3 tools and language switch enrich the visit while preserving keyboard paths and readable alternatives.
Architecture
How the site works
Vite initializes React, internationalization and performance measurements.
AppShell owns the skip link, navigation, main content, loading states and global error handling.
Each page and its translation namespace are loaded on demand from a single route registry.
Home, Web3, Travel and Reflections remain organized by domain; external calls go through dedicated services.
ResponsiveImage consumes generated manifests to select the appropriate format and width for each context.
The static build targets Vercel with Node 24, reproducible installs, a real 404 and long-lived caching limited to versioned assets.
Decisions and trade-offs
Choices aligned with the content
Continuous evolution
The site is a living product: projects, trips and articles can grow without requiring the entire architecture to be rebuilt.
Separate sources and derivatives
Originals remain working sources; only cleaned and optimized variants are intended for the public site.
Audit before declaration
RGAA work uses a criterion matrix and manual evidence. Local results do not become a compliance statement before the deployed version is checked again.
Isolate external dependencies
Email, Mapbox, RPC, price data and wallet inspection go through adapters that separate the interface from providers.
Design challenges
Bring several experiences together in one site
Preserve consistency
Very different albums, articles, tools and case studies must remain identifiable without fragmenting the overall experience.
Make interaction accessible
The globe, map, timeline, carousels, dialogs and Web3 tools require text alternatives, keyboard navigation and careful focus management.
Remain credible
Active, academic and historical projects must be named by their real status, with results limited to what the code or audits can prove.
Features
What visitors can do today
- Read case studies explaining the need, behaviour, architecture and trade-offs behind each project.
- Explore Web3 prototypes, inspect public addresses and understand the technical areas that interest me.
- Navigate my trips through a globe, a map, a timeline and responsive photo galleries.
- Read longer reflections in a bilingual interface designed for keyboard navigation and small screens.
Technical scope
The principles behind the product
- React and React Router structure a single-page application split into routes loaded on demand.
- Vite produces the static build deployed on Vercel, with SEO pages generated for the main routes.
- Mapbox, blockchain RPC, price and email calls go through dedicated services rather than interface components.
- i18next powers the French and English versions, while travel and project content lives in structured data.
- Vitest, Testing Library, axe-core, ESLint and TypeScript protect important behaviour before builds.
- Responsive media, build budgets and lazy loading control the cost of the richest pages.
Stack
Core technologies and controls
- React
- Vite
- React Router
- i18next
- Vitest
- axe-core
- Vercel