Le site que vous lisez : Next.js 16, bilingue avec détection automatique de la langue, animations soignées, auto-hébergé en Docker sur mon serveur.
Aperçu
Stack
- Langages
- TypeScript
- Front-end
- Next.js
- Tailwind CSS
- Framer Motion
- Infra
- Docker
- Nginx Proxy Manager
- GitHub Actions
Contexte
Mon premier portfolio (une scène 3D Three.js) était lent et peu lisible. Je voulais un site qui assume mon double profil réseau/télécom et développement, rapide, accessible, et que je maîtrise de bout en bout : du code jusqu'au serveur qui l'héberge.
Rôle
Conception, développement et mise en production : direction artistique, contenu des études de cas, architecture, déploiement et maintenance.
Architecture
Navigateur
FR ou EN selon sa langue
Nginx Proxy Manager
HTTPS, Let's Encrypt
Proxy Next.js
Détection de langue, réécriture des URL
Pages statiques
Pré-générées en FR et EN
Routes API
Formulaire, compteur de visites
SMTP Gmail
Messages du formulaire
Volume Docker
Compteur de visites
Défis
Des animations fluides (rideau de transition entre les pages, curseur contextuel, boutons magnétiques, défilement doux) sans sacrifier les performances ni l'accessibilité : tout est coupé si le visiteur préfère réduire les animations, et le site vise 90+ sur Lighthouse. Une version anglaise complète, avec détection de la langue du navigateur et des URL traduites, gérée par un proxy Next.js sans librairie. Un formulaire de contact qui envoie de vrais e-mails en SMTP, avec anti-spam. Et un défilement qui restait bloqué après une navigation, corrigé en observant la hauteur réelle de la page.
Résultat
Des pages pré-générées dans les deux langues, servies par un conteneur Docker léger derrière Nginx Proxy Manager, avec un compteur de visites auto-hébergé sans cookies, une image d'aperçu générée pour chaque projet et un build vérifié par GitHub Actions à chaque push.
Points clés
- FR / EN avec détection automatique, URL traduites et hreflang
- Transitions de page et curseur contextuel, prefers-reduced-motion respecté
- Docker standalone derrière Nginx Proxy Manager, sur mon serveur Hetzner
- Lint et build vérifiés par GitHub Actions à chaque push