Votre portfolio

Temps 1 · séance 1 · ~25 min

Les slides du chapitre (PDF)PDF

• Dire à qui sert un portfolio et ce que chaque lecteur y cherche.
• Nommer les pages qui font consensus et les liens qui les complètent.
• Décrire une fiche projet et ses parties.
• Choisir entre le mode CV et la vitrine de projets, et justifier ce choix.

1. À quoi il sert#

Un portfolio de développeur est un site qui présente la personne et les projets qu'elle a construits. Pendant les cinq premières séances, vous construisez le vôtre avec Laravel, Inertia et Vue. Vous l'enverrez ensuite à trois sortes de lecteurs : une entreprise qui cherche un stagiaire, un employeur après le diplôme, un client qui veut un site.

Votre portfolio est un site que vous possédez. Un profil sur GitHub ou LinkedIn reste sur la plateforme d'un autre, qui choisit la mise en page, l'ordre des informations et les règles. Sur votre site, vous décidez ce que le lecteur voit en premier et comment chaque projet est raconté. L'adresse vous suit d'un emploi à l'autre.

Le site est aussi une preuve. C'est une application Laravel en ligne, avec un back-office, la partie protégée par un mot de passe où vous encodez vos projets. Un lecteur technique qui ouvre votre dépôt voit comment vous travaillez.

2. Deux lecteurs#

Ces destinataires lisent votre site de deux façons très différentes. Josh Comeau, développeur et formateur, les distingue dans un épisode du podcast de Scrimba (2022). Le premier, souvent sans formation technique, parcourt vite et ne lit pas le code. Le second est développeur, et il cherche de la profondeur.

	Celui qui survole	Celui qui creuse
Qui	un recruteur, une personne des ressources humaines, un client	un développeur de l'équipe, un maître de stage technique
Ce qu'il cherche	qui vous êtes, ce que vous cherchez, ce que vous avez construit, comment vous contacter	un projet en ligne qu'il peut ouvrir, les choix techniques et leurs raisons, le code
Dans quel ordre	l'accueil, votre titre, un ou deux projets, le contact	une fiche projet, la démo, le dépôt, le README, la structure du code

Le premier décide en quelques instants s'il reste. JobRise, un site d'aide à l'emploi, demande que l'accueil fasse comprendre qui vous êtes en moins de dix secondes (2026). Tyler Au, sur le blog de Lyrid, compte environ trois minutes par portfolio (2022). Ces durées sont des estimations d'auteurs, pas des mesures. Retenez l'ordre de grandeur : quelques secondes pour décider de rester, quelques minutes pour vos meilleurs projets.

Le second lecteur n'ouvre souvent qu'un ou deux projets, selon Josh Comeau. Il veut comprendre vos décisions. Dominic Monn, de la plateforme MentorCruise, ajoute que les responsables regardent le résultat avant la liste des outils (2026). Votre site doit donc se parcourir en diagonale et offrir de la matière à qui s'y arrête.

3. Les pages qui font consensus#

Les sources ne proposent pas toutes la même liste, mais quatre pages reviennent partout. GreatFrontEnd, un site de préparation aux entretiens, en propose cinq (2026). OpenClassrooms décrit la même structure avec un lien vers le CV en PDF. Josh Comeau est plus sobre : une présentation, deux à cinq projets avec chacun sa page, un contact.

Page	Ce qu'elle montre
Accueil	votre nom, un titre qui nomme le poste visé, deux phrases sur vous, vos projets mis en avant, un lien vers le contact
Projets	la liste de vos projets, et une page par projet
À propos	qui vous êtes, ce que vous cherchez, les compétences nommées en toutes lettres
Contact	un formulaire ou une adresse e-mail dédiée

Le CV en PDF, votre GitHub et votre LinkedIn complètent ces pages, en lien depuis l'accueil ou l'à-propos.

