Vue d'ensemble
Ce portfolio web est un projet personnel conçu pour présenter mes
compétences en développement frontend de manière interactive et
engageante. L'objectif était de créer une expérience utilisateur
unique qui va au-delà d'un portfolio traditionnel, en intégrant des
éléments ludiques et techniques démontrant ma maîtrise du JavaScript.
Le site est entièrement responsive, performant et hébergé gratuitement
sur GitHub Pages, démontrant également ma compétence en déploiement et
gestion de projets web.
Fonctionnalités interactives
🎯 Curseur personnalisé
Curseur custom avec effet de suivi fluide et particules
génératives qui réagissent au mouvement de la souris.
💻 Terminal interactif
Terminal fonctionnel avec commandes système, historique de
navigation, auto-complétion et easter eggs cachés.
🐍 Jeu Snake
Jeu Snake classique jouable directement dans le navigateur avec
score et difficulté progressive.
🟢 Effet Matrix
Animation Matrix plein écran avec code en cascade, activable via
le terminal.
🌍 Bilingue FR/EN
Système de traduction complet avec sauvegarde de préférence dans
localStorage.
📱 Responsive
Design adaptatif optimisé pour mobile, tablette et desktop avec
animations fluides.
Défis techniques relevés
-
Animations performantes avec requestAnimationFrame pour maintenir 60
FPS
-
Gestion d'état complexe pour le jeu Snake sans framework
-
Système de particules optimisé avec limitation automatique
-
Terminal avec parsing de commandes et gestion d'historique
-
Intégration API externe pour afficher l'adresse IP et
géolocalisation
-
Système i18n (internationalisation) custom sans librairie
-
Design moderne évitant les clichés "AI-generated"
Architecture et organisation
Le code est structuré de manière modulaire pour faciliter la
maintenance :
-
Variables CSS pour thématisation cohérente et facilité de
modification
-
JavaScript organisé en sections clairement commentées
-
Séparation des responsabilités : animations, terminal, jeux,
traductions
-
Pas de dépendances externes - JavaScript vanilla uniquement
-
Code optimisé pour un chargement rapide (< 100KB total)
Commandes du terminal
Le terminal inclut plusieurs commandes utiles :
-
help - Liste toutes les commandes disponibles
-
about - Informations personnelles
-
skills - Compétences techniques
-
projects - Liste des projets
-
whatismyip - Affiche IP, localisation et FAI
-
date - Date et heure localisées
- snake - Lance le jeu Snake
-
matrix - Active l'effet Matrix
- clear - Efface le terminal
Performances et optimisation
Une attention particulière a été portée aux performances :
-
Lazy loading des animations pour réduire l'impact initial
-
Debouncing des événements de souris pour éviter les calculs inutiles
-
Limitation du nombre de particules actives (max 20)
-
CSS transforms pour les animations hardware-accelerated
-
Minification et optimisation du code pour la production
-
Score Lighthouse: 95+ en performance sur mobile
Apprentissages clés
Ce projet m'a permis d'approfondir mes connaissances en :
-
Animation JavaScript performante et optimisation rendering
-
Design d'interface utilisateur moderne et minimaliste
-
Développement de jeux en JavaScript vanilla
-
Internationalisation et gestion d'état global
-
Intégration d'API externes et gestion d'erreurs async
- Déploiement continu avec GitHub Pages