🎨 TUTORIEL PAS À PAS
🧩 Concevoir son portfolio professionnel
📅 Mis à jour : Août 2026
⏱️ Durée : 60 min
📋 Niveau : Débutant
🎨 Portfolio
📋 Carrière
🛠️ Outils
Un portfolio est bien plus qu’un simple CV. C’est une vitrine de vos compétences, de vos projets et de votre personnalité. Pour un étudiant en BTS SIO, un alternant ou un jeune diplômé, c’est un atout différenciant sur le marché du travail. Ce tutoriel vous guide dans la conception d’un portfolio professionnel, du choix du support à la mise en ligne, en passant par la sélection des projets et la rédaction des fiches.
📖 Pourquoi un portfolio ?
- Valoriser ses réalisations : montrer ce que vous avez fait, pas seulement ce que vous savez.
- Se démarquer : un portfolio soigné attire l’attention des recruteurs.
- Démontrer sa capacité à communiquer : clarté, rigueur, sens esthétique.
- Construire une marque personnelle : votre identité professionnelle en ligne.
📌 Prérequis :
- Une liste de vos projets (scolaires, personnels, stages, alternance).
- Des captures d’écran ou des liens vers vos réalisations.
- Un compte GitHub (si vous partagez du code).
- Un hébergeur pour mettre en ligne (GitHub Pages, Netlify, Vercel, OVH, etc.).
1 Choisir le support de son portfolio
1.1 – Les principales options
Le support influence l’expérience que vous offrez. Voici les plus courantes :
| Support | Avantages | Inconvénients |
|---|
Site web statique
(HTML/CSS/JS) |
Total contrôle, performance, hébergement gratuit (GitHub Pages) |
Courbe d’apprentissage, maintenance |
Générateur de site
(Hugo, Jekyll, Next.js) |
Professionnel, rapide, templates modernes |
Nécessite des compétences techniques |
Plateforme no-code
(Notion, Canva, WordPress) |
Facile, rapide, aucune compétence technique requise |
Moins personnalisable, parfois payant |
| PDF |
Simple, imprimable, facile à partager |
Pas interactif, moins moderne |
✅ Support choisi en fonction de vos compétences et de vos objectifs.
1.2 – Recommandation pour un BTS SIO
Option conseillée : Un site web statique hébergé sur
GitHub Pages ou
Netlify.
- Vous pouvez utiliser un template HTML/CSS (comme ceux que vous avez vus en cours).
- Vous démontrez vos compétences en développement web.
- C’est gratuit et vous gardez la main sur le code.
✅ Choix stratégique : site statique sur GitHub Pages.
2 Structure et contenu du portfolio
2.1 – Les pages incontournables
Un portfolio efficace doit contenir ces 5 sections :
- Accueil : présentation rapide, photo (optionnelle), accroche.
- À propos : parcours, passions, valeurs, compétences clés.
- Projets : la partie centrale ! Détaillez 3 à 6 projets marquants.
- Veille / Blog : articles ou résumés de votre veille professionnelle.
- Contact : formulaire ou liens vers vos réseaux (LinkedIn, GitHub).
✅ Structure claire et complète.
2.2 – Rédiger une fiche projet
C’est le cœur de votre portfolio. Chaque projet doit répondre à ces questions :
📌 Titre du projet
🗓️ Période : mois/année – mois/année
🎯 Contexte : (scolaire, stage, personnel)
🔧 Technologies : (ex : Apache, MariaDB, PHP, Docker)
📝 Description : 5 à 10 lignes présentant le projet, vos missions et les résultats.
🖼️ Captures : 2 à 3 images (interface, architecture, schéma).
🔗 Lien : lien vers le dépôt GitHub ou le site en ligne.
✅ Chaque projet est documenté de manière professionnelle.
3 Design et ergonomie
3.1 – Soigner l’apparence
Un portfolio doit être
agréable à lire et
refléter votre personnalité.
- Couleurs : choisissez une palette cohérente (2-3 couleurs max).
- Typographie : une police lisible (Inter, Roboto, Open Sans).
- Espaces : aérez vos pages (marges, interlignes).
- Responsive : votre site doit s’adapter aux mobiles et tablettes.
Outils d’inspiration :
- Dribbble / Behance : pour des idées de mise en page.
- Coolors : pour générer des palettes de couleurs.
- FontAwesome : pour des icônes modernes.
✅ Design soigné et professionnel.
3.2 – Rendre le contenu accessible
Pensez à :
- Contraste : texte lisible sur le fond.
- Alternatives textuelles : descriptifs pour les images (alt).
- Navigation intuitive : menu clair et cohérent.
✅ Portfolio inclusif et facile d’accès.
4 Mise en ligne
4.1 – Héberger gratuitement
GitHub Pages : la solution idéale pour un site statique.
Étapes :
- 1. Créez un dépôt nommé
votre-utilisateur.github.io.
- 2. Poussez vos fichiers HTML/CSS dans ce dépôt.
- 3. Activez GitHub Pages dans les paramètres du dépôt.
- 4. Votre site est en ligne en quelques minutes à l’adresse
https://votre-utilisateur.github.io.
✅ Portfolio en ligne, accessible partout.
4.2 – Acheter un nom de domaine (optionnel)
Pour un rendu plus professionnel, investissez dans un nom de domaine personnalisé (ex : jean-dupont-dev.fr).
Fournisseurs : OVH, Gandi, Namecheap, Cloudflare.
✅ Identité numérique renforcée.
5 Promouvoir son portfolio
5.1 – Intégrer le portfolio dans ses outils
- CV : ajoutez l’URL en tête de document.
- LinkedIn : ajoutez le lien dans les sections “À propos” et “Sites web”.
- Signature email : incluez un lien discret.
- Candidatures : mentionnez-le dans vos lettres de motivation.
✅ Votre portfolio est visible des recruteurs.
5.2 – Maintenir et enrichir
Un portfolio évolue avec vous :
- Ajoutez vos nouveaux projets (stages, alternance, perso).
- Améliorez le design en fonction des retours.
- Publiez des articles de veille pour montrer votre curiosité.
✅ Un portfolio vivant qui reflète votre progression.
✅ Test de validation
🎉 Votre portfolio est réussi si :
- Il contient au moins 3 projets documentés avec captures.
- Les sections Accueil, À propos, Projets, Contact sont présentes.
- Le site est responsive (s’affiche bien sur mobile).
- Le design est lisible et cohérent.
- L’URL est partagée sur votre CV et LinkedIn.
📚 Ressources complémentaires
BTS SIO – Lycée NDLP Avranches – Tutoriel Portfolio v1.0