Le titre de l'accueil nomme un poste, par exemple « Développeuse web junior, Laravel et Vue ». GreatFrontEnd le demande plutôt qu'une formule vague. Dans ce cours, le formulaire de contact suffit pour être joint : le site ne publie ni numéro de téléphone ni adresse postale.

Les barres de compétences, ces jauges qui affichent « Vue 70 % », n'ont pas leur place. Josh Comeau les juge ininterprétables, et Piero Borrelli les déconseille aussi sur le blog de Scrimba (2023). Le lecteur ne sait pas à quoi correspond 70 %, ni par rapport à qui. Un chiffre bas vous dessert, et un chiffre élevé appelle des questions en entretien. Nommez plutôt les outils que vous savez expliquer, et montrez-les dans vos projets.

4. Mode CV ou vitrine#

En mode CV, le site raconte aussi votre parcours : formations, emplois, dates. En vitrine de projets, il montre surtout ce que vous avez construit. Les auteurs se partagent entre ces deux camps.

La vitrine de projets. Josh Comeau laisse l'historique professionnel au CV et à LinkedIn, et rend le lien vers le CV facultatif. GreatFrontEnd veut un site simple, centré sur ce qui fait embaucher : trois projets bien présentés.

Le mode CV. OpenClassrooms conseille un site qui fait office de CV, avec sa version PDF, et voit GitHub comme son prolongement. JobRise intègre une section expérience et résume le partage ainsi : le CV attire l'attention, le portfolio la confirme.

Vous choisissez votre camp et vous justifiez ce choix dans votre cahier des charges, au chapitre 1.05. Si vous avez un parcours professionnel avant cette formation, une option tient souvent les deux camps. La page à propos reçoit une courte section « parcours », les projets restent la vitrine, et le CV complet vit en PDF. C'est une option, pas une règle du cours.

5. La fiche projet#

La page d'un projet est le cœur du portfolio. Elle prend la forme d'une étude de cas, un texte court qui raconte un projet du problème au résultat. Aditi Sharma, sur le blog de Peerlist, en décrit les étapes (2023). JobRise y ajoute le rôle exact et les liens (2026). La trame du cours compte huit parties.

1. Contexte : d'où vient le projet, pour qui.
2. Rôle : seul ou en équipe, et votre part exacte.
3. Problème : ce que l'application devait résoudre.
4. Choix techniques et pourquoi : deux ou trois décisions, avec leur raison.
5. Résultat : ce qui fonctionne, ce qui reste inachevé.
6. Captures commentées : une capture d'ensemble et une capture de détail, chacune avec une légende.
7. Démo et code : le lien vers le site en ligne et le lien vers le dépôt.
8. « Ce que je referais autrement » : une ou deux choses, avec la raison.

Le gabarit Fiche projet en WordDOCX, aussi en PDFPDF, reprend ces huit parties. Chaque rubrique indique, entre parenthèses, la colonne de la base où elle ira au chapitre 1.06. Remplissez une fiche par projet retenu.

La fiche fait 150 à 300 mots. Au-delà, le lecteur pressé décroche, et le lecteur technique ira lire le code. Toutes vos captures ont la même largeur de fenêtre et le même cadrage. Josh Comeau range la capture unique sans explication parmi les erreurs.

Dans la fiche du refuge pour animaux d'une étudiante fictive, le point 4 tient en deux phrases.

Choix techniques. La création et la modification d'un animal partagent une seule Form Request, AnimalRequest. Les règles de validation sont écrites une fois, et un changement de règle touche les deux formulaires.

Trois projets en ligne valent mieux que dix dépôts. JobRise recommande trois à cinq projets déployés, c'est-à-dire mis en ligne, parce qu'un recruteur ne clonera probablement pas votre dépôt. Les projets copiés d'un tutoriel se reconnaissent, selon Tyler Au et Piero Borrelli. Un projet fait d'après une maquette existante se crédite, comme Frontend Mentor le demande pour ses défis.

