DEV Community

Cover image for How to create a fancy Github profile with README?
Creative Tim
Creative Tim

Posted on • Originally published at creative-tim.com

How to create a fancy Github profile with README?

#github #webdev #beginners #tutorial

In this article, we will show you how to use GitHub in a way that you never thought could be used. You will learn how to use your GitHub profile as a resume (CV) or, even more, as a presentation site for yourself or your company. You will learn how to customize, in a very beautiful way, the first page that a user sees when he enters your GitHub profile. We will show you how you can display the repos you are most proud of, how to list your written articles, how to present your youtube channel, and much more.

First of all, you need to create a GitHub account if you don't already have one. Go to this link to create an account.
To fully understand what is presented in this article, it is necessary to understand, at a basic level, the markdown and the HTML languages. Therefore, in your support, we attach two pdfs with the cheat sheet for markdown and HTML.

Now let's get started! 😄

Table of contents:

1. Getting started

2. My Resume example content

3. Extra content for Github profile

1. Getting started

In order to tell people information about you, you can add README.md to your GitHub profile. This is the secret way you can show your skills and projects to the GitHub community. It is very simple to do this; all you have to do is make a public repo, named with the username of your GitHub account and a README.md file in which to put all the content you want to appear on your profile. For example, if your username is my-username you need to do a public repo with the name my-username in which to put the README.md file. The contents of this file will appear on your profile before all your repos.

2. My Resume example content

Below we will show you how you can share your CV with people who visit your Github profile. We tried to structure the content so as to include as many elements as possible that can be included in a CV, regardless of the level of experience or field of activity.

We created a complex template with a resume example here.

Insert a banner in your Readme

This section is the first section of your profile. Here you can add an image as a banner, a gif, a dynamic svg or anything that you like.
Optionally, you can add a link to your website.

Image as a banner with a link

Example Preview:

Header

Code snippet:

