📄 Documentation Technique

Projet E-Portfolio — BTS SIO SISR

Lyes Mouhoun — Mars 2026

1. Présentation du projet

Ce projet consiste en la réalisation d'un portfolio en ligne dans le cadre du BTS SIO option SISR au Lycée Turgot (Paris). Le site a pour objectif de présenter l'ensemble de mes compétences, projets, certifications et expériences professionnelles dans un format moderne et interactif.

Le portfolio est hébergé sur GitHub Pages et accessible publiquement. Il sert de support pour l'épreuve E4 du BTS SIO et constitue une vitrine professionnelle pour les recruteurs.

2. Technologies utilisées

Technologie	Utilisation	Version
HTML5	Structure et contenu des pages	5
CSS3	Design, animations, responsive design	3
JavaScript	Interactions, animations, navigation dynamique	ES6+
PHP	Formulaire de contact (envoi d'email)	8.x
PHPMailer	Bibliothèque d'envoi d'emails sécurisé	6.x
AOS.js	Animations au scroll (Animate On Scroll)	2.3.1
Google Fonts	Typographies (Playfair Display, Inter)	—
Git / GitHub	Versionnage et hébergement (GitHub Pages)	—

3. Architecture du projet

3.1 Arborescence des fichiers

e-portfolio/
├── index.html              ← Page principale du portfolio
├── style.css               ← Feuille de styles (design complet)
├── script.js               ← Interactions et animations JS
├── contact.php             ← Traitement du formulaire de contact
├── devine-le-nombre.html   ← Jeu interactif intégré
├── .htaccess               ← Configuration serveur Apache
├── PHPMailer/              ← Bibliothèque d'envoi d'emails
│   └── src/
├── pdf/                    ← Documents PDF et images
│   ├── projets/            ← Documents des projets
│   ├── *.pdf               ← Certifications, CV, rapports
│   └── *.png               ← Captures de suivi de projet
├── logo/                   ← Logos et images
└── gif/                    ← Animations GIF
    

3.2 Architecture logique

Le site est une Single Page Application (SPA) composée de sections navigables via un menu latéral fixe. La navigation est gérée en JavaScript avec un système de scroll fluide et de mise en surbrillance de la section active.

4. Fonctionnalités

4.1 Sections du portfolio

Section	Description
Accueil	Page d'introduction avec animation hero
Profil	Informations personnelles et présentation
Compétences	6 domaines avec barres de progression animées
Situations Pro E6	Documents PDF intégrés en iframe pour l'épreuve E6
Projets	5 projets avec documentation téléchargeable
Certifications	7 certifications (Cisco, PIX, ANSSI...)
Parcours	Timeline chronologique de formation
Expériences	2 stages professionnels détaillés
Documents	CV, tableau de synthèse, documentation technique
Veille Techno	Veille sur l'IA en cybersécurité
Contact	Formulaire d'envoi d'email via PHPMailer

4.2 Fonctionnalités techniques

• Design responsive — Adapté mobile, tablette et desktop via CSS media queries
• Mode sombre — Interface dark theme avec palette violet/gris
• Animations au scroll — Bibliothèque AOS.js pour les effets d'apparition
• Effet souris lumineux — Halo qui suit le curseur (JavaScript)
• Navigation intelligente — Sidebar avec surbrillance de la section active
• Formulaire de contact — Envoi d'email via PHP et PHPMailer avec SMTP OVH
• Modals interactifs — Fenêtres modales pour le suivi de projet iNext
• PDFs intégrés — Visualisation des documents directement dans le site

5. Design et interface

5.1 Charte graphique

Élément	Valeur
Couleur principale	#7c3aed Violet
Fond principal	#0f0f1a Noir profond
Texte principal	#e5e7eb Gris clair
Typographie titres	Playfair Display
Typographie texte	Inter

5.2 Éléments UX

• Cards avec effet hover et glow animé
• Barres de compétences animées au scroll
• Boutons avec transitions fluides
• Grille CSS responsive (grid + flexbox)
• Effet glassmorphism sur les cartes

6. Hébergement et déploiement

Le site est déployé automatiquement via GitHub Pages à chaque push sur la branche main. Le processus de déploiement est le suivant :

1. Modification du code en local
2. Commit et push vers GitHub (git push origin main)
3. GitHub Actions déclenche automatiquement le build
4. Le site est déployé sur https://lyes3105.github.io/e-portfolio/

7. Évolutions futures

• Ajout d'un mode clair/sombre avec toggle
• Intégration d'un blog technique
• Ajout de projets supplémentaires
• Optimisation des performances (lazy loading images)
• Ajout d'un système multilingue (FR/EN)

---

Document réalisé dans le cadre du BTS SIO SISR — Lycée Turgot, Paris — 2024-2026