Vos projets des autres cours comptent, ceux de 5XCOS en tête, et vos projets personnels aussi. Racontez le problème qu'ils résolvaient, sans vous retrancher derrière « c'était un exercice ». Dites honnêtement ce qui est simulé, et votre part dans un travail de groupe. Le Tamagotchi et l'application du binôme viendront s'ajouter pendant ce cours.

6. Les erreurs qui se voient tout de suite#

Ces défauts reviennent chez les auteurs consultés. Un lecteur les repère avant d'avoir lu une ligne de votre code.

Erreur	Ce que le lecteur voit	Source
Animations gratuites	du temps passé sur l'effet plutôt que sur le contenu	GreatFrontEnd (2026)
Modèle de site reconnaissable	un site tout fait, partagé en ligne et repris tel quel	GreatFrontEnd (2026)
Texte de remplissage	du « lorem ipsum », le faux latin des maquettes, oublié sur une page	Kolade Chris, freeCodeCamp (2021)
Liens morts	une démo qui ne s'ouvre plus, un lien GitHub cassé	GreatFrontEnd (2026), JobRise (2026)
README vide	un dépôt sans explication ni commande d'installation	GreatFrontEnd (2026)
Mobile cassé	un texte qui déborde, un menu inutilisable sur téléphone	JobRise (2026), Tyler Au (2022)
Texte d'IA non relu	des phrases génériques qui pourraient décrire n'importe qui	Dominic Monn, MentorCruise (2026)
Captures floues ou de tailles différentes	une page de projets qui paraît négligée	conseil du cours

Le texte d'IA demande une précision. Vous pouvez faire relire vos fiches par un assistant, et vous le notez dans votre carnet IA. Le texte publié doit pourtant décrire votre projet avec vos mots et vos faits, et vous le relisez phrase par phrase.

7. Ce que vous faites maintenant#

Au chapitre suivant, vous trouvez trois à cinq portfolios de développeurs et vous les analysez avec la grille fournie.

Le devoir de la semaine. Apportez à la séance 2 les huit éléments suivants, réunis dans un dossier ou un seul document déposé dans le canal Teams du cours :

1. Vos grilles d'analyse finies, une par portfolio étudié.
2. L'inventaire de vos projets : tous ceux que vous avez réalisés, puis les trois à cinq que vous retenez. Pour chacun, notez si le code est récupérable et si une version en ligne existe.
3. Une capture d'écran propre par projet retenu, toutes à la même largeur de fenêtre.
4. Un texte par projet, de 150 à 300 mots, sur la trame de la fiche. Une première version imparfaite convient.
5. Le plan du site et la liste des informations sur vous que vous acceptez de publier, avec votre réponse : mode CV ou vitrine.
6. Votre CV en PDF et les adresses de votre GitHub et de votre LinkedIn, ou la décision de ne pas les publier.
7. Une intention de style en quelques mots, et deux sites de référence choisis parmi ceux de vos grilles.
8. Le cahier des charges et le diagramme de classes, commencés au chapitre 1.05.

À la séance 2, vous enregistrez ces projets dans la base de votre portfolio. Sans ces textes et ces captures, votre site affichera des projets de secours au lieu des vôtres.

À retenir#

• Un portfolio est un site que vous possédez, lu par un recruteur, un employeur ou un client.
• Le lecteur qui survole cherche qui vous êtes et comment vous joindre, celui qui creuse ouvre un projet et son code.
• Quatre pages font consensus : accueil, projets avec une page par projet, à propos et contact.
• Une fiche projet raconte le contexte, votre rôle, le problème, vos choix, le résultat et ce que vous referiez autrement.
• Trois projets en ligne, bien racontés, avec des captures soignées, valent mieux que dix dépôts.
• Le mode CV raconte votre parcours, la vitrine vos projets, et votre cahier des charges justifie votre choix.