How to create a fancy Github profile with README?
Tags: github, webdev, beginners, tutorial
Published: 2021-10-18 13:25:39

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](https://github.com/signup) 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](https://guides.github.com/pdfs/markdown-cheatsheet-online.pdf) and [HTML](https://web.stanford.edu/group/csp/cs21/htmlcheatsheet.pdf).

Now let's get started! 😄

Table of contents:  

  [1. Getting started](#1-getting-started)  
  [2. My Resume example content](#2-my-resume-example-content)  
  [3. Extra content for Github profile](#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](https://github.com/creativetimofficial/github-profile-template).

## 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](https://www.creative-tim.com/blog/content/images/size/w1140/2021/08/rebranding-post--1-.jpg "Header")](https://www.creative-tim.com/?ref=devto)
> 
> **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:**
> 
> <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">
> 
> **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:**
> 
> <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>
> 
> **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:**
> <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>
> 
> **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:**
> 
> <p>
>   <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" />
>   <img src="https://img.shields.io/badge/Xcode-007ACC?style=flat-square&logo=Xcode&logoColor=white" height="28px" />
> </p>
> 
> **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:**
> <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>
> 
> **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**
> 
> - [How to quickstart and launch your website using Jekyll?](https://www.creative-tim.com/blog/webdesign/quickstart-launch-website-using-jekyll?ref=devto)
> - [How to create Scrolling Transformations for your React App?](https://www.creative-tim.com/blog/webdesign/create-scrolling-transformations-react-app?ref=devto)
> - [How to create a single-page application using React?](https://www.creative-tim.com/blog/react/create-single-page-application-using-react?ref=devto)
> 
> **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](https://img.youtube.com/vi/BMPHfnAA9iI/mqdefault.jpg)](https://www.creative-tim.com/courses "How to use React with Firebase and Redux: Introduction")|[![ReactJS and Redux Tutorial with real-life examples](https://img.youtube.com/vi/raKV5Rb8oOM/mqdefault.jpg)](https://www.creative-tim.com/courses "ReactJS and Redux Tutorial with real-life examples")|[![Responsive Admin Template using Light Bootstrap Dashboard](https://img.youtube.com/vi/vt5hemH8I9w/mqdefault.jpg)](https://www.creative-tim.com/courses "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](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/)
> 
> **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:**
> 
> <img width="282" src="https://denvercoder1-github-readme-stats.vercel.app/api/pin/?username=creativetimofficial&repo=material-dashboard&theme=react&bg_color=273849&title_color=F85D7F&icon_color=F8D866&hide_border=true&show_icons=false" alt="github-readme-streak-stats"> <img width="282" src="https://denvercoder1-github-readme-stats.vercel.app/api/pin/?username=creativetimofficial&repo=material-kit&theme=react&bg_color=273849&title_color=F85D7F&icon_color=F8D866&hide_border=true&show_icons=false" alt="github-readme-streak-stats"> <img width="282" src="https://denvercoder1-github-readme-stats.vercel.app/api/pin/?username=creativetimofficial&repo=argon-design-system&theme=react&bg_color=273849&title_color=F85D7F&icon_color=F8D866&hide_border=true&show_icons=false" alt="github-readme-streak-stats">  <img width="282" src="https://denvercoder1-github-readme-stats.vercel.app/api/pin/?username=creativetimofficial&repo=material-dashboard-react&theme=react&bg_color=273849&title_color=F85D7F&icon_color=F8D866&hide_border=true&show_icons=false" alt="github-readme-streak-stats">  <img width="282" src="https://denvercoder1-github-readme-stats.vercel.app/api/pin/?username=creativetimofficial&repo=tailwind-starter-kit&theme=react&bg_color=273849&title_color=F85D7F&icon_color=F8D866&hide_border=true&show_icons=false" alt="github-readme-streak-stats"> <img width="282" src="https://denvercoder1-github-readme-stats.vercel.app/api/pin/?username=creativetimofficial&repo=material-tailwind&theme=react&bg_color=273849&title_color=F85D7F&icon_color=F8D866&hide_border=true&show_icons=false" alt="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:**
> 
> <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" />  
> <br/><br/>
> <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" />  
> <br/><br/>
> <img align="center" src="https://github-readme-stats.vercel.app/api/top-langs/?username=timcreative&layout=compact&theme=cobalt&hide_border=true" />  
> <br/><br/>
> 
> **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](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*
> 3. **[🙏 Docker and Django](https://www.creative-tim.com/blog/django-template/docker-and-django-how-to-start-fast/)** <br> *How to start fast*
> 4. **[⭐️ Technology](https://www.creative-tim.com/blog/ux/importance-user-experience-expert/)** <br> *The Importance of a User Experience Expert in Every Company*
> 5. **[💣 Shopify Templates](https://www.creative-tim.com/blog/shopify-themes/best-ecommerce-shopify-templates/)** <br> *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:**
> 
> [<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="twitter" src="https://img.shields.io/badge/twitter-%231DA1F2.svg?&style=for-the-badge&logo=twitter&logoColor=white" />](https://twitter.com/CreativeTim) [<img alt="linkedin" src="https://img.shields.io/badge/linkedin-%230077B5.svg?&style=for-the-badge&logo=linkedin&logoColor=white" />](https://www.linkedin.com/in/creative-tim-1b54778b) [<img alt="youtube" src="https://img.shields.io/badge/YouTube-FF0000?style=for-the-badge&logo=youtube&logoColor=white" />](https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w) <img alt="Gmail" src="https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white" />
> 
> **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)

```

### Footer

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

> **Example Preview:**
> 
> ---
> <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>
> 
> **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:**
> 
> - <input type="checkbox" class="task-list-item-checkbox"> task 1
> - <input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked"> 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](https://www.creative-tim.com/product/material-kit) | 👉 [Download](https://www.creative-tim.com/product/soft-ui-dashboard) | 👉 [Download](https://www.creative-tim.com/product/soft-ui-react-native) | 👉 [Download](https://github.com/creativetimofficial/tailwind-starter-kit)
> 📖 [Documentation](https://www.creative-tim.com/learning-lab/bootstrap/overview/material-kit) | 📖 [Documentation](https://www.creative-tim.com/learning-lab/bootstrap/overview/soft-ui-dashboard) | 📖 [Documentation](https://www.creative-tim.com/learning-lab/react-native/overview/soft) | 📖 [Documentation](https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/download)
> ✅ [Live Preview](https://demos.creative-tim.com/material-kit/index.html) | ✅ [Live Preview](https://demos.creative-tim.com/soft-ui-dashboard/pages/dashboard.html) | ✅ [Live Preview](https://demos.creative-tim.com/soft-ui-react-native/) | ✅ [Live Preview](https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation)
> ![Material Kit 2](https://s3.amazonaws.com/creativetim_bucket/products/38/original/material-kit.jpg?1633601280) | ![Soft UI Dashboard](https://s3.amazonaws.com/creativetim_bucket/products/450/original/opt_sd_free_thumbnail.jpg?1617715816) | ![Soft UI React Native](https://s3.amazonaws.com/creativetim_bucket/products/490/original/opt_soft_ui_react_native_thumbnail.jpg?1625576346)| ![Tailwind Starter Kit](https://raw.githubusercontent.com/creativetimofficial/public-assets/master/creative-tim/opt_tsp_tailwindcss_thumbnail.jpg)

### Insert _Support me_ section (Buy me a coffee)

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

> **Example Preview:**
> 
> <a href="https://www.buymeacoffee.com/" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-red.png" alt="Buy Me A Coffee" width="150" ></a>
> 
> **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](https://www.creative-tim.com/blog/education/web-developer-resume/?ref=devto).

Download [Full Resume Template](https://github.com/creativetimofficial/github-profile-template).



Special thanks to:

- [Spotify GitHub Profile](https://github.com/kittinan/spotify-github-profile)
- [GitHub Readme Stats](https://github.com/anuraghazra/github-readme-stats)
- [Badges Readme Profile](https://github.com/alexandresanlim/Badges4-README.md-Profile)