-- Présentation --
Portfolio-inator est une application web de portfolio professionnel, conçue pour présenter mon profil d'Expert en Ingénierie du Logiciel. L'application expose les compétences, les réalisations, le parcours, les valeurs et les centres d'intérêt dans une interface structurée, responsive, et navigable de manière circulaire entre compétences et réalisations. Un portfolio n'est pas un CV en ligne. C'est une démonstration active de ce qu'un développeur est capable de construire, par l'objet lui-même autant que par son contenu.
C'est un projet de fin d'études réalisé seul, de A à Z, dont le cahier des charges est la grille d'évaluation du titre de mastère Expert en Ingénierie du Logiciel. Pas d'énoncé externe, pas de client fictif, pas de stack imposée. Chaque décision technique, chaque choix de design, chaque ligne de contenu relevait d'un arbitrage personnel. La stack retenue : Next.js avec TypeScript, Tailwind CSS, et Neon comme base de données. Une application fullstack, responsive, avec données dynamiques côté serveur.
-- Objectifs --
L'objectif était de construire un portfolio conforme à une grille d'évaluation précise couvrant une centaine de points : page d'accueil attrayante, menu persistant, article de présentation générale structuré en quatre notions, dix compétences documentées avec définition, preuves, autocritique et évolution, cinq réalisations détaillées selon sept axes, parcours en frise anti-chronologique, navigation circulaire entre compétences et réalisations, espace contact, orthographe soignée.
Le contexte était celui d'une fin d'études : un projet évalué, mais aussi un objet professionnel réel destiné à des recruteurs, des clients potentiels et des partenaires. Cette double dimension académique et professionnelle rendait les enjeux plus larges qu'un simple examen. Un portfolio raté ne coûte pas qu'une note, il ferme des portes.
L'enjeu central était la cohérence entre le contenu et le contenant. Un portfolio de développeur doit démontrer par son existence même les compétences qu'il revendique. Une application mal structurée, non responsive, avec des bugs d'interface ou une navigation confuse invaliderait tout le discours sur la qualité du code et l'attention au détail. Le portfolio devait être à la hauteur de ce qu'il prétendait démontrer.
Les risques étaient de plusieurs natures. Le risque de perfectionnisme : un portfolio peut toujours être amélioré indéfiniment, et la tentation de ne jamais le considérer comme terminé est réelle. Le risque de scope creep : la grille d'évaluation est dense, et chaque critère non traité coûte des points. Le choix de Next.js avec Neon, une stack non imposée et plus ambitieuse que le strict nécessaire, introduisait un risque technique : apprendre et livrer simultanément sur une technologie en cours de maîtrise. Le risque de contenu : rédiger dix articles de compétences et cinq articles de réalisations de qualité, c'est autant un exercice de rédaction que de développement.
-- Étapes --
Phase 1 : Analyse de la grille et architecture du contenu
La grille d'évaluation a été lue et relue comme un cahier des charges. Chaque critère a été traduit en exigence concrète : une page dédiée pour chaque compétence, un sous-menu accessible depuis la page commune des compétences, une navigation circulaire qui relie chaque compétence à ses réalisations et chaque réalisation à ses compétences, un menu persistant en mode scrolling, une photo présente sur toutes les pages.
L'architecture du contenu a été pensée avant l'architecture technique. Quelles compétences documenter (dix au total, quatre à sept humaines, quatre à six techniques), quelles réalisations présenter (cinq), comment structurer les articles pour qu'ils soient à la fois conformes à la grille et naturels à lire. Ce travail préalable a évité de se retrouver à restructurer le contenu en cours de développement.
Phase 2 : Choix de la stack et architecture technique
Le choix de Next.js avec TypeScript et Tailwind CSS a été délibéré. Next.js permet de combiner rendu côté serveur et composants client dans une même application, ce qui correspond parfaitement aux besoins d'un portfolio avec du contenu dynamique (données en base) et des interactions côté client (navigation, animations). TypeScript pour la rigueur du typage sur l'ensemble de l'application. Tailwind pour la rapidité d'implémentation du design responsive sans CSS spaghetti.
Neon a été retenu comme base de données pour sa compatibilité native avec les environnements serverless et son intégration simple avec Next.js via Prisma ou le driver natif. Les données des compétences, réalisations et parcours sont stockées en base et récupérées côté serveur via les Server Components de Next.js, ce qui évite des appels API superflus depuis le client.
L'architecture de l'application a été pensée autour des routes Next.js : une route par section principale (compétences, réalisations, parcours, présentation, contact), des routes dynamiques pour chaque compétence et chaque réalisation, un layout partagé pour le menu persistant et les informations présentes sur toutes les pages.
Phase 3 : Mise en place de la base de données et du schéma
Le schéma de base de données a été conçu pour refléter les relations requises par la navigation circulaire. Les compétences et les réalisations sont deux entités distinctes, reliées par une table de jonction qui matérialise les liens bidirectionnels. Cette relation est au cœur de la navigation circulaire : depuis une compétence, on accède aux réalisations qui la démontrent, et depuis une réalisation, on accède aux compétences qu'elle mobilise.
Le workflow Git a été mis en place dès le début : une branche par fonctionnalité, des commits atomiques et descriptifs, un historique propre qui reflète la progression du projet étape par étape.
Phase 4 : Développement de l'interface
Le développement de l'interface a commencé par les composants partagés : le menu persistant avec son comportement en scrolling, le header avec la photo et les informations présentes sur toutes les pages, le footer avec l'espace contact. Ces composants forment le squelette de l'application et conditionnent l'expérience globale.
Les pages de contenu ont été développées dans l'ordre de leur importance dans la grille : la page d'accueil, la page de présentation générale avec les quatre notions, la page commune des compétences avec le schéma synthétique comparatif, puis chaque article de compétence individuel. La navigation circulaire a été implémentée comme une fonctionnalité de premier plan, pas ajoutée en fin de projet : chaque article de compétence affiche la liste des réalisations associées avec des liens directs, et réciproquement.
Le responsive design a été traité composant par composant avec Tailwind, en pensant mobile d'abord. Chaque breakpoint a été testé : le menu s'adapte à un écran mobile, les articles de contenu restent lisibles sur toutes les largeurs, les schémas de compétences restent compréhensibles sur un petit écran.
Phase 5 : Rédaction du contenu
La rédaction des articles de compétences et de réalisations a représenté une part significative du travail total. Dix articles de compétences couvrant définition, preuves, autocritique et évolution, cinq articles de réalisations couvrant présentation, objectifs, étapes, acteurs, résultats, lendemains et regard critique : chaque article devait être structuré, détaillé, et suffisamment personnel pour ne pas sonner comme un texte générique.
L'article de présentation générale avec les quatre notions (valeurs, projet professionnel, qualités humaines, centres d'intérêt) a été particulièrement soigné, car c'est la première page de contenu qu'un visiteur lit pour se faire une impression du profil. Le ton dynamique et professionnel, la variété des longueurs de phrases, l'absence d'expressions introductives auto-centristes : ces choix éditoriaux ont été maintenus de manière cohérente sur l'ensemble du contenu.
Phase 6 : Tests, optimisation et finalisation
Chaque page a été testée manuellement sur différents appareils et différentes tailles d'écran. La navigation circulaire a été vérifiée exhaustivement : chaque lien entre une compétence et ses réalisations, chaque lien entre une réalisation et ses compétences. Le menu persistant a été testé en scrolling sur mobile et desktop. L'espace contact a été vérifié fonctionnel.
L'orthographe a été corrigée sur l'ensemble du contenu, car la grille prévoit une pénalité de 1% par tranche de cinq fautes. Ce critère, en apparence mineur, était un risque réel sur un volume de texte aussi important.
-- Acteurs --
Le portfolio-inator est un projet sans client externe ni équipe. L'unique commanditaire et l'unique réalisateur sont la même personne. Cette configuration produit une responsabilité totale : chaque décision est assumée sans possibilité de la partager, chaque erreur est pleinement visible.
L'évaluateur de l'ISCOD est le destinataire académique du projet, avec la grille comme contrat d'évaluation. Mais le véritable destinataire final est plus large : recruteurs, clients potentiels, partenaires, tout interlocuteur professionnel qui visitera le portfolio après la soutenance. Cette audience duale a influencé chaque décision de contenu et de design : satisfaire la grille sans oublier que l'objet produit a une vie au-delà de l'examen.
-- Résultats --
Pour le développeur : Portfolio-inator est le projet le plus personnel de tous ceux réalisés. Il ne documente pas un domaine métier fictif ou une application générique, il documente un parcours réel, des compétences réelles, des projets réels. Construire cet objet a demandé autant de réflexion sur soi que de compétences techniques. La stack Next.js avec TypeScript et Neon a été maîtrisée sur ce projet, les Server Components de Next.js compris en profondeur, la gestion des données dynamiques côté serveur intégrée naturellement. La capacité à mener seul un projet de cette envergure, de la conception jusqu'au contenu, est la valeur ajoutée la plus directe de cette réalisation.
Pour l'évaluation : Le portfolio couvre l'ensemble des critères de la grille : pages requises, menu persistant, article de présentation générale avec les quatre notions, dix compétences documentées, cinq réalisations détaillées, parcours en frise, navigation circulaire, espace contact. La conformité à la grille est la condition minimale. La qualité du contenu et la cohérence de l'objet sont ce qui distingue un portfolio remarquable d'un portfolio qui coche des cases.
-- Lendemains --
Dans un futur immédiat, le portfolio n'était pas terminé au sens strict du terme. Un portfolio de développeur est par nature un objet vivant : les compétences évoluent, de nouvelles réalisations s'ajoutent, le projet professionnel se précise. La version livrée pour la soutenance était complète au sens de la grille, mais déjà identifiée comme devant évoluer rapidement pour intégrer les projets post-formation et les nouvelles compétences acquises.
À distance, le portfolio devient le pivot de la présence professionnelle en ligne. C'est l'objet vers lequel pointent toutes les candidatures, tous les profils LinkedIn, toutes les présentations professionnelles. Sa qualité technique et la richesse de son contenu ont un impact direct et durable sur les opportunités qui se présentent. Un portfolio maintenu, enrichi régulièrement, différencie structurellement d'un profil qui n'a qu'un CV PDF à proposer.
Aujourd'hui, portfolio-inator est l'objet central autour duquel s'organise la transition vers le projet de société de développement logiciel. Il démontre la capacité à concevoir et livrer une application Next.js fullstack avec TypeScript, à gérer des données dynamiques avec Neon, à produire du contenu professionnel de qualité. Chaque nouvelle compétence acquise, chaque nouveau projet livré dans le cadre de la société : ils trouveront leur place dans ce portfolio, qui grandira avec le parcours.
-- Regard critique --
Portfolio-inator est le projet sur lequel le regard critique est le plus difficile à poser, précisément parce qu'il est le plus personnel. Critiquer ce portfolio, c'est critiquer les choix faits sur soi-même, ce qui demande une honnêteté particulière.
Le perfectionnisme a été le principal adversaire de ce projet. La tentation de réécrire un article une troisième fois, de retoucher un composant qui fonctionnait déjà, de repenser une section du design qui était correcte : ces moments ont consommé du temps qui aurait pu être investi ailleurs. La frontière entre soigner la qualité et se perdre dans le détail n'est pas toujours évidente à tenir quand le projet parle de soi.
Le choix de Next.js avec Neon était ambitieux pour un projet de fin d'études. C'était le bon choix pour démontrer des compétences modernes et produire quelque chose de différenciant. Mais il a introduit une courbe d'apprentissage qui a ralenti certaines phases du développement. Sur un projet avec un délai académique fixe, ce risque était assumé et géré, mais il aurait pu être problématique si les imprévus techniques s'étaient accumulés.
Ce qui reste, au-delà de la note et de la soutenance, c'est un objet dont on peut être fier. Un portfolio qui se tient, qui démontre par son existence même ce qu'il prétend documenter. C'est la définition d'un projet réussi : pas seulement livré, mais cohérent avec ce qu'il cherchait à prouver.