Je vais souvent chercher des exemples de portfolios quand j’aide des étudiants à valoriser leurs projets non rémunérés. La majorité des jeunes ingénieurs et étudiants pensent que les expériences bénévoles ou perso « ne comptent pas ». Pourtant, ce sont souvent les meilleures preuves de compétences techniques et comportementales — à condition de les présenter comme des projets professionnels. Ici, je partage ma méthode pour transformer ces expériences en portfolio convaincant, pratique et personnalisable.

Pourquoi un portfolio de projets bénévoles et perso est essentiel

J’ai vu trop d’étudiants sous-estimer leurs travaux associatifs, projets open source ou prototypes faits pour le plaisir. Ce qui manque rarement, c’est la structure : sans contexte, chiffres ou livrables visibles, un projet reste une anecdote. Un portfolio bien construit donne de la crédibilité, montre votre capacité à réaliser de bout en bout, et fournit des preuves tangibles à citer en entretien.

Les éléments indispensables d’une fiche-projet

Pour chaque projet, je vous conseille d’inclure ces rubriques — ce sont les informations que recruteurs et tuteurs veulent voir en priorité :

  • Titre clair (ex. : "Application mobile de gestion de dons — Association X")
  • Contexte : pourquoi le projet a été lancé, qui est concerné (association, hackathon, projet perso)
  • Mon rôle : responsable technique, développeur full-stack, chef de projet, designer, etc.
  • Durée et charge : dates, nombre d’heures estimées
  • Objectifs : ce que vous vouliez atteindre (KPIs possibles : temps de réponse, nombre d’utilisateurs, nombre de dons...)
  • Livrables : code, maquettes, prototypes, rapports, vidéos de démonstration, liens vers GitHub, playstore, etc.
  • Technos et méthodes : languages, frameworks, outils (ex. : React, Python, Git, CI/CD, Figma)
  • Résultats chiffrés et apprentissages : métriques réelles ou qualitatives, difficultés rencontrées, compétences acquises
  • Ce que j’aurais fait différemment : montre la capacité de recul

Raconter une histoire : la structure STAR appliquée aux projets

J’utilise souvent la méthode STAR (Situation, Tâche, Actions, Résultats) pour formuler la fiche-projet. Ça prend peu de place et ça parle directement aux recruteurs :

  • Situation : cadre et enjeu
  • Tâche : votre responsabilité
  • Actions : ce que vous avez fait concrètement (outils, étapes)
  • Résultats : chiffres, retour utilisateur, impact

Exemple : "Pour l’association Y, j’ai développé un chatbot Slack pour centraliser les incidents. J’étais seul développeur pendant 4 semaines. J’ai choisi Node.js, configuré une intégration avec leur base Firebase, et automatisé les notifications. Résultat : temps de résolution diminué de 40% et adoption par 80% des bénévoles en 2 mois."

Preuves visibles : ce que je publie et comment

Les preuves, c’est ce qui transforme une bonne histoire en preuve crédible. Voici ce que je mets systématiquement :

  • Liens GitHub avec README clair (installation, usage, capture d’écran)
  • Démo en ligne (Netlify, Vercel, Heroku) ou vidéo de présentation hébergée sur YouTube/PeerTube
  • Captures d’écran annotées ou GIFs montrant le flux utilisateur
  • PDF téléchargeable : fiche-projet d’une page pour impression
  • Retours utilisateurs / témoignages (même un court message Slack ou un mail)

Adapter le contenu selon la cible

Un même projet ne doit pas être présenté de la même manière selon que vous postulez à un stage R&D ou à un poste de développeur web freelance. Je prépare toujours deux versions :

  • Version technique : plus de détails sur l’architecture, choix technologiques, tests, CI/CD
  • Version métier : focus sur l’impact, l’expérience utilisateur et la valeur ajoutée

Lors d’un entretien, j’utilise la fiche technique pour répondre aux questions pointues, et la version métier pour convaincre un manager non technique.

Mise en page & outils pratiques

Vous pouvez héberger votre portfolio sur un site personnel (nom.prénom.dev ou GitHub Pages) ou intégrer une section "Projets" sur LinkedIn. Voici quelques outils que j’utilise et que je recommande :

  • GitHub/GitLab pour le code et les releases
  • Netlify, Vercel pour les démos front-end
  • Figma pour les maquettes et prototypes
  • Canva ou InDesign pour des fiches-projets PDF jolies et lisibles
  • OBS ou Loom pour enregistrer de courtes démos vidéo

Sur la mise en page, je privilégie la lisibilité : une fiche par écran, titres explicites, et un bouton d’action (Voir la démo / Voir le code / Télécharger la fiche).

Transformer le bénévolat en expérience professionnelle

Le mot clé, c’est « professionnaliser ». Même si vous étiez bénévole, traitez le projet comme un vrai client :

  • Fixez un cahier des charges minimal
  • Rédigez un livrable final (rapport, guide d’utilisation)
  • Demandez un retour écrit ou une lettre de recommandation
  • Mettez des points d’étape et conservez des preuves de communication (issues, mails, comptes-rendus)

Cela permet de chiffrer l’impact et de montrer que vous savez mener un projet comme en entreprise.

Exemples concrets et phrases à copier-coller

Voici des formulations que j’ai utilisées avec des étudiants — elles fonctionnent bien dans un CV ou un portfolio :

  • "Développement d’un service d’authentification OAuth2 (Node.js, Redis) pour l’application interne d’une association — réduction du temps d’accès de 30%."
  • "Conception et prototypage d’une interface mobile (Figma) pour faciliter la collecte de dons — tests utilisateurs : NPS +0,4 après itération."
  • "Contribution open source : résolution de 12 issues, ajout de tests unitaires et amélioration de la couverture de 18% (repo XYZ)."

Gérer la confidentialité et les données sensibles

Souvent, les projets associatifs ou bénévoles touchent à des données personnelles. Voici comment procéder :

  • Obtenir une autorisation écrite pour publier captures ou extraits
  • Masquer ou anonymiser les données sensibles
  • Publier une version démo avec jeux de données fictifs

Si vous ne pouvez pas partager le code, détaillez l’architecture et les choix techniques, et fournissez des captures d’écran ou une vidéo démonstrative.

Astuces pour rendre votre portfolio vivant

Enfin, quelques petits plus qui font la différence et que j’encourage toujours :

  • Mettre une mini-biographie et un contact accessible (mail, LinkedIn)
  • Ajouter un fil d’actualités ou un blog court pour montrer votre progression
  • Mettre en avant 3 projets phares en priorité et regrouper les autres par catégorie
  • Utiliser des badges ou labels (ex. : "Open-source", "Bénévole", "Prototype") pour faciliter la lecture

Si vous voulez, je peux vous proposer un gabarit HTML simple de fiche-projet à copier/coller sur votre site ou un modèle de README structuré pour GitHub. Dites-moi ce que vous préférez : un modèle technique, un modèle pour projets associatifs, ou un modèle hybride.