Mes portfolios
3 versions · 2 ans d'évolution
Du premier HTML/CSS brut à un portfolio professionnel conçu avec une démarche UX complète. Chaque version marque une étape réelle de ma progression.
Versions
3 itérations
Période
2022 → 2024
Démarche
Design Thinking
Type
Projets personnels
Stack finale
PHP · Tailwind · JS
En prod
nataelwebdesigner.fr
Se construire une identité web
Chaque développeur a besoin d'un portfolio. J'ai commencé par en créer un sans vraiment savoir ce que je faisais — et c'est exactement ça l'intérêt.
En passant par trois versions distinctes, j'ai non seulement progressé techniquement, mais surtout appris à penser l'expérience utilisateur avant de coder.
La v2 est l'aboutissement de cette démarche : conçue en suivant les 5 étapes du Design Thinking, avec recherche utilisateur, personas, wireframes et tests d'utilisabilité.
1. Empathiser — interviews utilisateurs
2. Définir — personas + problem statement
3. Idéer — brainstorming, wireframes
4. Prototyper — maquettes Figma
5. Tester — retours + itérations
✅ SEO organique — trafic réel obtenu
3 versions, 3 niveaux
Chaque version représente une vraie étape de progression
2022
Premier portfolio HTML/CSS
Le point de départ
Mon tout premier site web. Réalisé en formation Simplon, uniquement en HTML5 et CSS3 vanille, sans framework ni librairie. L'objectif était simple : exister en ligne et montrer mes premiers projets.
Ce que j'ai appris
- ▸Maîtrise de la sémantique HTML
- ▸Premiers pas avec les media queries
- ▸Structure de projet statique
2023
One-page PHP + Tailwind
La montée en compétences
Après la formation, j'ai voulu aller plus loin. Un one-page moderne avec PHP, Tailwind CSS et Docker. Plus propre, plus cohérent, avec une vraie attention portée sur le layout et la lisibilité.
Ce que j'ai appris
- ▸Intégration PHP côté serveur
- ▸Utilité de Tailwind pour la rapidité
- ▸Containerisation avec Docker
2024
Portfolio UX — Design Thinking
La démarche professionnelle
Le résultat d'un vrai processus UX : recherche utilisateur, personas, wireframes, prototypage Figma, tests et itérations. J'ai appliqué les 5 étapes du Design Thinking. SEO travaillé manuellement, bon trafic organique obtenu.
Ce que j'ai appris
- ▸Démarche UX complète de A à Z
- ▸SEO technique et éditorial
- ▸Animations et micro-interactions
- ▸Modales interactives avec JS natif
Ce que ces 3 projets m'ont appris
La vraie progression, c'est de voir où on était pour mesurer où on est.
✅ Points forts
- •Démarche UX complète sur la v2 (Design Thinking)
- •SEO organique travaillé et résultats mesurables
- •Progression technique réelle et documentée
- •Micro-interactions et animations JS natif
- •Responsive design maîtrisé sur les 3 versions
- •Containerisation Docker sur la v2
⚠️ Ce que je ferais différemment
- •Commencer par la démarche UX dès la v1
- •Utiliser un framework React/Next dès le départ
- •Mettre en place des tests utilisateurs plus tôt
- •Versionner et documenter chaque itération
- •Analyser les analytics plus régulièrement
- •Prévoir l'architecture de contenus avant le design