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.
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 *.
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.
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 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.
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 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.
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.
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://wiredgorilla.com/wp-content/uploads/2021/10/how-to-create-a-fancy-github-profile-with-readme.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
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!
