Hi Developers, I would like to inform you that last week, I undertook the task of revamping my GitHub profile to enable the dynamic updating of data on a daily basis, reflecting my coding endeavours and GitHub activities. The resulting profile exhibits a visually striking and engaging appearance in contrast to its previous mundane iteration. Today, I have made the decision to share this transformation with all of you.
Click Here to visit my github profile
Hi, I'm Harendra Kumar Kanojiya, a seasoned Full-Stack Developer with expertise in Golang, Javascript, Angular, Node.js, and front-end technologies. Over the years, I've successfully delivered live projects and portfolio work in these domains.
I'm passionate about innovation and thrive on generating new knowledge. When faced with challenges, I meet them with a smile and tackle them head-on, ensuring swift resolutions. My approach is highly organized, making efficient use of my time and skills.
My Coding Activity
🛠️ My Skills
📊 Github Stats
GitHub Profile Stats
Streak Stats
GitHub Profile Stats
Note: Top languages are only a metric of the languages my public code consists of and don't reflect experience or skill level.
Recent GitHub Activity
Let's Connect
So let's get started
1. Name with typing effect
To show my name with typing effect I am using readme-typing-svg. You can check out the instructions and use it with your texts. Here is what I am using -
<img src="https://readme-typing-svg.demolab.com?font=Fira+Code&weight=600&size=22&pause=1000&color=000000&width=435&lines=Hi%2C+I+am+Harendra+Kumar+Kanojiya" alt="I am Harendra Kumar Kanojiya" />
2. Profile Views Count
This is a simple but dynamic profile visit counter to show how many users are visit to your profile till now, for this feature I am using https://komarev.com/ghpvc
. Here is the example for that
<img src="https://komarev.com/ghpvc/?username=harendra21&label=Profile%20views&color=0e75b6&style=plastic" alt="harendra21" />
3. My Coding Activity
This is little bit tricky and most attractive part of the github profile. I will divide it into two parts, first one to collect the data and another one it to show the data.
Wakatime:
To collect the coding activity I am using the WAKATIME, this is available to measure your coding activity and there are providing the api to get the activity. You just have to create and account and install the there extensions with you IDE (I am using VsCode). They are supporting almost all IDEs available.
Github Actions:
To update the coding activity periodically I am using Github actions workflow to schedule a cron job and fetch the latest data from wakatime api which we have generated in previous steps. Then you have to create githu workflow under .github/workflows
and need to copy and paste the following code into it.
name: WakaTime status update
on:
schedule:
- cron: "0 * * * *"
push:
branches:
- main
jobs:
update-readme:
name: Update the WakaTime Stat
runs-on: ubuntu-latest
steps:
- uses: avinal/Profile-Readme-WakaTime@master
with:
WAKATIME_API_KEY: ${{ secrets.WAKATIME_API_KEY }}
GITHUB_TOKEN: ${{ github.token }}
BRANCH: "main"
COMMIT_MSG: "Automated Coding Activity Update :alien:"
STATS_RANGE: "last_7_days"
Note: You have to add WAKATIME_API_KEY
to this repo secret.
Then it will generate the Coding Activity Image under images
folder in your repo with stat.svg
name. You just have to include it to your readme.md
![harendra21](https://github.com/harendra21/harendra21/blob/main/images/stat.svg)
3. Github Stats
I am using various types of github stats in my profile, to add them you have to add the following code snippets
## 📊 Github Stats
### GitHub Profile Stats
### Streak Stats
<p align="center"><img src="https://github-readme-streak-stats.herokuapp.com/?user=<your_username_will_go_here>&theme=algolia" alt="harendra21" /></p>
### GitHub Profile Stats
<p align="center">
<img alt="harendra21's Github Stats" src="https://github-readme-stats-sigma-five.vercel.app/api?<your_username_will_go_here>=harendra21&show_icons=true&count_private=true&theme=algolia" height="192px"/>
<img src="https://github-readme-stats-sigma-five.vercel.app/api/top-langs?<your_username_will_go_here>=harendra21&show_icons=true&locale=en&layout=compact&theme=algolia" alt="harendra21" height="192px"/>
</p>
### Recent GitHub Activity
<p align="center">
<img alt="Harendra's Activity Graph" src="https://github-readme-activity-graph.vercel.app/graph?<your_username_will_go_here>=harendra21&custom_title=Harendra%20Kumar%27s%20Contribution%20Graph&theme=react-dark" />
</p>
Note: Replace <your_username_will_go_here>
with your github username.
This will add the following sections to your github profile.
Stats
Graph
Click Here to visit my github profile
Thank you for reading, follow me on twitter, give me star to my github repo to appreciate my work.
Top comments (0)