Créer votre portfolio de dev (Guide complet - 2025)

Introduction

Vous êtes à la recherche d’un emploi, d’un stage ou de missions en freelance ? Vous êtes développeuse ou développeur et vous souhaitez créer votre portfolio pour mettre en avant vos compétences et vos projets ?

Dans ce guide complet, je vous explique comment créer et déployer gratuitement votre portfolio de dev en quelques minutes, sans prise de tête, en se concentrant sur l’essentiel, c’est-à-dire vos projets et vos compétences, sans y passer des heures et des jours.

À la fin de ce guide, votre portfolio sera accessible sur internet !

Pourquoi créer un portfolio de dev ?

Un portfolio de dev est un excellent moyen de mettre en avant vos compétences, vos projets et vos réalisations. C’est un peu comme votre CV, mais en mieux. En effet, un portfolio vous permet de montrer ce que vous savez faire, de manière concrète, en mettant en avant vos projets et vos compétences techniques.

C’est en quelque sorte votre vitrine, votre carte de visite, votre portfolio de dev vous permet de vous démarquer des autres candidats et de montrer ce que vous savez faire, de manière concrète !

Ce que ne doit pas être votre portfolio

Votre portfolio ne devrait pas être votre espace d’expérimentations, de test ou de bac à sable. Il doit être professionnel, clair, concis et mettre en avant vos compétences et vos projets. Il doit être facile à lire, à comprendre et à naviguer. Il doit être responsive, c’est-à-dire s’adapter à tous les écrans, du smartphone à l’ordinateur, voir à l’impression.

Autrement dit, dans une phase de recherche d’emploi, vous ne devriez pas “perdre” du temps à créer un portfolio ultra-design, ultra-complexe, ultra-animé, ultra-… Vous devriez vous concentrer sur l’essentiel, c’est-à-dire vos projets et vos compétences.

Comment créer votre portfolio rapidement et simplement ?

Pour créer votre portfolio rapidement et simplement, nous allons utiliser un template de portfolio de dev. Car, souvenez-vous, l’objectif est de se concentrer sur l’essentiel, pas sur le design, le développement ou le déploiement.

Choisir une technologie simple et cohérente : Astro JS

Pour créer un portfolio pas besoin d’une architecture ultra-complexe, ultra-technique, ultra-… Nous avons juste besoin de quelques bouts de code HTML, CSS et éventuellement JavaScript.

Pour cela, nous allons utiliser Astro JS, un framework très efficace pour créer des sites web statiques, rapides et modernes.

Utiliser un template de portfolio

Rendez-vous sur le site de Astro JS, dans son catalogue de templates, et choisissez un template de portfolio qui vous plaît. J’ai pré-sélectionné pour vous le template Smilesharks/dev-portfolio, qui est simple, efficace, moderne et simple à personnaliser.

Pour cela, dans un terminal, exécutez la commande suivante :

pnpm create astro@latest -- --template Smilesharks/dev-portfolio

Une fois le projet initialisé, lancez le serveur de développement :

pnpm dev

Vous devriez voir un portfolio de dev, avec des projets, des compétences, des réalisations, des expériences, des formations, etc.

Personnaliser votre portfolio

L’avantage de ce template est qu’il est très simple à personnaliser. Vous n’avez pas besoin de toucher au code, juste au fichier de configuration cv.json à la racine du projet.

Dans ce fichier, vous pouvez personnaliser votre nom, votre prénom, votre photo, vos compétences, vos projets, vos expériences, vos formations, etc.

Finalement, c’est l’opération la plus longue, mais avec ce fichier cv.json il vous sera très facile de personnaliser votre portfolio à l’avenir.

Mettre en ligne votre portfolio

OK c’est bien beau, vous avez un portfolio qui fonctionne en local, mais comment le rendre accessible sur internet ?

Pour cela, nous allons utiliser GitHub Pages et GitHub Actions, qui sont gratuits et très simples à utiliser.

Envoyer votre projet sur GitHub

Première étape : créer une repository sur GitHub, et envoyer votre projet dessus. Le repository peut être privé ou public, ça n’a pas d’importance.

(Bon, je ne rentre pas dans les détails pour cette étape, c’est du classique et standard)

Préparer votre projet Astro JS pour le déploiement

• On va légèrement modifier le fichier src/layouts/Layout.astro pour que les liens vers les fichiers CSS soient corrects.

// Avant
<link rel="stylesheet" href="/themes/themes.css" />

// Apres (Permet de gérer le base URL pour le chemin des fichiers)
<link rel="stylesheet" href={`${import.meta.env.BASE_URL}themes/themes.css`} />

• On va modifier le fichier astro.config.mjs pour ajouter la configuration de l’URL de base et le trailing slash.

import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";

// https://astro.build/config
export default defineConfig({
  site: 'https://votrepseudo.github.io',
  base: 'LeNomDeVotreRepository',
  trailingSlash: "always",
  integrations: [tailwind()],
});

Configurer GitHub Pages

Dans votre repository GitHub, allez dans les paramètres, puis dans la section Pages, et configurez GitHub Pages pour qu’il publie avec la source GitHub Actions.

Configurer le pipeline GitHub Actions

Maintenant que votre projet est sur GitHub, nous allons configurer GitHub Actions pour déployer automatiquement votre portfolio à chaque fois que vous poussez du code sur la branche main.

Pour cela, créez un fichier .github/workflows/deploy.yml à la racine de votre projet, avec le contenu suivant :

name: Deploy to GitHub Pages

on:
  push:
    branches: [ main ]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout your repository using git
        uses: actions/checkout@v4
      - name: Install, build, and upload your site
        uses: withastro/action@v3
        with:
          node-version: 20
          package-manager: pnpm@latest 

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Committez et poussez ce fichier sur votre repository GitHub, et vous devriez voir GitHub Actions se déclencher et déployer votre portfolio sur GitHub Pages 🪄