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

Portfolio 2026 : Le Guide du Dev malin

Bienvenue sur le champ de bataille de l’emploi tech en 2026. Entre l’éclatement de la bulle covid et l’IA qui filtre automatiquement les candidatures, les postes juniors sont plus difficiles à atteindre.

Ton portfolio n’est pas juste un site web : c’est ton armure, ton bouclier et ton épée pour convaincre recruteurs et clients.

Bonne nouvelle : tu n’as pas besoin de vider ton porte-monnaie pour ça.

Avec un peu de stratégie, un design clair, tu peux créer un portfolio rapide, lisible et qui frappe fort, même en étant fauché.


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é dans la mêlée.

Le portfolio est devenu l’extension de son CV et la pratique s’est généralisé à 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).

Quelques sections bien pensées suffisent largement.

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.

Il se peut que le recruteur qui ouvre ton site entre deux réunions soit sur mobile et en 4G.

Évite le JavaScript inutile, optimise tes images en WebP, active le lazy loading.

<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 meme 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.
  • 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”).

---
// 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. Pas d’écosystème compliqué, pas de dépendances exotiques.

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

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


  • 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.

  • Si vraiment, tu te sens de créer quelque chose de complètement original et que tu n’as pas peur de le maintenir dans la durée, tu peux partir sur du 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 : puissant, 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) : super performant, 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.

  • Next.js, Gatsby, SvelteKit, Nuxt : 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ébergementPoints fortsLimites / AttentionFree tier (déc. 2025)Idéal pour…
GitHub PagesSimple, Jekyll natif, SSL gratuit, domaine customPeu de plugins/server-side, 1 Go stockage/site100 % gratuit – 100 Go bande passante/mois (soft limit) – 1 Go stockage/siteSites statiques, blogs Jekyll, docs
Cloudflare PagesCDN mondial ultra-rapide, Preview déploymentsFonctions avancées (Workers KV, D1…) payantesGratuit à vie – Bande passante illimitée – 500 builds/mois – Workers 100 k req/jourAstro, Hugo, Next.js, sites pro
NetlifyDéploiement ultra-simple, formulaires & fonctions nativesQuotas plus stricts qu’avantGratuit – 100 Go bande passante/mois – 300 crédits/mois (~300 min builds)Débutants, JAMstack, sites avec formulaires
VercelOptimisé Next.js & frameworks, Preview + AnalyticsCold starts fonctions, limites Hobby rapidesGratuit (Hobby) – 100 Go bande passante/mois – 6 000 min fonctions/moisNext.js, React, SvelteKit, Nuxt
Firebase HostingCDN Google, SSL, rollback instantanéNécessite CLI + projet Google CloudSpark plan gratuit – 10 Go bande passante/mois – 1 Go stockageSPA, PWA, apps Firebase
Surge.sh1 commande (surge), zéro configPas de CI/CD ni formulaires natifsGratuit illimité (domaine .surge.sh ou custom)Prototypes, démos ultra-rapides
NeocitiesAmbiance rétro Geocities, communauté fun1 Go stockage max, pas de CI/CDGratuit – 1 Go stockage – ~200 Go bande passante/moisSites perso fun, portfolios rétro

Sécurité simple et efficace


4.1 Les failles classiques d’un site statique


Failles courantesExemple concretComment éviter
Mauvaise configHeaders manquants, HTTPS non forcéActiver HSTS / HTTPS
Fichiers exposés/backup.zip, /admin/Supprimer / déplacer hors racine
Spam sur formulairesBots qui envoient du junkHoneypot, validation serveur
XSS basiqueValeurs non échappées dans du JSÉchapper toutes les entrées
Dépendances vulnérablesVersion obsolète d’un plugin / libMise à jour régulière, Dependabot

4.2 Headers de sécurité essentiels


HeaderCe qu’il bloqueExemple
CSPScripts non autorisés, XSSscript-src 'self'
X-Frame-OptionsClickjackingDENY
Referrer-PolicyFuite d’URL sensiblesstrict-origin

4.3 JavaScript & formulaires : risques et bonnes pratiques


RisqueExempleSolution rapide
Surface d’attaque trop largeTrop de JS, libs inutilesRéduire, minifier, supprimer
XSS clientinnerHTML non sécuriséUtiliser .textContent
Formulaire exploitablePas de validationValider côté serveur
Données sensibles exposéesClé API dans JSVariables d’environnement / proxy
Injection simpleChamps non filtrésNettoyer + 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 restez vigilant avec des mises à jour régulières.


ÉlémentVulnérabilité AstroVulnérabilité React RSC
RéférenceCVE-2025-61925CVE-2025-55182 (Annonce critique)
Score CVSS6.5 (Moyenne)10.0 (Critique)
DescriptionRé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éesVersions antérieures à Astro 5.14.3React 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 potentielSpoofing, 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.
Correctifnpm update pour Astro ≥ 5.14.3Mise à 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)