DEV Community

Cover image for Pimp Your GitHub Profile
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Pimp Your GitHub Profile

I find my GitHub profile pretty important when it comes to being an active developer. Unfortunately, most of my projects are private due to business requirements. But still, it's a showcase of who you are.

So let's dive into pimping your profile, but adding a custom readme!

Chris Bongers GitHub

Adding a Readme

Let's start by adding a .readme; this will allows us to create our own little teaser of who we are.

To add this readme visit the following URL and create a new repository.

GitHub New Repo, The name should be the same as your username. (Rebelchris/rebelchris for me).

You will now see an 8-bit giggling GitHub octocat and the notice you found the special repository. Make sure to add the .readme here!

Styling your Readme

Of course, it's now up to you to style your readme page; there are some amazing examples out there!

You can use markdown to style it, and of course, we can use the repo to store images!

For example, I created an asset folder and uploader my header in it for my header. Then I'm using the following to add it to the .readme.

[![Rebelchris
header](https://github.com/rebelchris/rebelchris/blob/master/assets/github-header.png)](https://daily-dev-tips.com)
Enter fullscreen mode Exit fullscreen mode

Another cool thing to add is the GitHub Readme Stats. Follow instructions on the repo to get something like this:

<img
  align="center"
  src="https://github-readme-stats.vercel.app/api/?username=rebelchris&theme=dracula"
/>
Enter fullscreen mode Exit fullscreen mode

Mine is still very basic at this point, but I'm planning on making it more bespoke.

Some Great Examples

To give you an idea of some great GitHub profiles take a look at these:

GitHub Profile Tools

Other people have made some awesome tools!

What's Yours?

Please send me a message/mail/comment with your readme, and let's build an awesome collection!

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Discussion (42)

Collapse
rahuldkjain profile image
Rahul Jain

Tired of updating GitHub profle README with latest features again & again?

If yes, then I have developed a tool to do the same for you in just 1 click ๐Ÿค“

๐Ÿš€ Try the tool: live tool

If you find the tool useful, show some love by giving a โญ on github repo

GitHub logo rahuldkjain / github-profile-readme-generator

๐Ÿš€ Generate github profile README easily with latest add-ons like visitors count, github stats, etc using minimal UI.

GitHub Profile Readme Generator

GitHub Profile Readme Generator

github-profile-readme-generator licence github-profile-readme-generator forks github-profile-readme-generator stars github-profile-readme-generator issues github-profile-readme-generator pull-requests

github-profile-readme-generator gif

View Demo ยท Report Bug ยท Request Feature

Loved the tool? Please consider donating ๐Ÿ’ธ to help it improve!

Tired of editing GitHub Profile README with new features?

This tool provides an easy way to create github profile readme with latest addons like visitors count, github stats etc.

๐Ÿš€ Try it out: Live demo

๐Ÿง Features

Just fill the details like Name, Tagline, Dev Platforms Username, Current Work, Portfolio, Blog etc. with a minimal UI.

Click on Generate README to get your README in markdown You can preview the README too.

You can add latest addons like visitors count, shields, dev icons, github stats etc to your README in just one click.

Installation Steps

  1. Clone the repository
git clone https://github.com/rahuldkjain/github-profile-readme-generator.git
  1. Change the working directory
cd github-profile-readme-generator
  1. Install dependencies
npm install
  1. Run the app
npm start

๐ŸŒŸโ€ฆ

Collapse
mrsid profile image
MrSid

I have tried this bro, it's really awesome.

Collapse
rahuldkjain profile image
Rahul Jain

Glad you liked itโค๏ธ

Collapse
marissab profile image
Marissa B

That's really awesome! Great job.

Collapse
dailydevtips1 profile image
Chris Bongers Author

That is a cool tool man! Will add it the the article, and add your profile! ๐Ÿคฉ

Collapse
viclafouch profile image
Victor de la Fouchardiรจre

Here is mine : github.com/viclafouch

Readme Github profile

Collapse
dailydevtips1 profile image
Chris Bongers Author

Awesome! Adding you to the list ๐ŸคŸ

Collapse
daveparr profile image
Dave Parr • Edited on
Collapse
dailydevtips1 profile image
Chris Bongers Author

Wow Dave, that's really cool! I added your profile to the list

Collapse
delta456 profile image
Swastik Baranwal

Here's mine github.com/Delta456

Collapse
dailydevtips1 profile image
Chris Bongers Author

Wow nice, I like your programming languages section
Going to add you to the article man! ๐Ÿคฉ

Collapse
delta456 profile image
Swastik Baranwal

Thanks man and for following me!

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
dailydevtips1 profile image
Chris Bongers Author

Nice!, Will add it to the list

Collapse
akashbijwe profile image
Akash Bijwe

oh! Thanks a ton ๐Ÿป

Collapse
supercodingninja profile image
Frederick Thomas

Thank you, so, much! I was able to add a video, with the .gif being the thumbnail!

Check me out ๐Ÿ‘‰๐Ÿฟ github.com/supercodingninja

As soon as I learn how to properly resize image (I have not figure out the size I need to get the image to show, when I change it's size), to use and ... vs. ...; because this will allow me to use a target="_blank", and open a new ab will appear.

Collapse
qws_ profile image
qws_ • Edited on

Thanks for this write-up! I just finished my README profile this weekend. Let me know what you think!? Cheers ๐Ÿป

GitHub logo jl88s / jl88s

My personal Github profile repo!

GIF

Gmail linkedin Instagram Twitter Dev.to

(click me!)

Hello World, I'm Jomaree! ๐Ÿ‘‹

GIF

๐Ÿ”ญ Iโ€™m currently working on fixing my personal website and a handful of tutorials before I start class again this fall

๐ŸŒฑ Iโ€™m currently learning JavaScript, Sass, Gulp, Materialize, Bootstrap, and hopefully React soon

๐ŸŽฎ Iโ€™m looking to collaborate on a creative and fun project so I can branch out of my interversion!

๐Ÿค” Iโ€™m looking for help with JavaScript! I want to master it... if that's even possible, heh.

โšก Fun fact: Did you know.... That California (USA) has the tallest mountain in all of the lower 48 States. South on the Sierra Nevadas, Mt. Whitney has an elevation of 14,505 feet!

๐Ÿ’ฌ Ask me about anything I'm friendly, I swear ๐ŸงŸโ€โ™‚๏ธ

๐Ÿ“ซ How to reach me: click the Gmail link up top or message me through social media.

โ€ฆ
Collapse
dailydevtips1 profile image
Chris Bongers Author

Wow! Very cool love the gifs and dropdown! Going to add your profile tomorrow :D

Collapse
qws_ profile image
qws_

Oh-yeah! I appreciate it ๐Ÿ™

Collapse
marissab profile image
Marissa B

I've seen a few profiles with this and was wondering how exactly it was done. That looks spiffy and neat. Thanks for the article about it!

Collapse
dailydevtips1 profile image
Chris Bongers Author

Awesome, glad you like it, when can we expect to see your profile readme :D

Collapse
marissab profile image
Marissa B

Hopefully when I can find time to post it up between D&D sessions.

Collapse
akashbijwe profile image
Akash Bijwe

I have also created a medium blog on the same topic medium.com/@akashbijwe/how-to-crea.... Let me know If I missed anything.

Collapse
dailydevtips1 profile image
Chris Bongers Author

Awesome article!

Collapse
akashbijwe profile image
Akash Bijwe

Thank you โค๏ธ

Collapse
hemant profile image
Hemant Joshi ๐Ÿ˜ผ

GitHub logo 8bithemant / 8bithemant

Awesome Github ReadME, Dynamic nature Built with Love. Please consider to follow and star, Contribution are accepted, Free Fell To Fork

Hi there, I'm Hemant! ๐Ÿ‘‹.

Full Stack | System Design | Micro Services | Competetive Programming | Machine Learning

Twitter Follow


GIF

I'm 18 years old Self-taught Full-Stack developer from India.

  • ๐Ÿฅ€ Learning GraphQl ,NextJs &Typescript .

  • ๐Ÿ”ญ SpaceX FanBoi,

    • Vanilla Js in Space๐Ÿ˜ผ
  • ๐Ÿ›ธ Into High Energy Physics and Astrophysics

  • ๐Ÿ’ฌ Connect? Here ๐Ÿ‘‰๐Ÿผ




- Languages and Tools...

html csharp js python react vue chrome cloud datascience aws npm gcp bash vscode

- Blogs ๐ŸŒฑ

- Podcast โšก๏ธ


Thank You-๐Ÿ™๐Ÿผ






Collapse
dailydevtips1 profile image
Chris Bongers Author

Nice work! Added to the list

Collapse
hemant profile image
Hemant Joshi ๐Ÿ˜ผ

Thanks a lot๐Ÿ˜

Collapse
dailydevtips1 profile image
Chris Bongers Author

Looks very nice! Going to add your profile in the next push ;)

Collapse
waylonwalker profile image
Waylon Walker

๐Ÿ‘‹ hey @dailydevtips1 thanks for listing me!

Here is the latest iteration of mine.

Collapse
dailydevtips1 profile image
Chris Bongers Author

Awesome profile! Very colourfull ๐ŸŒˆ

Collapse
jonamichahammo profile image
Jonathan Hammond

I loved this. I am still trying to learn if I can change the font color and background color because I would prefer my bio presented as darkmode:
github.com/Pythonidaer

Collapse
dailydevtips1 profile image
Chris Bongers Author

Interesting idea, not sure what you could inject to make those adjustments.
You could use a text-white class to make the text white, I'm not sure what the background class is for GitHub.

Collapse
mrsid profile image
MrSid

This is mine
github.com/mrsid-31

Collapse
supercodingninja profile image
Frederick Thomas
Collapse
dailydevtips1 profile image
Chris Bongers Author

Awesome, you went all out, nice work!

Collapse
supercodingninja profile image
Frederick Thomas
Collapse
ash1eyish profile image
Ashley Maria

I found two lists of things for your readme. github.com/elangosundar/awesome-RE... and github.com/abhisheknaiidu/awesome-...

Collapse
dailydevtips1 profile image
Chris Bongers Author

Awesome! Added tools to the article

Collapse
33nano profile image
Manyong'oments

Awesome. Now my profile looks super cool.

Collapse
dailydevtips1 profile image
Chris Bongers Author

Nice! Like the social buttons!