fitzpatrick.io

This tutorial will show you how to create a special GitHub repository and README that allows you to showcase any text or HTML that you would like to be displayed on your GitHub profile landing page.

Typical GitHub Profile

Captured above is a screenshot of a typical GitHub profile. It has the user's basic information like name, title, profile stats, location and website. The main content in the Overview tab has the user's pinned repositories, contributions and activity overview. GitHub allows you to customize what contributions are shown and how private contributions are handled. This guide will show you how to slot in the contents of a README file above the Pinned section.

Create a Personalized Section on Your Profile

Creating the personalized section can be completed in two easy steps:

1. Create a public repository whose name matches your username.
2. Populate the README file with whatever you'd like - it accepts both markdown and HTML.

Below is an image that captures the confirguration of the new repository.

Once the README is created you can add content using GitHub Flavored Markdown or add HTML elements. For example, if you want to add the MIT License to your repository and display it using Shield.io you can add the below code, just replace :username and :repository with your username.

<img alt="GitHub" src="https://img.shields.io/github/license/:username/:repository">

You can confirm the README content is displaying by navigating to your profile page. Note how the repository name matches the owner name, jjfitzpatrick in this example.

Final Result

The above screenshot shows a simple example of what you can do and how it can improve your profile by letting others know more about you. The current version of my README can be found here.