📄 Documentation Technique

Projet E-Portfolio — BTS SIO SISR

Lyes Mouhoun — Mars 2026

AuteurLyes Mouhoun
FormationBTS SIO SISR
Version2.0
StatutEn cours

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.

URL du site : https://lyes3105.github.io/e-portfolio/
Dépôt GitHub : https://github.com/lyes3105/e-portfolio

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

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

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/
Note : Le formulaire de contact nécessite un hébergement PHP (type OVH). Sur GitHub Pages (statique), seule la partie front-end est fonctionnelle.

7. Évolutions futures


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