DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Cover image for How to have an awesome GitHub profile?
Supritha
Supritha

Posted on

How to have an awesome GitHub profile?

Get Started!

Customize your Readme.md on your GitHub profile to make it look attractive by following the steps in this simple walkthrough below. I have also provided some cool elements to spice things up!

laptop

If your GitHub profile looks something like THIS ๐Ÿ‘‡...
sampleprofile

Turn it to something like THIS ๐Ÿ‘‡ or even cooler!
niceprofile


Follow these steps-

1. Create a new Repository

  • Go to ๐Ÿ‘‰ repo.new
  • Type the repository name, which should be same as your username. This creates a secret repository.
  • Make the repository Public.
  • Check the box - Add a README file.
  • Then click Create Repository.

step1

2. Update README file

  • The initial file looks something like this with a simple message.
  • You can edit the file by clicking on the Edit README button on the right.

step2

  • As you can see, the file is provided with a template made using markdown. You can edit it according to your preference.
  • Click on Commit changes.You can also add a commit message.

img


3. โœจBeautify your profile!โœจ

There's a lot of open source elements available to achieve a beautiful Profile page. Here's a list of resources to choose from!


GitHub README Stats

stats1
stats2

GitHub logo anuraghazra / github-readme-stats

โšก Dynamically generated stats for your github readmes

GitHub Readme Stats

GitHub Readme Stats

Get dynamically generated GitHub stats on your READMEs!

Tests Passing Issues GitHub pull requests

View Demo ยท Report Bug ยท Request Feature ยท Ask Question

Franรงais ยท ็ฎ€ไฝ“ไธญๆ–‡ ยท Espaรฑol ยท Deutsch ยท ๆ—ฅๆœฌ่ชž ยท Portuguรชs Brasileiro ยท Italiano ยท ํ•œ๊ตญ์–ด Nederlands เคจเฅ‡เคชเคพเคฒเฅ€ . Tรผrkรงe

Love the project? Please consider donating to help it improve!

Give india logo

Are you considering supporting the project by donating? Please DON'T!!

Instead, Help India fight the 2nd deadly wave of COVID-19.
Thousands of people are dying in India for lack of Oxygen & COVID related infrastructure.

Visit https://indiafightscorona.giveindia.org and make a small donation to help us fight COVID and overcome this crisis.
A small donation goes a long way. โค๏ธ

Features

GitHub Stats

โ€ฆ

GitHub profile Trophy

trophy

GitHub logo ryo-ma / github-profile-trophy

๐Ÿ† Add dynamically generated GitHub Stat Trophies on your readme

GitHub Profile Trophy

๐Ÿ† Add dynamically generated GitHub Stat Trophies on your readme

You can use this service for free. I'm looking for sponsors to help us keep up with this serviceโค๏ธ

Quick Start

Add the following code to your readme. When pasting the code into your profile's readme, change the ?username= value to your GitHub's username.

