Un README de profil sans mise en page ressemble à un document Word de 2003. Quelques techniques HTML/SVG transforment ça en quelque chose de mémorable.

Structure en deux colonnes

GitHub rend les <img> inline côte à côte si leur largeur totale le permet. On exploite ça pour une mise en page colonne gauche / colonne droite :

README.md

<div align="center">
 
  <!-- Colonne gauche : infos -->
  <div>
    <h2>William Lorée</h2>
    <p>Développeur JavaScript · iducation.fr</p>
  </div>
 
</div>
 
<!-- Image stat à droite de la carte streak à gauche -->
<div align="center">
  <img src="https://streak-stats.demolab.com?user=williamloree&theme=tokyonight&hide_border=true" height="180" />
  <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=williamloree&layout=compact&theme=tokyonight&hide_border=true" height="180" />
</div>

GitHub ne supporte pas display: flex — pas de CSS layout. Les images côte à côte exploitent le comportement inline par défaut.

Bannière animée avec Capsule Render

README.md

<!-- Header ondulé -->
<img src="https://capsule-render.vercel.app/api?type=waving&color=0:3b82f6,100:8b5cf6&height=200&section=header&text=William%20Lorée&fontSize=48&fontColor=fff&animation=fadeIn&fontAlignY=38&desc=Développeur%20JavaScript&descSize=20&descAlignY=60" width="100%" />
 
<!-- Footer ondulé inversé -->
<img src="https://capsule-render.vercel.app/api?type=waving&color=0:3b82f6,100:8b5cf6&height=100&section=footer" width="100%" />

Paramètres utiles de Capsule Render :

Paramètre	Valeur	Effet
`type`	`waving`, `rect`, `soft`, `egg`, `shark`	Forme
`color`	`0:hex,100:hex`	Dégradé gauche→droite
`animation`	`fadeIn`, `twinkling`, `blinking`	Animation du texte
`desc`	texte encodé	Sous-titre
`section`	`header` ou `footer`	Vague vers le haut ou bas

Typing animation — texte qui se tape

README.md

<div align="center">
  <img src="https://readme-typing-svg.demolab.com?font=Fira+Code&weight=500&size=22&pause=1000&color=3B82F6&center=true&vCenter=true&width=440&lines=Développeur+JavaScript;Vue+%2F+Nuxt+%2F+TypeScript;DevOps+%2F+Docker+%2F+Linux" alt="Typing SVG" />
</div>

readme-typing-svg génère un SVG animé qui tape les lignes une par une, en boucle.

lines= accepte plusieurs lignes séparées par ;. Les espaces s'encodent +, les caractères spéciaux en URL encode.

Séparateur de section stylisé

README.md

<img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif" width="100%" />

Une ligne animée souvent utilisée sur GitHub. Chercher "github readme separator gif" pour des alternatives.

Version SVG statique :

<img src="https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png" width="100%" />

Snake animation — contributions

L'animation serpent qui mange les cases de contribution est générée par une GitHub Action (voir chapitre 7), mais voici l'intégration une fois générée :

README.md

<div align="center">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/williamloree/williamloree/output/github-contribution-grid-snake-dark.svg" />
    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/williamloree/williamloree/output/github-contribution-grid-snake.svg" />
    <img alt="Snake animation" src="https://raw.githubusercontent.com/williamloree/williamloree/output/github-contribution-grid-snake.svg" />
  </picture>
</div>

<picture> avec prefers-color-scheme adapte l'image au thème du navigateur de la personne qui visite le profil — version claire ou sombre automatiquement.

Compteur de visites discret

README.md

<div align="right">
  <img src="https://komarev.com/ghpvc/?username=williamloree&style=flat-square&color=blue" alt="" />
</div>

align="right" sur un <div> place le compteur en bas à droite — visible mais sans prendre de place.

Template final assemblé

README.md

