Hackernoon logoLevel Up Your Github Profile Page in Three Easy Steps by@danilo-delbusso

Level Up Your Github Profile Page in Three Easy Steps

Danilo Del Busso Hacker Noon profile picture

@danilo-delbussoDanilo Del Busso

CompSci student @KingsCollegeLon. Please send badly thought-out PHP jokes. I will cherish them for life.

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


Join Hacker Noon

Create your free account to unlock your custom reading experience.