Easily share your Stackoverflow's profile on your README
Tags: opensource, javascript, stackoverflow, readme
Published: 2021-12-05 15:27:29

Did you know that it was possible to easily share your Stackoverflow statistics using small dynamic images called "Flair"? This small image simply allows you to embellish your different READMEs like the one on GitHub or your online CV:

![SO's Flair](https://stackoverflow.com/users/flair/8583669.png?theme=dark)

... and that just by adding the following Markdown:

```md
![SO's Flair](https://stackoverflow.com/users/flair/USER_ID.png?theme=dark)
```

You can check them out at the URL https://stackoverflow.com/users/YOUR_USER_ID/YOUR_USER_NAME/flair :

![SO's Flairs page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zuj1zar00dovnl4xmi7v.png)
 
This service proposed by Stackoverflow works very well, however since it hasn't be updated since a few years, there is some negative point that I noticed:

- the avatar image is weirdly cropped
- the only infos are the username, reputation score and badges amount
- it's a png so there is no fancy animation
- the image is very pixelated because of its small size (208x58)
- and most importantly: you cannot improve it because the project is not open-sourced


That's why I developed my own version of this service that would solve all these problems: [stackoverflow-readme-profile](https://github.com/johannchopin/stackoverflow-readme-profile)

{% github johannchopin/stackoverflow-readme-profile %}

This project allows you to embed improved version of those flairs wherever you want: 

Default Stackoverflow profile:
[![johannchopin's SO profile](https://stackoverflow-readme-profile.johannchopin.fr/profile/8583669?theme=dark)](https://github.com/johannchopin/stackoverflow-readme-profile)

Smaller profile:
[![johannchopin's SO profile](https://stackoverflow-readme-profile.johannchopin.fr/profile-small/8583669?theme=monokai)](https://github.com/johannchopin/stackoverflow-readme-profile)

Just use the following markdown schema to get your flair:

```
[![my SO profile](https://stackoverflow-readme-profile.johannchopin.fr/TEMPLATE_NAME/USER_ID?theme=dark)](https://github.com/johannchopin/stackoverflow-readme-profile)
```

Not yet convinced to use this project? I can understand why using an "unofficial" service doesn't seem like a good idea but here are some points that might change your mind:

- stackoverflow-readme-profile proposes a higher customisation with [multiple themes](https://github.com/johannchopin/stackoverflow-readme-profile/tree/main/docs/profile) and [templates](https://github.com/johannchopin/stackoverflow-readme-profile#templates)
- stackoverflow-readme-profile render a svg so the final image is pixel clear and is animated
- the project is [open-sourced](https://github.com/johannchopin/stackoverflow-readme-profile): You want a new feature or improve something? Just [open an issue](https://github.com/johannchopin/stackoverflow-readme-profile/issues/new) so we can collaborate together
- you want to self host the application? No problem there is already a [docker image](https://hub.docker.com/repository/docker/johannchopin/stackoverflow-readme-profile) for that.

Thanks again for reading. If you are willing to see this project growing don't hesitate to leave a ⭐ to the repo and push your ideas of improvement.

{% github johannchopin/stackoverflow-readme-profile %}