Portfolio : Guide complet (+ exemples)

Définition

C’est marrant parce que j’ai toujours entendu le terme « portfolio » sans savoir qu’il avait plusieurs noms !

On dit :

• Portfolio (le plus courant)
• Portefolio
• Carnet de compétences
• Portefeuille de compétences (utilisé à l’école)
• Portfolio numérique
• Portfolio électronique
• Cyberfolio
• ePortfolio ou e-portfolio
• iPortfolio ou i-portfolio
• Book (surtout dans les professions artistiques)

Le but est d’apporter une visibilité supplémentaire et une touche personnelle à son CV.

Convaincre plus facilement un recruteur ou un client qu’on a le bon profil…

En donnant plus de détails sur ce qu’on sait faire !

À lire : 16 conseils pour un CV mémorable.

Portefeuille de compétences et ePortfolio

Ce sont les termes utilisés le plus souvent pas l’éducation nationale.

« Portfolio » étant un terme anglo-saxon, on l’a traduit par « portefeuille de compétence » en français.

Pour autant, ça ne ressemble pas vraiment à un portefolio.

Concernant « ePortfolio », j’imagine qu’on parle de portfolio en ligne…

Très peu sont les personnes qui impriment leur réalisation pour les montrer.

Mais cela se fait chez les professions artistiques encore une fois (communication, dessin, illustration, direction artistique, product design…).

On appelle ça « un book ».

FAQ

Un portfolio est-il utile ?

Avant de vouloir créer un portfolio, il faut déjà prendre le temps de se demander si…

T’en as réellement besoin ?

Avantages

Créer son portefolio a 4 avantages :

• Démontrer son expertise
• Compléter son CV et aller plus loin
• Donner confiance
• Augmenter ses compétences en code et sa compréhension d’un site web

Ça n’a l’air de rien dit comme ça, mais…

C'est peut-être ce qui fera la différence entre toi et un autre candidat dans un entretien d'embauche.

À garder dans un coin de la tête si tu hésites !

Inconvénients

S’il n’est pas très joli ou ne donne pas envie, ça pourrait rebuter un recruteur.

(Ou pire, un client)

De même, si ton portfolio a des bugs, charge lentement ou n'est plus disponible... Cela donnera une mauvaise impression.

Donne envie ou n’en fais pas !

Un portfolio c’est censé être joli.

Si on veut simplement lister ses compétences, on fait juste un CV.

Il faut être fier de ses réalisations et montrer le chemin parcouru, c’est inspirant.

(Ils ont déjà été convaincus par le CV, le reste c’est du bonus à condition de ne pas faire mauvaise impression)

Construire un joli portfolio

Un joli portfolio est obligatoire si tu veux qu’on te remarque.

Avoir un portefeuille de compétences « normal » ne fait pas vendeur.

La clef c’est de se différencier des autres !

La recette du succès

La recette du succès pour retenir l’attention d’un visiteur c’est :

• Un joli design
• Du contenu pertinent

S’il t’en manque 1 des 2…

• Soit il est plein de joli contenu mais pas suffisamment visuel, alors ton lecteur ne va pas lire « tellement ça donne pas envie »
• Soit il est ultra joli et la personne reste pour lire, mais le contenu est tellement pauvre et pas pertinent qu’elle choisit de partir.

Dans un cas comme dans l’autre, tu perds en crédibilité !

Fais quelque chose de stylé avec du contenu impactant…

Que mettre sur son portfolio ?

Tu peux mettre énormément de choses sur ce genre de profil en ligne.

Le mieux, c’est de sélectionner les choses que tu veux mettre en avant parmi cette liste :

• À propos : se présenter
• Contact
• Témoignages et avis
• Compétences
• Soft skills
• Ce pour quoi on est vraiment bon
• Envies futures et objectifs
• Réalisations, ses projets
• Apparitions (podasts, vidéos…)
• Preuves
• Présence sur les réseaux
• Curriculum Vitae
• Télécharger des éléments (réalisations, PDF…)
• Réservation de RDV (type Calendly – voir la liste des meilleurs outils du web)

Bien entendu tu n’es pas obligé de tout mettre…

(J’ai mis en italique les éléments qui sont pour moi, les plus importants)

Règles

Quelques règles de base si tu veux te lancer dans la création d’un portfolio en ligne.

1. Images de hautes qualités
2. Site rapide à charger
3. Être différent, même si tu utilises un template, démarque toi avec des photos et ton écriture
4. Choisir un outil en faisant attention au référencement naturel (SEO)
5. Version mobile obligatoire