<!-- Bannière -->
<img src="https://capsule-render.vercel.app/api?type=waving&color=0:3b82f6,100:8b5cf6&height=200&section=header&text=William%20Lorée&fontSize=48&fontColor=fff&fontAlignY=38&desc=Développeur%20JavaScript&descSize=20&descAlignY=60" width="100%" />
 
<div align="center">
 
  <!-- Typing animation -->
  <img src="https://readme-typing-svg.demolab.com?font=Fira+Code&size=20&pause=1000&color=3B82F6&center=true&vCenter=true&width=440&lines=Vue+%2F+Nuxt+%2F+TypeScript;Docker+%2F+Linux;iducation.fr" />
 
  <br />
 
  <!-- Badges réseaux -->
  <a href="https://iducation.fr"><img src="https://img.shields.io/badge/iducation.fr-000?style=for-the-badge&logo=safari&logoColor=white" /></a>
  <a href="https://linkedin.com/in/..."><img src="https://img.shields.io/badge/LinkedIn-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white" /></a>
  <img src="https://komarev.com/ghpvc/?username=williamloree&style=for-the-badge&color=blue" />
 
</div>
 
---
 
### 🔭 En ce moment
- Je développe **[iducation.fr](https://iducation.fr)**
- J'apprends : tout 🤣
 
---
 
<!-- Stats -->
<div align="center">
  <img src="https://github-readme-stats.vercel.app/api?username=williamloree&show_icons=true&theme=tokyonight&hide_border=true" height="180" />
  <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=williamloree&layout=compact&theme=tokyonight&hide_border=true" height="180" />
</div>
 
<!-- Footer -->
<img src="https://capsule-render.vercel.app/api?type=waving&color=0:3b82f6,100:8b5cf6&height=100&section=footer" width="100%" />

Un README de profil sans mise en page ressemble à un document Word de 2003. Quelques techniques HTML/SVG transforment ça en quelque chose de mémorable.

Structure en deux colonnes

GitHub rend les <img> inline côte à côte si leur largeur totale le permet. On exploite ça pour une mise en page colonne gauche / colonne droite :

README.md

<div align="center">
 
  <!-- Colonne gauche : infos -->
  <div>
    <h2>William Lorée</h2>
    <p>Développeur JavaScript · iducation.fr</p>
  </div>
 
</div>
 
<!-- Image stat à droite de la carte streak à gauche -->
<div align="center">
  <img src="https://streak-stats.demolab.com?user=williamloree&theme=tokyonight&hide_border=true" height="180" />
  <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=williamloree&layout=compact&theme=tokyonight&hide_border=true" height="180" />
</div>

GitHub ne supporte pas display: flex — pas de CSS layout. Les images côte à côte exploitent le comportement inline par défaut.

Bannière animée avec Capsule Render

README.md

<!-- Header ondulé -->
<img src="https://capsule-render.vercel.app/api?type=waving&color=0:3b82f6,100:8b5cf6&height=200&section=header&text=William%20Lorée&fontSize=48&fontColor=fff&animation=fadeIn&fontAlignY=38&desc=Développeur%20JavaScript&descSize=20&descAlignY=60" width="100%" />
 
<!-- Footer ondulé inversé -->
<img src="https://capsule-render.vercel.app/api?type=waving&color=0:3b82f6,100:8b5cf6&height=100&section=footer" width="100%" />

Paramètres utiles de Capsule Render :

Paramètre	Valeur	Effet
`type`	`waving`, `rect`, `soft`, `egg`, `shark`	Forme
`color`	`0:hex,100:hex`	Dégradé gauche→droite
`animation`	`fadeIn`, `twinkling`, `blinking`	Animation du texte
`desc`	texte encodé	Sous-titre
`section`	`header` ou `footer`	Vague vers le haut ou bas

Typing animation — texte qui se tape

README.md

<div align="center">
  <img src="https://readme-typing-svg.demolab.com?font=Fira+Code&weight=500&size=22&pause=1000&color=3B82F6&center=true&vCenter=true&width=440&lines=Développeur+JavaScript;Vue+%2F+Nuxt+%2F+TypeScript;DevOps+%2F+Docker+%2F+Linux" alt="Typing SVG" />
</div>

readme-typing-svg génère un SVG animé qui tape les lignes une par une, en boucle.

lines= accepte plusieurs lignes séparées par ;. Les espaces s'encodent +, les caractères spéciaux en URL encode.

Séparateur de section stylisé

README.md

<img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif" width="100%" />

Une ligne animée souvent utilisée sur GitHub. Chercher "github readme separator gif" pour des alternatives.

Version SVG statique :

<img src="https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png" width="100%" />

Snake animation — contributions

L'animation serpent qui mange les cases de contribution est générée par une GitHub Action (voir chapitre 7), mais voici l'intégration une fois générée :

README.md

<div align="center">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/williamloree/williamloree/output/github-contribution-grid-snake-dark.svg" />
    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/williamloree/williamloree/output/github-contribution-grid-snake.svg" />
    <img alt="Snake animation" src="https://raw.githubusercontent.com/williamloree/williamloree/output/github-contribution-grid-snake.svg" />
  </picture>
</div>

<picture> avec prefers-color-scheme adapte l'image au thème du navigateur de la personne qui visite le profil — version claire ou sombre automatiquement.

Compteur de visites discret

README.md

<div align="right">
  <img src="https://komarev.com/ghpvc/?username=williamloree&style=flat-square&color=blue" alt="" />
</div>

align="right" sur un <div> place le compteur en bas à droite — visible mais sans prendre de place.

Template final assemblé

README.md

<!-- Bannière -->
<img src="https://capsule-render.vercel.app/api?type=waving&color=0:3b82f6,100:8b5cf6&height=200&section=header&text=William%20Lorée&fontSize=48&fontColor=fff&fontAlignY=38&desc=Développeur%20JavaScript&descSize=20&descAlignY=60" width="100%" />
 
<div align="center">
 
  <!-- Typing animation -->
  <img src="https://readme-typing-svg.demolab.com?font=Fira+Code&size=20&pause=1000&color=3B82F6&center=true&vCenter=true&width=440&lines=Vue+%2F+Nuxt+%2F+TypeScript;Docker+%2F+Linux;iducation.fr" />
 
  <br />
 
  <!-- Badges réseaux -->
  <a href="https://iducation.fr"><img src="https://img.shields.io/badge/iducation.fr-000?style=for-the-badge&logo=safari&logoColor=white" /></a>
  <a href="https://linkedin.com/in/..."><img src="https://img.shields.io/badge/LinkedIn-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white" /></a>
  <img src="https://komarev.com/ghpvc/?username=williamloree&style=for-the-badge&color=blue" />
 
</div>
 
---
 
### 🔭 En ce moment
- Je développe **[iducation.fr](https://iducation.fr)**
- J'apprends : tout 🤣
 
---
 
<!-- Stats -->
<div align="center">
  <img src="https://github-readme-stats.vercel.app/api?username=williamloree&show_icons=true&theme=tokyonight&hide_border=true" height="180" />
  <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=williamloree&layout=compact&theme=tokyonight&hide_border=true" height="180" />
</div>
 
<!-- Footer -->
<img src="https://capsule-render.vercel.app/api?type=waving&color=0:3b82f6,100:8b5cf6&height=100&section=footer" width="100%" />

GitHub Profile README

Mise en page et design

Structure en deux colonnes

Bannière animée avec Capsule Render

Typing animation — texte qui se tape

Séparateur de section stylisé

Snake animation — contributions

Compteur de visites discret

Template final assemblé

GitHub Profile README

Mise en page et design

Structure en deux colonnes

Bannière animée avec Capsule Render

Typing animation — texte qui se tape

Séparateur de section stylisé

Snake animation — contributions

Compteur de visites discret

Template final assemblé