Portfolio Website

À propos du projet

Ce portfolio web est bien plus qu'une simple vitrine en ligne de mes projets. Il s'agit d'une plateforme évolutive conçue pour refléter ma double identité d'ingénieur et de créatif, tout en servant de terrain d'expérimentation pour mes compétences en développement web.

L'objectif principal était de créer un site qui présente efficacement mes projets variés - du développement logiciel à la modélisation 3D en passant par les jeux vidéo et les projets d'ingénierie - tout en offrant une expérience utilisateur fluide, intuitive et visuellement cohérente. Le design devait être à la fois professionnel et créatif, reflétant ma personnalité "poly-créative" tout en restant accessible et performant.

Fonctionnalités principales

• Design entièrement responsive s'adaptant à tous les appareils
• Système de navigation fluide avec défilement doux et menu mobile optimisé
• Thème clair/sombre persistant avec transitions fluides
• Système de filtrage dynamique des projets par type et technologie
• Animations subtiles améliorant l'expérience utilisateur sans compromettre la performance
• Galeries d'images et lecteurs vidéo optimisés pour le chargement progressif
• Formulaire de contact intégré avec validation côté client
• Pages de projets détaillées avec structure cohérente facilitant la navigation
• Intégration des politiques de confidentialité pour conformité RGPD

Processus de développement

1. Conception et architecture

   La première étape a été de concevoir l'architecture du site en définissant ses objectifs, sa structure et son identité visuelle. J'ai créé des wireframes et des maquettes pour chaque type de page, en portant une attention particulière à la cohérence visuelle et à l'expérience utilisateur. J'ai opté pour une approche "mobile-first" pour garantir que le site soit parfaitement fonctionnel sur tous les appareils.

2. Développement frontend

   J'ai construit le site avec des technologies web standards (HTML5, CSS3, JavaScript) pour garantir une compatibilité maximale et des performances optimales. Pour la structure CSS, j'ai adopté une méthodologie modulaire inspirée de BEM (Block Element Modifier) pour faciliter la maintenance et l'évolution du site. Les animations ont été soigneusement conçues pour améliorer l'expérience utilisateur sans alourdir le chargement.

3. Système de gestion de contenu

   Bien que le site soit essentiellement statique, j'ai structuré le code de manière à faciliter l'ajout de nouveaux projets et contenus. Des templates HTML réutilisables ont été créés pour les différents types de pages projets (développement, 3D, jeux, ingénierie), permettant une extension cohérente du site au fil du temps.

4. Optimisation et tests

   Une phase importante du développement a été dédiée à l'optimisation des performances et à l'accessibilité. J'ai effectué des tests approfondis sur différents navigateurs et appareils, optimisé les ressources multimédia, et implémenté des techniques comme le lazy loading pour garantir des temps de chargement rapides, même pour les pages riches en contenu.

Défis techniques

1. Système de thème clair/sombre

   L'implémentation d'un système de thème fluide qui préserve les préférences de l'utilisateur entre les sessions a nécessité une gestion soignée du stockage local et des transitions CSS. J'ai créé un système basé sur des variables CSS et un mécanisme de détection des préférences système pour offrir une expérience optimale.

2. Système de filtrage de projets

   La mise en place d'un système de filtrage multi-critères pour les projets a posé un défi intéressant. Il fallait permettre de filtrer simultanément par type de projet et par technologie, tout en proposant des transitions fluides et en gérant correctement les cas où aucun projet ne correspond aux critères sélectionnés.

3. Animation de chargement

   La création d'une animation de chargement fluide qui améliore l'expérience de première visite a nécessité une gestion minutieuse des événements de chargement et un équilibre entre esthétique et performance. L'objectif était de créer une transition élégante sans rallonger artificiellement le temps de chargement.

4. Optimisation des médias

   La gestion efficace des nombreuses images et vidéos du portfolio tout en maintenant des performances optimales a représenté un défi significatif. J'ai mis en œuvre des stratégies d'optimisation comme le redimensionnement approprié des images, la compression, le lazy loading, et l'utilisation de formats modernes lorsque possible.

Architecture technique

Le site est construit selon une architecture modulaire qui facilite la maintenance et l'évolution:

Structure des fichiers

portfolio-website/
├── index.html                 # Page d'accueil
├── css/
│   └── main.css               # Styles principaux
├── js/
│   └── main.js                # Scripts principaux
├── assets/
│   ├── icons/                 # Icônes du site
│   ├── images/                # Images des projets
│   │   ├── profile/           # Images de profil
│   │   └── projects/          # Images de projets
│   ├── video/                 # Vidéos des projets
│   └── documents/             # Documents (CV, etc.)
└── pages/
    ├── legal/                 # Pages légales
    └── projects/              # Pages détaillées des projets
        ├── 3d/                # Projets 3D
        ├── development/       # Projets de développement
        ├── game/              # Projets de jeux
        └── inge/              # Projets d'ingénierie
                    

Technologies utilisées

• HTML5 : Structure sémantique pour une meilleure accessibilité et SEO
• CSS3 : Avec utilisation avancée de Flexbox, Grid, variables CSS et animations
• JavaScript : Vanilla JS pour les interactions et animations
• Formspree : Intégration pour le formulaire de contact
• Google Fonts : Pour la typographie (Space Grotesk)

Résultats et apprentissages

Le développement de ce portfolio a été une expérience enrichissante qui m'a permis d'approfondir mes compétences en développement web frontend:

• Maîtrise des techniques de design responsive avancées pour garantir une expérience optimale sur tous les appareils
• Approfondissement des connaissances en CSS moderne, notamment l'utilisation des variables CSS, des animations et des transitions
• Amélioration des compétences en JavaScript pour créer des interactions fluides et gérer efficacement le DOM
• Sensibilisation accrue aux enjeux d'accessibilité et d'optimisation de performance
• Développement d'une approche structurée de l'architecture frontend pour faciliter la maintenance

Le site continue d'évoluer régulièrement, servant à la fois de vitrine professionnelle et de terrain d'expérimentation pour de nouvelles techniques et approches de développement web.

Évolutions futures

Plusieurs améliorations sont envisagées pour les versions futures du portfolio:

• Migration vers une architecture JAMstack avec Next.js ou Gatsby pour améliorer les performances et faciliter la gestion du contenu
• Intégration d'une section blog pour partager des articles techniques et réflexions
• Implémentation de visualiseurs 3D interactifs pour les projets de modélisation
• Intégration de démos interactives pour les projets de développement et de jeux
• Amélioration des animations avec GSAP pour des transitions plus fluides
• Implémentation d'une API GitHub pour afficher automatiquement les contributions récentes