🎨 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 :

# Modèle de fiche projet
📌 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.