Migration et reconstruction de mon portfolio vers Next.js, avec rendu serveur, architecture de composants, données centralisées et design fidèle à l'ancienne version. Le projet conserve aussi toute la partie DevOps : Docker, VPS, Nginx, Cloudflare et pipeline CI/CD GitHub Actions.
Design et prototypage de l'interface avant le développement.
Avant le développement, j'ai conçu une maquette complète sur Figma pour définir l'identité visuelle, la charte graphique et l'architecture de l'information.
La maquette pose la palette beige, orange brûlé et vert profond, la typographie Poppins, les composants réutilisables et les grandes intentions d’animation.
Cette étape m'a permis de valider le responsive et l'expérience utilisateur avant de reconstruire le site dans une base Next.js plus maintenable.
Environnement de développement conteneurisé pour travailler proprement sur la version Next.js.
Le nouveau portfolio Next.js tourne dans un service Docker dédié, isolé de l'ancien site PHP. En production, le conteneur écoute uniquement en local derrière Nginx, ce qui limite les ports exposés et garde le déploiement maîtrisé.
Orchestration du service Next.js isolé du site PHP historique.
Rechargement instantané pendant la migration section par section.
Configuration reproductible entre développement, build et production.
Mise en place complète d'un environnement de production sécurisé.
Création et administration du serveur virtuel privé avec accès SSH complet.
Configuration du reverse proxy vers le serveur Next.js et gestion des routes du portfolio.
Compilation optimisée du site, génération des routes et préparation de l’image Docker de production.
Proxy Cloudflare, certificat HTTPS, protection réseau et configuration DNS.
Rattachement du domaine personnalisé avec les enregistrements DNS adaptés.
Durcissement SSH, firewall UFW et limitation des ports exposés.
Déploiement automatique en production à chaque évolution validée.
Le pipeline GitHub Actions construit l'image Docker Next.js, la pousse sur GHCR puis la déploie sur le VPS via SSH avec healthchecks avant bascule Nginx. La mise en production reste reproductible et ne dépend pas de manipulations manuelles.
Commit des modifications sur GitHub.
Installation des dépendances et génération du build Next.js.
Lint, build et contrôles avant déploiement.
Publication automatique sur le VPS.
Technologies et outils utilisés pour la version Next.js du portfolio.
Rendu serveur, metadata SEO par page, routes App Router et API de contact intégrée.
Interface découpée en composants réutilisables avec données séparées du JSX.
Styles isolés par composant, tokens CSS et variables globales.
Image de production sécurisée, service isolé et healthchecks avant bascule.
Serveur web de production pour servir le portfolio et gérer les routes.
DNS, HTTPS, cache et protection réseau autour du domaine.
Pipeline CI/CD pour automatiser les validations et le déploiement.
Versioning du code et suivi propre de la migration.