D’autres règles…

• Pas obligatoire d’avoir un logo (sauf si tu es graphiste !)
• Avoir son propre nom de domaine n’est pas obligatoire mais TRÈS FORTEMENT encouragé (par moi 😁)
• Le portfolio peut rester en Français sauf si tu postules à l’international auquel cas je ne le ferais qu’en Anglais

Portfolio pour les développeurs juniors

Le portfolio pour les juniors, c’est un sujet à lui seul.

• Certain(e)s pensent qu’il en faut un, obligatoirement
• Certain(e)s pensent qu’au contraire, il n’en faut pas

Dans un article que j’ai lu récemment sur les développeurs juniors et leurs portfolios, voici ce que la personne disait.

Je pense que les bootcamps mettent trop l’accent sur des spécificités du framework plutôt que sur les bases comme l’algorithmie et les bases de l’informatique.

https://medium.com/codex/dear-junior-developer-i-dont-care-about-your-portfolio-676334b04974

Autrement dit, outre la technologie utilisée, si on demande à un étudiant :

– Pourquoi as-tu choisi ceci pour faire ton portfolio ?
– Elle était dans le programme (ou la vidéo tuto).
– D’accord, mais pourquoi tu l’as mise dans ton projet ?
– Ben…

Une discussion entre un prof et son élève.

Pour avoir été prof de dev pendant 2 ans, ce sont des discussions que j’avais parfois.

Il faut développer son esprit critique !

On se concentre trop sur le « comment » et pas assez sur le « pourquoi ».

Du coup…

Cela fait que les projets rendus sur les portfolios des juniors sont souvent le fruit de projets sans grande valeur ajoutée.

De fait, les recruteurs n’y accordent pas trop de crédibilité.

Moralité : Fais en sorte que ton portfolio ait un MAX de valeurs.

Si t’as peu voire pas de projets ou qu’ils ne sont pas qualitatifs… Oublie l’idée de l’exposer aux recruteurs (pour le moment).

Portfolio pour freelances

Aucun doute sur l’utilité d’un portefolio en tant que freelance.

Peu importe ton métier et ton secteur d’activité, tout est bon pour convaincre ton prospect en face.

Je ne dirais pas que c’est obligatoire mais…

Fortement encouragé, surtout si tu as un métier graphique ou créatif.

Proposer ses services

Un portfolio permet de se rendre compte du travail de la personne en face.

Sa pâte graphique, son identité, ses envies, la "qualité" de ses projets...

N’hésite donc pas à personnaliser un maximum.

Puis à proposer tes services.

Il faut convaincre et donner envie, donc…

1. Ne donne pas tout et propose un lien de contact pour avoir un guide ou des réalisations supplémentaires ?
2. Mets un lien Calendly pour échanger avec ton prospect ?
3. Ajoute un bouton de contact pour « En savoir plus »

C’est ta vitrine marketing, mets le paquet sur les AAA (Appels À l’Action) !

SEO et référencement

Si tu as envie d’être trouvé depuis les moteurs de recherche, il te faut 2 choses :

• Un nom de domaine (tu peux utiliser prenom-nom.com si t’as pas d’idée)
• Un site optimisé pour le référencement (tous les outils le sont maintenant)

Afin de t’aider pour le référencement, je te conseille l’utilisation de la Google Search Console.

Tu pourras avoir plein d’indicateurs de performance, notamment comme les gens te trouvent (avec quels mots clés !)

Comment faire son portefolio ?

Je te présente ici les manières les plus connues de créer son portefolio.

Si j’étais toi, je me concentrerais sur la manière la plus rapide !

Sauf si tu souhaites apprendre de nouvelles compétences (code, apprentissage d’un logiciel…).

La création d’un portfolio numérique peut prendre BEAUCOUP de temps.

Définis ce que tu veux :

• Faire quelque chose d’unique et apprendre une nouvelle compétence
• Montrer tes réalisations et convaincre ton interlocuteur

Outils no-code

Même si je suis développeur, j’ai pas le temps de coder mon portfolio.

Le temps que je mettrais à le coder ne sera pas investi pour écrire des articles ou poster sur LinkedIn !

Donc dans 90% des cas, utiliser un outil no-code pour faire son portfolio a clairement du sens.

(En revanche, si tu veux démontrer des compétences particulières, ce n’est sûrement pas l’idéal)

Portfolio en ligne

