Ancien Portfolio
Durée
Projet personnel (2024)
Équipe
Projet individuel
Mon Rôle
Développeur & Designer
Technologies Utilisées
Contexte
Ce portfolio (v1) a été mon premier projet de vitrine personnelle en ligne. Développé en HTML, CSS et JavaScript sans framework, il m'a permis d'apprendre les fondamentaux du développement web front-end et les principes du responsive design.
Il a depuis été remplacé par la version actuelle (v2) développée avec Next.js, React et TypeScript, qui intègre des animations avancées, un système bilingue, et des analyses de projets détaillées. L'ancienne version reste accessible sur old.killianrms.com.
Objectifs
- 1.Créer une présence en ligne professionnelle
- 2.Apprendre les fondamentaux HTML/CSS/JS
- 3.Mettre en pratique le responsive design
- 4.Présenter mes projets de manière claire et accessible
Approche Technique
Développement en vanilla HTML/CSS/JS avec une approche mobile-first. Utilisation de CSS Grid et Flexbox pour la mise en page responsive, JavaScript pour les interactions (navigation, filtres, animations). Le site est hébergé et déployé via GitHub Pages.
Architecture
Site statique simple :
- •index.html : Structure du site avec sections (biographie, parcours, projets, contact)
- •styles/ : Fichiers CSS organisés par section
- •scripts/ : JavaScript pour les interactions et animations
- •assets/ : Images, icônes et fichiers statiques
Compétences Développées
HTML/CSS avancé
Maîtrise de CSS Grid, Flexbox, animations CSS, media queries et approche mobile-first.
JavaScript vanilla
Manipulation du DOM, gestion des événements, animations et interactions sans dépendance à un framework.
Extraits de Code
Gestion etat TypeScript avec Context API
Loading...
Ce Context API TypeScript gere l'etat global du jeu (score, niveau, vies) de maniere type-safe. Le GameProvider encapsule la logique metier (incrementScore, loseLife, nextLevel) et expose un hook useGame() pour consommer l'etat. L'approche immutable (spread operator) garantit les re-renders React. Parfait pour prototypage rapide en game jam.
Animation canvas HTML5 avec requestAnimationFrame
Loading...
Cette game loop Canvas HTML5 utilise requestAnimationFrame pour un rendu 60 FPS fluide. Le deltaTime calcule le temps ecoule entre frames pour une physique frame-independent. La boucle update() gere la logique (mouvements, collisions), render() dessine (clear, background, entites triees par z-index, UI). Architecture modulaire avec systeme d'entites permettant rapide prototypage.
Résultats & Bilan
Le portfolio v1 a rempli son rôle de vitrine en ligne pendant un an, me permettant de partager mes projets avec des recruteurs et des pairs. Son principal défaut était le manque de profondeur dans les analyses de projets, ce qui a motivé la création de la v2 (le site actuel).
Réflexion & Apprentissages
Ce premier portfolio m'a appris l'importance de la présentation dans la carrière d'un développeur. Au-delà du code, savoir communiquer sur son travail est une compétence essentielle. La v2 (le site actuel) représente une évolution naturelle, avec plus de profondeur analytique et une meilleure expérience utilisateur.