Home

Awesome

<p align="center"> <img align="center" width="20%" src="assets/uiScreen.gif" alt="logo"/> <h2 align="center">Github Readme Quotes: Dynamic quote generator for your GitHub readmes</h2> </p>

banner

alt PRs Welcome Open Source? Yes! GitHub contributors Pull Request Counts last commit deployment-status Build Status <a href="https://discord.gg/2nN2VqwNaK"> <img align="center" src="https://img.shields.io/discord/779439447736451132?label=discord-server&style=flat-square" /> </a>

<br><br>

Current status


<div> <img align="center" src="assets/ThankYouVercel.png" alt="Shoutout to Vercel"> <p align="center">Big shoutout to Vercel for their amazing hosting service! <a href="https://github.com/vercel"> @vercel </a></p> </div> <p align="center"> <h1 align="center"> Featuring on <a href="https://www.producthunt.com/posts/dynamic-github-profile-readme-quotes?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-dynamic-github-profile-readme-quotes" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=276934&theme=light" alt="Dynamic GitHub Profile Readme Quotes - Everlasting Poetic Touch to GitHub Profiles for everyone | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" align="center"/></a> </h1> </p> <p align="center"> <a href='https://ko-fi.com/V7V1PFDPE' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi2.png?v=3' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a> </p> <p align="center"> <b><i> Inspired by <a href="https://github.com/anuraghazra"> @anuraghazra </a> </i></b> </p>
<br>

Use User Interface, to view designed quotes and copy link and paste it directly

<img src="./assets/uiScreen.gif" width=100% align="center"/>

Features

Sl NoFeature NameDescription
1Dynamic QuotesDifferent quotes every time its rendered for GitHub Profile Readme
2Colorful ThemesVarious colorful themes available for cards
3Design LayoutsDifferent Layout design cards are available
4AnimationAnimations available for quote cards
5Custom Quotes from GitHub GistsYou can add custom quotes of your own or own choice from GitHub Gists json files
6Quotes based on CategoryDifferent category based quotes are available

<p align="center"> Note: To read an article on this project, please refer: <a href = "https://dev.to/imshravan/github-profile-readme-animated-dynamic-quote-generator-4le6"><i>GitHub Profile README : Animated Dynamic Quote Generator</i></a> </p>

Github Readme Quotes

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

![Quote](https://github-readme-quotes-bay.vercel.app/quote)
<!-- Scrnshot of quote in default mode --> <p align="center"> <img src="https://github-readme-quotes-bay.vercel.app/quote"/> </p>

<br><hr>

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-bay.vercel.app/quote?theme=dark)
<!-- Scrnshot of quote in dark theme -->

Available Themes

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

Dark

Quote

Light Theme

Quote

<!-- Scrnshot of quote in different themes -->

You can explore different themes here.

<b>Feel free to contribute different themes.</b>


You can also change the layout of your templates.

Use ?layout=LAYOUT parameter as shown below

![Quote](https://github-readme-quotes-bay.vercel.app/quote?theme=dark&layout=socrates)

Layout 1 (Default)

Quote

Layout 2 (Socrates)

Quote

<!-- Scrnshot of quote in particular layout -->

You can explore different layouts here.

<b>Feel free to contribute different layouts.</b>


You can also add fonts to your templates.

Use ?font=FONT_NAME parameter as shown below

![Quote](https://github-readme-quotes-bay.vercel.app/quote?font=Redressed)

Font 1 (Default)

Quote

Font 2 (Redressed)

Quote

<!-- Scrnshot of quote in different fonts -->

You can explore different fonts here.

<b>Feel free to contribute different fonts.</b>


You can also add animations to your templates.

Use ?animation=ANIMATION paramater as shown below

![Quote](https://github-readme-quotes-bay.vercel.app/quote?theme=dark&animation=grow_out_in)
<!-- Gif of quote in animation -->

Animation 1

Quote

You can explore different animations here.


You can also provide a file with the list of quotes and a random quote will be generated for you.

Follow the steps to provide your own custom quotes

Quote


You can also provide a category to fetch the list of quotes based on certain category and a random quote will be generated for you based on category you specify.

Available Categories

generallifesuccessmotivational
funprogrammingdreamfailure
gamingbirthdayHumorousTravel

Quote

<b>Feel free to contribute different quotes to different categories.</b>

Follow the steps to add quotes to category


You can customize the border color of your templates. Please note that this feature is available only with the Default layout.

Use ?borderColor=COLOR paramater as shown below

![Quote](https://github-readme-quotes-bay.vercel.app/quote?borderColor=green)

Quote


Swagger Docs

To view Swagger docs, run npm start and open localhost:3002/api-docs.


<div> <h5><img src="https://user-images.githubusercontent.com/18126719/56791599-0868f980-683a-11e9-8a8b-134ced040c8e.png" width="30"> <em>Huge Shoutout to all the Star-Gazers</em></h5> <a href="https://github.com/shravan20/github-readme-quotes/stargazers"> <img src="https://bytecrank.com/nastyox/reporoster/php/stargazersSVG.php?user=shravan20&repo=github-readme-quotes" alt="Stargazers repo roster for @shravan20/github-readme-quotes"> </a> </div> <hr> <div> <h5><img src="https://ghost.org/images/docs/setup/fork.gif" width="30"> <em>Huge Shoutout to all the Forkers</em></h5> <a href="https://github.com/shravan20/github-readme-quotes/network/members"> <img src="https://bytecrank.com/nastyox/reporoster/php/forkersSVG.php?user=shravan20&repo=github-readme-quotes" alt="Forkers repo roster for @shravan20/github-readme-quotes"> </a> </div>