Contexte
Le CV a été volontairement ramené à une page. Le portfolio devient donc l’espace où les projets, architectures, visuels, preuves publiques et détails techniques peuvent être développés sans alourdir le CV.
Retour aux projets
WEB / WP · PROJET FIL ROUGE
Zang.AI — Portfolio & WordPress Lab
Construction progressive d’un portfolio professionnel servant aussi de laboratoire d’apprentissage : une première version statique en HTML/CSS/JavaScript, puis une architecture pensée pour évoluer vers WordPress, PHP et une gestion de contenu plus structurée.
VUE D’ENSEMBLE
Comprendre le projet
Objectif
Proposer deux niveaux de lecture : une découverte rapide pour un visiteur non technique, puis des fiches détaillées permettant à un recruteur ou client d’examiner la conception et la stack.
Notre rôle
Concevoir l’architecture du contenu, l’interface responsive, la navigation, les composants projet, les fiches détaillées, le système de zoom des visuels et la future transition vers WordPress.
Résultat
Une maquette statique fonctionnelle avec huit projets, navigation desktop/mobile, CV téléchargeable, liens externes et un gabarit de fiche projet désormais réutilisable sur l’ensemble du portfolio.
ÉVOLUTION
Du prototype statique au WordPress Lab
Le projet est volontairement construit par étapes : comprendre d’abord le fonctionnement du front-end, stabiliser l’expérience et les contenus, puis migrer progressivement vers une architecture WordPress.
01 · HTML / CSS / JavaScript
Construction de la maquette, sidebar desktop, menu mobile, sections du portfolio, responsive design et comportements JavaScript nécessaires à la navigation.
02 · Système de fiches projets
Passage à huit cartes, création d’un gabarit détaillé commun, double niveau de lecture, navigation entre projets et agrandissement des schémas techniques.
03 · WordPress / PHP
Transformer progressivement la maquette en contenus administrables dans WordPress, en conservant le design, la structure des projets et la logique éditoriale déjà validée.
REPÈRES
Les choix structurants
DÉTAILS TECHNIQUES
Architecture et mise en œuvre
Le projet sert autant de vitrine professionnelle que de support d’apprentissage : chaque choix technique est volontairement visible, compréhensible et réutilisable dans la future version WordPress.
CONTENT · ARCHITECTURE
CV synthétique & portfolio détaillé
- CV recentré sur une page pour conserver une lecture immédiate.
- Huit projets servant de points d’entrée vers les preuves et détails techniques.
- Réutilisation des anciennes annexes du CV comme matière pour les fiches projets.
- Séparation claire entre projets, compétences, parcours et contenus éditoriaux.
- Gestion au cas par cas des liens publics, repos, captures et contraintes de confidentialité.
FRONTEND · UX
Interface responsive & accessible
- Structure HTML sémantique avec titres hiérarchisés et navigation cohérente.
- Sidebar persistante sur desktop et menu dédié sur mobile.
- Lien d’évitement permettant d’aller directement au contenu avec le clavier.
- Gestion des états de focus et navigation au clavier.
- Composant natif
<dialog>pour agrandir les schémas techniques.
COMPONENTS · PROJECTS
Gabarit de fiche réutilisable
- Hero projet avec statut, résumé, métadonnées et stack courte.
- Bloc « Comprendre le projet » conçu pour les visiteurs non techniques.
- Repères techniques et métriques pour donner une lecture intermédiaire.
- Détails techniques structurés en rubriques plutôt qu’en longs paragraphes.
- Blocs facultatifs pour galerie, ressources publiques et confidentialité.
NEXT · WORDPRESS
Migration progressive vers le CMS
- Conserver la maquette statique comme référence visuelle et fonctionnelle.
- Transformer progressivement les contenus en éléments administrables dans WordPress.
- Approfondir PHP et la logique de templates pendant la migration.
- Étudier une structuration dédiée des projets afin d’éviter la duplication manuelle des fiches.
- Préserver les principes responsive, accessibilité et double niveau de lecture dans la version CMS.
ÉTAT DU PROJET
Une construction documentée par étapes
- 01 Maquette HTML / CSS / JavaScript réalisé
- 02 Responsive desktop / mobile & navigation réalisé
- 03 Refonte CV une page & harmonisation des contenus réalisé
- 04 Passage à 8 cartes projets réalisé
- 05 Gabarit des fiches projets & zoom des visuels réalisé
- 06 Fiches détaillées des projets publiés réalisé
- 07 Migration et intégration WordPress / PHP à venir
STACK
Technologies & apprentissages
- HTML5
- CSS3
- JavaScript
- Responsive Design
- Accessibilité web
- Git / GitHub
- PHP
- WordPress
- MySQL
- phpMyAdmin
- REST API