SAE Portfolio : Conception et Développement d'un Site Web Professionnel
Conception et développement complet de ce site portfolio (actuellement consulté), visant à présenter mes compétences techniques, mes projets académiques (SAE) et mon profil professionnel d'étudiant en Réseaux et Télécommunications.
1. Le Défi : Synthétiser son Parcours Technique
L'objectif principal était de fournir un outil de communication efficace et esthétique pour les recruteurs, capable de synthétiser de manière claire et visuelle un profil technique polyvalent (Réseaux, Systèmes, Scripting, Dev Web). Le design devait refléter le domaine des Télécoms et de l'IT.
Objectifs de Conception et de Développement
- Design Technique : Créer une identité graphique (palette de couleurs, typographie) évoquant l'univers de la fibre optique et des consoles (style **Dark Mode/Néon**).
- Responsivité (Mobile-First) : Assurer une consultation optimale sur tous les appareils (PC, tablette, mobile).
- Structure Clé : Organiser le contenu en sections distinctes : Accueil, Compétences détaillées, Projets (études de cas), et Contact.
- UX/Accessibilité : Implémenter des animations de défilement (Scroll Reveal) et une navigation claire pour une expérience utilisateur fluide.
2. La Solution Technique & Mise en Œuvre Frontend
Ce portfolio est une application Web statique, développée de manière artisanale sans l'aide de frameworks lourds (type React ou Vue.js), afin de démontrer une maîtrise complète du *vanilla* HTML et CSS.
Technologies et Techniques Utilisées
- HTML5 : Structure sémantique du contenu (Header, Main, Section, Article).
- CSS3 & SASS (Potentiel) : Styles avancés, implémentation du **Glassmorphism** (effet de verre flou) et des variables CSS (`:root`).
- JavaScript (Vanilla) : Gestion des événements simples et implémentation des animations au défilement (Scroll Reveal).
- Responsive Design : Utilisation intensive des Media Queries et de Flexbox/Grid pour l'adaptation à la taille de l'écran.
Focus sur l'Implémentation du Design
Le design a été piloté par les contraintes d'une identité sombre et technique. La police 'Inter' a été choisie pour sa clarté, et la couleur d'accentuation Cyan Électrique (`--color-accent: #00E5FF;`) a été utilisée pour les liens actifs et les effets d'ombre brillante (Néon).
Extrait CSS des Variables Clés
body {
font-family: var(--font-sans);
line-height: 1.6;
color: var(--color-text-dark);
min-height: 100vh;
/* --- L'IMAGE DE FOND
background-image: url('../assets/images/background.jpg');
background-color: #050505;
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}
3. Validation & Compétences Acquises
Ce portfolio est le livrable final d'une démarche de conception complète. Il sert désormais de plateforme centralisée pour toutes mes démarches de stage et de recrutement.
Bénéfices Techniques Confirmés
- Maîtrise Frontend : Capacité à transformer une maquette graphique en code HTML/CSS fonctionnel et maintenable.
- Design Centré Utilisateur : Application de principes d'UX pour garantir la lisibilité (contrastes forts, hiérarchie visuelle claire).
- Projet Global : Ce portfolio intègre et catégorise l'ensemble des autres projets académiques, démontrant une vision globale de mon parcours.
- Gestion de la Qualité : Assurance de la performance et de la compatibilité sur les différents navigateurs et supports.
Leçons Apprises
La gestion de l'état "actif" et du filtre des projets a été un point d'apprentissage clé en JavaScript. J'ai aussi appris l'importance d'optimiser les images et le code pour garantir un temps de chargement minimal, indispensable pour un site professionnel.