Voici une liste d’outils en ligne pour réaliser son portefolio en ligne.

Avec eux, tu n’auras pas besoin de coder !

Parcours-les simplement et arrête-toi sur celui qui te donne la meilleure impression.

Nom	Coût	Pour
Adobe Express	Gratuit	Inspiration et design
Adobe Portfolio	Payant	Avoir un portfolio + un site internet
ArtStation	Gratuit	Les artistes (+ communauté)
Canva	Gratuit	La simplicité
Format	Gratuit	Les artistes (+ professionnels)
Pixpa	Payant	Portfolio + Site internet
SquareSpace	Payant	Site internet et portfolio
Visme	Gratuit	Inspiration visuelle et gratuité
WordPress	Gratuit ou Payant	Un « vrai » site internet et avoir le contrôle dessus.
WIX	Gratuit	La facilité.

Tous les outils que je présente ici en étant « gratuits » ont une version payante.

C’est-à-dire que les versions gratuites sont limitées…

Renseigne-toi sur ces limitations avant d’en choisir un !

Quel outil pour coder son Portfolio ?

Il existe pas mal d’outils et tu peux te sentir un peu perdu.

Pour résumer ce tableau ☝️

• Adobe Express : Si tu veux un joli truc rapidement
• ArtStation : Si tu aimes l’aspect communautaire et artistique
• Canva : Si tu n’es pas à l’aise avec l’informatique
• SquareSpace ou Wix : Si tu veux un « vrai site » en même temps
• WordPress : Si tu veux le contrôle TOTAL de tes créations (et que tu as du temps)

Coder son portfolio soi-même

Tu ne dois te poser la question que dans 2 cas.

• Tu as envie de progresser en HTML et CSS (ce qui se comprend, c’est un bon challenge)
• Tu as le temps (ça te fait super envie comme projet)

Montrer ses compétences de développeur ou de développeuse en codant son portfolio, ça peut être stylé, mais...

Si jamais ce que tu fais n’a pas un rendu avec un bon design, tu risques de te fermer des portes.

Il vaut mieux un portfolio récupéré ailleurs... qu'un portfolio codé soi-même, mais avec un design pas terrible.

Ça ne donnera pas envie à la personne en face.

Même si tu maîtrises les logiciels les plus stylés du moment, si ton site est moche, le ressenti sera négatif.

Attention donc.

Exception faite parfois pour les développeurs (seniors surtout), car on sait que le design c’est pas notre fort… 😇

Générer son portfolio

Plein d’outils existent pour les devs qui veulent créer des portfolios.

Tu peux déléguer ou t’inspirer de certains designs…

Et tu peux même générer ton porfolio depuis un fichier JSON ou autre.

(Pas de prise de tête, on se concentre sur le contenu)

Apprendre à coder son portfolio

Pour coder son portfolio je te conseille plusieurs choses :

1. Inspire-toi avec 4 ou 5 portfolios existants
2. Mets le paquet sur le design (et les animations – c’est fun en plus)
3. Concentre-toi sur la forme ET sur le fond
4. Sois unique, différent(e) et accentue ça
5. Fais de la qualité sur ton code et expose-le publiquement sur GitHub

Commence aussi à coder le plus rapidement possible !

Tu peux héberger gratuitement ton e-portfolio sur GitHub Pages (c’est parfait pour montrer tes compétences de dev) !

Où trouver des idées ?

Les meilleurs portfolios sont super stylés, tu t’arrêtes car ils sont beaux.

C’est la sensation que tu veux laisser chez le recruteur ou le client qui regardera ton book…

Vidéos pour apprendre à créer son portfolio

Comme les portfolios sont des choses assez visuelles, je te conseille de regarder des vidéos inspirantes.

Que ce soit pour apprendre à coder ou pour trouver des idées, des astuces.

Ce sont les meilleures vidéos que j’ai pu trouver sur le sujet !

Meilleurs sites pour l’inspiration

Voici 5 sites pour trouver des inspirations de portfolios.

Pour moi y’a rien de mieux si tu cherches à obtenir des idées !

Pfolios

Un site qui regroupe une liste des meilleurs portfolios.

Pinterest

Tout type de contenu sur les portfolios, probablement la meilleure source d’idées.

Dribbble

Une bibliothèque en ligne de portfolios faits par des graphistes.

Awwwards

Ce sont les meilleurs portfolios du web, les plus inventifs et les plus audacieux !

ThemeForest

Ce sont des thèmes WordPress pour concevoir son portfolio (de cette manière, tu verras ce qu’il est capable de faire avec ce CMS).

