How I redesigned my GitHub profile — and the badges worth chasing

How I redesigned my GitHub profile — and the badges worth chasingComment j'ai refait mon profil GitHub — et les badges qui valent le coup

An animated galaxy banner, stack tiles that stay readable in dark mode, a day-and-night isometric tower — and the small, honest steps behind GitHub's achievement badges.Une bannière galaxie animée, des tuiles de stack lisibles en mode sombre, une tour isométrique jour et nuit — et les petites étapes honnêtes derrière les badges GitHub.

A scene for each theme

A visitor's theme can't be forced, but a <picture> element lets GitHub pick the right image on its own:

<picture> <source media="(prefers-color-scheme: dark)" srcset="assets/monument-dev-night.svg"> <img src="assets/monument-dev.svg" alt="From localhost to production" width="100%"> </picture>

That is how the isometric tower shows a pastel day version in light mode and a night version, with the moon and lit windows, in dark mode.

The achievement badges

GitHub's achievements are earned through real activity, not settings. A few of them:

Pull Shark — pull requests that get merged;

Quickdraw — closing an issue or a pull request within five minutes of opening it;

Pair Extraordinaire — co-authoring a merged commit;

Starstruck — a repository that reaches 16 stars;

Galaxy Brain — answers accepted in GitHub Discussions.

The honest way to collect them is the useful way: contribute to projects you use, open clean pull requests, and ship things people want to star.

Pourquoi mon profil avait besoin d'une refonte

Un profil GitHub est souvent la première chose qu'ouvre un recruteur ou un autre développeur. Le mien listait des outils sous forme de badges, et pas grand-chose d'autre. Je voulais qu'un visiteur comprenne en cinq secondes qui je suis, ce que je construis, et que je livre.

Une bannière qui bouge — sans JavaScript

GitHub affiche une image de README comme un simple <img> : aucun script ne s'exécute. La bannière est donc un seul SVG animé avec des keyframes CSS : la galaxie tourne, les étoiles scintillent, et le texte est converti en tracés pour garder sa police partout.

Des logos lisibles en mode sombre

Beaucoup de logos de marques sont noirs. Sur le thème sombre de GitHub, ils disparaissent. Chaque tuile de mon tableau « Languages & Tools » est générée, et les logos sombres reçoivent une variante claire pour rester visibles dans les deux thèmes.

Une scène pour chaque thème

On ne peut pas imposer le thème d'un visiteur, mais un élément <picture> laisse GitHub choisir la bonne image tout seul :

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="assets/monument-dev-night.svg">
  <img src="assets/monument-dev.svg" alt="From localhost to production" width="100%">
</picture>

C'est ainsi que la tour isométrique affiche une version de jour aux tons pastel en mode clair, et une version de nuit, avec la lune et les fenêtres allumées, en mode sombre.

Les badges de succès

Les succès GitHub se gagnent par une activité réelle, pas par un réglage. Quelques-uns :

Pull Shark — des pull requests fusionnées ;
Quickdraw — fermer une issue ou une pull request moins de cinq minutes après l'avoir ouverte ;
Pair Extraordinaire — être co-auteur d'un commit fusionné ;
Starstruck — un dépôt qui atteint 16 étoiles ;
Galaxy Brain — des réponses acceptées dans GitHub Discussions.

La façon honnête de les obtenir est aussi la plus utile : contribuer aux projets que vous utilisez, ouvrir des pull requests propres, et livrer des choses que les gens ont envie d'étoiler.