Personalize Your Github Profile With The New Profile README Feature

Use SVG with Inline CSS Animations to Personalize Your Github Profile

Personalize Your Github Profile with a Stand Out README

In this lesson, we explore how to personalize your Github profile with a new "secret" profile README feature.

You can use Github flavored markdown. To add a little extra flair, use image links or GIFs to catch the eye!

https://app.egghead.io/api/v1/lessons/github-personalize-your-github-profile-with-the-new-profile-readme-feature/subtitles

Jhey Tompkins: [0:00] Let's start by creating a new repository, and this repository should have the same name as your username. The inline message tells us this is a secret. It's a special repository that you can use to add a readme to your GitHub profile.

[0:14] Make sure it's public and initialize it with a readme to get started. We have public checked, and we can initialize this repository with a readme. Now, the repository is created and initialized with a readme. We can view it on our profile.

[0:32] Our new profile readme supports GitHub flavored markdown and is populated with some ideas for us. Let's remove that mark down and add our own personalized message inside a H1 tag. We can preview this with the preview changes tab. Commit the changes, and we can see them reflected on our profile. One neat way to add a little bit more flair to our readme would be to include an image.

[1:07] Here, I've cloned the special repository to my local machine, and I'm going to create an assets folder. Within that folder, I'm going to drop this banner image. Now, we need to update our readme. We can create an image link with our new banner image.

[1:30] We define the image location as the path to where our banner image will be. In this case, it will be assets header-banner.png. Then we add a destination for our link. Here, I'm directing users to my personal website.

[1:56] Once we commit the changes and push them to GitHub, we can see now that our header banner appears in the readme. If we check our profile, we can see the banner at the top of the profile. Clicking it takes me where I wanted to go.

[2:11] Static images are cool, but what if we could have a moving image? The first thing that springs to mind is using a gif. I have a gif version of the header banner and I can update the readme to point at that. If we commit the changes and push them up, now we have a gif.

[2:32] If we check our profile, we can see it there too. In review, we can make use of this new GitHub feature to show a personalized readme on our profile. To do this, we create a new repository with the same name as our username.

[2:47] Then we are free to use any GitHub flavored markdown to personalize that readme. We can use images, and we can take it a step further with moving images.

Personalize Your Github Profile With The New Profile README Feature

Share this video with your friends

Course

Personalize Your Github Profile with a Stand Out README