Original: towardsdatascience.com

Translated by Zhang Zhang, programmer from Hangzhou

Showcase your projects and skills on GitHub with its hidden new feature -GitHub Profile READMEs!

If you visit someone’s GitHub profile from time to time, you’ve probably noticed that some people have been adding fancy pictures, descriptions, and statistics to their profiles lately. These are the new GitHub Profile README s. They are a hidden new feature, and in this article I’ll show you how to create one and how to use some cool tricks and tools to make it stand out.

How to create your own

Create a lot ProfileREADMEVery simple, but you probably won’t find it yourself. To create it, visitgithub.com/new, and creating a normal warehouse… MartinHeinz/MartinHeinz. As soon as you type it, you will receive a message telling you about the secret/special warehouse.

That’s all you need to do here, but I recommend setting the repository to private when you work with your README files so you don’t show corrupted content in your profile.

You can also check Initialize This Repository with a README as it needs to be there to appear in your configuration file. That is, you can include any other file, such as code, GIFs, images, etc. Speaking of which…

Make it stand out

We have a version library with README, but what about the content? You can just throw in some information about yourself, your email contacts, and call it a day, but we can do better than that.

One thing I suggest adding is a nice title to make it more personal. You can add your name or title, whatever you want. There are many examples of very beautiful and creative titles such as:

  • Github.com/WaylonWalke…
  • Github.com/stephenajul…
  • github.com/jh3y/jh3y

Now, how do I add this to the README? First, add the title image to your repository so it can be hosted publicly. Next, include the following lines at the top of readme.md:

[! [Header](https://raw.githubusercontent.com/MartinHeinz/<OWNER>/<OWNER>/readme_header.png "Header")](https://some-url.dev/)Copy the code

This is just a basic markdown for embedding images. It also includes urls so you can – for example – link images to your personal website.

GIFs and Emojis

Another way to make your README more fun and playful is to add a variety of GIFs or emojis. I personally like to add emoticons at the beginning of each caption, for example:

I find the easiest way to gain the related expression, symbolic names on emojipedia.org/emoji/ search expression, and then look for it in the www.fileformat.info/index.htm HTML entities. These HTML entities can be included in markdown and your browser should be able to render them nicely.

If emojis aren’t enough for you and you want to add some action to your README, you can also add giFs. When adding giFs, you will need actual.gif files, which can be hosted in your repository, such as headers, or on an external site, such as imgur.com/. Wherever it is hosted, it will…

<img src="https://raw.githubusercontent.com/<OWNER>/<OWNER>/master/<GIF_NAME>.gif" width="30px">
Copy the code

Within the GitHub tag, there are a few HTML tags you can use, and is one of them. This makes it easy to add images and GIFs like this to my README:

# Hello, folks! <img src="https://raw.githubusercontent.com/MartinHeinz/MartinHeinz/master/wave.gif" width="30px">
Copy the code

Show your warehouse

Everyone’s GitHub profile is really just a place to showcase your repository and highlight your activities/contributions. Use a GitHub profileREADME, you can usegithub-readme-statsHighlight them better. GitHub Readme Stats is a tool you can use to generate GitHub Stats for your contributions and repositories and attach them toREADMEIn the. If you decide to use all available statistics cards, something like the following might appear:

Each of these cards has a number of options for customization — including themes, ICONS, or the language to display. To generate any of these cards, use the following pattern:

<img align="center" src="https://github-readme-stats.vercel.app/api/
       
        /? username=
        
         &theme=
         
          "
         
        
        />
Copy the code

Where CARD_TYPE can be the PIN of a solid warehouse for a top-Langs list. If left blank, the GitHub user statistics are summarized by default. For more customization options, see the documentation in the Github-Readme-Stats repository, or you can take some inspiration from me, as I use almost all of the options available to match the card styles in my readme.

Highlight your skills

Another thing that often appears in people’s profiles is a list of their skills and the techniques they like to use. For a good visualization of these, you can useshields.ioBadges. They come in many styles, but this is what I like.

To create this badge, you will include markdown tag lines for the following pattern:

! [](https://img.shields.io/badge/<WORD_ON_LEFT>-<WORD_ON_RIGHT>-informational? style=flat&logo=<LOGO_NAME>&logoColor=white&color=2bbc8a)Copy the code

If that style isn’t to your liking, you can play with colors, formats and styles on Shield. IO. If you like ICONS on badges as much as I do, then you might find Simpleicons.org handy because it lists a lot of ICONS to use here. If they happen not to work directly with these badges, you can still manually add them by downloading them and base64 encoding them. The markdown tag will look like this.

! [](https://img.shields.io/badge/<WORD_ON_LEFT>-<WORD_ON_RIGHT>-informational? style=flat&logo=data:image/svg%2bxml; base64,<BASE64_DATA>)Copy the code

Including social media

Make sure you include some kind of contact information on your profile, whether it’s email, Twitter, LinkedIn or other social media. No matter which one you choose to include, you’ll probably want to use icon links to make it easier for people to find and notify you.

To include these in the text, use the following tags:

<! - the Actual text -- > You can find me on [! [Twitter] [1.2]], [1], the or on [! [which] [3.2]] [3]. <! - the Icons - > [1.2] : http://i.imgur.com/wWzX9uB.png (twitter icon without padding) [2.2]. https://raw.githubusercontent.com/MartinHeinz/MartinHeinz/master/linkedin-3-16.png (LinkedIn icon without padding) <! -- Links to your social media accounts --> [1]: https://twitter.com/Martin_Heinz_ [2]: https://www.linkedin.com/in/heinz-martin/Copy the code

After rendering, the top markdown looks like this:

conclusion

Keep it simple, creative and original, but most importantly make it your own.

Hopefully this article will give you enough inspiration to create your own GitHub Profile README. In addition to this article, you can find it at github.com/MartinHeinz… A useful source for README. If you need a few more examples to get you started, I recommend checking out some of the readme in awesome-github-profile-readme.