Portfolio Développeur - Emmanuel Adoum
01. Vue d'ensemble
Portfolio full-stack cinématographique construit avec Next.js 15 et TypeScript, incluant blog, commentaires Firebase, OAuth Google, dashboard admin et UI premium.
Objectif
Construire un portfolio de niveau production qui présente mes projets et un blog complet avec authentification et administration.
Résultat
Plateforme portfolio/blog déployée sur emmanueladoum.com avec animations fluides, commentaires imbriqués et back-office admin.
02. Stack technique
03. Fonctionnalités clés
UI cinématique glassmorphism avec animations Framer Motion
Plateforme blog complète avec catégories, tags, recherche et table des matières
Système de commentaires et réponses imbriqués avec authentification
Google OAuth et login email/password via NextAuth.js
Dashboard admin pour gestion des articles et utilisateurs
Mode sombre/clair avec détection des préférences système
Design entièrement responsive
04. Pipeline d'ingénierie
Construction des sections portfolio: Hero, About, Skills, Projects, Journey, Testimonials, Contact
Développement d'un blog complet avec catégories, tags, recherche et articles liés
Implémentation de l'authentification (email + Google OAuth) avec routes protégées et dashboard admin
Ajout d'un système de commentaires/réponses imbriqués sur Firebase Firestore
Déploiement sur Vercel avec domaine personnalisé emmanueladoum.com
05. Défis & exécution
Contrainte
Construire un système de commentaires imbriqués sécurisé avec réponses et mises à jour en temps réel sur une architecture Next.js static-first
Exécution
Conception d'un modèle Firebase pour commentaires/réponses par article avec documents liés aux utilisateurs.
Contrainte
Implémenter OAuth Google avec NextAuth.js sur domaine personnalisé et URI de redirection correctes
Exécution
Configuration de NextAuth.js avec NEXTAUTH_URL sur le domaine de production et callback URI ajoutée dans Google Cloud Console.
Contrainte
Obtenir une UI cinématique premium (glassmorphism + Framer Motion) tout en gardant d'excellentes performances
Exécution
Utilisation d'animations layout Framer Motion, springs et reveals en cascade pour des interactions fluides sans layout thrash.