[![Header](https://www.creative-tim.com/blog/content/images/size/w1140/2021/08/rebranding-post--1-.jpg "Header")](https://www.creative-tim.com/)
Enter fullscreen mode Exit fullscreen mode

Insert header with a gif in your readme

Example Preview:

Hi there ✋!

Code snippet:

Hi there ✋!
Enter fullscreen mode Exit fullscreen mode

About me section in GitHub profile

In this section, you can write a few words that best describe you. For this, you can use custom fonts and icons or emojis. The fonts can be found online, or you can generate your text in another tool and then just paste it here.

Example Preview:

Fully Coded UI Tools to create web and mobile apps. UI Kits, Templates, and Dashboards built on top of Bootstrap, Vue.js, React, Angular, Node.js, and Laravel. Join over 1,6M creatives to access all our products!

Code Snippet:

Fully Coded UI Tools to create web and mobile apps. UI Kits, Templates, and Dashboards built on top of Bootstrap, Vue.js, React, Angular, Node.js, and Laravel. Join over **1,6M** creatives to access all our products!
Enter fullscreen mode Exit fullscreen mode

Besides fancy fonts, you can also add style to your resume by using emojis.
For mac users, you can easily access the emojis panel by pressing command + control + space.

Hobbies Section in Github profile

Like most people, you can also have some hobbies, and you should also mention them in order for the employer to know you better.
There are several ways to add them, but the most common one is using a list.

List

Unordered list:

For an unordered list, you will have to add your items preceded by - or *.

Example Preview:

  • Hobby 1
    • Nested Hobby 1
    • Sub-nested Hobby 1
  • Hobby 2
  • Hobby 3

Code Snippet:

* Hobby 1
  * Nested Hobby 1
    * Sub-nested Hobby 1
* Hobby 2
* Hobby 3
Enter fullscreen mode Exit fullscreen mode

Ordered list:

For an ordered list, you will have to add numbers before your items.

Example Preview:

  1. Hobby 1
    1. Nested Hobby 1
    2. Nested Hobby 2
  2. Hobby 2
  3. Hobby 3

Code Snippet:

1. Hobby 1
    1. Nested Hobby 1
    2. Nested Hobby 2
2. Hobby 2
3. Hobby 3
Enter fullscreen mode Exit fullscreen mode

Emojis list:

For this kind of list, you will have to add an emoji before each item.

Example Preview:

1️⃣. Hobby 1

2️⃣. Hobby 2

3️⃣. Hobby 3

or

🏔. Hobby 1 (Hiking)

📚. Hobby 2 (Reading)

💻. Hobby 3 (Programming)

Code Snippet:

 1️⃣. Hobby 1 
 2️⃣. Hobby 2  
 3️⃣. Hobby 3  

or  

 🏔. Hobby 1 (Hiking)  
 📚. Hobby 2 (Reading)  
 💻. Hobby 3 (Programming)
Enter fullscreen mode Exit fullscreen mode

Note: For this list you will need to add 2 spaces at the end of each item. Those 2 spaces will put each item on a new line.

Images list:

In the same way you can add a gif image as a banner in the header, you can also add static images as list items.

Example Preview:

Hiking

Reading

Programming

or

Code Snippet:


<img src="https://cdn.pixabay.com/photo/2021/09/03/15/37/mountain-6596074_1280.jpg" width="100px"> Hiking  
<img src="https://cdn.pixabay.com/photo/2014/09/05/18/32/old-books-436498_1280.jpg" width="100px"> Reading  
<img src="https://cdn.pixabay.com/photo/2015/04/20/13/17/work-731198_1280.jpg" width="100px"> Programming  

or

<img src="https://cdn.pixabay.com/photo/2021/09/03/15/37/mountain-6596074_1280.jpg" width="100px"> <img src="https://cdn.pixabay.com/photo/2014/09/05/18/32/old-books-436498_1280.jpg" width="100px"> <img src="https://cdn.pixabay.com/photo/2015/04/20/13/17/work-731198_1280.jpg" width="100px">
Enter fullscreen mode Exit fullscreen mode

Insert My experience section in GitHub profile

Every resume must have this section for the employer to know if you are fit for the role.

In this section, you can be as creative as possible. For example, you can add your experience in programming using icons.

Programming languages:

Example Preview:

Code snippet:


<p>
  <img src="https://img.shields.io/badge/Python-3776AB?style=for-the-badge&logo=python&logoColor=white" />
  <img src="https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white" />
  <img src="https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white" />
  <img src="https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E" />
  <img src="https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white" />
  <img src="https://img.shields.io/badge/C-00599C?style=for-the-badge&logo=c&logoColor=white" />
  <img src="https://img.shields.io/badge/C%2B%2B-00599C?style=for-the-badge&logo=c%2B%2B&logoColor=white" />
  <img src="https://img.shields.io/badge/C%23-239120?style=for-the-badge&logo=c-sharp&logoColor=white" />
  <img src="https://img.shields.io/badge/Java-ED8B00?style=for-the-badge&logo=java&logoColor=white" />
  <img src="https://img.shields.io/badge/PHP-777BB4?style=for-the-badge&logo=php&logoColor=white" />
  <img src="https://img.shields.io/badge/Swift-FA7343?style=for-the-badge&logo=swift&logoColor=white" />
  <img src="https://img.shields.io/badge/Go-00ADD8?style=for-the-badge&logo=go&logoColor=white" />
  <img src="https://img.shields.io/badge/Ruby-CC342D?style=for-the-badge&logo=ruby&logoColor=white" />
  <img src="https://img.shields.io/badge/json-5E5C5C?style=for-the-badge&logo=json&logoColor=white" />
</p>
Enter fullscreen mode Exit fullscreen mode

Frameworks and Libraries

Example Preview:

Code snippet:


<p>
  <img src="https://img.shields.io/badge/React_Native-20232A?style=for-the-badge&logo=react&logoColor=61DAFB" />
  <img src="https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=nodedotjs&logoColor=white" />
  <img src="https://img.shields.io/badge/.NET-512BD4?style=for-the-badge&logo=dotnet&logoColor=white" />
  <img src="https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB" />
  <img src="https://img.shields.io/badge/Svelte-4A4A55?style=for-the-badge&logo=svelte&logoColor=FF3E00" />
  <img src="https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs&logoColor=4FC08D" />
  <img src="https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular&logoColor=white" />
  <img src="https://img.shields.io/badge/AngularJS-E23237?style=for-the-badge&logo=angularjs&logoColor=white" />
  <img src="https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white" />
  <img src="https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white" />
  <img src="https://img.shields.io/badge/jQuery-0769AD?style=for-the-badge&logo=jquery&logoColor=white" />
  <img src="https://img.shields.io/badge/Django-092E20?style=for-the-badge&logo=django&logoColor=white" />
  <img src="https://img.shields.io/badge/Ruby_on_Rails-CC0000?style=for-the-badge&logo=ruby-on-rails&logoColor=white" />
  <img src="https://img.shields.io/badge/Laravel-FF2D20?style=for-the-badge&logo=laravel&logoColor=white" />
  <img src="https://img.shields.io/badge/Flask-000000?style=for-the-badge&logo=flask&logoColor=white" />
  <img src="https://img.shields.io/badge/nuxt.js-00C58E?style=for-the-badge&logo=nuxtdotjs&logoColor=white" />
  <img src="https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white" />
</p>
Enter fullscreen mode Exit fullscreen mode

Tools

Example Preview:

Code snippet:


<p>
  <img src="https://img.shields.io/badge/Xcode-007ACC?style=flat-square&logo=Xcode&logoColor=white" />
  <img src="https://img.shields.io/badge/Visual_Studio_Code-0078D4?style=for-the-badge&logo=visual%20studio%20code&logoColor=white" />
  <img src="https://img.shields.io/badge/Visual_Studio-5C2D91?style=for-the-badge&logo=visual%20studio&logoColor=white" />
  <img src="https://img.shields.io/badge/Atom-66595C?style=for-the-badge&logo=Atom&logoColor=white" />
  <img src="https://img.shields.io/badge/Eclipse-2C2255?style=for-the-badge&logo=eclipse&logoColor=white" />
  <img src="https://img.shields.io/badge/sublime_text-%23575757.svg?&style=for-the-badge&logo=sublime-text&logoColor=important" />
</p>
Enter fullscreen mode Exit fullscreen mode

Databases

Example Preview:

Code snippet:


<p>
  <img src="https://img.shields.io/badge/MySQL-00000F?style=for-the-badge&logo=mysql&logoColor=white" />
  <img src="https://img.shields.io/badge/PostgreSQL-316192?style=for-the-badge&logo=postgresql&logoColor=white" />
  <img src="https://img.shields.io/badge/MongoDB-4EA94B?style=for-the-badge&logo=mongodb&logoColor=white" />
  <img src="https://img.shields.io/badge/SQLite-07405E?style=for-the-badge&logo=sqlite&logoColor=white" />
</p>
Enter fullscreen mode Exit fullscreen mode

Also in this section you can add your previous jobs. You can add this in a table format like below.

My work experience

Example Preview:

Company 1 Period of work (mm/yyyy - mm/yyyy)
Position 1 Description about position 1
Company 2 Period of work (mm/yyyy - mm/yyyy)
Position 2 Description about position 2
Company 3 Period of work (mm/yyyy - mm/yyyy)
Position 3 Description about position 3

Code snippet:


| Company 1 | Period of work (mm/yyyy - mm/yyyy) |
|:---------:|:----------------------------------:|
| Position 1 | Description about position 1 |

| Company 2 | Period of work (mm/yyyy - mm/yyyy) |
|:---------:|:----------------------------------:|
| Position 2 | Description about position 2 |

| Company 3 | Period of work (mm/yyyy - mm/yyyy) |
|:---------:|:----------------------------------:|
| Position 3 | Description about position 3 |
Enter fullscreen mode Exit fullscreen mode

Besides the above, this section is also dedicated to the courses/tutorials that you've finished, started or that you are interested in. You can include whatever you think was relevant to your development.

Courses/Tutorials

Example Preview:

Creative Tim Courses/Tutorials

Code Snippet:


**Creative Tim Courses/Tutorials**

- [How to quickstart and launch your website using Jekyll?](https://www.creative-tim.com/blog/webdesign/quickstart-launch-website-using-jekyll)
- [How to create Scrolling Transformations for your React App?](https://www.creative-tim.com/blog/webdesign/create-scrolling-transformations-react-app)
- [How to create a single-page application using React?](https://www.creative-tim.com/blog/react/create-single-page-application-using-react)
Enter fullscreen mode Exit fullscreen mode

Example Preview:

YouTube courses/tutorials

How to use React with Firebase and Redux: Introduction ReactJS and Redux Tutorial with real-life examples Responsive Admin Template using Light Bootstrap Dashboard
How to use React with Firebase and Redux: Introduction ReactJS and Redux Tutorial with real-life examples Responsive Admin Template using Light Bootstrap Dashboard

Code snippet:


YouTube courses/tutorials

[![How to use React with Firebase and Redux: Introduction](https://img.youtube.com/vi/BMPHfnAA9iI/mqdefault.jpg)](https://www.creative-tim.com/courses "How to use React with Firebase and Redux: Introduction")
Enter fullscreen mode Exit fullscreen mode

Example Preview:

Udemy courses

How to use React with Firebase and Redux

Learn ReactJS with Webpack 4, Babel 7, and Material Design

Code Snippet:


Udemy courses

[How to use React with Firebase and Redux](https://www.udemy.com/course/how-to-use-react-with-firebase-and-redux/)  
[Learn ReactJS with Webpack 4, Babel 7, and Material Design](https://www.udemy.com/course/learn-reactjs-with-webpack-4-babel-7-and-material-design/)
Enter fullscreen mode Exit fullscreen mode

My Projects

This is the section where you can present your projects. Here you can put an overview of your most important projects made on Github. So the one who accesses your profile can instantly see what you know how to do and how to do it.

My Github repos

Here you can put a list of your best repositories.

Example Preview:

github-readme-streak-stats github-readme-streak-stats github-readme-streak-stats github-readme-streak-stats github-readme-streak-stats github-readme-streak-stats

Code Snippet:


<img width="282" src="https://denvercoder1-github-readme-stats.vercel.app/api/pin/?username=YOUR_GITHUB_USERNAME&repo=REPO_NAME&theme=react&bg_color=273849&title_color=F85D7F&icon_color=F8D866&hide_border=true&show_icons=false" alt="github-readme-streak-stats">
Enter fullscreen mode Exit fullscreen mode

My Contributions

Here are your Github contributions.

Example Preview:

My github stats




My github stats








Code Snippet:


<img align="center" src="https://github-readme-streak-stats.herokuapp.com?user=timcreative&theme=vue-dark&hide_border=true&date_format=M%20j%5B%2C%20Y%5D" alt="My github stats" />

<img align="center" src="https://github-readme-stats.vercel.app/api?username=timcreative&show_icons=true&include_all_commits=true&theme=cobalt&hide_border=true" alt="My github stats" /> 

<img align="center" src="https://github-readme-stats.vercel.app/api/top-langs/?username=timcreative&layout=compact&theme=cobalt&hide_border=true" />
Enter fullscreen mode Exit fullscreen mode

My latest posts

In this section, you can list your latest posts from your blog. You can list all that you want. You can use links, emojis, emphasis, and more.

Example Preview:

  1. 🔥 Creative Tim Courses New Learning Platform for Web Designers & Devs
  2. 😎 Git Tutorial How to Fix 18 Common Mistakes
  3. 🙏 Docker and Django How to start fast
  4. ⭐️ Technology The Importance of a User Experience Expert in Every Company
  5. 💣 Shopify Templates 10+ Best E-commerce Shopify Templates

Code Snippet:


1. **[🔥 Creative Tim Courses](https://www.creative-tim.com/blog/creative-tim/new-learning-resources-web-designers/)** <br> *New Learning Platform for Web Designers & Devs*
2. **[😎 Git Tutorial](https://www.creative-tim.com/blog/educational-tech/git-tutorial-fix-common-mistakes/)** <br> *How to Fix 18 Common Mistakes*
Enter fullscreen mode Exit fullscreen mode

Contact Me

This is the section where you can put your contact info. Details put in this section can be used by your profile visitors to contact you.

Example Preview:

Github twitter linkedin youtube Gmail

Code snippet:


[<img alt="Github" src="https://img.shields.io/badge/GitHub-%2312100E.svg?&style=for-the-badge&logo=Github&logoColor=white" />](https://github.com/creativetimofficial) [<img alt="Github" src="https://img.shields.io/badge/twitter-%231DA1F2.svg?&style=for-the-badge&logo=twitter&logoColor=white" />](https://twitter.com/CreativeTim)
Enter fullscreen mode Exit fullscreen mode

Footer

In the footer section, you can added extra info like copyright, donate URL, or subscribe link.

Example Preview:

© 2021 Creative Tim, all rights reserved. Made with ❤️ for a better web.

https://www.creative-tim.com

Code Snippet:


---
<p align="center"> © 2021 Creative Tim, all rights reserved. Made with ❤️ for a better web. </p>
<p align="center">
https://www.creative-tim.com
</p>
Enter fullscreen mode Exit fullscreen mode

3. Extra content for Github profile

Here we will present you other elements that can be included in your readme to make it as pleasant as possible for you and for those who enter your Github profile.

Todo List

Example Preview:

  • task 1
  • task 2

Code Snippet:


  - [ ] task 1
  - [x] task 2
Enter fullscreen mode Exit fullscreen mode

Create simple table

If you want to create a table in your MD file, you can do so very easily. You can put everything you want in the cells of the table, from text and emojis to images and gifs.

Example Preview:

First Header Second Header Third Header
👉 Content cell 1 ✅ Content cell 2 ⭕️ Content cell 3
👉 Content column 1 ✅ Content column 2 ⭕️ Content column 3
👉 Content column 1 ✅ Content column 2 ⭕️ Content column 3

Code Snippet:

First Header | Second Header | Third Header
------------ | ------------- | -------------
👉 Content cell 1 | ✅ Content cell 2 | ⭕️ Content cell 3
👉 Content column 1 | ✅ Content column 2 | ⭕️ Content column 3
👉 Content column 1 | ✅ Content column 2 | ⭕️ Content column 3
Enter fullscreen mode Exit fullscreen mode

Example:

Material Kit 2 Soft UI Dashboard Soft UI React Native Tailwind Starter Kit
👉 Download 👉 Download 👉 Download 👉 Download
📖 Documentation 📖 Documentation 📖 Documentation 📖 Documentation
✅ Live Preview ✅ Live Preview ✅ Live Preview ✅ Live Preview
Material Kit 2 Soft UI Dashboard Soft UI React Native Tailwind Starter Kit

Insert Support me section (Buy me a coffee)

If you want your work to be rewarded, you can go to https://www.buymeacoffee.com/ and create an account or you can link your own way to get supported.

Example Preview:

Buy Me A Coffee

Code Snippet:


<a href="your-own-link-from-the-website" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-red.png" alt="Buy Me A Coffee" width="150" ></a>
Enter fullscreen mode Exit fullscreen mode

Share your Spotify profile in your GitHub readme

To add Spotify to your profile, there is already an application created, and it's free to use. You will just have to grant permission to it from the Spotify account: https://spotify-github-profile.vercel.app/api/login

Code Snippet:


![spotify-github-profile](https://spotify-github-profile.vercel.app/api/view?uid=YOUR-SPOTIFY-UID&cover_image=true&theme=default)
Enter fullscreen mode Exit fullscreen mode

Final thoughts

Thanks for reading! We hope that our article inspired you to create your own fancy GitHub profile README. Having a CV on GitHub is quite niched and unique; we recommend following the presented structure if you want to have a nicely done resume that is easy to read and that points out your skills and personality. Having a concise CV can enhance your chances to stand out and represents a great advantage. Besides the structure, you also have to make sure that your info is correct and sincere. Review your code a couple of times to spot any eventual mistakes and follow our advice to keep it clean. Keep in mind that your CV is personal, so don't hesitate to leave your mark on it! Plus, if you need some tips and tricks for creating a developer resume, check out this article-tutorial.

Download Full Resume Template.

Special thanks to:

Top comments (4)

Collapse
 
jenningsf profile image
JenningsF •

Thanks for all the info! Super helpful for beginners on how to start sprucing up GH profiles.

I've also seen the use of <details> and <summary> HTML tags that help make the README a little more concise and require less scrolling.

Collapse
 
gilbertogalea_96 profile image
gilberto-galea •

Great tips! Thanks a lot.

Collapse
 
hyochan profile image
Hyo •

Here is another way to visualize your github readme stats!
medium.com/dooboolab/a-new-fancy-w...

Collapse
 
muhammadirtiza17 profile image
Muhammad Irtiza •

Thankyou very much it was very easy to understand and much needed article for me Thankyou once again

Read next

msnmongare profile image

When and Why to Use JSON Columns in SQL Databases

Sospeter Mong'are -

shieldstring profile image

Vite + React app MIME error when reloading the page

Agbo, Daniel Onuoha -

keploy profile image

JSON Diff: Comparing JSON Data Effectively

keploy -

chintanonweb profile image

10 TypeScript Secrets to Boost Your Development Expertise

chintanonweb -