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

Top comments (41)

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

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

Awesome! Adding you to the list 🤟

Collapse
 
daveparr profile image
Dave Parr • Edited

Mine automatically displays my most popular blog posts and plots my GitHub repos popularity on a chart.


I wrote it up here:

Collapse
 
dailydevtips1 profile image
Chris Bongers

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

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

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

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

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

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

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

Nice work! Added to the list

Collapse
 
hemant profile image
Hemant Joshi

Thanks a lot😁

Collapse
 
dailydevtips1 profile image
Chris Bongers

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

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

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

Awesome, you went all out, nice work!