Create Dynamic and Stunning Github Profile
Tags: github, git, go, resume
Published: 2023-09-14 14:53:18

---
title: Create Dynamic and Stunning Github Profile
published: true
description: Create dynamic GitHub profile with visit count, weekly coding activity, Github stats, recent GitHub activity graph and latest blogs.
tags: github, git, go, resume
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hhth7u55l7falctx57b4.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-09-14 11:36 +0000
---
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](https://github.com/harendra21) to visit my github profile

{% github harendra21/harendra21 %}

{% youtube R1mz21CL-9g %}

So let's get started

## 1. Name with typing effect

To show my name with typing effect I am using [readme-typing-svg](https://github.com/DenverCoder1/readme-typing-svg). You can check out the instructions and use it with your texts. Here is what I am using - 

```html
<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

![s](https://komarev.com/ghpvc/?username=harendra21&label=Profile%20views&color=0e75b6&style=plastic)

```html
<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](wakatime.com), 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](https://code.visualstudio.com/)). They are supporting almost all [IDEs](https://wakatime.com/plugins) available.

[Generate API Key](https://wakatime.com/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](https://docs.github.com/en/actions/security-guides/using-secrets-in-github-actions).

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`

```md
![harendra21](https://github.com/harendra21/harendra21/blob/main/images/stat.svg)
```

![My Coding Activity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqiho5d3krp4c4vgpp3i.png)

## 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

```html
## 📊 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

![Github Stats](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hhth7u55l7falctx57b4.png)

Graph

![Github Stats](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uzw8m79dv01s46wr5rq7.png)


### [Click Here](https://github.com/harendra21) to visit my github profile

Thank you for reading, follow me on [twitter](https://twitter.com/harendraverma2), give me star to my [github repo](https://github.com/harendra21/harendra21/) to appreciate my work.