paint-brush
Level Up Your Github Profile Page in Three Easy Stepsby@danilo-delbusso
2,787 reads
2,787 reads

Level Up Your Github Profile Page in Three Easy Steps

by Danilo Del BussoAugust 3rd, 2020
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

GitHub offers you the tools to get your own customised welcome message. The message is surprisingly easy to set up and it's only limited by your imagination. I suggest you make a GIF which will show on your profile page. I will go through what I did to create mine and how you can replicate it. The first step is to create a repository named after you and create your own GIF. Upload the GIF to the repository that you created in step 1 and modify the README.md file to include it.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - Level Up Your Github Profile Page in Three Easy Steps
Danilo Del Busso HackerNoon profile picture

Whether you're looking for a new position and want to stand out or you just like to make cool things, GitHub offers you the tools to get your own customised welcome message, like this.

The message is surprisingly easy to set up and it's only limited by your imagination.

I will go through what I did to create mine and how you can replicate it.

1. Create a repository named after you

The first step is to create a new repository that is named after your GitHub username.

You will see this message confirming that you are creating the special repository needed for this tutorial.

2. Create your animated GIF

Here is where your creativity can shine. I suggest you make a GIF which will show on your profile page.

You can create whatever you want. What I have found easiest is to design a quick HTML page with a welcome text and some CSS animations.

I used Animista for my CSS animations.

Once you have built your webpage (you can check out the code for mine here), you are ready to create your GIF.

Download a screen-to-gif recording app and record your animations. I used peek.

Remember to keep recording for at least 30 seconds after the animations are completed, to avoid looping.

3. Add the GIF to your profile

Once you're satisfied with your welcome message GIF, you are ready to add it to your profile page.

Upload the GIF to the repository that you created in step 1 and modify the README.md file to include your welcome message.

There are a couple of ways to do so. You can either add the GIF by referencing it as an absolute path like so:

![Alt Text](https://media.giphy.com/media/Ju7l5y9osyymQ/giphy.gif)

You can also use some HTML to achieve the same result.

<img src='https://path/to/animation.gif' />

💡PRO TIP: you can wrap this <

img />
tag in a
<a>
tag to make it a button!

For more GIF customisation you can check out this flavoured markdown GIF tutorial on GitHub.

Finally, commit your README.md and share it with everyone who will click!

You can find my repository here, with the HTML to generate a welcome message like mine.

Previously published at https://danilo-delbusso.github.io/blog/how-to-pimp-your-github-in-three-steps/