Accueil du portfolio : photo, nom, titre et boutons de contact

Portfolio interactif multilingue et CMS personnel

Date : 2026

Développement web
En cours

Réalisation de ce site : portfolio, CV interactif et journal photo en anglais, français et arabe (RTL), entièrement administrable depuis un CMS headless.

Aperçu

Ce site est lui-même l’un de mes projets : un portfolio personnel qui réunit un CV interactif, une vitrine de projets, un profil professionnel et un journal de mes activités en photos, le tout piloté depuis un CMS personnel.

Tout le contenu vient de la base de données et est traduit en trois langues, avec une véritable interface de droite à gauche en arabe. Chaque élément suit les mêmes deux niveaux : un aperçu court, puis une vue détaillée avec photos et légendes.

Le projet a d’abord été spécifié (modèle de données, règles métier, design system, objectifs d’accessibilité et de performance), puis livré phase par phase, avec des tests automatisés à chaque étape.

Chiffres clés

langues, dont l’arabe en RTL: 3; langues, dont l’arabe en RTL
tests unitaires: 164; tests unitaires
score d’accessibilité Lighthouse: 100; score d’accessibilité Lighthouse

Technologies

Problème

Un portfolio statique devient vite obsolète, se traduit difficilement et montre rarement tout le parcours — projets, expériences, associations, événements — de façon claire et accessible.

Solution

Une application Next.js 15 (App Router) intégrant Payload CMS 3 et MongoDB : rendu serveur pour le SEO, localisation native du contenu (en/fr/ar) avec fallback, interface traduite avec next-intl, propriétés logiques Tailwind v4 pour le RTL, brouillons et revalidation à la demande pour que le site se mette à jour dès la publication.

Ma contribution

Conception et réalisation de tout le projet : spécification, modèle de données et collections, design system (thèmes clair et sombre, couleur d’accent réglable), composants publics, personnalisation de l’administration, SEO, tests unitaires et de bout en bout.

Fonctionnalités

Trois langues avec une vraie interface RTL en arabe, URL traduites et changement de langue qui conserve la page, les filtres et la fenêtre ouverte
Parcours carte → détail avec transition partagée, liens profonds, gestion du focus au clavier et bottom sheet sur mobile
Récits photo légendés avec visionneuse plein écran (swipe, zoom, flèches inversées en RTL)
CV interactif : chapitres numérotés, entrées dépliables sur place, frise des années et mise en évidence des compétences
Administration avancée : constructeur de page d’accueil, presets, complétude des traductions par langue, upload multiple de photos, aperçu en direct
Palette de commandes (Ctrl/⌘ + K), images Open Graph dynamiques, page CV imprimable, sitemap multilingue et JSON-LD

Captures d'écran

Section Stages et projets : frise des stages avec leurs projets réalisés — Stages & projets : chaque stage sur la frise avec le projet qui y a été réalisé ; « Voir le projet » ouvre son détail.

Section Certificats : barre de catégories et galerie de certificats — Certificats : une galerie qui passe d’une catégorie à l’autre, entièrement gérée depuis l’admin.

Version arabe de l’accueil, affichée de droite à gauche — Interface réellement de droite à gauche en arabe, à côté de l’anglais et du français.

Admin : constructeur de l’accueil et ses sections — Admin (Payload CMS) : l’accueil est construit à partir de sections que l’on réordonne, masque et configure.

Admin : édition d’un projet, avec l’état des traductions par langue — Édition d’un projet dans l’admin, avec l’état des traductions en anglais, français et arabe.

Admin : liste des catégories de certificats — Catégories de certificats, créées et réordonnées par glisser-déposer dans l’admin.