Create Dynamic and Stunning Github Profile

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

harendra21 / harendra21

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

Backend

Frontend

Database & Cloud

📊 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

View on GitHub

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.

Generate API Key

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.