Epitexam
Photographie en noir et blanc d'une personne marchant dans un rayon de lumière traversant un grand espace sombre.
Mis à jour le

Portfolio 2026 : Le Guide du dev malin

Le marché de la tech a changé, et se démarquer en tant que dev junior est un vrai défi. Dans ce contexte, ton portfolio ne doit pas être une simple vitrine : c’est l’outil principal pour prouver tes compétences aux recruteurs et décrocher des opportunités.

La bonne nouvelle ? Pas besoin d’un budget monstre ou d’une infrastructure complexe pour faire bonne impression.

Avec la bonne stratégie, un design épuré et les bons outils, tu peux concevoir un site rapide, accessible et parfaitement optimisé sans débourser un centime.

Les bases d’un portfolio

1.1 Objectif du portfolio

À l’origine, le portfolio, c’était l’arme secrète des artistes : graphistes, UI/UX designers, motion designers, illustrateurs, photographes… bref, toutes les personnes qui impressionnent visuellement avant même d’ouvrir la bouche. Et puis, petit à petit, les devs se sont retrouvés dans la mêlée : le portfolio est devenu l’extension de son CV et la pratique s’est généralisée à tous les milieux. L’objectif est clair : prouver que tu sais faire ce que tu dis savoir faire.

1.2 Contenu minimal indispensable

Bonne nouvelle : un portfolio n’a pas besoin de 14 pages et d’un menu animé en 3D (à part si tu t’appelles Bruno Simon). L’essentiel c’est :

  • Une page d’accueil qui dit qui tu es et ce que tu fais.
  • Une page À propos un peu plus personnelle, mais pas trop (pas besoin de raconter ton parcours depuis la maternelle).
  • Une page Projets claire, avec tes réalisations, tes technos, une capture et quelques lignes d’explication.
  • Eventuellement une page Contact, même si un simple lien mail + LinkedIn peut faire le job.

1.3 Performance et vitesse

Même si ton site ne fait que quelques pages, la vitesse reste essentielle. En 2026, si une page met plus de 2 secondes à charger, l’utilisateur disparaît plus vite qu’un stagiaire un vendredi à 17h — et il se peut que le recruteur qui ouvre ton site entre deux réunions soit sur mobile et en 4G. Le réflexe à avoir : éviter le JavaScript inutile, optimiser tes images en WebP, activer le lazy loading, par exemple sur une simple balise img :

<img src="projet.webp" alt="Projet X" width="800" height="600" loading="lazy">

Pas besoin de magie ou d’outil payant. Les meilleurs gains coûtent 0 € et te donnent un site qui charge vite partout.

1.4 Accessibilité de base

L’accessibilité n’est pas réservée aux grosses plateformes : c’est nécessaire même pour les petits projets. Contrastes lisibles, navigation au clavier, alt text utiles, structure sémantique propre… ce sont des bonnes pratiques qui ne coûtent rien et qui montrent que tu es un dev qui pense aux utilisateurs, tous les utilisateurs.

1.5 Visibilité et SEO léger

Tu n’as pas besoin d’être un gourou du SEO pour qu’on te trouve. Quelques bonnes pratiques suffisent : une meta description claire, des titres propres sur chaque page, et des balises OpenGraph pour éviter que ton lien ressemble à un écran gris quand tu le postes sur LinkedIn ou un serveur Discord.

Choisir ton outil de création

2.1 Les critères vraiment importants

Avant de choisir un générateur, pose-toi les bonnes questions : combien de pages ton portfolio va contenir, combien d’interactivité tu veux ajouter, et combien de maintenance tu es prêt à assumer. Regarde aussi la facilité de déploiement gratuit (Cloudflare, GitHub Pages), le temps de build, la quantité de JavaScript produite et la possibilité d’intégrer un mini-projet interactif sans transformer ton site en fusée SpaceX.

En résumé : pense long terme, simplicité, et efficacité.

2.2 Astro : moderne, modulable, et ultra fun

Astro génère du HTML pur par défaut et n’envoie du JavaScript que pour les composants interactifs (les “islands”). Concrètement, une page qui liste tes projets ressemble à ça :

---
// src/pages/index.astro
// Tout ce qui est ici s'exécute au build (Serveur)
import ProjectFilter from '../components/ProjectFilter.svelte';
import { getCollection } from 'astro:content';

const projects = await getCollection('projects');
---

<main>
  <ProjectFilter client:load />

  {projects.map((p) => (
    <article>
      <h2>{p.data.title}</h2>
    </article>
  ))}
</main>

