Updating my profile numbers with your outline
Closed this issue · 1 comments
Hi @rickstaa I am enjoying the layout and clean look of your github profile stats.
- I'm not familiar with vercel, is that the host for a project, but I'm also not sure how or what that is used as part of your counter.
- When trying to change my page stats (shown below) the Vercel app keeps having deployment issues, can i just use my own stats or Django, Flask data?
Hello @datatalking, I'm glad you're enjoying my profile! I'd like to briefly overview the tools I've used to create my profile.
Buttons
The buttons on my profile are generated using the https://img.shields.io/ service. Here's an example of the code I use to create these buttons:
[![Github](https://img.shields.io/github/followers/rickstaa?label=Follow&style=social)](https://github.com/rickstaa)
<!-- Social button 5 -->
<!-- Light Mode -->
<a href="https://www.linkedin.com/in/rickstaa#gh-light-mode-only">
<img src="https://img.shields.io/badge/LinkedIn-3572A5?style=for-the-badge&logo=linkedin&logoColor=white#gh-light-mode-only" alt="Connect with me on linkedin" >
</a>
<!-- Dark Mode -->
<a href="https://www.linkedin.com/in/rickstaa#gh-dark-mode-only">
<img src="https://img.shields.io/badge/LinkedIn-ffffff?style=for-the-badge&logo=linkedin&logoColor=0690FA#gh-dark-mode-only" alt="Connect with me on linkedin" >
</a>
For light and dark mode compatibility, I've incorporated GitHub's theme context tags to ensure that the appropriate style is displayed based on the user's GitHub theme preferences.
Stats and Language cards
The stats and language cards on my profile are generated using the github-readme-stats repository (GRS). These cards are generated by serverless functions hosted on Vercel, leveraging GitHub's GraphQL and REST APIs to fetch data. While the public Vercel instance is available at https://github.com/anuraghazra/github-readme-stats, I use my custom Vercel instance.
Here's a snippet of the code used for both light and dark mode:
<!-- Light Mode -->
<div align="center">
<a href="https://github.com/anuraghazra/github-readme-stats#gh-light-mode-only">
<img height=259 src="https://github-readme-stats-git-masterrstaa-rickstaa.vercel.app/api/top-langs/?username=rickstaa&layout=compact&langs_count=12&hide_border=true&role=owner,collaborator&theme=default#gh-light-mode-only" alt="Rick Staa's Language stats" />
</a>
<!-- ... more code ... -->
</div>
<!-- Dark Mode -->
<div align="center">
<a href="https://github.com/anuraghazra/github-readme-stats#gh-dark-mode-only">
<img height=259 src="https://github-readme-stats-git-masterrstaa-rickstaa.vercel.app/api/top-langs/?username=rickstaa&layout=compact&langs_count=12&hide_border=true&role=owner,collaborator&theme=dark&bg_color=000000#gh-dark-mode-only" alt="Rick Staa's Language stats" />
</a>
<!-- ... more code ... -->
</div>
Once again, I've utilized the GitHub theme tags to ensure the visual consistency of the cards. If you're interested in deploying your instance of GRS, you can follow the documentation provided here. Feel free to open a discussion on GRS and tag me if you have any questions about GRS.