rahuldkjain / github-profile-readme-generator

🚀 Generate GitHub profile README easily with the latest add-ons like visitors count, GitHub stats, etc using minimal UI.

GitHub Profile README Generator

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 a GitHub profile readme with the latest add-ons such as visitors count, github stats, etc.

🚀 Demo

Try the tool: GitHub Profile README Generator

🧐 Features

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

• Uniform Dev Icons

• Uniform Social Icons

• Visitors Counter Badge

• GitHub Profile Stats Card

• GitHub Top Skills

• GitHub Streak Stats

• Dynamic Dev(.)to Blogs (GitHub Action)

• Dynamic Medium Blogs (GitHub Action)

• Dynamic Personal Blogs from RSS Feed (GitHub Action)

• Wakatime Stats contribute

• Buy Me A Coffee button

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

🛠️ Installation Steps

1. Clone the repository

git clone https://github.com/rahuldkjain/github-profile-readme-generator.git

2. Change the working directory

cd github-profile-readme-generator

3. Install dependencies

npm install

4. Run the app

npm start

🌟 You are all set!

🍰 Contributing

Please contribute using GitHub Flow. Create a branch, add commits, and open a pull request.

Please read CONTRIBUTING for details on our CODE OF CONDUCT, and the process for submitting pull requests to us.

💻 Built with

• Gatsby
• Tailwind CSS: for styling
• GSAP: for small SVG Animations

🙇 Special Thanks

• Anurag Hazra for amazing github-readme-stats
• Anton Komarev for super cool github-profile-views-counter
• Gautam Krishna R for the awesome blog post workflow
• Jonah Lawrence for the incredible github-readme-streak-stats
• Julien Monty for super useful devicon
• Eliot Sanford for adding hashnode as a blog input

🙇 Sponsors

• Scott C Wilson donated the first-ever grant to this tool. A big thanks to him.
• Max Schmitt loved the tool and showed support with his donation. Thanks a lot.
• Aadit Kamat find the tool useful and showed support with his donation. A big thanks to him.
• Jean-Michel Fayard used the generator to create his GitHub Profile README and he loved it. Thanks to him for showing support to the tool with the donation.

🙏 Support

---

Developed with ❤️ in India 🇮🇳

github-profile-readme-generator's Issues

Animated Github Badges

Is your feature request related to a problem? Please describe.
Recently the Arctic Contributor Badge has been added to our github profiles, this is a way of integrating it in our reamde profiles as well.

Describe the solution you'd like
Minimalistic icons with animations rendered in AE, will go well with the overall theme of your generator.

Describe alternatives you've considered
I can provide static icons if required.

Additional context
Badge Preview On My Profile : acervenky
Badge Repo : animated-github-badges

Names don't show up when hovering over the "skills" checkboxes (on desktop)

Describe the bug
Hovering over the skills in the part where you fill out the form to generate the README, sometimes the skill names do not appear even though there's enough space for them to appear

To Reproduce
Steps to reproduce the behavior:

1. Open your desktop browser, to any width lower than 1199px
2. Hover mouse over the checkboxes in the skills section.
3. No name for the corresponding logos shows up.

Expected behavior
As long as the width allows for it, the names for the corresponding logos should show up when they are hovered over in the skills section.

Screenshots
screencast

Desktop (please complete the following information):

• OS: Linux
• Browser: Firefox
• Version: 80.0

Additional context
Please assign the issue to me, I've already written the fix for it (it's just a change to media queries in CSS).

Add dribbble, behance, medium, & youtube input box in social

See the above image for reference

Use these links for icons
dribbble: https://cdn.jsdelivr.net/npm/[email protected]/icons/dribbble.svg
behance: https://cdn.jsdelivr.net/npm/[email protected]/icons/behance.svg
medium: https://cdn.jsdelivr.net/npm/[email protected]/icons/medium.svg
youtube: https://cdn.jsdelivr.net/npm/[email protected]/icons/youtube.svg

Blog posts dynamically from personal website

Add blog posts to display dynamically from personal website.

Margin between Most Used Languages and GitHub Stats to prettify things

Problem: On narrower screen real estate, Most Used Languages card and GitHub Stats card pile on top of each other.

Solution: Add top margin on both the cards.

I'd be more than happy to make this happen with my contribution

Preview 1 - 1366px width

Preview 2 - mobile width

add tooltip on hover to skill icons

hover to any icon in the skills section
display a tooltip showing the skill name

Eg: I am hovering on the React icon
the tooltip should display React

add feature to customize the visit-count badge

You can provide different input fields after checking display visitors-count badge checkbox to customize the badge.
We can customize the color, style, and label. See below for reference

Color

You can use any valid HEX color or pick from a predefined set of named colors (blue is the default).

color	demo
brightgreen
green
yellow
yellowgreen
orange
red
blue
grey
lightgray
ff69b4

