Cahier des Charges - Portfolio

Cahier des Charges : Portfolio Web

1. Contexte et Objectifs du Projet

Dans le cadre de mon BTS SIO (Option SISR) et de ma recherche d'une alternance pour ma poursuite d'études en Bac +4, j'ai décidé de concevoir et développer mon propre portfolio de A à Z. Ce projet sert également de support officiel pour l'épreuve E5 de mon examen.

Objectifs principaux :

Centraliser et présenter de manière professionnelle mes compétences, mes certifications et mon parcours.
Mettre en valeur mes expériences en entreprise (stages) et mes projets d'infrastructure.
Démontrer ma capacité à concevoir une interface web claire, responsive et moderne (notions en développement).

Public cible : Recruteurs, Responsables Informatiques (DSI), Jurys d'examen BTS SIO.

🛠️ Choix Techniques

Langages Utilisés

Développement "Vanilla" en HTML5 (pour la sémantique et la structure) et CSS3 (pour le design et les animations). Aucun framework lourd (comme Bootstrap ou React) n'a été utilisé afin de démontrer ma maîtrise des fondamentaux.

Approche Responsive

Utilisation des Media Queries CSS et des modules Flexbox / Grid pour garantir une lisibilité optimale sur tous les supports (Ordinateurs de bureau, Tablettes, Smartphones).

Hébergement & Déploiement

Le code source est optimisé pour être hébergé sur une solution de type serveur web classique (Apache/Nginx) ou un service d'hébergement statique (GitHub Pages).

Assistance IA (Pair Programming)

Utilisation de l'Intelligence Artificielle comme assistant de codage. L'IA a été sollicitée pour optimiser la structure HTML/CSS et intégrer des pratiques modernes de web design, démontrant ma capacité à exploiter les outils actuels de l'industrie pour gagner en productivité.

🎨 Charte Graphique et UI/UX

L'interface a été pensée pour refléter un profil "Tech / Ingénieur Réseau" :

Thème Sombre (Dark Mode) : Utilisation d'un fond texturé sombre pour un confort visuel optimal, associé à une palette de violets lumineux pour attirer l'œil sur les éléments clés.
Glassmorphism : Intégration d'effets de "verre flouté" (backdrop-filter) sur les cartes et le menu de navigation pour apporter de la profondeur et de la modernité.
Navigation fluide : Mise en place du Smooth Scrolling pour naviguer entre les sections sans changement de page, offrant une expérience utilisateur (UX) continue.

📂 Arborescence du Site (One-Page)

1. Accueil & À propos

Hero banner avec présentation de mon profil, lettre de motivation pour l'alternance et téléchargement du CV, suivi de l'explication du BTS SIO.

2. Parcours & Compétences

Frise chronologique des études et catégorisation des compétences acquises en formation (Réseaux, Systèmes, Sécurité).

3. Expériences & Projets

Mise en avant des stages (Zabbix, GLPI, Graylog) et présentation de mes projets d'infrastructure personnels.

4. Épreuves & Certifications

Documentation pour le jury (E5/E6) et validation des MOOCs (ANSSI, CNIL).

✅ Livrables Attendus

Le projet aboutit à un site fonctionnel, sans erreur de syntaxe HTML/CSS, avec une arborescence de fichiers claire (HTML, feuille de style séparée, documents PDF rattachés) et optimisé pour le référencement naturel basique (Balises meta, sémantique).