[![trophy](https://github-profile-trophy.vercel.app/?username=ryo-ma)](https://github.com/ryo-ma/github-profile-trophy)

Use theme

Add optional parameter of the theme.

[![trophy](https://github-profile-trophy.vercel.app/?username=ryo-ma&theme=onedark)](https://github.com/ryo-ma/github-profile-trophy)

More detail

About Rank

Ranks are SSS SS S AAA AA A B C UNKNOWN SECRET.

Rank Description
SSS, SS, S You are at a hard to reach rank. You can brag.
AAA, AA, A You will reach this rank if you do your best. Let's aim here first.
B, C You are currently making good process. Let's aim a bit higher.
UNKNOWN You have not taken action yet. Let's act first.
SECRET This rank is very rare. The trophy will
โ€ฆ

Add a header or cover picture

[![MasterHead](your image link)](your GitHub link)
Enter fullscreen mode Exit fullscreen mode

Add a floating image or GIF.

  <img align="right" alt="Coding" width="400" src="add your link 
  here">

Enter fullscreen mode Exit fullscreen mode

Coding


Social icons section.

<h3 align="left">Connect with me:</h3>
<p align="left">
<a href="your link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg" alt="" height="30" width="40" /></a>
<a href="your link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg" alt="" height="30" width="40" /></a>
<a href="your link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg" alt="" height="30" width="40" /></a>
<a href="your link" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/youtube.svg" alt="" height="30" width="40" /></a>
</p>
Enter fullscreen mode Exit fullscreen mode

Languages and tools section.

<h3 align="left">Languages and Tools:</h3>
<p align="left"> <a href="https://www.cprogramming.com/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/c/c-original.svg" alt="c" width="40" height="40"/> </a> <a href="https://www.w3schools.com/cpp/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/cplusplus/cplusplus-original.svg" alt="cplusplus" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a> <a href="https://www.figma.com/" target="_blank"> <img src="https://www.vectorlogo.zone/logos/figma/figma-icon.svg" alt="figma" width="40" height="40"/> </a> <a href="https://flutter.dev" target="_blank"> <img src="https://www.vectorlogo.zone/logos/flutterio/flutterio-icon.svg" alt="flutter" width="40" height="40"/> </a> <a href="https://git-scm.com/" target="_blank"> <img src="https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg" alt="git" width="40" height="40"/> </a> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://www.linux.org/" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/linux/linux-original.svg" alt="linux" width="40" height="40"/> </a> <a href="https://www.photoshop.com/en" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/photoshop/photoshop-plain.svg" alt="photoshop" width="40" height="40"/> </a> <a href="https://www.python.org" target="_blank"> <img src="https://devicons.github.io/devicon/devicon.git/icons/python/python-original.svg" alt="python" width="40" height="40"/> </a> </p>
Enter fullscreen mode Exit fullscreen mode

More Dev icons


GitHub streak

streak

  1. Copy-paste the markdown below into your GitHub profile README
  2. Replace the value after ?user= with your GitHub username
[![GitHub Streak](https://github-readme-streak-stats.herokuapp.com/?user=DenverCoder1)](https://git.io/streak-stats)
Enter fullscreen mode Exit fullscreen mode

Customize it here ๐Ÿ‘‰ Click me!


Spotify playing

spotify

GitHub logo JeffreyCA / spotify-recently-played-readme

Display your recently played Spotify tracks on your GitHub profile README.

Spotify Recently Played README

Display your recently played Spotify tracks on your GitHub profile README. Powered by Vercel.

Check out lastfm-recently-played-readme for a similar integration for Last.fm scrobbles.

Getting Started

Click the button below to connect your Spotify account with the Vercel app. This is needed to access your recently played tracks.

By authorizing the app, you agree to have your Spotify username, access token, and refresh token stored on a secure Firebase database. This is required so you only need to authorize once and the app can automatically refresh access tokens in order to retrieve recent tracks.

You can revoke the app at https://www.spotify.com/account/apps.

Authorize button

After granting permission, just add the following into your README and set the user query parameter to your Spotify username.

![Spotify recently played](https://spotify-recently-played-readme.vercel.app/api?user=jeffreyca16)
Enter fullscreen mode Exit fullscreen mode

Spotify recently played

Link to Spotify profile

Use the following snippet to make the widget link to your Spotify profile (orโ€ฆ


Badges - Shields

![badges1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6n8fc8zw8pawxveffitx.png)
Enter fullscreen mode Exit fullscreen mode

Languages,tools and social icons badges

More badges
badges2


Readme Typing SVG โŒจ๏ธ

GitHub repo
Demo

typing


Views counter

views

GitHub logo antonkomarev / github-profile-views-counter

It counts how many times your GitHub profile has been viewed. Free cloud micro-service.

GitHub Profile Views Counter

GitHub Profile Views Counter

Discord License

Introduction

Try ลธ HลธPE service as the more robust and feature rich solution.

GHPVะก project is proof of concept. This counter designed to be an analytical instrument for you, but not for people who are visiting your profile It could be used to see profile views dynamics as result of development activity, blogging or taking part in a conference.

It counts how many times your GitHub profile has been viewed and displays them in your profile, for free.

antonkomarev-profile-views-counter

Usage

Cloud solution launched as 100% free experience. Help me cut server costs if you like this service.

If you want to see big numbers in your profile, deploy a standalone solution to draw any views count you want without spamming our server. Everybody knows that any counters could be faked.

A billion fake profile views doesn't make you a very popular person, it makes you a personโ€ฆ


Blog Post workflow

workflow

GitHub logo gautamkrishnar / blog-post-workflow

Show your latest blog posts from any sources or StackOverflow activity or Youtube Videos on your GitHub profile/project readme automatically using the RSS feed

Blog post workflow Build and test

preview

How to use

  1. Star this repo ๐Ÿ˜‰
  2. Go to your repository
  3. Add the following section to your README.md file, you can give whatever title you want. Just make sure that you use <!-- BLOG-POST-LIST:START --><!-- BLOG-POST-LIST:END --> in your readme. The workflow will replace this comment with the actual blog post list
    # Blog posts
    <!-- BLOG-POST-LIST:START -->
    <!-- BLOG-POST-LIST:END -->
    Enter fullscreen mode Exit fullscreen mode
  4. Create a folder named .github and create a workflows folder inside it, if it doesn't exist.
  5. Create a new file named blog-post-workflow.yml with the following contents inside the workflows folder
    name: Latest blog post workflow
    on
      schedule: # Run workflow automatically
        - cron: '0 * * * *' # Runs every hour, on the hour
      workflow_dispatch: # Run workflow manually (without waiting for the cron to be called), through the Github Actions Workflow page directly
    
    jobs:
      update-readme-with-blog:
        
    โ€ฆ
    Enter fullscreen mode Exit fullscreen mode

Add emojis - Markdown Icons

emojis


README Jokes ๐Ÿ‘€

GitHub logo ABSphreak / readme-jokes

๐Ÿ˜„ Jokes for your GitHub READMEs

README Jokes

jokes GIF

Random programming jokes on your README.

GitHub deployments GitHub deployments GitHub issues

Usage

Endpoint URL: https://readme-jokes.vercel.app/api

Embed one of these in your README:

<!-- Markdown --&gt
![Jokes Card](https://readme-jokes.vercel.app/api)
Enter fullscreen mode Exit fullscreen mode

or

<!-- HTML -->
<img src="https://readme-jokes.vercel.app/api" alt="Jokes Card" />
Enter fullscreen mode Exit fullscreen mode

Customization Guide

Customize using ? after /api in the https link, example here with no borders using the hideBorder parameter.

Markdown method: ![Jokes Card](https://readme-jokes.vercel.app/api?hideBorder)

Image method: <img src="https://readme-jokes.vercel.app/api?hideBorder" alt="Jokes Card" />

Both methods will produce the following jokes card without border: Jokes Card
To use multiple parameters use '&' after the first parameter, e.g. ?hideBorder&theme=cobalt&qColor=%23944bcc&aColor=%23bbdb51

will produce a jokes card without border, with cobalt theme, answer color #944bcc and question color #bbdb51 like so:
Jokes Card

Parameters Available

  • bgColor โ†’ Background Color
  • borderColor โ†’ Border Color
  • qColor โ†’ Question Color
  • aColor โ†’ Answer Color
  • textColor โ†’ Normal text Color
  • codeColor โ†’ Code Color
  • hideBorder โ†’ Mention asโ€ฆ

README Quotes โ

GitHub logo PiyushSuthar / github-readme-quotes

๐Ÿ”ฅ Add Programming Quotes To Your GitHub Readme

Github Readme Quotes

Developer Quotes for your Github Readme.

Twitter: piyushsthr

View Demo ยท Report Bug

Features โœจ

Usage โšก๏ธ

Copy the markdown below and paste it in your Github Readme.

[![Readme Quotes](https://quotes-github-readme.vercel.app/api?type=horizontal&theme=dark)](https://github.com/piyushsuthar/github-readme-quotes)
Enter fullscreen mode Exit fullscreen mode

Options

Options Default Available
type vertical horizontal, vertical
theme light dark, radical, merko, gruvbox, tokyonight, algolia, monokai
myquote - Customize your quote

Installation and Development ๐Ÿš€

To get started with developing this app locally, here are the steps:

Install the dependencies for the app using,

npm install
# or
yarn
Enter fullscreen mode Exit fullscreen mode

And, then run the app using,

npx vercel dev
# or
yarn run vercel dev
Enter fullscreen mode Exit fullscreen mode

Demo

Vertical

You don't need to add ?type=vertical parameter.

readme Quotes

Horizontal

You need to add ?type=horizontal parameter.

readme Quotes

Light

You don't need to add ?theme=light parameter.

readme Quotes

Dark

You need to add ?theme=dark parameter.

readme Quotes

Catppuccin

You need to add ?theme=catppuccin parameter.

readme Quotes

Algolia

You need toโ€ฆ


Dev Metrics

GitHub logo anmol098 / waka-readme-stats

This GitHub action helps to add cool dev metrics to your github profile Readme

Looking For Translation to different languages & Locale #23

Dev Metrics in Readme with added feature flags ๐ŸŽŒ

Project Preview

Project Preview

๐Ÿ“ŒโœจAwesome Readme Stats


Star Badge

Are you an early ๐Ÿค or a night ๐Ÿฆ‰
When are you most productive during the day
What are languages you code in?
Let's check out in your profile readme!

Report Bug ยท Request Feature

Prep Work

  1. You need to update the markdown file(.md) with 2 comments. You can refer here for updating it.
  2. You'll need a WakaTime API Key. You can get that from your WakaTime Account Settings
    • You can refer here, if you're new to WakaTime
  3. You'll need a GitHub API Token with repo and user scope from here if you're running the action to get commit metrics

    enabling the repo scope seems DANGEROUS
    but this GitHub Action only accesses your commit timestamp and lines of code added or deleted in repository youโ€ฆ


4. ALTERNATIVE WAY!

If you found things overwhelming, not to worry!

Here's how to do it (The Easy Way)

  • GitHub profile README generator created by rahuldkjain

๐Ÿ‘‰(https://rahuldkjain.github.io/gh-profile-readme-generator/)
generator

  • GitHub Profilinator

๐Ÿ‘‰Try it
GitHub Repository


OR

  1. You can simply fork someone's repository
    fork)

  2. Click the edit icon in the README file
    edit

  3. Copy the code and paste it onto your README file. Of course, you can modify it according to your choice.
    Copy


5. Here's some inspiration and ideas!


GitHub logo EddieHubCommunity / awesome-github-profiles

List of GitHub profiles that have awesome customisation, that you can use for inspiration

Awesome GitHub profiles

.github/workflows/main.yml

List of GitHub profiles that have awesome customization, that you can use for inspiration.
Feel free to submit a pull request with your suggestions of awesome GitHub profiles.

built with love badge made with markdown badge open source badge
check it out badge built by developers badge

How can I add my GitHub profile? ๐Ÿคทโ€โ™€๏ธ๐Ÿคทโ€โ™‚๏ธ

  1. Create an issue, with the title as your name, and in the description put a screenshot of the customised GitHub profile page (copy the generated image URL, this will be needed in the next step)

  2. Fork the project, using the top right corner button, that states fork

  3. Create a file named your-username.json in the directory profiles with the following content.

Your entry should be similar to this example:

{
  "image": "https://user-images.githubusercontent.com/624760/91057573-48531300-e61f-11ea-9e13-2d7384e42000.png",
  "issueId": 66,
  "name": "Eddie Jaoude",
  "username": "eddiejaoude"
}
Enter fullscreen mode Exit fullscreen mode
  1. Create a Pull Request to add the changes to this repository. Please change the title to fix:โ€ฆ

Thank you for reading!๐Ÿ™Œ

Share your amazing GitHub profile in the comments down below for the world to see! :)

Support me by liking it and sharing it for more such articles.

Like what I do? Help me pull my next all-nighter.

Consider buying me a coffee โ˜•.

Top comments (2)

Collapse
paulojmoura profile image
Paulo Moura

Thank you for share

Collapse
vinuxd profile image
VINU

Thanks it was amazing!

๐ŸŒš Life is too short to browse without dark mode