Transforming normal Github profile into a dynamic portfolio

May 11, 2021ยท

3 min read

Transforming normal Github profile into a dynamic portfolio
Play this article

Today Github is the behemoth platform for open-source projects. There would not be a single person in the open-source community who doesn't use GitHub. And there could be a minuscule number of developers who don't have a GitHub profile. GitHub is not only home for the best open-source projects but also a place where developers could showcase their talent via a panoply of projects.

Below is the default, pedestrian GitHub profile page that shows the name, contact information, and some repositories.

GitHub default profile page

A few months back, Github launched a new feature that lets us customize our profile page using the README file. README is a repository or project-level file used for documenting the project. README.md is written in Markdown(lightweight markup language) that converts text to HTML.

In this blog post, I will show how I customized my mundane Github profile using the README file.

GitHub default profile page

Create a new repository with the username

1. Make sure your repository name matches the Github username.
2. Make a public repository.
3. Add README.md to it.

Create repo

Adding a banner image

When someone opens my profile, I wanted to greet them with a good banner. I created a banner on canva.com. They have a good collection of free templates.

Create repo

I'm keeping this image in the img directory. Now I want it to be at the top, so I put the link to the banner image on the first line of my README file.

To add an image in the README file, use the following syntax.

![Pratik's GitHub Banner](./img/banner1.png)

If you want to make an image, a link that will open your blog or some other sites, use the following syntax.

[![Pratik's GitHub Banner](./img/banner1.png)](https://pratikjagrut.dev)

Add a bio

GitHub initializes README with a few bullet points. I used the same template to add my bio.

README file is highly customizable using Markdown. Checkout the Markdown syntax guide

Bio

I've added some badges under look me up bullet point, which I created using shields.io. They lets us design customize badges with the links or without links. I used badges from social category.

Once we've got the badge, we can then put it anywhere we want.

[![Linkedin Badge](https://img.shields.io/badge/-pratikjagrut-0e76a8?style=flat&labelColor=0e76a8&logo=linkedin&logoColor=white)][linkedin]

Listing latest blog posts

Gautam krishna R created a Github action workflow which lets us show our latest blog, latest, youtube video, latest StackOverflow activity and many other things. Follow the documentation.

Blogs lists

Showing GitHub statistics

Github Readme stats shows the statistics of our profile in various beautiful cards.

Github stats

There are lots of customizations we can do with the GitHub profile. Below are some valuable resources which could help to add some advance elements..

I hope you found this blog helpful and thank you for reading it please give your feedback in the comment section below.

Did you find this article valuable?

Support Pratik Jagrut by becoming a sponsor. Any amount is appreciated!

ย