Ça fonctionne avec React, Svelte, Vue… ou sans framework du tout. Astro brille particulièrement pour les portfolios un peu stylés, avec transitions propres, composants réutilisables et Markdown intégré (un peu comme le mien non ?). La contrepartie : tu touches forcément un peu au JavaScript et à la config (installer Tailwind, MDX, etc.). Ce n’est pas sorcier, mais ce n’est pas “plug-and-play”.

Si tu veux un site moderne, Astro est un excellent choix.

2.3 Hugo : minimal, ultra rapide, zéro stress

Hugo, c’est le champion du build le plus rapide du marché. Les pages sortent quasi instantanément, même quand ton site devient massif. Il produit du HTML statique pur, sauf si tu ajoutes toi-même du JS, sans écosystème compliqué ni dépendances exotiques. Voici à quoi ressemble un template Hugo listant tes projets :

<!-- layouts/index.html -->
{{ range (where .Site.RegularPages "Section" "projects") }}
  <article>{{ .Title }}</article>
{{ end }}

Les templates Go demandent un petit temps d’adaptation, mais une fois compris, c’est clair et stable. Et oui, certains thèmes peuvent vite alourdir le dossier ou complexifier l’installation — je suis déjà passé par là. Hugo est parfait si tu veux un portfolio rapide, robuste et simple à maintenir, sans plonger dans l’univers JavaScript.

2.4 Jekyll : le choix simple et natif des débutants

Jekyll est moins hype mais d’une fiabilité exemplaire. Il tourne depuis plus de 10 ans, utilise Markdown + Liquid, et surtout : GitHub Pages le compile nativement, gratuitement, sans pipeline ni configuration. Un exemple typique de boucle sur tes projets :

<!-- index.html -->
{% for project in site.projects %}
  <article>{{ project.title }}</article>
{% endfor %}

Tu pushes, GitHub génère, ton site est en ligne. C’est le choix parfait si ton objectif est d’avoir un portfolio propre et fonctionnel sans t’encombrer de tooling moderne. C’est souvent le choix préféré des plus gros techos sur Hacker News.

2.5 Quel outil pour quel type de junior ?

Ton profil Outil recommandé
Tu viens du front, tu aimes React ou Svelte Astro — parfait pour mélanger simplicité et modernité
Tu veux un portfolio le plus rapide possible Hugo — moins de JS, moins de problèmes
Tu veux zéro maintenance et zéro configuration Jekyll — le plus pragmatique des trois
Tu veux créer quelque chose de complètement original et n’as pas peur de le maintenir dans la durée React, Vue, etc.

2.6 Et les autres solutions

Il existe évidemment d’autres outils pour créer un site, mais ils ne sont pas tous adaptés à un portfolio léger, gratuit et simple à maintenir. WordPress est puissant et complet, mais nécessite une base de données, un hébergement, des mises à jour régulières et une sécurité plus fragile — beaucoup trop lourd pour un simple portfolio. Eleventy (11ty) est super performant et très flexible, mais son côté “tout en configuration” le rend moins accessible pour un dev junior : une bonne option si tu aimes bidouiller, moins si tu veux aller vite. Quant à Next.js, Gatsby, SvelteKit ou Nuxt, ce sont d’excellents frameworks… pour faire des applications, pas des portfolios : trop lourds, trop complexes, trop de JavaScript pour ce dont tu as besoin.

Hébergement gratuit pour ton portfolio

Comparatif rapide des meilleures options (2025-2026) :

Hébergement Points forts Limites / Attention Free tier (déc. 2025) Idéal pour…
GitHub Pages Simple, Jekyll natif, SSL gratuit, domaine custom Peu de plugins/server-side, 1 Go stockage/site 100 % gratuit – 100 Go bande passante/mois (soft limit) – 1 Go stockage/site Sites statiques, blogs Jekyll, docs
Cloudflare Pages CDN mondial ultra-rapide, Preview déployments Fonctions avancées (Workers KV, D1…) payantes Gratuit à vie – Bande passante illimitée – 500 builds/mois – Workers 100 k req/jour Astro, Hugo, Next.js, sites pro
Netlify Déploiement ultra-simple, formulaires & fonctions natives Quotas plus stricts qu’avant Gratuit – 100 Go bande passante/mois – 300 crédits/mois (~300 min builds) Débutants, JAMstack, sites avec formulaires
Vercel Optimisé Next.js & frameworks, Preview + Analytics Cold starts fonctions, limites Hobby rapides Gratuit (Hobby) – 100 Go bande passante/mois – 6 000 min fonctions/mois Next.js, React, SvelteKit, Nuxt
Firebase Hosting CDN Google, SSL, rollback instantané Nécessite CLI + projet Google Cloud Spark plan gratuit – 10 Go bande passante/mois – 1 Go stockage SPA, PWA, apps Firebase
Surge.sh 1 commande (surge), zéro config Pas de CI/CD ni formulaires natifs Gratuit illimité (domaine .surge.sh ou custom) Prototypes, démos ultra-rapides
Neocities Ambiance rétro Geocities, communauté fun 1 Go stockage max, pas de CI/CD Gratuit – 1 Go stockage – ~200 Go bande passante/mois Sites perso fun, portfolios rétro

