Portfolio développeur
Un portfolio moderne développé avec Next.js et Tailwind CSS, conçu pour présenter mes projets, mon parcours et ma stack technique. Ce projet m’a également permis d’utiliser shadcn/ui et de découvrir Claude Code CLI.
Vue d'ensemble
Ce portfolio est un projet personnel conçu pour présenter mon parcours atypique, mes projets techniques et ma stack de prédilection. Au-delà d'une simple vitrine, il reflète ma façon d'aborder le développement : attention portée à la qualité du code, aux bonnes pratiques et à la maintenabilité. Il a également été l'occasion de découvrir Next.js, l'écosystème frontend moderne et Claude Code CLI.
Problématique
En tant que développeur en reconversion, il était important de disposer d'un espace qui ne se contente pas de lister des projets, mais qui témoigne d'une vraie démarche technique. L'enjeu était de concevoir un site lisible, accessible et performant, sans tomber dans la surcharge visuelle souvent présente dans les portfolios de développeurs.
Architecture
Le site repose sur Next.js 15 avec l'App Router et les React Server Components par défaut. Le style est entièrement géré via Tailwind CSS v4, dont la configuration se fait directement en CSS sans fichier de configuration dédié. Les composants UI s'appuient sur shadcn/ui. Les animations sont gérées par Framer Motion. Le formulaire de contact utilise Resend pour l'envoi d'emails, avec un rate limiting via Upstash Redis pour limiter les abus. Le projet est déployé sur Vercel.
Fonctionnalités
- Design one-page responsive, mobile-first
- Section parcours avec timeline interactive par onglets
- Pages projets dynamiques avec métadonnées SEO générées automatiquement
- Carrousel de stack technique animé (marquee)
- Formulaire de contact avec validation, protection honeypot et rate limiting
- Mode clair / sombre via next-themes
- Animations d'entrée avec Framer Motion et respect de prefers-reduced-motion
Défis
- Appréhender Tailwind CSS v4 et sa configuration entièrement en CSS
- Maîtriser la frontière RSC / composants client pour minimiser le JavaScript envoyé au navigateur
- Mettre en place un formulaire de contact sécurisé avec rate limiting côté serveur
- Concevoir une interface accessible tout en intégrant des animations fluides
Voir aussi
