Temps de lecture estimé : 17 minutes

Portfolio : Guide complet (+ exemples)

Comment faire un portfolio qui donne envie ? On va trouver des idĂ©es et de l’inspiration pour t’aider Ă  avoir le portfolio parfait.

Lorsque l’on apprend Ă  coder, crĂ©er son portfolio est souvent une bonne idĂ©e.

Cela permet de s’exercer tout en montrant ses compĂ©tences de dev !

Voici donc un guide pour trouver une idĂ©e, de l’inspiration, utiliser les bons outils, savoir comment faire et passer Ă  l’action.

Quand j’Ă©tais en BTS SIO durant mes Ă©tudes pour devenir dev, on m’a demandĂ© de crĂ©er mon « portefeuille de compĂ©tences ».

Il Ă©tait moche et ne donnait pas du tout envie.

Suivant ta profession, ça peut ĂȘtre TRÈS intĂ©ressant d’avoir un portfolio Ă  jour…

Encore faut-il avoir un BON portfolio.

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.

Portefeuille de compétences du BTS SIO
Mon portefeuille de compétences du BTS

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

Qu’est-ce que ça veut dire portfolio ?

En français on le traduit par « portefeuille de compĂ©tences ». En rĂ©alitĂ©, il s’agit souvent d’un site web (ePortfolio) sur lequel tu te prĂ©sentes toi et tes projets.

Quelle est la différence entre un CV et un portfolio ?

Le CV prĂ©sente tes compĂ©tences et attire l’Ɠil du recruteur / client. Le portfolio apporte une vision dĂ©taillĂ©e de tes rĂ©alisations : il est lĂ  pour convaincre.

Comment faire son propre portfolio ?

Il existe plusieurs choix pour faire son portfolio : outils en ligne, logiciels, le coder soi-mĂȘme ou le gĂ©nĂ©rer Ă  partir d’un template ou d’un code…

Comment créer un portfolio en PDF ?

Sauf si tu as un book Ă  prĂ©senter en entretien, tu n’as pas besoin de l’exporter en PDF (la version web suffit). Si tu en as besoin, des logiciels permettent des exports en PDF.

Faut-il imprimer son portfolio ?

Si tu fais partie d’un milieu oĂč les gens impriment leur travail, fais en sorte que tes rĂ©alisations soient imprimables (c’est souvent le cas dans les milieux artistiques).

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.

CV développeur freelance
https://alexsoyes.com/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…

https://www.rafaelvarona.com/

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
Technos dans un CV de développeur
https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f

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 de développeur et de développeuse
https://www.linkedin.com/feed/update/urn:li:activity:7004018744284905473?commentUrn=urn%3Ali%3Acomment%3A%28activity%3A7004018744284905473%2C7004042178939265024%29

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 !)

Analyse des mots clés sur la Google Search Console
Google Search Console : Mots clefs

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 gratuit avec Adobe Express
https://express.adobe.com/fr-FR/

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.

NomCoûtPour
Adobe Express GratuitInspiration et design
Adobe PortfolioPayantAvoir un portfolio + un site internet
ArtStationGratuitLes artistes (+ communauté)
CanvaGratuitLa simplicité
FormatGratuitLes artistes (+ professionnels)
PixpaPayantPortfolio + Site internet
SquareSpacePayantSite internet et portfolio
VismeGratuitInspiration visuelle et gratuité
WordPressGratuit ou PayantUn « vrai » site internet et avoir le contrÎle dessus.
WIXGratuitLa facilité.
Liste des meilleurs outils en ligne pour faire son Portfolio

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)

TechFolios : Créer un portfolio pour développeur en quelques minutes
https://techfolios.github.io/

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) !

HĂ©berger un site statique sur GitHub
https://pages.github.com/

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 !

Je REDESIGN mon PORTFOLIO de A Ă  Z !
Comment réussir son portfolio de développeur web junior !
5 idées de projets pour un portfolio de développeur web
5 conseils pour améliorer son portfolio de développeur
Création de mon site étape par étape

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.

Liste de portfolios pour les développeurs
https://pfolios.net/

Pinterest

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

Portfolio sur Pinterest
https://www.pinterest.fr/search/pins/?q=portfolio&rs=typed

Dribbble

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

Portfolio sur Dribble
https://dribbble.com/search/portfolio

Awwwards

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

Portfeolio Awwards
https://www.awwwards.com/websites/portfolio/

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 !)

Portfolio ThemeForest
https://themeforest.net/category/wordpress?term=portfolio

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.

Tweet découverte portfolio développeurs et développeuses
https://twitter.com/alexsoyes/status/1597982085213478925

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.

Portfolio développeur créatif
https://www.raoul-gaillard.com/
Portfolio développeur full-stack
Portfolio codeuse
https://www.cassie.codes/
Portfolio dev design mentor
https://mattfarley.ca/
Portfolio développeur frontend
https://shiro-e-portfolio.vercel.app/
Portfolio développeur JSON
https://pierreburel.com/

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 !

Portfolio UX designeuse et Product designer
https://stephaniewalter.design/
Portfolio
http://robinmastromarino.com/
Portfolio coder et designer
https://www.adhamdannaway.com/

Motion Designer

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

Portfolio motion designer
https://gweno.tv/

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 !

Portfolio jeux vidéo gameboy
https://martingauer.com/
Portfolio jeux vidéo voiture en 3D
https://bruno-simon.com/
Portfolio jeux vidéos space invaders
https://caferati.me/
Portfolio jeux vidéos retro
https://peteroravec.com/

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 â˜ș

Portfolio illustratice
https://www.marieboiseau.com/
Portfolio illustrateur dessin
https://senshiandy.weebly.com/
Portfolio artiste
https://www.artstation.com/boulet

Photographe

Portfolio de photographe avec des catégories
https://www.pedrontheworld.com/lifestyle
Portfolio photographe avec beaucoup d'images
https://www.jucophoto.com/

Évùnementiel

Portfolio Ă©vĂšnement
https://activetheory.net/

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.

Portfolio développeur sur github
https://github.com/search?q=portfolio

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Ă )

Free CSS template portfolio
https://www.free-css.com/template-categories/portfolio

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 !

Template InDesign gratuits sur Behanve
https://www.behance.net/search/projects?tracking_source=typeahead_search_direct&search=Free+InDesign+Template+portfolio

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.

2 commentaires

  1. Avatar de Elyssa Eyaba

    Article trÚs édifiant et intéressant
    Je penses que tu nous a beaucoup facilité la tùche

    • Avatar de Alex so yes

      Super sympa, merci beaucoup d’avoir pris le temps de laisser un commentaire 🙂

đŸ‘©â€đŸ’» RĂ©agir Ă  cet article đŸ‘šâ€đŸ’»

Merci de partager ton histoire avec la communauté !