Ernest Nde Portfolio
Création d'un portfolio personnel développé de A à Z avec Next.js (App Router), Tailwind CSS et TypeScript. Au-delà d'un simple site vitrine, ce projet intègre un véritable mini-CMS sur mesure (géré avec Prisma ORM et MySQL) pour administrer dynamiquement les projets, les compétences, le parcours et les services. L'interface propose un thème original Cyberpunk/Terminal, un basculement Light/Dark mode fluide, et de riches animations gérées via Framer Motion.
# Interface_Snapshots
Behind_The_Build
Contexte & objectif
Ce portfolio n'est pas une simple vitrine statique : c'est aussi mon propre back-office. Plutôt que de coder chaque nouveau projet en dur, j'ai construit une plateforme où je peux ajouter, illustrer et documenter mes réalisations directement depuis une interface d'administration — sans repasser par un déploiement à chaque mise à jour de contenu.
Choix techniques
Prisma + MySQL en source de vérité, mais chaque section du site retombe sur des données statiques si la base est indisponible — le site reste toujours visible, même en cas d'incident.
Deux identités visuelles distinctes dans la même app : le front-office garde une esthétique "terminal" sombre et monospace, le back-office utilise une palette neutre et une police sans-serif pensée pour scanner des listes toute la journée — chacune pilotée par ses propres tokens CSS, sans dupliquer les fichiers de styles.
Le rôle ADMIN est vérifié côté serveur à chaque route sensible (upload média, écriture projet), pas seulement masqué côté interface.
Intégrations clés
Resend — envoi transactionnel des emails du formulaire de contact, sans gérer de serveur SMTP.
Cloudflare R2 — stockage des médias (thumbnails, galerie projets) uploadés depuis le back-office, compatible S3.
TipTap — éditeur de texte riche pour documenter chaque projet directement depuis l'admin, sans dépendre d'un CMS externe.
Better Auth — authentification et gestion des sessions du back-office.
Three.js — canvas 3D en fond de la section hero, pour donner du relief à la première impression sans alourdir le reste du site.
Défis rencontrés
Contenu riche sans CMS dédié — intégrer TipTap en gardant le champ de contenu en simple colonne texte côté base de données, pour éviter une migration lourde. Le HTML est nettoyé côté serveur avant affichage plutôt que fait confiance tel quel.
Deux design systems, un seul CSS global — éviter que les couleurs du dashboard ne débordent sur le site public, ou l'inverse. Résolu en isolant les variables CSS sous un scope dédié plutôt qu'en dupliquant les feuilles de style.
Résilience du contenu — chaque appel à la base est protégé, avec un rendu de secours identique en apparence, pour que la page ne casse jamais même en cas d'erreur.
Résultats
Ajouter un projet ne nécessite plus de toucher au code : upload d'images, rédaction en texte riche, gestion du statut et de la stack, tout se fait depuis l'admin. Le site reste lisible même sans base de données, et les deux interfaces (publique et admin) évoluent visuellement sans se marcher dessus.