DEV Community

Cover image for Show off your games using this tool
Azizul Haque Ananto
Azizul Haque Ananto

Posted on

Show off your games using this tool

I have built this dynamic ๐Ÿ–ผ SVG generator that collects the ๐Ÿ•น games you play from Steam and generates an image that can be embedded in any site (cause all sites use html ๐Ÿ˜…). You can also put it in โ“˜ .md files (like readme)! For example in GitHub profile readme, look at mine -

GitHub logo Ananto30 / Ananto30

My profile with Steam stats card

๐Ÿ‘‹ Hi, I'm Ananto

LinkedIn | Codersrank | Dev.to | Medium | Portfolio

๐Ÿš€ Projects

๐Ÿ”ฌ POC's

  • Async to sync using
  • A Fiber(Go) backend for a diary app - repo

๐ŸŽฎ My Steam games! (repo) -

Travis

๐Ÿง‘โ€๐Ÿ’ป My codersrank

โ€ฆ

All you need is to make your Steam profile public. The steps are shown in the repo -

GitHub logo Ananto30 / steam-stat

๐ŸŽฎ Dynamically generate your Steam (game) stats card on SVG

Steam-stats

Steam stats svg generator. Create your own Steam stat dynamically and share anywhere.

This can be used with .md files!

You can put in your GitHub readme too ๐Ÿ˜ƒ

Example ๐Ÿ“

For .md files -

![Travis](https://steam-stat.vercel.app/api?profileName=ananto)

For using as img property in html or md files -

<img src="https://steam-stat.vercel.app/api?profileName=ananto"/>

Travis

You need to provide the profile name in query parameter ?profileName=ananto.

Please ensure that your Steam profile is public!

How to get profile name or url

Go to profile Get profile name

How to make profile public

Make profile public

Contribution

Contributions are welcomed โค๏ธ

There are many things to add, so please feel free to discuss and improve the code quality


Inspired by github-readme-stats and natemoo-re




I am attaching the following line in this blog post and it will dynamically generate the SVG every time someone visits this page!

![Travis](https://steam-stat.vercel.app/api?profileName=ananto)
Enter fullscreen mode Exit fullscreen mode

Result -
Travis

(Obviously this has some caching to reduce spamming the Steam API ๐Ÿ˜›)

Please give it a โญ๏ธ star if you like it. ๐Ÿ˜ƒ
Suggest any further improvements and contributions are also welcomed. ๐Ÿ‘
Share your profile in the comment! ๐Ÿ‘‡

Top comments (0)