Ce site est développé comme un projet produit à part entière, avec itérations techniques et éditoriales.
Retour aux projets
Web · Next.js · Product Design
Site portfolio carrière (ce site)
Ce projet correspond au site que vous consultez actuellement. L’objectif est de construire un portfolio crédible pour des recruteurs finance/tech, avec un niveau de finition professionnel sur le fond (contenu, cohérence narrative, structure des projets) et sur la forme (UX, responsive, SEO de base, maintenabilité). Le site suit une architecture App Router avec séparation stricte entre données et composants pour accélérer les itérations sans casser l’interface.
Next.js App RouterTypeScriptTailwind CSSVercelESLint
Ce que ce projet démontre
Capacité à transformer un simple site vitrine en produit éditorial structuré: contenu piloté par données, pages projet techniques, cohérence UX et workflow d’amélioration continue.
Mon rôle
Conception de l’architecture du site, structuration des données (`src/data`), création des pages projet détaillées, amélioration de la qualité du copywriting technique, corrections UX/SEO et itérations continues sur la crédibilité du rendu final.
Contexte
Le besoin était de remplacer un portfolio trop générique par une version plus exigeante, crédible et orientée résultats pour des recruteurs en finance quantitative, asset management et environnements tech.
Objectif
Créer un site lisible et convaincant, capable de présenter des projets techniques en profondeur tout en conservant une navigation claire et une expérience fluide sur mobile/desktop.
Deep dive
Lecture technique du projet
Le site est structuré comme un produit éditorial maintenable: données centralisées, composants réutilisables, pages détaillées et logique d’amélioration incrémentale.
- • Pages clés: accueil, à propos, expériences, projets, détails projet, CV, contact.
- • Centralisation du contenu dans `src/data` pour éviter la duplication et faciliter les mises à jour.
- • Génération de pages projet dynamiques via slug avec routes dédiées par projet clé.
- • Design system léger basé sur Tailwind + variables de thème.
- • Déploiement Vercel avec vérifications lint/type-check avant livraison.
Captures
Écrans et visualisations clés
Architecture
Organisation technique
Couche données
Toutes les entités éditoriales (projets, expériences, navigation, profil) sont regroupées dans `src/data` pour séparer clairement contenu et présentation.
Couche pages
App Router (`src/app`) avec routes statiques + route dynamique `/projets/[slug]` pour supporter des fiches projet riches et scalables.
Couche composants
Composants UI réutilisables (layout, sections, cards) afin de garder une cohérence visuelle et limiter la dette front-end.
Qualité de livraison
Validation systématique via ESLint et TypeScript (`tsc --noEmit`) pour sécuriser les itérations rapides.
Pipeline
Flux de données
- 1.Écriture/mise à jour du contenu dans `src/data/*.ts`.
- 2.Lecture des données par les pages et sections concernées.
- 3.Résolution des pages projet via slug (`getProjectBySlug`).
- 4.Rendu des sections techniques (architecture, pipeline, limites, résultats).
- 5.Vérification qualité (lint + type-check) avant déploiement.
- 6.Publication sur Vercel et validation fonctionnelle des routes critiques.
Choix techniques
Décisions structurantes
Content-first architecture
La priorité est donnée à la robustesse éditoriale: les contenus sont traités comme des données versionnées, pas comme du texte inline dans les composants.
Route dynamique projet
L’usage de `/projets/[slug]` permet de faire évoluer le volume de projets sans complexifier la structure applicative.
Itération pilotée par feedback
Le site évolue par corrections successives (crédibilité, UX, précision technique) pour converger vers un niveau attendu en contexte recrutement.
Simplicité maîtrisée
Le projet reste volontairement sans backend complexe pour garder une maintenance faible et un time-to-update rapide.
Fiabilité
Qualité et contrôles
- • Lint et type-check lancés à chaque itération significative.
- • Structure de fichiers stable et lisible pour faciliter les contributions futures.
- • Contrôle manuel régulier des routes projets et des liens critiques.
Limites
Points d'attention actuels
- • Le site reste statique: pas de CMS ni d’interface d’édition dédiée.
- • La preuve visuelle des projets dépend encore de la qualité/volume des captures disponibles.
- • Certaines améliorations SEO avancées (schema détaillé par projet) peuvent être renforcées.
Évolutions
Prochaines étapes
- • Ajouter des captures écran plus spécifiques par projet pour renforcer la preuve visuelle.
- • Compléter les métadonnées Open Graph par page projet avec images dédiées.
- • Finaliser les derniers ajustements de copywriting orientés recruteurs finance/tech.
Difficultés rencontrées
Les principaux enjeux du projet
Maintenir une cohérence de ton et de niveau technique entre toutes les pages (home, à propos, projets, détails).
Éviter l’effet template en renforçant la densité des contenus projet sans surcharger la lecture.
Garantir la maintenabilité: tout le contenu doit rester centralisé dans `src/data` et non dispersé dans les composants.
Garder un responsive robuste avec des blocs de texte longs et des cartes riches en informations.
Résultats et apprentissages
Ce que j'en retiens
Mise en place d’une base de données front-end claire pour piloter le contenu (projets, expériences, navigation, profils).
Ajout de pages projet approfondies avec architecture, choix techniques, limites et prochaines étapes.
Amélioration de la crédibilité globale du site via un ton plus concret et des preuves techniques (liens commits/repositories).
Workflow itératif de correction continue (UX, contenu, structure) pour converger vers un rendu prêt pour candidatures.
Autres projets
Continuer la visite
Finance personnelle · Python · PyQt6
Application de suivi de patrimoine
Application desktop PyQt6 + SQLite pour centraliser des comptes multi-actifs, reconstruire l’historique hebdomadaire et analyser la performance d’un portefeuille.
Voir ce projet
Finance quantitative · Analyse · Python
Backtest et optimisation de portefeuille
Environnement Python pour backtester des stratégies, comparer des métriques risque/rendement et analyser un portefeuille.
Voir ce projetÉchanger
Je peux détailler les choix techniques et les résultats en entretien.
Si ce projet vous intéresse, je peux revenir plus précisément sur le besoin initial, la structure des données, les hypothèses, les difficultés rencontrées et les limites de l'analyse.