DEV Community

Cover image for How to create a stunning GitHub Profile

How to create a stunning GitHub Profile

This article was first published on CodeNewbie on Oct 3, 2021.

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!

Discussion (23)

Collapse
velismo profile image
Juan Manuel Cantero Diego

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

Collapse
jenningsf profile image
JenningsF

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

Collapse
anuraghazra profile image
Anurag Hazra

Looks awesome πŸ‘

Collapse
imiahazel profile image
Imia Hazel

Thanks for the fantastic tips.

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
stopspazzing profile image
Jeremy Zimmerman

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

Collapse
vikash4365 profile image
vikash

Really informative πŸ‘

Collapse
ksengine profile image
Kavindu Santhusa • Edited on

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
jwenjian profile image
Jiang Wenjian

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

Collapse
yuridevat profile image
π•π•¦π•π•šπ•’ πŸ‘©πŸ»β€πŸ’» Author

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
techllenmat profile image
THE-Techllen

Thank you,this has been very helpful.

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
leandroats profile image
Leandro Torres

Thank you Julia!

Collapse
fchaussin profile image
François CHAUSSIN

Informative article! Thanks for sharing Julia

Collapse
mariongb81 profile image
mariongb81

Thank you very much for taking the time to write it. I found it most interesting

Collapse
akashbisariya profile image
Akash Bisariya

Thanks for informative article!!