Projet développement web
Portfolio
Portfolio professionnel responsive réunissant mes univers Direction Artistique et Développement Web, construit avec Astro.
Stack technique
Contexte
Ce portfolio constitue le projet final de ma formation Développeur Web OpenClassrooms. Le brief demandait de concevoir et publier un portfolio professionnel responsive permettant de présenter mes compétences et plusieurs projets réalisés pendant la formation. J’ai choisi d’aller plus loin en construisant une identité commune à mes deux métiers : directeur artistique et développeur web.
Objectifs
- Présenter clairement mon parcours, mes compétences et mes projets de développement web.
- Mettre en valeur plusieurs projets réalisés pendant la formation OpenClassrooms.
- Réunir mes univers Direction Artistique et Développement Web dans un même site.
- Créer une expérience responsive adaptée au desktop, à la tablette et au mobile.
- Développer une architecture simple à maintenir et à enrichir.
- Travailler le référencement naturel, l’accessibilité et les performances.
- Mettre en ligne une version publique utilisable comme véritable portfolio professionnel.
Visuels du projet
Architecture et composants
L’architecture repose sur Astro et trois espaces principaux : la homepage immersive à la racine, /creative pour mon travail de direction artistique et /dev pour mes projets de développement web. Les projets DEV sont centralisés dans un fichier de données TypeScript puis leurs fiches sont générées automatiquement par une route dynamique Astro avec getStaticPaths(). Les éléments communs du site sont isolés dans des composants réutilisables afin de faciliter leur maintenance.
Fonctionnalités
- Homepage immersive reliant les univers CRÉA et DEV.
- Séquence de 19 images animée dans un canvas.
- Interaction desktop pilotée par le pointeur.
- Animation automatique adaptée aux tablettes et smartphones.
- Interface mobile spécifique en trois blocs superposés au hero.
- Pages Creative et DEV visuellement distinctes mais cohérentes.
- Fiches projets DEV générées à partir de données centralisées.
- Navigation responsive.
- Gestion de prefers-reduced-motion.
- Métadonnées SEO et structure HTML sémantique.
Performance
- Génération statique des pages avec Astro.
- JavaScript limité aux interactions nécessitant réellement un comportement client.
- Préchargement des ressources critiques du hero.
- Fallback immédiat avant affichage du canvas.
- Premier dessin valide avant révélation de l’animation.
- Pause de l’animation lorsque le hero sort du viewport.
- Pause lorsque l’onglet du navigateur est masqué.
- Optimisation progressive des images et des ressources.
SEO
- Balises title et meta description.
- Structure HTML sémantique.
- URLs propres.
- Canonical.
- Sitemap XML.
- Descriptions textuelles des projets.
- Hiérarchie cohérente des titres.
- Contenu principal disponible indépendamment des effets visuels.
Accessibilité
- Navigation basée sur de vrais liens HTML.
- Navigation clavier.
- États focus visibles.
- Textes alternatifs associés aux images.
- Gestion de prefers-reduced-motion.
- Contrôle des contrastes avec des outils comme WAVE.
- Contenu utilisable même lorsque l’animation est désactivée.
Challenge principal
Le principal défi était de concevoir une homepage suffisamment forte graphiquement pour représenter mon métier de directeur artistique sans sacrifier les exigences d’un projet de développement web : performances, responsive, accessibilité, référencement et maintenabilité. Il fallait également faire fonctionner une animation immersive sur desktop, tablette et mobile malgré des modes d’interaction différents.
Solution apportée
J’ai choisi Astro afin de générer principalement du HTML statique et de limiter le JavaScript aux interactions nécessaires. Le hero utilise une séquence de 19 frames rendues dans un canvas. Sur desktop, l’animation répond à l’interaction du pointeur ; sur tablette et mobile, elle fonctionne automatiquement. Une image de fallback est affichée avant le premier rendu valide du canvas afin d’éviter les flashs de chargement. Les projets sont centralisés dans des données TypeScript et les pages sont générées automatiquement afin de conserver une architecture cohérente et extensible.
Résultats
- Un portfolio professionnel réunissant Direction Artistique et Développement Web dans une seule architecture.
- Une homepage immersive adaptée aux différents types d’écrans et d’interactions.
- Un système de données permettant de créer et maintenir facilement les fiches projets DEV.
- Un site statique performant et adapté au référencement naturel.
- Une base évolutive pouvant accueillir progressivement de nouveaux projets et contenus.
Améliorations possibles
- Ajouter une CI GitHub exécutant automatiquement le build et les contrôles qualité.
- Ajouter davantage de tests automatisés sur les interactions du hero.
- Continuer les audits Lighthouse et WAVE.
- Poursuivre l’optimisation du poids des médias.
- Automatiser davantage la création des fiches projet.
- Continuer les tests responsive sur davantage d’appareils physiques.