The site you're reading: Next.js 16, bilingual with automatic language detection, polished animations, self-hosted in Docker on my own server.
Preview
Stack
- Languages
- TypeScript
- Front-end
- Next.js
- Tailwind CSS
- Framer Motion
- Infra
- Docker
- Nginx Proxy Manager
- GitHub Actions
Context
My first portfolio (a Three.js 3D scene) was slow and hard to read. I wanted a site that owns my dual network/telecom and development profile, fast and accessible, and that I control end to end: from the code to the server it runs on.
Role
Design, development and production: art direction, case study content, architecture, deployment and maintenance.
Architecture
Browser
FR or EN from its language
Nginx Proxy Manager
HTTPS, Let's Encrypt
Next.js proxy
Language detection, URL rewriting
Static pages
Pre-rendered in FR and EN
API routes
Contact form, visit counter
Gmail SMTP
Contact form messages
Docker volume
Visit counter
Challenges
Smooth animations (page transition curtain, contextual cursor, magnetic buttons, smooth scrolling) without trading away performance or accessibility: everything turns off when visitors prefer reduced motion, and the site targets 90+ on Lighthouse. A complete English version with browser language detection and translated URLs, handled by a Next.js proxy with no library. A contact form that sends real emails over SMTP, with spam protection. And scrolling that got stuck after navigating, fixed by observing the page's real height.
Outcome
Pages pre-rendered in both languages, served by a lightweight Docker container behind Nginx Proxy Manager, with a cookie-free self-hosted visit counter, a generated preview image for each project and a build checked by GitHub Actions on every push.
Highlights
- FR / EN with automatic detection, translated URLs and hreflang
- Page transitions and contextual cursor, prefers-reduced-motion respected
- Standalone Docker behind Nginx Proxy Manager, on my Hetzner server
- Lint and build checked by GitHub Actions on every push