DEV Community

Cover image for Some useful resources for GitHub readme
Arnab Dey
Arnab Dey

Posted on

Some useful resources for GitHub readme

This is a curated list of resources that will help you to make your GitHub more beautiful or professional looking.

Icons

Using icons in your readme makes it more visually appealing for your viewer. Finding icons can be hard, Simple-icons provide more than a thousand SVG icons.

Like this dev.to icon

GitHub logo simple-icons / simple-icons

SVG icons for popular brands

Simple Icons

Simple Icons

Over 1000 Free SVG icons for popular brands. See them all on one page at SimpleIcons.org. Contributions, corrections & requests can be made on GitHub. Started by Dan Leech.

Usage

General Usage

Icons can be downloaded as SVGs directly from our website - simply click the icon you want, and the download should start automatically.

CDN Usage

Icons can be served from a CDN such as JSDelivr or Unpkg. Simply use the simple-icons npm package and specify a version in the URL like the following:

<img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/[ICON NAME].svg" /&gt
<img height="32" width="32" src="https://unpkg.com/simple-icons@v3/icons/[ICON NAME].svg" />

Where [ICON NAME] is replaced by the icon name, for example:

<img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/simpleicons.svg" /&gt
<img

Badges

shields.io provides an easy way to create and customize badges. They have a lot of different types of badges ready to use.

Like this one: Twitter URL

GitHub logo badges / shields

Concise, consistent, and legible badges in SVG and raster format

build status service-test status coverage Total alerts commits to be deployed chat on Discord follow on Twitter

This is home to Shields.io, a service for concise, consistent and legible badges in SVG and raster format, which can easily be included in GitHub readmes or any other web page. The service supports dozens of continuous integration services, package registries, distributions, app stores, social networks, code coverage services, and code analysis services Every month it serves over 470 million images.

This repo hosts:

Examples

  • code coverage percentage: coverage
  • stable release version: version
  • package manager release: gem
  • status of third-party dependencies: dependencies
  • static code analysis grade: codacy
  • SemVer version observance: semver
  • amount of Liberapay donations per week: receives
  • Python package downloads: downloads
  • Chrome Web Store extension rating: rating
  • Uptime Robot percentage: uptime

Make your own badges! (Quick example: https://img.shields.io/badge/left-right-f39f37)

Quickstart

Browse a complete list of badges and locate a particular badge by using the search bar or by browsing the…

GitHub profile readme generator

Recently GitHub introduced a new feature call profile readme. You can use the GitHub profile readme to introduce yourself to your viewers. Rahul Jain made a tool that will help you to generate readme in seconds.

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 join discord community of github profile readme generator

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

🌟

Collection of awesome GitHub readme

Check out the repo below for a list of awesome GitHub readme.

Enjoy coding!
Don't forget to check out my GitHub for more

Hi there, I'm Arnab. website 👋

arnabadeypolimi

I'm a computer science engineer!

  • 🔭 I’m currently working on Gesture recognition!
  • 🌱 I’m currently learning advance computer vision.
  • 👯 I’m looking to collaborate with other developers.
  • 🥅 2020 Goals: Contribute more to Open Source projects
  • Fun fact: I love to draw and take pictures.

Connect with me:

arnabdey.co arnabdey0503 | YouTube arnabdey0503 | Twitter arnabdey0503 | LinkedIn arnabdey0503 | Instagram


Languages and Tools:

Python Jupyter C++ Docker Tensorflow Pytorch JavaScript Matlab Android Pandas PyCharm




📺 Latest YouTube Videos


📕 Latest Blog Posts


📜 Certificates


arnabdeypolimi's Github Stats

Top Langs




Top comments (4)

Collapse
 
shravan20 profile image
Shravan Kumar B

Hi, do check this project, to beautify your profile readme. Star it, if you like it.

GitHub Dynamic Animated Quote Generator

GitHub logo shravan20 / github-readme-quotes

Dynamic quote generator for your GitHub readmes

github-readme-quotes

Dynamic quote generator for your GitHub readmes

banner

alt PRs Welcome Open Source? Yes! GitHub contributors Pull Request Counts last commit deployment-status community chat

Github Readme Quotes

Copy and paste the following markdown content to display the quote.

![Quote](https://github-readme-quotes.herokuapp.com/quote)
Enter fullscreen mode Exit fullscreen mode

Themes

You can display your quote in different themes without any manual customization.

Use ?theme=THEME_NAME parameter as shown below.

![Quote](https://github-readme-quotes.herokuapp.com/quote?theme=dark)
Enter fullscreen mode Exit fullscreen mode

Available Themes

dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula

Gotham

Quote

Dark

Quote

Light Theme

Quote

You can explore different themes here.

Feel free to contribute different themes.

Layouts

You can also change the layout of your templates.

Use ?layout=LAYOUT parameter as shown below

![Quote](https://github-readme-quotes.herokuapp.com/quote?theme=dark&layout=socrates)
Enter fullscreen mode Exit fullscreen mode

Layout 1 (Default)

Quote

Layout 2 (Socrates)

Quote

You can explore different layouts here.

Feel free to contribute different layouts.

Animations

You can also add animations to your templates.

Use ?animation=ANIMATION paramater as shown below

![Quote](https://github-readme-quotes.herokuapp.com/quote?theme=dark&animation=grow_out_in)
Enter fullscreen mode Exit fullscreen mode

Animation 1

Quote

You can explore different animations…

Collapse
 
vikash2806 profile image
vikash2806

Great article! Thanks for sharing 👏

Do checkout this profile: github.com/VikashPR

Image description

Collapse
 
redhcp profile image
redhcp

my README profile example - github.com/redhcp :)

Collapse
 
konradlinkowski profile image
Konrad Linkowski

Wow that helps a lot. I've made my own article about readmes, but your is probably better