Sécurité simple et efficace

4.1 Les failles classiques d’un site statique

Failles courantes Exemple concret Comment éviter
Mauvaise config Headers manquants, HTTPS non forcé Activer HSTS / HTTPS
Fichiers exposés /backup.zip, /admin/ Supprimer / déplacer hors racine
Spam sur formulaires Bots qui envoient du junk Honeypot, validation serveur
XSS basique Valeurs non échappées dans du JS Échapper toutes les entrées
Dépendances vulnérables Version obsolète d’un plugin / lib Mise à jour régulière, Dependabot

4.2 Headers de sécurité essentiels

Header Ce qu’il bloque Exemple
CSP Scripts non autorisés, XSS script-src 'self'
X-Frame-Options Clickjacking DENY
Referrer-Policy Fuite d’URL sensibles strict-origin

4.3 JavaScript & formulaires : risques et bonnes pratiques

Risque Exemple Solution rapide
Surface d’attaque trop large Trop de JS, libs inutiles Réduire, minifier, supprimer
XSS client innerHTML non sécurisé Utiliser .textContent
Formulaire exploitable Pas de validation Valider côté serveur
Données sensibles exposées Clé API dans JS Variables d’environnement / proxy
Injection simple Champs non filtrés Nettoyer + valider les inputs

4.4 Vigilance outils : Exemples de CVEs dans les frameworks modernes

Même les outils solides comme Astro ou React peuvent présenter des vulnérabilités ; elles sont souvent patchées rapidement par les communautés open-source. On ne va pas ici rentrer en détail de la cybersécurité ou présenter des bouts de code à la va-vite (bien qu’il soit parfois nécessaire de le faire). L’essentiel est de rester vigilant avec des mises à jour régulières.

Élément Vulnérabilité Astro Vulnérabilité React RSC
Référence CVE-2025-61925 CVE-2025-55182 (Annonce critique)
Score CVSS 6.5 (Moyenne) 10.0 (Critique)
Description Réflexion non validée de l’en-tête X-Forwarded-Host, permettant une manipulation d’URL en mode SSR derrière un proxy. Exécution de code à distance via une requête HTTP malicieuse sur les Server Components.
Versions concernées Versions antérieures à Astro 5.14.3 React 19.0.0, 19.1.0, 19.1.1, 19.2.0, et frameworks comme react-router, waku, @parcel/rsc. (Next.js a un CVE séparé : CVE-2025-66478)
Impact potentiel Spoofing, phishing, contamination de cache (uniquement en mode dynamique avec cache). Aucun risque en SSG. Exécution de code serveur. Risque accru dans les “islands” React d’Astro si intégration SSR affectée.
Correctif npm update pour Astro ≥ 5.14.3 Mise à jour immédiate vers 19.0.1, 19.1.2 ou 19.2.1. Mesures d’atténuation proposées par les hébergeurs (Vercel, etc.).

Note : L’objectif ici est de sensibiliser, non de fournir une analyse exhaustive de cybersécurité.

4.5 Conseils généraux

  • Suivez les advisories : Abonnez-vous à GitHub Security Alerts et consultez NVD ou blogs officiels (2 min/semaine).
  • Updates auto : Utilisez Dependabot pour patches ; rebuild/redeploy pour sites statiques.
  • Bonnes pratiques : Limitez JS (islands Astro), validez inputs/headers, ajoutez CSP/HSTS. Testez avec OWASP ZAP.
  • Pour budgets serrés : Privilégiez statique (Hugo/Jekyll) sans runtime JS.

En résumé, les CVEs sont courantes en dev web, mais une veille légère et des updates régulières protègent sans effort majeur.

Conclusion

Ton portfolio est enfin prêt : rapide, propre, gratuit et blindé.

Ce qui compte vraiment, ce n’est pas la quantité de frameworks ou de plugins que tu utilises, mais ce que ton travail raconte sur toi et tes compétences. Même dans un marché du dev chamboulé par l’IA et l’automatisation, un portfolio bien fait reste ton arme secrète pour sortir du lot et montrer que tu sais te battre pour tes projets.

Sources & Liens (vérifiés le 12 Décembre 2025)