Portfolio
Description
Ce projet avait pour objectif de concevoir et développer un site ePortfolio professionnel visant à valoriser mes compétences, projets et expériences acquises durant le BUT MMI. Le projet a été entièrement pensé pour respecter les standards du Web, intégrer des technologies modernes et permettre une évolution continue du contenu via un CMS headless.
Préparation du contenu : centralisation des projets via Notion et OneDrive, rédaction et hiérarchisation des informations.
Conception UX/UI : création d’une maquette interactive sous Figma pour organiser la navigation, choisir les typographies et planifier la structure.
Développement Front-End avec Astro (architecture JAMstack), en intégrant TailwindCSS pour une interface responsive et cohérente.
Back-End : connexion à un CMS headless (Directus) permettant une gestion dynamique des projets.
Optimisation technique :
Balises ARIA et conformité W3C
SVG, compression des images via Lightroom
Partage d’un seul back pour plusieurs sites (sobriété numérique)
Déploiement sur un VPS Digital Ocean avec Dokploy (Docker) pour l’orchestration des conteneurs (front + back).
Intégration d’un composant réutilisable et appel dynamique des données via API avec typage TypeScript.
Composantes essentielles
C.E. 4.0 1 : Se conformer aux standards du Web et aux normes d'accessibilité.
→ Respect des standards W3C, optimisation images
C.E. 4.0 2 : Appliquer des concepts théoriques issus de l’informatique et des sciences de l'information.
→ Architecture JAMstack, typage avec TypeScript, API RESTful via CMS headless.
C.E. 4.0 3 : Produire un code fonctionnel, sobre et réutilisable.
→ Développement de composants dynamiques et réutilisables en Astro + TailwindCSS.
C.E. 4.0 4 : Utiliser des outils favorisants un développement itératif et collaboratif.
→ Maquettes Figma, gestion du contenu sur Notion, développement itératif avec CMS et conteneurisation Docker, GitHub.
C.E. 4.0 5 : Veiller à la sécurité des systèmes et des données.
→ Déploiement sécurisé sur VPS (Digital Ocean), séparation front/back, gestion API sécurisée (bloque adresse IP).
C.E. 5.0 1 : S’appuyer sur une veille technologique et des modèles d’innovation.
→ Choix de technologies modernes : Astro, CMS headless (Directus), typage TypeScript, déploiement via Dokploy.
C.E. 5.0 2 : Favoriser la collaboration entre les parties prenantes du projet.
→ Structure pensée pour permettre l’extension ou la collaboration future avec d’autres développeurs ou designers.
C.E. 5.0 3 : Respecter les droits et la vie privée.
→ Traitement local des médias, respect des droits d’auteur sur les contenus intégrés.
C.E. 5.0 4 : Favoriser la sobriété numérique.
→ Mutualisation du backend pour plusieurs sites, optimisation d’images, chargement différé, architecture statique.
Apprentissage critique
A.C. 34.01 : Développer à l’aide d’un framework de développement côté client.
→ Utilisation d’Astro et TailwindCSS pour créer une interface responsive, moderne et performante.
A.C. 34.02 : Développer à l’aide d’un framework de développement côté serveur.
→ Intégration du CMS Directus comme backend headless pour gérer le contenu dynamiquement.
A.C. 34.04 : Concevoir et développer des composants logiciels, plugins ou extensions.
→ Création de composants front-end réutilisables avec typage TypeScript et appels API.
A.C. 34.05 : Maîtriser l’hébergement et le déploiement d’applications.
→ Déploiement sur VPS avec Docker via Dokploy, gestion de services front et back.
A.C. 35.02 : Maîtriser la qualité en projet Web ou multimédia.
→ Optimisation des performances (images, SVG, lazy), respect de la conformité W3C.
A.C. 35.04 : Défendre un projet de manière convaincante.
→ Présentation du portfolio en tant qu’outil démontrant mes compétences techniques, UX/UI et de gestion de contenu.