GitHub Profile README

GitHub Flavored Markdown supporte un sous-ensemble de HTML. C'est la clé pour faire du centrage, des images cliquables, des sections repliables et des tableaux sans bordures.

Centrer du contenu

Markdown n'a pas de centrage natif. HTML inline comble ça :

<div align="center">
  <h1>William Lorée</h1>
  <p>Développeur JavaScript · iducation.fr</p>
</div>

align="center" fonctionne sur <div>, <p>, <img>, <h1>–<h6>. C'est un attribut HTML déprécié que GitHub autorise encore dans les READMEs.

Image cliquable

<a href="https://iducation.fr" target="_blank">
  <img src="https://img.shields.io/badge/iducation.fr-000?style=for-the-badge" alt="Site" />
</a>

Envelopper une image dans un <a> la rend cliquable. target="_blank" ouvre dans un nouvel onglet.

Bannière de profil

Beaucoup de profils utilisent une image bannière centrée en haut :

<div align="center">
  <img src="https://capsule-render.vercel.app/api?type=waving&color=gradient&height=200&section=header&text=William%20Lorée&fontSize=50&fontColor=fff" width="100%" />
</div>

Capsule Render génère des bannières SVG dynamiques. Paramètres utiles :

• type : waving, rect, soft, egg, shark, slice
• color : gradient, auto, ou un hex 0:3b82f6,100:8b5cf6
• text : votre nom encodé en URL

Sections repliables

<details> et <summary> sont supportés par GitHub :

<details>
  <summary>🛠️ Stack complet</summary>
 
  ### Frontend
  Vue 3, Nuxt 3, TypeScript, Tailwind CSS
 
  ### Backend
  Node.js, PostgreSQL, Docker
 
  ### Outils
  VSCode, Figma, Postman
 
</details>

Une ligne vide entre <summary> et le contenu est obligatoire pour que le Markdown à l'intérieur soit rendu correctement.

Tableaux

| Technologie | Niveau | Depuis |
|-------------|--------|--------|
| Vue / Nuxt  | Expert | 2022   |
| TypeScript  | Solide | 2023   |
| Docker      | Solide | 2023   |
| PostgreSQL  | Avancé | 2023   |

Rendu :

L'alignement du Markdown source n'importe pas — GitHub parse les | indépendamment de l'espacement.

Séparateurs invisibles

Pour espacer des sections sans ligne horizontale visible :

<br />

Deux <br /> consécutifs = une ligne vide visuellement. Plus précis que les lignes vides Markdown qui disparaissent parfois selon le contexte.

Émojis

GitHub rend les shortcodes émojis dans les READMEs :

👋 :wave:
🔭 :telescope:
🌱 :seedling:
💬 :speech_balloon:
📫 :mailbox:
⚡ :zap:

La liste complète est sur emojipedia.org — chercher le shortcode GitHub (:name:).

Exemple de structure complète

<div align="center">
  <img src="bannière" width="100%" />
 
  <h2>William Lorée</h2>
  <p>Développeur JavaScript · <a href="https://iducation.fr">iducation.fr</a></p>
 
  <br />
 
  <!-- badges ici — chapitre 3 -->
 
</div>
 
---
 
### 🔭 En ce moment
 
- Je développe [iducation.fr](https://iducation.fr) — apprendre à coder en construisant de vrais projets
- J'apprends : tout 🤣
 
### 📫 Me contacter
 
[LinkedIn](#) · [Twitter](#) · [Site](#)

Les --- créent une ligne de séparation horizontale — utile pour découper le profil en sections distinctes.