DEV Community

Cover image for How to create a stunning GitHub Profile
Julia πŸ‘©πŸ»β€πŸ’» GDE
Julia πŸ‘©πŸ»β€πŸ’» GDE

Posted on • Updated on • Originally published at community.codenewbie.org

How to create a stunning GitHub Profile

Nowadays, junior developers are wondering if a personal portfolio is still necessary to showcase their skills. On one hand, I would say yes, because recruiters don't always have a technical background and don't know what GitHub is about and how it works. So a typical website portfolio would still be the safe way to show everything about you.

But, I really struggled with my portfolio for a long time: how should it look, how should I present myself and my projects, what colors should I even use?

That was the moment when I thought, if I'm going to struggle with my personal website, I at least want to have something to show in case recruiters take notice of me. So I pimped out my GitHub profile, and guess what? In interviews, interviewers said they really liked my GitHub profile and saw that I had put a lot of time and effort into making it that good. They never mentioned my personal website.

So if you're in the same situation as I was a few months ago and struggling with your personal website, you can at least create a nice GitHub profile to have something to show for it.

Header

README Header

Add a hero image, or keep it simple like I did. I started with a simple headline "Hi there, I'm Julia" and placed a small GIF next to it because I love using GIFs and emojis, it's so me and that's what I want to show.

Under the heading, I added badges that lead to all my social media accounts that I created with shield.io.
Shields offers more than just social media badges, like GitHub stats, language badges, and more.

Then I started by introducing myself, who I am, what programming languages I use, and what I'm interested in. This section should be short and include all the important information about you, such as area of expertise (front-end, back-end, AI, etc.), experience, and languages. Use adjectives that best describe you.

My Projects

README section My Projects

I have received many compliments for this section, so I encourage you to showcase your projects as best you can. I have created a thumbnail for all my projects and included it above the stats that are automatically generated with readme-stats.

The text is taken from the description in your repository in the About section on the right (in the description you should write what the project is about and what languages you used).

You should fill in the About section completely to have as much information as possible about your project that the generator will use. There are many different colorful themes for your statistics.

REPO Section About

Images can be inserted by adding the URL of the image. I saved the images in the GitHub README profile itself, clicked on them, and copied that URL (with the .png extension), which I pasted into the README.

It's also possible to paste video from your desktop into any GitHub README. Just drag and drop it into edit mode and the video will be inserted.

About Me

README Section About Me

You can put whatever you want in the "About me" section. If anyone has made it to this section, they are already interested.

I've written about my latest achievement, what I'm working on, and how I visualize the tools I work with (which I've also added to the header).

Footer

README Footer, Stats and Blog Articles

At the bottom of my profile, I've added statistics about my time on GitHub and the programming languages I use most often. These stats are also generated using GitHub stats.

I've also added links to my latest blog articles.

In general

  • use<br /> to insert spaces between sections
  • use --- to insert a horizontal line between sections
  • headings are automatically underlined
  • You can easily insert plain HTML into the README, e.g. <b></b> to emphasize text, align="center" to center text, headings and images

If you want to see the code of my README, you can easily view it like any other code on GitHub by clicking on the pencil icon in the upper right corner.

I've only made my outstanding projects available to the public where the code is clean, a README file has been created, and I'm able to talk about the project and the code. This also makes it easier for interviewers, when scrolling through your repositories so they don't get stuck on a project you haven't finished and don't want anyone to see yet.

There is so much more you can add to your profile, like different fonts, styling, etc. Just google it (e.g. Awesome GitHub README profiles) and get inspired by these great READMEs.


Thank you

Thanks for your reading and time. I really appreciate it!

Latest comments (31)

Collapse
 
windyaaa profile image
Windya Madhushani

Great article.

Collapse
 
hossainchisty profile image
Hossain Chisty • Edited

Here's my GitHub profile: github.com/hossainchisty

I would appreciate it if you could give me feedback about my github profile and what to improve on it. Thanks

Collapse
 
mrdanishsaleem profile image
Danish Saleem

Wow, that's a pretty awesome GitHub profile you haveπŸ™Œ

Here's my GitHub profile: github.com/mrdanishsaleem

I would appreciate it if you could give me feedback about my profile and what to improve on it. Thanks

Collapse
 
yuridevat profile image
Julia πŸ‘©πŸ»β€πŸ’» GDE

I do like your profile though! :) if you want to give your viewers more information about your stats or best repo you could add it to your readme as well. If you are actively looking for a job then I highly recommened doing so!

Collapse
 
mrdanishsaleem profile image
Danish Saleem

Thank you so much. Sure I'll add stats in my profileπŸ™Œ

Collapse
 
damanita profile image
damanita

Thank you!

Collapse
 
ginohmk profile image
Kanu Mike Chibundu

I never regret reading this. I love it. Very informative βœ…

Collapse
 
yuridevat profile image
Julia πŸ‘©πŸ»β€πŸ’» GDE

Thank you ☺️

Collapse
 
ksengine profile image
Kavindu Santhusa • Edited

Here is my profile

GitHub logo ksenginew / ksenginew

Config files for my GitHub profile.

Hi πŸ‘‹, I'm Kavindu Santhusa

A Sri Lankan 17 years old student.

  • πŸ‘‹ Hi, I’m @ksenginew

  • πŸ‘€ I’m interested in coding

  • 🌱 I’m currently learning CSS, JavaScript, Typescript

  • πŸ’žοΈ I’m looking to collaborate on cool projects

  • πŸ“« How to reach me ksengine.github@gmail.com

  • ⚑ Fun Fact

Jokes Card

Connect with me:

Languages and Tools:

ksengine ksengine ksengine ksengine ksengine ksengine ksengine @ksengine ksengine ksengine kse

css3 git go html5 javascript jekyll jest nodejs python sass typescript

ksenginew

ksenginew

Β ksenginew

ksenginew

Support:

ksengine







Collapse
 
imsikun profile image
Subhakant Mishra

Clean & Impressive
Thanks Julia for sharing this πŸ™Œ

Collapse
 
1link profile image
1Link.Fun

Bonus, you can use github.com/jwenjian/visitor-badge to add a visitor counting for your GitHub readme

Collapse
 
yuridevat profile image
Julia πŸ‘©πŸ»β€πŸ’» GDE

Thank you. Yes, there are so many things you can add. My example only shows a few of a lot of possibilities. Keep your eyes open for other great Github Profiles :)

Collapse
 
susi189 profile image
Susanna

Thank you so much for this article! Super helpful!

Collapse
 
lakuapik profile image
David Adi Nugroho
Collapse
 
townofdon profile image
Don Juan Javier

Very helpful! Appreciate the tips. Took some tweaking but finally got the grid layout working. :)

Collapse
 
leandroats profile image
Leandro Torres

Thank you Julia!

Collapse
 
sxidsvit profile image
sxidsvit

Yes, it's really a modern trend to use gitHub as your portfolio.
Many thanks to the author for the article.

Collapse
 
techllenmat profile image
THE-Techllen

Thank you,this has been very helpful.

Collapse
 
jenningsf profile image
JenningsF

Looks great! I love how clean, organized, yet informative it is.l πŸ‘Œ