AP1 — Portfolio professionnel

Le projet en bref

L'objectif

Le portfolio doit remplir deux rôles à la fois : servir de vitrine professionnelle pour une recherche d'alternance, et de support d'évaluation pour le BTS, où le jury doit retrouver facilement mes projets, mes compétences et ma veille technologique.

Contrainte que je me suis imposée : aucun framework, aucun CMS. Je m'appuie sur des assistants IA pour écrire le code, mais chaque page reste du HTML et du CSS que je relis, que je corrige et que je dois être capable d'expliquer.

Les étapes de réalisation

• Cadrage — définition de l'arborescence, des pages et des contenus, rédigés d'abord en Markdown pour se concentrer sur le fond avant la forme.
• Charte graphique — choix d'un thème sombre avec un orange (#FF5C00) comme unique couleur d'accent, de la typographie Montserrat, et création du logo « AK ».
• Intégration — HTML sémantique et CSS, écrits avec l'aide d'assistants IA et organisés autour de variables de couleurs, d'espacements et de rayons réutilisables.
• Responsive — mise en page fluide qui s'adapte du mobile au grand écran, avec un menu hamburger plein écran en dessous de 900 px.
• Version anglaise — traduction complète de chaque page et sélecteur de langue par drapeau.
• Mise en conformité — page de mentions légales, information RGPD sur le formulaire de contact.

Les points techniques

Socle

Ce que j'ai mis en place

• Une feuille de style unique partagée par toutes les pages, construite sur des variables CSS (--orange, --surface, --gouttiere…) : changer une couleur ou un espacement se fait à un seul endroit.
• Une typographie fluide avec clamp() : les titres s'adaptent progressivement à la largeur de l'écran au lieu de sauter d'une taille à l'autre à chaque point de rupture.
• Un menu mobile sans dépendance — l'ouverture repose sur une case à cocher et un sélecteur CSS, le JavaScript ne sert qu'à le refermer après un clic.
• Un site bilingue — chaque page existe en français et en anglais, avec un lien croisé qui renvoie vers la même page dans l'autre langue.
• Un formulaire de contact fonctionnel — les messages sont transmis par le service Formspree, sans back-end à héberger ni base de données à maintenir.
• Accessibilité — contrastes vérifiés sur fond sombre, navigation au clavier visible, animations désactivées pour les personnes qui le demandent dans leur système.

Difficultés rencontrées

• Le responsive — le premier menu fonctionnait sur desktop mais devenait inutilisable sur mobile. Il a fallu reprendre la mise en page en pensant d'abord au petit écran, puis élargir.
• Les chemins de fichiers — des liens internes cassés à cause d'espaces et de tirets bas mal placés dans les noms de fichiers. Une bonne leçon sur la façon de nommer les fichiers d'un site.
• La duplication du code — l'en-tête et le pied de page sont recopiés dans chaque fichier : toute modification doit être répercutée partout. C'est la limite d'un site statique sans outil de génération, et la piste d'amélioration principale.
• La cohérence visuelle — au fil des ajouts, les marges et les tailles de texte partaient dans tous les sens. Le passage à des variables CSS a remis de l'ordre.

Ce que j'en retiens

C'est le projet qui m'a fait passer du « ça marche sur mon écran » à « ça marche pour celui qui le consulte ». Travailler sans framework, même avec l'aide de l'IA, m'a obligé à comprendre le positionnement, la cascade et le responsive : pour corriger ce que l'IA propose, il faut d'abord savoir le lire.

Le portfolio n'est pas un projet qu'on termine : à chaque atelier, j'ajoute une page, je corrige ce qui a vieilli et je fais évoluer la charte. C'est aussi ce qui le rend représentatif de ma progression.

Pistes d'amélioration

• Mutualiser l'en-tête et le pied de page pour ne plus les dupliquer dans chaque fichier.
• Héberger le site sur un nom de domaine plutôt qu'en local.
• Optimiser le poids des images et des documents téléchargeables.

Compétences du référentiel mobilisées