Named color

![](https://komarev.com/ghpvc/?username=your-github-username&color=green)

Hex color

![](https://komarev.com/ghpvc/?username=your-github-username&color=dc143c)

NOTE: HEX colors should be used without # symbol prefix.

Styles

The following styles are available (flat is the default).

style	demo
flat
flat-square
plastic

![](https://komarev.com/ghpvc/?username=your-github-username&style=flat-square)

Label

You can overwrite default Profile views text with your own label.

![](https://komarev.com/ghpvc/?username=your-github-username&label=PROFILE+VIEWS)

NOTE: Replace whitespace with + character in multi-word labels.

no option to get back to markdown again.

Is your feature request related to a problem? Please describe.
After the markdown is generated upon clicking the preview option, there was no option to get to the markdown again.

Describe the solution you'd like
After clicking the preview option, there should be an option to get back to markdown again.

update gif in the README

https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/github-profile-readme-generator.gif

The above gif is outdated.

So many cool skill icons and features have been added.

Record the screen and convert the video to gif using https://ezgif.com/video-to-gif

Add links to usernames of dsa platforms

Please add links to usernames of hackerrank, hackerearth, leetcode, geeksforgeeks profiles.

Add new skills

Can Add new skills with the icon?
like=>

Spring:
https://spring.io/images/spring-logo-9146a4d3298760c2e7e49595184e1975.svg
Matlab:
https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Matlab_Logo.png/240px-Matlab_Logo.png
Kotlin:
https://res.cloudinary.com/vlctechhub/image/twitter_name/w_350/kotlin_es.jpg

Really Loving This!!

Want to give a shoutout to @rahuldkjain and the contributors to this repository. You guys really changed the readme looks on Github

If there is anyone I can contribute, please tag me.

Cheers!

add a unit test for the Title component

adding unit test cases will help to ensure that new features won't break the existing tool.

Please refer https://www.gatsbyjs.org/docs/unit-testing/ to know how to add the test cases

Typo in "isMediumUsernameVaid" function name

Small typo in "isMediumUsernameVaid" function, should be "isMediumUsernameValid" in declaration and references

github-profile-readme-generator/src/utils/validation.js

Lines 5 to 10 in a1f9633

	const isMediumUsernameVaid = (username) => {
	if (username) {
	return username[0] === '@'
	}
	return true
	}

View Count increments if you keep reloading the webpage !!

Describe the bug
View count keeps on increasing if we keep on reloading the webpage and even while editing also this behavior can be seen.
To Reproduce
Steps to reproduce the behavior:

1. Go to readme or edit the readme
2. reload it
3. see the incremented count

Expected behavior
no change in count should be expected

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Currently Learning section is not binding in the markdown and markdown preview

When you create the profile and write anything inside the "currently Learning" it's not reflect in the markdown and the markdown preview

Trim the variables

Describe the bug
Trim the variables which are styled bold in the readme. If any spaces before/after are left then GitHub readme will show that space and will not make it bold

Expected behavior
Trimmed variables

Screenshots

preview:

Would you like to work on this issue? - Yes

how to setup link leads to wrong page

Describe the bug

The how to setup link leads to the wrong page.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://rahuldkjain.github.io/gh-profile-readme-generator/
2. Enter some dev.to username
3. Check the display latest dev.to blogs dynamically (Github Action) checkbox
4. Click on how to setup
5. Leads to a incorrect site: https://rahuldkjain.github.io/addons

Expected behavior

Leads to https://rahuldkjain.github.io/gh-profile-readme-generator/addons

[BUG]Languages' icons are above the "Most Used Languages" title

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Profile views tag increments everytime

This can be seen even on opening or reloading my own profile , it needs improvement.

Logos returning an ERROR 404.

Describe the bug
The image logos under skills are returning an ERROR 404 (Page not found).

To Reproduce
Steps to reproduce the behavior:

1. Go to https://konpa.github.io/devicon/devicon.git/icons/react/react-original-wordmark.svg
2. See error

Screenshot
https://rahuldkjain.github.io/gh-profile-readme-generator/

Add MS SQL in Database,Visual Studio in Software and SVN in Devops.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Extract username from social links

A lot of people pasting links to their social links accounts instead of writing only username.
It leads to generating counter with link:
/ghpvc/?username=https://github.com/example-username
Instead of:
/ghpvc/?username=example-username

The better way will cutting domain part of the social website and leave only username automatically.

After then validation could be performed. For GitHub username you could use shinnn GitHub username validator

Request to add BaaS & Static Site Generators as categories under skills

I'm ready with the names and their icon links.

Add labels

Use labels for checkboxes under the SKILLS section.

Add Flutter or Dart in Skills.

Flutter or Dart is not mentioned in Skills Category. A huge number of developers are working on his too. I think it can be considered too.

No images in skills

Hi!
In the generator u can see correctly all the images of the skills but when u use the code in ur readme doesn't show it.

Looks like the links for the images return a 404, I add some links of that img src:
https://konpa.github.io/devicon/devicon.git/icons/angularjs/angularjs-original.svg
https://konpa.github.io/devicon/devicon.git/icons/html5/html5-original-wordmark.svg
https://konpa.github.io/devicon/devicon.git/icons/laravel/laravel-plain-wordmark.svg

In previous versions the images are storage in another links and works perfectly:

https://camo.githubusercontent.com/4781e0847a4467c26c793b583a64dac8c15007bf/68747470733a2f2f64657669636f6e732e6769746875622e696f2f64657669636f6e2f64657669636f6e2e6769742f69636f6e732f616e67756c61726a732f616e67756c61726a732d6f726967696e616c2e737667
https://camo.githubusercontent.com/5712bffd0347cc2744de599dc54473dc1ebbfe82/68747470733a2f2f64657669636f6e732e6769746875622e696f2f64657669636f6e2f64657669636f6e2e6769742f69636f6e732f637373332f637373332d6f726967696e616c2d776f72646d61726b2e737667
https://camo.githubusercontent.com/9599dc988280bea2ca5c44c4796f13494f9ff3f7/68747470733a2f2f64657669636f6e732e6769746875622e696f2f64657669636f6e2f64657669636f6e2e6769742f69636f6e732f68746d6c352f68746d6c352d6f726967696e616c2d776f72646d61726b2e737667

thanks!

StackOverflow URL is Broken

Describe the bug
Every time, I add the Stackoverflow username, it leads to broken URLs.
Username: Muhaddis
Dynamic Link: https://stackoverflow.com/Muhaddis which is actually 404

Expected behavior
Instead of asking for username, we should ask for Stackoverflow profile ID.

Example: My Stackoverflow profile ID is 9773113. So the expected Dynamic link would be https://stackoverflow.com/users/9773113/ which automatically redirects to my profile.

I'll be happy to make a PR once triage.

All the Dev icons are not loading

github-profile-readme-generator/src/constants/skills.js

Lines 9 to 17 in 57e09b4

	const icons = {
	vuejs: 'https://konpa.github.io/devicon/devicon.git/icons/vuejs/vuejs-original-wordmark.svg',
	react: 'https://konpa.github.io/devicon/devicon.git/icons/react/react-original-wordmark.svg',
	angularjs: 'https://konpa.github.io/devicon/devicon.git/icons/angularjs/angularjs-original.svg',
	aws: 'https://konpa.github.io/devicon/devicon.git/icons/amazonwebservices/amazonwebservices-original-wordmark.svg',
	android: 'https://konpa.github.io/devicon/devicon.git/icons/android/android-original-wordmark.svg',
	backbonejs: 'https://konpa.github.io/devicon/devicon.git/icons/backbonejs/backbonejs-original-wordmark.svg',
	bootstrap: 'https://konpa.github.io/devicon/devicon.git/icons/bootstrap/bootstrap-plain.svg',
	c: 'https://konpa.github.io/devicon/devicon.git/icons/c/c-original.svg',

Devicon repo had recently transferred their repository to a separate organisation, so all the konpa.github.io/* would have to be changed to devicons.github.io/* like here

Discuss how to use gifs in the tool

Things to brainstorm

• UI/UX
• gif resources

Please get the issue assigned to you before start working

I've seen that so many developers creating pull requests without even getting assigned.
I request you to follow the steps before start working on the issues

1. Put a comment like "Please assign this issue to me"
2. Wait to get it assigned to you.
3. Start working
4. Create a Pull Request mentioning the issue.

It will be easier to keep track of the contributions.

Thanks 🙇

Dark Theme Compatibility

github stats , language card and social icons should adapt to dark theme

There are third party chrome Extensions by which github changes to dark theme.
other components like name and bullet points are automatically adapted to that dark theme

It would be great if this works with card and social icons too
below attached is the screenshot for the refrence

add cli

Is your feature request related to a problem? Please describe.

add a cli so i don't need to fill in the web-form

Describe the solution you'd like

extract the generating part into an node package, then i would like to store the data in a config-file and then run a node script to convert it

Describe alternatives you've considered
i am not looked for other gererators

Additional context
Add any other context or screenshots about the feature request here.

Add Placeholder text for Socials

• Add Placeholder texts for all the social links.

BTW, Awesome Work!

[Addition of new skills - Under existing categories]

Hello 👋,
Want to add some skills like Hugo(under static site), CanvasJS(Data Visualization).

and all are in SVG format itself.

Ready with name + icons.
@utsav00 also wants to contribute more skills.

download error

Describe the bug
The error occurs when the preview option is checked, when clicking on 'download' we do not get any answer, however when clicking on markdown it is possible to download.

To Reproduce
Steps to reproduce the behavior:
-After clicking "generate readme"

1. Click on 'preview button'
2. Click on 'download button'

Desktop:

• OS: [ubuntu]
• Browser [chrome]

Add more Github Stats options for user to choose

anuraghazra/github-readme-stats project that provides GitHub Stats Card now widely used in many profile-readme github has 2 more card namely:

• GitHub Extra Repo Pins
• Top Languages Card

So adding this feature request so that user can get an option to add this data in his profile-readme

Solution -
Adding 2 more checkbox option for the user to select whether he wants to add these functionalities:

• If user selects Top Languages Card:

    const GithubTopLanguagesUsed = (props) => {
        let link = "https://github-readme-stats.vercel.app/api/top-langs/?username=" + props.github + "&hide_langs_below=1&layout=compact"
        if (props.show) {
            return (<>{`<p align="center"> <img src="${link}" alt="${props.github}" /> </p>`}<br /><br /></>);
        }
        return '';
    }

<><GithubTopLanguagesUsed show={props.data.githubStats} github={props.social.github} /></>

• If user selects GitHub Extra Repo Pins:
  Add 2 repo links and show them one along side another

    const MostAdmiredRepos = (props) => {
        let html = `
## Most Admired Repos

<a href="https://github.com/${props.github}/${props.repo[0]}">
  <img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=${props.github}&repo=${props.repo[0]}" />
</a>
<a href="https://github.com/${props.github}/${props.repo[1]}">
 <img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=${props.github}&repo=${props.repo[1]}" />
</a>`

        if (props.show) {
            return (<>{`${mostAdmiredRepos}`}<br /><br /></>);
        }
        return '';
    }

<><MostAdmiredRepos show={props.data.githubStats} github={props.social.github} repos={props.github.repos}/></>

Qt and others

Is your feature request related to a problem? Please describe.
That will be great if there had the Qt and other GUI frameworks available in the frontend category.

Describe the solution you'd like
Add Qt, wxWidgets and GTK icons within the frontend category

Add Datastructures and algorithms under skills

Add problem solving skills category
and also add social links of hackerrank, leetcode, spoj, codechef etc.

display dynamic counts with star and fork button in header

These buttons in the header should display their respective dynamic counts

Icon size issue in mobile view

Describe the bug
Icons appear too big in mobile view of the profile

To Reproduce
Steps to reproduce the behavior:

1. Open any GitHub profile that contains the readme generator
2. Scroll down to skill icons
3. See error

Expected behavior
All icons selected by user in his/her readme while specifying their skillset should be visible.

Smartphone (please complete the following information):

• Device: Realme XT
• Github App
• Version 1.2.11

Screenshots

change copy icon with tick icon(✔️) on copy-markdown success

Replace the above copy icon with check(✔️) icon on click of copy-markdown

Icon to be used: Check Icon

GitHub Highlight Badges Integration

Maybe consider integrating the GitHub user badges like the Arctic Code Vault Contribution badge or the Pro badge.

add feature to customize the github-stats card

Please see the README for reference https://github.com/anuraghazra/github-readme-stats

github-readme-stats option hides HTML language automatically

I noticed that when you use the "Top Languages" card from the github-readme-stats repository the HTML language gets automatically hidden, which I think it shouldn't.
I think the default "Top Languages" card should be generated with the default settings (https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra).
I've read about having a system to customize the card, which will let you hide any language if you want; but still, in my opinion, the card should be the default (before the customization).

Have a great day 🖖.

Add a blank line after <h3> tag

The output of the generator needs to put a blank line between the subtitle and the first Work entry ("I'm currently working on.") Otherwise, the links in the first Work entry will not work; you'll just see them displayed as raw Markdown. (In Github markdown you have to have a blank line between HTML and Markdown, or the Markdown won't be interpreted.)

integrate GitHub Profile Trophy in addons

I have developed GitHub Profile Trophy.

https://github.com/ryo-ma/github-profile-trophy

Can you integrate into the functionality in the same like as Github readme stats?

save data in config file and load data

Is your feature request related to a problem? Please describe.

When i visit the page a second time have to enter the data again. saving the data in a file would be nice.

Describe the solution you'd like
add a save config and load config to the website

Describe alternatives you've considered
n/a

Additional context

🤟 Thank you!

This is absolutely fantastic and has saved me a few hours today!

Add categories in skills

Is your feature request related to a problem? Please describe.
As the skill list keeps growing, it makes sense to categorise the skills

Describe the solution you'd like
Categories based on Utility.
Frontend, Backend, Frameworks(could be clubbed with f/e or b/e), Databases, Tools(eg: Git, Meld, Postman), Testing
Describe alternatives you've considered
Add custom-order for listed skills. The order of listing the skills is another option where the proficiency in skills decrease as we reach the end of the list.