DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

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

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!

Top comments (30)

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 πŸ‘©πŸ»β€πŸ’» Author

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
 
hossainchisty profile image
Hossain Chisty • Edited on

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
 
damanita profile image
damanita

Thank you!

Collapse
 
jenningsf profile image
JenningsF

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

Collapse
 
velismo profile image
Juan Manuel Cantero Diego

Really impressive! I will follow your suggestions to improve my profile. Thank you so much. ❀️

Collapse
 
yosi profile image
yosi

Thank you Julia!

Collapse
 
ulisesorozco profile image
Ulisesorozcovi

Amazing!

Collapse
 
onumaku_bobby profile image
Onumaku chibuike victory

This is nice and interesting

Collapse
 
sandeepraor profile image
sandeepraor

Yes...

Collapse
 
imiahazel profile image
Imia Hazel

Thanks for the fantastic tips.

Collapse
 
vikash4365 profile image
vikash

Really informative πŸ‘

Collapse
 
anuraghazra profile image
Anurag Hazra

Looks awesome πŸ‘

Collapse
 
stopspazzing profile image
Jeremy Zimmerman

Thank you. Very useful and covers things several others gloss over. Also, cute kitty gif!

Collapse
 
townofdon profile image
Don Juan Javier

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

Collapse
 
susi189 profile image
Susanna

Thank you so much for this article! Super helpful!

Collapse
 
ginohmk profile image
Kanu Mike Chibundu

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

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

Thank you ☺️

πŸ— We built a 100% open source community software called Forem.

You can contribute to the codebase or host your own.