How to create a fancy Github profile with README

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.

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/)

Insert header with a gif in your readme

Example Preview:

Hi there ✋!

Code snippet:

Hi there ✋!

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!

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

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

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) 

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">

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>

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>

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>

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>

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 |

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)

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")

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/)

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">

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" />

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*

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)

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>

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

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

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>

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)

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: