Étape 1 : Analyse de portfolios

Ce que l’on peut retenir de ces portfolios

Les éléments cochés correspondent à ce qui est déjà réalisé sur mon portfolio.

Points forts

• Utiliser une barre de navigation claire
• Répartir le contenu sur plusieurs pages
• Bien détailler les projets
• Mettre les compétences techniques en avant
• Ne pas utiliser de pourcentages pour les compétences
• Optimiser le responsive
• Tester les fonctionnalités avant publication
• Faire des textes courts mais détaillés

Points faibles à éviter

• Éviter la surcharge de contenu
• Ne pas négliger le mobile-first
• Éviter les animations inutiles
• Aller au bout des fonctionnalités
• Éviter les zones vides

Bonnes pratiques retenues

Mettre en place un système de tri pour les projets afin de faciliter la navigation.

Mettre en valeur les mots importants, éventuellement sous forme de liens.

Séparer les contenus en plusieurs pages pour plus de clarté.

Utiliser des animations légères et fluides.

Ajouter une section expliquant le BTS SIO et ses spécialités.

Détail des compétences accompagné d’exemples concrets de projets.

Structurer la veille technologique par thèmes.

Présenter le parcours scolaire sous forme de frise chronologique.

Proposer une version multilingue du site.

Style et ambiance souhaités

Pour le style et l’ambiance du site, je souhaitais partir sur du glassmorphism, avec des effets de transparence et de flou pour un rendu moderne. Cela a été le cas pour la première version du portfolio.
Cependant, afin de respecter les règles RGAA et de proposer un contenu plus professionnel, je me suis réorienté vers un portfolio davantage orienté neuromorphism.

Étape 2 : Maquette initiale

Cliquez sur l’image pour l’ouvrir en grand.

Étape 3 : Création du portfolio

Ce portfolio a été entièrement réalisé sans framework, en utilisant PHP, HTML, CSS et JavaScript. L’objectif était de concevoir un site personnel de bout en bout pour mon BTS SIO SLAM.

Architecture du projet

Le site repose sur une architecture de type MVC (Modèle – Vue – Contrôleur), permettant de séparer la logique métier, l’affichage et la gestion des données.

C:.
├── config
├── control
├── datas
├── page
├── storage
└── www
    ├── css
    ├── js
    ├── img
    └── translations
    

Gestion multilingue

Les traductions du site sont gérées via des fichiers JSON, ce qui permet de changer de langue facilement et d’ajouter de nouvelles traductions sans modifier la structure du site.

Bonnes pratiques et accessibilité

Le portfolio évolue au fil de mon apprentissage. J’essaie d’intégrer progressivement les bonnes pratiques, notamment en matière d’accessibilité (RGAA), de lisibilité et de performance.

Étape 4 : Hébergement

Découverte de Google Cloud Platform

Google Cloud Platform (GCP) est une plateforme cloud proposée par Google permettant d’héberger des applications, des bases de données et des services sans infrastructure physique à gérer.

Hébergement de l’application

Le portfolio est hébergé via Cloud Run et fonctionne sous forme d’une image Docker, pour un environnement stable et sécurisé.

Stockage des données

Les ressources statiques sont stockées dans des buckets GCP, permettant une meilleure gestion des fichiers et une séparation claire entre application et données.

Base de données MySQL

La base de données MySQL est hébergée sur une machine virtuelle avec disque persistant, assurant la conservation des données même en cas d’arrêt de l’instance.

Optimisation des coûts

Des scripts Python exécutés via Cloud Run permettent d’éteindre automatiquement la base de données la nuit et de la redémarrer le jour afin de limiter les coûts.

Étape 5 : Sécurité & Accessibilité (RGAA)

Sécurité

La sécurité du site a été abordée progressivement au cours du développement. L’architecture MVC permet de mieux organiser le code et de séparer les différentes responsabilités de l’application.

Lors du développement du formulaire de contact, une faille XSS était présente. Les champs n’étaient pas filtrés, ce qui permettait d’injecter du code JavaScript (balises <script>, entre autres). Autant dire que certains s’en sont donné à cœur joie 😅.

Cette faille a ensuite été corrigée grâce au filtrage et à l’échappement des données en entrée et en sortie. Cela m’a permis de mieux comprendre l’importance de ne jamais faire confiance aux données saisies par un utilisateur.

Accessibilité et RGAA

L’accessibilité du site est travaillée progressivement. Le RGAA n’est pas encore respecté sur l’ensemble du site, mais plusieurs points ont déjà été pris en compte, notamment sur le contenu principal.

Des éléments comme les liens d’évitement (skip links), les textes alternatifs sur les images, la structure des titres et l’utilisation d’attributs ARIA sur certains composants ont été mis en place.

L’accessibilité du contenu est plus avancée que celle du header et du footer, qui restent des parties à améliorer. Tous les critères ne sont pas encore totalement validés, mais le site évolue au fur et à mesure de mes apprentissages.

Cette démarche me permet surtout de mieux comprendre les enjeux de l’accessibilité et d’adopter de bonnes habitudes pour mes futurs projets.