How I make my GitHub Profile Interactive
Published: 2022-07-03 02:25:52

After commiting changes and editing for continuously four hours, I finally finished my GitHub Profile and... It's looking amazing 🤩 now. 

I am not a creative person, but now I can say that I have something to show which I am proud 😎 of too.. Have a look 👇

(Open it in a new a tab **↗** )

{% embed https://github.com/heydrdev/heydrdev %}

Isn't it looking interactive and creative. I know... Don't thank me now 😁.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vfnqjjafrro8pvxv7z4m.gif)

## What makes my profile interactive ❓

We call some element `Interactive` on our web page, which can response to our actions. For example 
- Redirecting to another page after clicking the social media icons.
- Automatically updating latest list of blog on the page

and etc.. Here on my GitHub Profile there are 4 components that makes it interactive.

1. 🖼 Banner
2. 🔗 Social media icons with link
3. 📝 List of my latest blog (which updated automatically)
4. 🤪 The Living Emoji ❗

Today, In this article I will guide you how can also use such living emoji's in your GitHub Readme profiles/files. So **Save this post right now**.

## How to use Living Emoji ❓
For embedding images markdown allows two ways
- Using Markdown Syntax

```
![](image-address.png)
```
- Using HTML Syntax

```
<img src"image-address.png" align="center"/>
```
Here we are using the second method to embed our emojis. But.. **Why the second method ?**

Using second method GitHub allows us to do modification in the images (our emoji is an image). Like aligning the emoji using `align` tag. Fixing the size of emoji using `height` and `width` tag.

This will help to you to add emoji according to your way.

⚡ Now coming to the main part. I have created a [repository](https://github.com/heydrdev/devtools/blob/main/emojis/telegram-emoji.md) **↗** where I have listed emojis that are interactive. These are the emojis that are publicaly made available by [Telegram](https://emojis.wiki/telegram/) team. 

I have made it simple for you, so that you can easily embed these emoji to you GitHub readme profile. All you need to do is to follow the below steps:

**STEP 1:** Copy and paste the below syntax to your Markdown file

```
<img src"https://raw.githubusercontent.com/heydrdev/devtools/main/emojis/telegram/<emoji-tag>.gif height="30" width="30" align="center" />
```
**STEP 2:** Replace `<emoji-tag>` with your preffered `emoji-tag` of choice form the ** below table**.

**STEP 3:** Paste your profile in the comments to show of to the community 😂

---

## EMOJI TABLE

🚨 Attention: Some of the emojis may look big, because it's not rendered properly by the DEV. 

🚨 When using in you GitHub profile, you can adjust the size using `height` and `weight` tags.

🚀 These just few... for more visit
- [Dev Tools by Dr Dev](https://github.com/heydrdev/devtools)
- Save This DEV.TO post
{% embed https://dev.to/heydrdev/the-living-emoji-42d3 %}

|`emoji-tag`|`emoji`|
|---|---|
|`anguished-face`|<img src="https://raw.githubusercontent.com/heydrdev/devtools/main/emojis/telegram/anguished-face.gif"/>|
|`anxious-face-with-sweat`|<img src="https://raw.githubusercontent.com/heydrdev/devtools/main/emojis/telegram/anxious-face-with-sweat.gif"/>|
|`astonished-face`|<img src="https://raw.githubusercontent.com/heydrdev/devtools/main/emojis/telegram/astonished-face.gif"/>|
|`beaming-face-with-smiling-eyes`|<img src="https://raw.githubusercontent.com/heydrdev/devtools/main/emojis/telegram/astonished-face.gif"/>|
|`cold-face`|<img src="https://raw.githubusercontent.com/heydrdev/devtools/main/emojis/telegram/cold-face.gif"/>|
|`confounded-face`|<img src="https://raw.githubusercontent.com/heydrdev/devtools/main/emojis/telegram/confounded-face.gif"/>|
|`confused-face`|<img src="https://raw.githubusercontent.com/heydrdev/devtools/main/emojis/telegram/confused-face.gif"/>|
|`cowboy-hat-face`|<img src="https://raw.githubusercontent.com/heydrdev/devtools/main/emojis/telegram/cowboy-hat-face.gif"/>|
|`crying-face`|<img src="https://raw.githubusercontent.com/heydrdev/devtools/main/emojis/telegram/crying-face.gif"/>|
---


🔖 You can save this project and Thank me now 🤣. 

🤔 Let me know, what you think about.

🔥 Don't forget to follow me on GitHub [@heydrdev](https://github.com/heydrdev). I going to start some really awesome projects so stay tuned 🔔.

[![poll](https://raw.githubusercontent.com/heydrdev/what-i-did-this-week/main/assets/drdev-bio.png)](https://bio.link/heydrdev)