(Tous les développeurs détestent WordPress mais c’est un super outil, j’ai fait ce blog avec !)

Exemples de portfolios

Voici les meilleurs portfolios que j’ai vus en faisant mes recherches.

Tu en connais d’autres ?

Utilise les commentaires et je les rajouterai à la liste !

Disclaimer : J'ai choisi les catégories en fonction du style du site et non du métier de la personne qui a fait le portfolio.

Ne t’étonne pas de voir un portfolio de développeur ou de développeuse dans la catégorie « UX Designer » !

Développeurs

Pour les développeurs c’est toujours utile de montrer ce qu’on sait faire…

Surtout quand on est développeur front-end !

(Même si t’es dev backend ou fullstack, ça vaut toujours le coup si t’en as envie)

Pour les DevOps je n’ai pas trouvé d’exemples qui avaient suffisamment de différences pour que je les note ici.

Voici une liste de différents styles de portfolio pour les développeurs.

Tu y trouveras des exemples pour te donner une idée de ce qui est faisable.

UI et UX designer

Là y’a un gros truc à faire.

En tant que designer t’as le devoir d’avoir un portfolio joli qui reflète ton identité visuelle…

Voici quelques exemples de portfolio qui devraient t’inspirer !

Motion Designer

Je ne comptais pas mettre de section « Motion Design » sur le Portfolio, mais celui-ci m’a frappé.

Jeux-Vidéos

Ce sont des portfolios de développeurs mais…

Sous forme de jeux vidéos.

Franchement ça marque les esprits, ces portfolios je les ai retrouvés un peu partout en faisant mes recherches.

Ils sont pris comme références et inspirent confiance.

Tout ce qu’on recherche !

Illustration et graphisme

Là, c’est le moment d’être ultra-créatif.

Faut se différencier et en même temps… Imposer son style !

Bonne chance ☺️

Photographe

Évènementiel

Templates de portfolio à télécharger

Partir sur un template tout fait et changer tes informations peut te faire gagner beaucoup de temps.

En revanche si le template est assez connu, tu vas perdre en « différenciation ».

De fait, vous serez plusieurs à avoir le même portfolio…

Tu ne seras pas « unique ».

Est-ce que c’est dérangeant ?

Ça dépend à quel point tu veux le job en face. 😁

Template GitHub pour les développeurs

Quitte à avoir un truc codé, personnellement je récupérerais un projet déjà bien designé sur GitHub.

Là tu as le choix, énormément de développeurs ont mis leur portfolio en open-source.

Si jamais tu veux un truc qui t’appartient plus, libre à toi de forker le projet, puis de faire une pull request pour intégrer tes fonctionnalités.

Non seulement cela montrera tes compétences (dev et de git).

Mais en plus, c’est communautaire !

Template HTML gratuit

Il existe beaucoup de templates HTML5 gratuits pour faire son portfolio.

Tout comme il en existe beaucoup de payants…

Si jamais tu devais acheter un template HTML payant, je pense que ça pourrait te différencier davantage.

Cependant, attention car les thèmes sont souvent faits à la chaîne… (et à l’arrache)

(La qualité de code n’est pas toujours là)

Template InDesign gratuit

La suite Adobe est au top depuis des années et toujours inégalées…

Si jamais tu veux construire ton portfolio avec InDesign, voici une liste de templates gratuits !

Conclusion

Avoir un portfolio est très utile si on a quelque chose à montrer !

Ton portfolio, il lui faut un but.

Présenter ton travail, prouver tes compétences, démontrer un savoir-être, apprendre…

Envie d’avoir ton portfolio dans cette liste ?

Partage-le en commentaire !

Plus de contenu 💡

Pour lire plus de contenu similaire dans le même thématique.

• Apprendre le développement web : HTML, CSS, JS
• Blagues sur les développeurs : Jusqu'où ira-t-on ?
• Coder sur papier, vraiment utile ?
• CV de développeur : Constuire un résumé percutant
• Devenir développeur sans diplôme, est-ce possible ?
• Emploi de développeur : le plan pour trouver du travail
• Études pour devenir développeur : Quelle voie choisir ?
• IDE : Quel est le meilleur environnement de développement intégré ?
• Le meilleur langage pour commencer la programmation
• Le salaire d'un développeur web : Combien espérer ?
• Les développeurs détestent WordPress
• Reconversion développeur : Le guide
• Stage pour développeur (les trouver + les réussir)