Are you looking for a Github readme template for your professional profile?
You've come to the right place!
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. Resume example - Github readme Template
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. Resume example - Github readme Template
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 readme template with a resume example here. Use our github template to get inspired!
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:
Code snippet:
[](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:
- Hobby 1
- Nested Hobby 1
- Nested Hobby 2
- Hobby 2
- 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 3or
🏔. 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
- How to quickstart and launch your website using Jekyll?
- How to create Scrolling Transformations for your React App?
- How to create a single-page application using React?
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 Code snippet:
YouTube courses/tutorials
[](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 DesignCode 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:
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:
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:
- 🔥 Creative Tim Courses
New Learning Platform for Web Designers & Devs- 😎 Git Tutorial
How to Fix 18 Common Mistakes- 🙏 Docker and Django
How to start fast- ⭐️ Technology
The Importance of a User Experience Expert in Every Company- 💣 Shopify Templates
10+ Best E-commerce Shopify TemplatesCode 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:
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:
© 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
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:
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:
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 Github Readme Resume Template.
Special thanks to:
