├── .eslintrc.json ├── .github ├── FUNDING.yml └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── .gitignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── components ├── Animation.js ├── NavBar.js ├── broadcast │ └── Broadcast.js ├── crisp.js ├── elements │ ├── AnimatedText.js │ ├── CheckBox.js │ ├── FeedbackButton.js │ ├── Footer.js │ ├── Pagination.js │ ├── SVG.js │ ├── ScrollToTop.js │ ├── anchor │ │ └── AnchorWithSVG.js │ ├── buttons │ │ ├── BadgeSelect.js │ │ ├── ButtonWithSVG.js │ │ ├── FilterButton.js │ │ └── NextButton.js │ ├── textinput │ │ ├── TextInput.js │ │ ├── TextInputWithIcon.js │ │ └── TextInputWithImage.js │ └── toaster │ │ ├── ToastError.js │ │ └── ToastSuccess.js ├── home-components │ ├── Credits.js │ ├── FAQ.js │ ├── Features.js │ ├── GitHubAvailability.js │ └── SocialLinks.js ├── mobx │ ├── GPRMcontext.js │ └── gprmStore.js ├── slides │ ├── AboutMe.js │ ├── Donate.js │ ├── Extras.js │ ├── GitHubCards.js │ ├── HomePage.js │ ├── Preview.js │ ├── Socials.js │ └── TechStack.js └── techstack │ └── TechBadgesWrapper.js ├── config └── firebase.js ├── data ├── tech.js └── themes.js ├── next.config.js ├── package-lock.json ├── package.json ├── pages ├── _app.js ├── api │ └── hello.js └── index.js ├── postcss.config.js ├── public ├── bmc.svg ├── donate.svg ├── girlonpc.svg ├── happy.svg ├── hpill.svg ├── kofi.svg ├── logo.png ├── patreon.svg ├── paypal.svg ├── settings.svg ├── socials.svg ├── spinner.svg └── webimg.png ├── styles ├── animation.css ├── globals.css ├── markdown.css ├── scrollbar.css └── toastvg.css ├── tailwind.config.js └── utils └── searchFilter.js /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | custom: # ['https://www.buymeacoffee.com/VishwaGauravIn'] 4 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | 36 | # util for testing 37 | /data/update.js -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | - Demonstrating empathy and kindness toward other people 21 | - Being respectful of differing opinions, viewpoints, and experiences 22 | - Giving and gracefully accepting constructive feedback 23 | - Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | - Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | - The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | - Trolling, insulting or derogatory comments, and personal or political attacks 33 | - Public or private harassment 34 | - Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | - Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | . 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # CONTRIBUTION GUIDE 2 | 3 | [1. Branch Organization](https://github.com/VishwaGauravIn/github-profile-readme-maker/blob/master/CONTRIBUTING.md#branch-organization) | [2. Prerequisites](https://github.com/VishwaGauravIn/github-profile-readme-maker/blob/master/CONTRIBUTING.md#prerequisites) | [3. Report Bugs](https://github.com/VishwaGauravIn/github-profile-readme-maker/blob/master/CONTRIBUTING.md#how-to-report-bugs) | [4. Non-Coding Contribution](https://github.com/VishwaGauravIn/github-profile-readme-maker/blob/master/CONTRIBUTING.md#non-coding-contribution) 4 | 5 | ### Branch Organization 6 | 7 | Submit all changes directly to the main branch. We don’t use separate branches for development or for upcoming releases. We do our best to keep the main branch in good shape, with all tests passing. 8 | 9 | Code that lands in the main branch must be compatible with the latest stable release. It may contain additional features, but no breaking changes. We should be able to release a new minor version from the tip of the main branch at any time. 10 | 11 | ### Prerequisites 12 | 13 | - You have Node installed at v8.0.0+ and Yarn at v1.2.0+. 14 | - You have JDK installed. 15 | - You have GCC installed or are comfortable installing a compiler if needed. Some of our dependencies may require a compilation step. On OS X, the Xcode Command Line Tools will cover this. On Ubuntu, `apt-get install build-essential` will install the required packages. Similar commands should work on other Linux distros. Windows will require some additional steps; see the node-gyp installation instructions for details. 16 | - You are familiar with Git. 17 | 18 | ### How to Report Bugs 19 | 20 | To report bugs, you should create an issue and describe the bug properly. You can also suggest a way to fix it if you know how. You should mention your device details (if possible) so that we can find the fix faster. 21 | 22 | ### Non-Coding Contribution 23 | 24 | Your contribution is valuable to us, and there are various ways to contribute to this project if you are not from a coding background, such as: 25 | 26 | - You can help us improve our design. 27 | - You can create documentation for this project. 28 | - You can help us in the marketing department. 29 | - You can even edit this file. 30 | 31 | Basically, if you want to contribute, there are infinite ways to do so. 32 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 |


GPRM : GitHub Profile ReadMe Maker

3 | 4 | 5 | 6 | 7 | 8 |
9 |
10 | 11 | ![screencapture-gprm-itsvg-in-2022-06-20-23_26_35](https://user-images.githubusercontent.com/81325730/174656518-bfb20479-6b5c-4947-8a5c-f709f35ed345.png) 12 | 13 | # Features 14 | We've got everything that you need! Create your perfect GitHub Profile ReadMe in the best possible way. Lots of features and tools included, all for free! 15 | 16 | ### ⚡ Lightning Fast Profile Creation 17 | Create your Profile ReadMe in just a few clicks! On average, it takes less than one minute to create a perfect Profile ReadMe using GPRM. 18 | 19 | ### 📊 Flex Your GitHub Stats 20 | Let's be honest, everyone loves to flex their achievements. With tools such as ReadMe Stats, Most Used Languages, and Streak Stats, you can show off your achievements. 21 | 22 | ### 👥 Visitors Counter 23 | With the use of a Visitors Counter, you can see how many people have viewed your profile. This gives you an idea of how popular you are on GitHub. 24 | 25 | ### 🌐 Add All Social Links 26 | We have added an option to add your Social Links to increase your reach and promote your work all in one place. 27 | 28 | ### 💻 Show Your Tech Stack 29 | Select from over 300+ tech options and showcase your tech stack to everyone. Let them know what makes you awesome. 30 | 31 | ### 💰 Let People Help You With Donations 32 | No matter what your aim is, money is required at some point to boost your progress towards achieving it. We give you an option to add Donation Links directly to your profile so that people can support you financially. 33 | 34 | ### 😃 Fun Components 35 | Fun is needed everywhere, so why not include it in your profile? Now, you can cheer up others by adding random memes and quotes to your profile. 36 | 37 | ### 🏆 GitHub Trophies 38 | Got any trophies/medals but don't know how to display them on your profile? Don't worry! GitHub Trophies are the virtual trophies for you. Showcase them by adding them to your profile. 39 | 40 | ## 🤔 Wondering how you can use it? 41 | You can copy the generated ReadMe and paste it into your GitHub ReadMe file directly, or you can also download the markdown (`README.md`) file and just add it to your GitHub repo. 42 | 43 | ## Our Social Links 44 | [![X](https://img.shields.io/badge/X-black.svg?style=normal&logo=X&logoColor=white)](https://x.com/VishwaGauravIn) 45 | [![LinkedIn](https://img.shields.io/badge/linkedin-%230077B5.svg?style=normal&logo=linkedin&logoColor=white)](https://linkedin.com/in/VishwaGauravIn) 46 | 47 | ## PageSpeed Insights 48 | ![](https://raw.githubusercontent.com/VishwaGauravIn/Images/f13849bc9989d66c67085313dd606ea978eff0f8/psi-gprm.svg) 49 | 50 | ## Tech Used 51 | ![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white) 52 | ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) 53 | ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) 54 | ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) 55 | ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) 56 | ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) 57 | ![Firebase](https://img.shields.io/badge/firebase-%23039BE5.svg?style=for-the-badge&logo=firebase) 58 | ![Vercel](https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge&logo=vercel&logoColor=white) 59 | 60 | [![image](https://user-images.githubusercontent.com/81325730/209995550-63bdb319-f8fd-4383-bcfc-9021c4bc5642.png)](https://vercel.com/?utm_source=team_vishwagauravin&utm_campaign=oss) 61 | 62 |
63 | 64 | NextJS Guide 65 | 66 | 67 | ## Getting Started 68 | 69 | First, run the development server: 70 | 71 | ```bash 72 | npm run dev 73 | # or 74 | yarn dev 75 | ``` 76 | 77 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 78 | 79 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 80 | 81 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. 82 | 83 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 84 | 85 | ## Learn More 86 | 87 | To learn more about Next.js, take a look at the following resources: 88 | 89 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 90 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 91 | 92 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 93 | 94 | ## Deploy on Vercel 95 | 96 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 97 | 98 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 99 | 100 |
101 | -------------------------------------------------------------------------------- /components/Animation.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function Animation() { 4 | return
; 5 | } 6 | -------------------------------------------------------------------------------- /components/NavBar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BUY_ME_A_COFFEE_SVG } from "./elements/SVG"; 3 | 4 | export default function NavBar() { 5 | return ( 6 |
7 | 8 |

GPRM

9 | 15 | 16 | Support us 17 | 18 |
19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /components/broadcast/Broadcast.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | import React, { useEffect, useState } from "react"; 3 | 4 | export default function Broadcast() { 5 | const [isVisible, setIsVisible] = useState(false); 6 | const [title, setTitle] = useState(""); 7 | const [link, setLink] = useState(""); 8 | useEffect(() => { 9 | axios.get("https://itsvg.in/api/broadcast").then((res) => { 10 | if (res.data.title) { 11 | setTitle(res.data.title); 12 | setLink(res.data.link); 13 | setIsVisible(true); 14 | setTimeout(() => { 15 | setIsVisible(false); 16 | }, 15000); 17 | } 18 | }); 19 | }, []); 20 | return ( 21 | <> 22 | {isVisible && ( 23 |
24 |
25 | 26 | {title} 27 | 28 |
29 |
30 | )} 31 | 32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /components/crisp.js: -------------------------------------------------------------------------------- 1 | { 2 | /* Disabled due to spam */ 3 | } 4 | 5 | // import React, { Component } from "react"; 6 | // import dynamic from "next/dynamic"; 7 | 8 | // import { Crisp } from "crisp-sdk-web"; 9 | 10 | // const CrispWithNoSSR = dynamic(() => import("../components/crisp"), { 11 | // ssr: false, 12 | // }); 13 | 14 | // class CrispChat extends Component { 15 | // componentDidMount() { 16 | // Crisp.configure("a5e53b55-a08e-4ebe-bd54-14aff455962b"); 17 | // } 18 | 19 | // render() { 20 | // return null; 21 | // } 22 | // } 23 | // export default CrispChat; 24 | 25 | // // open crisp chat 26 | // export const openCrispChat = () => { 27 | // Crisp.chat.open(); 28 | // }; 29 | 30 | // export function CrispBanner() { 31 | // const bannerAnimation = { 32 | // backgroundImage: 33 | // "linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5)", 34 | // backgroundSize: "600%", 35 | // WebkitAnimation: "anime 16s linear infinite", 36 | // animation: "anime 16s linear infinite", 37 | // }; 38 | 39 | // const bannerWrapperAnimation = { 40 | // animation: "appear 5s ease-in-out", 41 | // overflow: "hidden", 42 | // width: "100%", 43 | // }; 44 | 45 | // const buttonStyles = { 46 | // color: "white", 47 | // fontSize: "1rem", // Use a single fontSize property 48 | // transition: "all 0.2s ease-in-out", 49 | // letterSpacing: "0.05em", 50 | // fontWeight: 500, 51 | // outline: "none", 52 | // overflow: "hidden", 53 | // display: "flex", 54 | // height: "40px", 55 | // justifyContent: "center", 56 | // alignItems: "center", 57 | // width: "100%", 58 | // }; 59 | 60 | // return ( 61 | // <> 62 | //
63 | //
64 | // 67 | //
68 | //
69 | // 70 | 71 | // 96 | // 97 | // ); 98 | // } 99 | 100 | import React from "react"; 101 | // import dynamic from "next/dynamic"; 102 | 103 | // import { Crisp } from "crisp-sdk-web"; 104 | 105 | // const CrispWithNoSSR = dynamic(() => import("../components/crisp"), { 106 | // ssr: false, 107 | // }); 108 | 109 | // class CrispChat extends Component { 110 | // componentDidMount() { 111 | // Crisp.configure("a5e53b55-a08e-4ebe-bd54-14aff455962b"); 112 | // } 113 | 114 | // render() { 115 | // return null; 116 | // } 117 | // } 118 | // export default CrispChat; 119 | 120 | // // open crisp chat 121 | // export const openCrispChat = () => { 122 | // Crisp.chat.open(); 123 | // }; 124 | 125 | export function CrispBanner() { 126 | const bannerAnimation = { 127 | backgroundImage: 128 | "linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5)", 129 | backgroundSize: "600%", 130 | WebkitAnimation: "anime 16s linear infinite", 131 | animation: "anime 16s linear infinite", 132 | }; 133 | 134 | const bannerWrapperAnimation = { 135 | animation: "appear 5s ease-in-out", 136 | overflow: "hidden", 137 | width: "100%", 138 | }; 139 | 140 | const buttonStyles = { 141 | color: "white", 142 | transition: "all 0.2s ease-in-out", 143 | letterSpacing: "0.05em", 144 | fontWeight: 500, 145 | outline: "none", 146 | overflow: "hidden", 147 | display: "flex", 148 | height: "40px", 149 | justifyContent: "center", 150 | alignItems: "center", 151 | width: "100%", 152 | }; 153 | 154 | return ( 155 | <> 156 |
157 |
158 | 163 | Want a crazy good website? Let's Discuss! 164 | 165 |
166 |
167 | {/* */} 168 | 169 | 194 | 195 | ); 196 | } 197 | -------------------------------------------------------------------------------- /components/elements/AnimatedText.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import TextLoop from "react-text-loop/lib/components/TextLoop"; 3 | 4 | export default function AnimatedText() { 5 | return ( 6 |
7 | Create{" "} 8 | 9 | 10 | Beautiful 11 | 12 | 13 | Modern 14 | 15 | 16 | Interactive 17 | 18 | 19 | Perfect 20 | 21 | {" "} 22 | Profile 23 |
24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /components/elements/CheckBox.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useGPRMStore } from "../mobx/GPRMcontext"; 3 | 4 | export default function CheckBox({ id, title }) { 5 | const gprmStore = useGPRMStore(); 6 | function chk() { 7 | gprmStore.data.checkbox[id] = document.getElementById(id).checked; 8 | } 9 | return ( 10 |

11 | 19 | {title} 20 |

21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /components/elements/FeedbackButton.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function FeedbackButton() { 4 | return ( 5 | 9 | Feedback 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /components/elements/Footer.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { GITHUB_SVG, INSTAGRAM_SVG, LINKEDIN_SVG, X_SVG } from "./SVG"; 3 | 4 | export default function Footer() { 5 | return ( 6 |
7 |
8 | {/* X */} 9 | 15 | 16 | 17 | {/* GitHub */} 18 | 24 | 25 | 26 | {/* LinkedIn */} 27 | 33 | 34 | 35 | {/* Instagram */} 36 | 42 | 43 | 44 |
45 | {/* mail to */} 46 |
47 | 52 | 60 | 65 | 66 | itsvgin@gmail.com 67 | 68 |
69 |
70 | 76 | {""} & Crafted with 💛 Vishwa Gaurav 77 | 78 |
79 |
80 | ); 81 | } 82 | -------------------------------------------------------------------------------- /components/elements/Pagination.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function Pagination({ val }) { 4 | return ( 5 |
6 | {val} / 6 7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /components/elements/SVG.js: -------------------------------------------------------------------------------- 1 | export const BUY_ME_A_COFFEE_SVG = () => { 2 | return ( 3 | 9 | 13 | 17 | 21 | 25 | 29 | 33 | 37 | 41 | 45 | 49 | 53 | 57 | 61 | 65 | 66 | ); 67 | }; 68 | 69 | export const RIGHT_ARROW_SVG = () => { 70 | return ( 71 | 78 | 84 | 85 | ); 86 | }; 87 | 88 | export const GITHUB_LOGO_LARGE_SVG = () => { 89 | return ( 90 | 96 | 97 | 98 | ); 99 | }; 100 | 101 | export const X_SVG = ({ size }) => { 102 | return ( 103 | 109 | 110 | 111 | ); 112 | }; 113 | 114 | export const GITHUB_SVG = ({ size }) => { 115 | return ( 116 | 122 | 123 | 124 | ); 125 | }; 126 | 127 | export const LINKEDIN_SVG = ({ size }) => { 128 | return ( 129 | 135 | 136 | 137 | ); 138 | }; 139 | 140 | export const INSTAGRAM_SVG = ({ size }) => { 141 | return ( 142 | 148 | 149 | 150 | ); 151 | }; 152 | -------------------------------------------------------------------------------- /components/elements/ScrollToTop.js: -------------------------------------------------------------------------------- 1 | import { ArrowUpIcon } from "@heroicons/react/outline"; 2 | import React from "react"; 3 | 4 | export default function ScrollToTop() { 5 | // When the user clicks on the button, scroll to the top of the document 6 | // Smooth Varient 7 | function topFunction() { 8 | window.scroll({ 9 | top: 0, 10 | left: 0, 11 | behavior: "smooth", 12 | }); 13 | } 14 | return ( 15 |
16 | 22 |
23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /components/elements/anchor/AnchorWithSVG.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function AnchorWithSVG({ url, title, d }) { 4 | return ( 5 | 11 | {title}  12 | 18 | 19 | 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /components/elements/buttons/BadgeSelect.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { useGPRMStore } from "../../mobx/GPRMcontext"; 3 | 4 | export default function BadgeSelect({ label, url}) { 5 | const gprmStore = useGPRMStore() 6 | const [isAdded, setIsAdded] = useState(gprmStore.data.tech.toString().includes(url)); 7 | function onClickFun() { 8 | if (isAdded) { 9 | setIsAdded(false); 10 | // for() 11 | var badgeIndex = gprmStore.data.tech.indexOf(url); 12 | gprmStore.data.tech.splice(badgeIndex, 1); 13 | // console.log(data); 14 | } else { 15 | setIsAdded(true); 16 | gprmStore.data.tech.push(url); 17 | // console.log(data); 18 | } 19 | } 20 | return ( 21 | <> 22 | {isAdded ? ( 23 |
27 |

{label}

28 |
29 |

30 | 37 | 43 | 44 |

45 |
46 | ) : ( 47 |
51 |

{label}

52 |
53 |

54 | 61 | 67 | 68 |

69 |
70 | )} 71 | 72 | ); 73 | } 74 | 75 | // Template: 76 | -------------------------------------------------------------------------------- /components/elements/buttons/ButtonWithSVG.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function ButtonWithSVG({ title, d, onClick }) { 4 | return ( 5 | 25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /components/elements/buttons/FilterButton.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function FilterButton({ title, onClick, chk }) { 4 | return ( 5 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /components/elements/buttons/NextButton.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function NextButton({ onClick }) { 4 | // When the user clicks on the button, scroll to the top of the document 5 | function topFunction() { 6 | document.body.scrollTop = 0; // For Safari 7 | document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera 8 | } 9 | return ( 10 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /components/elements/textinput/TextInput.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function TextInput() { 4 | return
; 5 | } 6 | -------------------------------------------------------------------------------- /components/elements/textinput/TextInputWithIcon.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import { useGPRMStore } from "../../mobx/GPRMcontext"; 3 | 4 | export default function TextInputWithIcon({ 5 | id, 6 | children, 7 | placeholder, 8 | viewBox = "-0.5 0 20 16", 9 | }) { 10 | const gprmStore = useGPRMStore(); 11 | const [input, setInput] = useState(gprmStore.data.socials[id]); 12 | useEffect(() => { 13 | gprmStore.data.socials[id] = input; 14 | }, [input]); 15 | return ( 16 |
17 | setInput(e.target.value)} 22 | placeholder={placeholder} 23 | className="w-full h-16 p-4 border-b-2 bg-transparent outline-none border-green-300 focus:border-green-200 focus:z-10" 24 | /> 25 | 26 | 40 |
41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /components/elements/textinput/TextInputWithImage.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import { useGPRMStore } from "../../mobx/GPRMcontext"; 3 | 4 | export default function TextInputWithImage({ id, imgUrl, placeholder }) { 5 | const gprmStore = useGPRMStore(); 6 | const [input, setInput] = useState(gprmStore.data.donate[id]); 7 | useEffect(() => { 8 | gprmStore.data.donate[id] = input; 9 | }, [input]); 10 | return ( 11 |
12 | setInput(e.target.value)} 18 | className="w-full h-16 p-4 border-b-2 bg-transparent outline-none border-green-300 focus:border-green-200 focus:z-10" 19 | /> 20 | 21 | 29 |
30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /components/elements/toaster/ToastError.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function ToastError({ title }) { 4 | return ( 5 |
6 | 13 | 19 | 20 | {title} 21 |
22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /components/elements/toaster/ToastSuccess.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function ToastSuccess({ title }) { 4 | return ( 5 |
6 | 13 | 19 | 20 | {title} 21 |
22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /components/home-components/Credits.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function Credits() { 4 | const cc = [ 5 | { 6 | avatar: "https://avatars.githubusercontent.com/u/81325730?v=4", 7 | name: "Vishwa Gaurav", 8 | creditfor: "Visit Count Pro", 9 | }, 10 | { 11 | avatar: "https://avatars.githubusercontent.com/u/35374649?v=4", 12 | name: "Anurag Hazra", 13 | creditfor: "GitHub ReadMe Stats", 14 | }, 15 | { 16 | avatar: "https://avatars.githubusercontent.com/u/20955511?v=4", 17 | name: "Jonah Lawrence", 18 | creditfor: "GitHub ReadMe Streaks", 19 | }, 20 | { 21 | avatar: "https://avatars.githubusercontent.com/u/81325730?v=4", 22 | name: "Vishwa Gaurav", 23 | creditfor: "Random Memes", 24 | }, 25 | { 26 | avatar: "https://avatars.githubusercontent.com/u/6661165?v=4", 27 | name: "Ryota Sakamoto", 28 | creditfor: "GitHub Profile Trophies", 29 | }, 30 | { 31 | avatar: "https://avatars.githubusercontent.com/u/32237558?v=4", 32 | name: "Piyush Suthar", 33 | creditfor: "GitHub ReadMe Quotes", 34 | }, 35 | ]; 36 | return ( 37 |
38 |

Credits

39 |

40 | We believe in giving credit where it's due. To all the OG creators, 41 | we see you and #thank you for creating these awesome tools! 42 |

43 |
44 |
45 | {/* Card */} 46 | {cc.map((cc, index) => ( 47 |
51 | 56 |

{cc.name}

57 |

{cc.creditfor}

58 |
59 | ))} 60 |
61 |
62 |
63 | ); 64 | } 65 | -------------------------------------------------------------------------------- /components/home-components/FAQ.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function FAQ() { 4 | return ( 5 |
6 |
7 |

8 | Frequently-asked questions 9 |

10 |
11 |
12 |

13 | Do I need to fill all sections ? 14 |

15 |
16 |
17 |

18 | Not at all, only GitHub username is mandatory, all the other 19 | sections are optional. It's all your choice, you can fill 20 | them depending on your requirement, you have all the options for 21 | customisation. 22 |

23 |
24 |
25 |

26 | Do I need to know Markdown or HTML for using this website? 27 |

28 |
29 |
30 |

31 | This is a complete No-Code solution so you don't need any 32 | coding experience. You just have to fill sections and we will 33 | create a perfect GitHub Profile ReadMe for you for free! Sounds 34 | cool? Try now! 35 |

36 |
37 |
38 |

39 | How to change GitHub ReadMe? 40 |

41 |
42 |
43 |

44 | If you already have your personal repository (personal repository 45 | name is same as your GitHub username) then you can copy paste the 46 | code generated from GPRM in your ReadMe file. If you don't 47 | have your personal repository then follow this :
48 | Step 1 : Go to{" "} 49 | 55 | https://github.com/new 56 | {" "} 57 | and enter the same name as your GitHub username into the 58 | Repository name field. 59 |
60 | Step 2 : Leave the repo as a Public repo (by default). 61 |
62 | Step 3 : Also, make sure to initialize it with a README to 63 | get started. 64 |
65 | Step 4 : Paste the code generated from this website inside 66 | your ReadMe file. 67 |
68 | Step 5 : Commit the changes to add a ReadMe to your GitHub 69 | Account. 70 |

71 |
72 |
73 |
74 |
75 | ); 76 | } 77 | -------------------------------------------------------------------------------- /components/home-components/Features.js: -------------------------------------------------------------------------------- 1 | import { 2 | DesktopComputerIcon, 3 | GlobeAltIcon, 4 | LightningBoltIcon, 5 | ChartBarIcon, 6 | UserGroupIcon, 7 | CurrencyDollarIcon, 8 | EmojiHappyIcon, 9 | FireIcon, 10 | } from "@heroicons/react/outline"; 11 | 12 | const features = [ 13 | { 14 | name: "Lightening fast Profile Creation", 15 | description: 16 | "Create your Profile ReadMe in just few clicks ! On an average, it takes less than one minute to create a perfect Profile ReadMe using GPRM", 17 | icon: LightningBoltIcon, 18 | }, 19 | { 20 | name: "Add all Social Links", 21 | description: 22 | "We have added an option to add your Social Links to increase your reach and promote your works at one place.", 23 | icon: GlobeAltIcon, 24 | }, 25 | { 26 | name: "Flex Your GitHub Stats", 27 | description: 28 | "Be Honest, everyone loves to flex their achievements. With tools such as ReadMe Stats, Most Used Languages, Streak Stats you can show your achievements.", 29 | icon: ChartBarIcon, 30 | }, 31 | { 32 | name: "Show Your Tech Stack", 33 | description: 34 | "Select from over 300+ tech options and show your tech stack to everyone, Let them know what makes you awesome.", 35 | icon: DesktopComputerIcon, 36 | }, 37 | { 38 | name: "Visitor Counter", 39 | description: 40 | "With the use of Visitors Counter you can see how many people viewed your profile, this gives you an idea about how popular you are on GitHub.", 41 | icon: UserGroupIcon, 42 | }, 43 | { 44 | name: "Let people help you with Donations", 45 | description: 46 | "No matter what your aim is, money is required at some point to boost the process for getting closer to your aim. We give you an option to add Donation Links directly into your profile so that people can help you by donating.", 47 | icon: CurrencyDollarIcon, 48 | }, 49 | { 50 | name: "Fun Components", 51 | description: 52 | "If fun is required everywhere, how can it be missing from your profile ? Now, You can cheer up other people by adding Random Memes and Quotes in your profile.", 53 | icon: EmojiHappyIcon, 54 | }, 55 | { 56 | name: "GitHub Trophies", 57 | description: 58 | "Got any trophies/medals but oops! how can you show them on your profile? Don't worry, GitHub Trophies are the virtual trophies for you. Showcase them by adding it to your profile.", 59 | icon: FireIcon, 60 | }, 61 | ]; 62 | 63 | export default function Features() { 64 | return ( 65 |
66 |
67 |
68 |

69 | Features 70 |

71 |

72 | We got everything that you need ! 73 |

74 |

75 | Create your perfect GitHub Profile ReadMe in the best possible way. 76 | Lots of features and tools included, all for free ! 77 |

78 |
79 | 80 |
81 |
82 | {features.map((feature) => ( 83 |
84 |
85 |
86 |
88 |

89 | {feature.name} 90 |

91 |
92 |
93 | {feature.description} 94 |
95 |
96 | ))} 97 |
98 |
99 |
100 |
101 | ); 102 | } 103 | -------------------------------------------------------------------------------- /components/home-components/GitHubAvailability.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import AnchorWithSVG from "../elements/anchor/AnchorWithSVG"; 3 | import { GITHUB_LOGO_LARGE_SVG } from "../elements/SVG"; 4 | 5 | export default function GitHubAvailability() { 6 | return ( 7 |
8 |
9 | 10 |
11 |
12 |

13 | We're Open Source 14 |

15 |

16 | Yes you heard right, this website is open source and you can find code 17 | of this website on GitHub. You can request a feature, contribute to 18 | project by adding feedbacks and mentioning bugs if they exist. 19 | Licensed under GPL-3.0 ©VishwaGauravIn 20 |

21 | 25 |
26 |
27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /components/home-components/SocialLinks.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import AnchorWithSVG from "../elements/anchor/AnchorWithSVG"; 3 | 4 | export default function SocialLinks() { 5 | return ( 6 |
7 |
8 |

9 | Our Social Links 10 |

11 |

12 | We are available on X, LinkedIn, and GitHub. You can connect 13 | with us to get notification about any new feature we add, any cool 14 | product we create or get early access of some cool projects ! 15 |

16 |
17 | 21 | 25 | 29 | 33 |
34 |
35 |
36 | 42 |
43 |
44 | ); 45 | } 46 | -------------------------------------------------------------------------------- /components/mobx/GPRMcontext.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useLocalStore } from "mobx-react"; 3 | import { createGPRMStore } from "./gprmStore"; 4 | 5 | const GPRMContext = React.createContext(null); 6 | 7 | export const GPRMProvider = ({ children }) => { 8 | const gprmStore = useLocalStore(createGPRMStore); 9 | 10 | return ( 11 | {children} 12 | ); 13 | }; 14 | 15 | export const useGPRMStore = () => React.useContext(GPRMContext); 16 | -------------------------------------------------------------------------------- /components/mobx/gprmStore.js: -------------------------------------------------------------------------------- 1 | export function createGPRMStore() { 2 | return { 3 | data: { 4 | username: "", 5 | aboutme: "", 6 | stats: { 7 | theme: "dark", 8 | border: true, 9 | lifetime: false, 10 | prv: false, 11 | }, 12 | socials: { 13 | behance: "", 14 | discord: "", 15 | facebook: "", 16 | instagram: "", 17 | linkedin: "", 18 | medium: "", 19 | pinterest: "", 20 | quora: "", 21 | reddit: "", 22 | sof: "", 23 | tiktok: "", 24 | twitch: "", 25 | x: "", 26 | youtube: "", 27 | }, 28 | tech: [], 29 | badge_theme: "for-the-badge", 30 | donate: { 31 | buymeacoffee: "", 32 | paypal: "", 33 | patreon: "", 34 | kofi: "", 35 | }, 36 | trophy: { 37 | theme: "radical", 38 | border: true, 39 | background: false, 40 | }, 41 | visitcount: { 42 | color: 0, 43 | icon: 0, 44 | }, 45 | quote: { 46 | quoteTheme: "radical", 47 | layout: "horizontal", 48 | }, 49 | toprepo: { 50 | toprepotheme: "dark", 51 | }, 52 | checkbox: { 53 | trophychk: false, 54 | visitorschk: true, 55 | quotechk: false, 56 | memechk: false, 57 | gtcechk: true, 58 | }, 59 | finalData: "", 60 | }, 61 | editData(id, value) { 62 | this.data[id] = value; 63 | }, 64 | }; 65 | } 66 | -------------------------------------------------------------------------------- /components/slides/AboutMe.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import NextButton from "../elements/buttons/NextButton"; 3 | import Pagination from "../elements/Pagination"; 4 | import { useGPRMStore } from "../mobx/GPRMcontext"; 5 | import { useObserver } from "mobx-react"; 6 | import GitHubStats from "./GitHubCards"; 7 | import { LightBulbIcon } from "@heroicons/react/outline"; 8 | import FeedbackButton from "../elements/FeedbackButton"; 9 | 10 | export default function AboutMe({ back }) { 11 | const [isVisible, setIsVisible] = useState(false); 12 | const gprmStore = useGPRMStore(); 13 | const [aboutme, setAboutme] = useState(gprmStore.data.aboutme); 14 | const textareaPlaceholder = `🔭 I’m currently working on 15 | 👯 I’m looking to collaborate on 16 | 🤝 I’m looking for help with 17 | 🌱 I’m currently learning 18 | 💬 Ask me about 19 | ⚡ Fun fact`; 20 | 21 | function onNext() { 22 | if (aboutme != ``) { 23 | gprmStore.data.aboutme = aboutme; 24 | } 25 | setIsVisible(true); 26 | } 27 | return useObserver(() => ( 28 | <> 29 | {isVisible ? ( 30 | setIsVisible(false)} /> 31 | ) : ( 32 |
33 | 39 |

40 | Add a small introduction 41 |

42 |
43 |
44 | 50 |
51 |
52 |

53 | About Me : 54 |

55 | 64 |
65 | 72 | onNext()} /> 73 |
74 |
75 |
76 | 77 | 78 |
79 | )} 80 | 81 | )); 82 | } 83 | -------------------------------------------------------------------------------- /components/slides/Donate.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import NextButton from "../elements/buttons/NextButton"; 3 | import Pagination from "../elements/Pagination"; 4 | import TextInputWithImage from "../elements/textinput/TextInputWithImage"; 5 | import Extras from "./Extras"; 6 | import FeedbackButton from "../elements/FeedbackButton"; 7 | 8 | export default function Donate({ back }) { 9 | const [isVisible, setIsVisible] = useState(false); 10 | function onNext() { 11 | donate = ""; 12 | if (document.getElementById("buymeacoffee").value != "") { 13 | donate = 14 | donate + 15 | `[![BuyMeACoffee](https://img.shields.io/badge/Buy%20Me%20a%20Coffee-ffdd00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black)](https://buymeacoffee.com/${ 16 | document.getElementById("buymeacoffee").value 17 | }) `; 18 | } 19 | if (document.getElementById("paypal").value != "") { 20 | donate = 21 | donate + 22 | `[![PayPal](https://img.shields.io/badge/PayPal-00457C?style=for-the-badge&logo=paypal&logoColor=white)](https://paypal.me/${ 23 | document.getElementById("paypal").value 24 | }) `; 25 | } 26 | if (document.getElementById("patreon").value != "") { 27 | donate = 28 | donate + 29 | `[![Patreon](https://img.shields.io/badge/Patreon-F96854?style=for-the-badge&logo=patreon&logoColor=white)](https://patreon.com/${ 30 | document.getElementById("patreon").value 31 | }) `; 32 | } 33 | if (document.getElementById("kofi").value != "") { 34 | donate = 35 | donate + 36 | `[![Ko-Fi](https://img.shields.io/badge/Ko--fi-F16061?style=for-the-badge&logo=ko-fi&logoColor=white)](https://ko-fi.com/${ 37 | document.getElementById("kofi").value 38 | }) `; 39 | } 40 | setIsVisible(true); 41 | } 42 | return ( 43 | <> 44 | {isVisible ? ( 45 | setIsVisible(false)} /> 46 | ) : ( 47 |
48 | 54 |

55 | Let People Help You via Donations 56 |

57 |
58 |
59 | 65 |
66 |
67 |

68 | Donate : 69 |

70 | 75 | 80 | 85 | 90 |
91 | onNext()} /> 92 | 93 | 94 |
95 |
96 |
97 |
98 | )} 99 | 100 | ); 101 | } 102 | export var donate = ``; 103 | -------------------------------------------------------------------------------- /components/slides/Extras.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import CheckBox from "../elements/CheckBox"; 3 | import FilterButton from "../elements/buttons/FilterButton"; 4 | import NextButton from "../elements/buttons/NextButton"; 5 | import { githubstats } from "./GitHubCards"; 6 | import { socials } from "./Socials"; 7 | import { donate } from "./Donate"; 8 | import Pagination from "../elements/Pagination"; 9 | import Preview from "./Preview"; 10 | import { useGPRMStore } from "../mobx/GPRMcontext"; 11 | import { useObserver } from "mobx-react"; 12 | import FeedbackButton from "../elements/FeedbackButton"; 13 | import themes from "../../data/themes"; 14 | 15 | export default function Extras({ back }) { 16 | const [isVisible, setIsVisible] = useState(false); 17 | const gprmStore = useGPRMStore(); 18 | const [theme, setTheme] = useState(gprmStore.data.trophy.theme); 19 | const [border, setBorder] = useState(gprmStore.data.trophy.border); 20 | const [background, setBackground] = useState( 21 | gprmStore.data.trophy.background 22 | ); 23 | const [quoteTheme, setQuoteTheme] = useState(gprmStore.data.quote.quoteTheme); 24 | const [layout, setLayout] = useState(gprmStore.data.quote.layout); 25 | const [color, setColor] = useState(gprmStore.data.visitcount.color); 26 | const [icon, setIcon] = useState(gprmStore.data.visitcount.icon); 27 | const [topRepoTheme, setTopRepoTheme] = useState( 28 | gprmStore.data.toprepo.toprepotheme 29 | ); 30 | useEffect(() => { 31 | gprmStore.data.trophy.theme = theme; 32 | }, [theme]); 33 | useEffect(() => { 34 | gprmStore.data.trophy.border = border; 35 | }, [border]); 36 | useEffect(() => { 37 | gprmStore.data.trophy.background = background; 38 | }, [background]); 39 | useEffect(() => { 40 | gprmStore.data.visitcount.color = color; 41 | }, [color]); 42 | useEffect(() => { 43 | gprmStore.data.visitcount.icon = icon; 44 | }, [icon]); 45 | useEffect(() => { 46 | gprmStore.data.quote.quoteTheme = quoteTheme; 47 | }, [quoteTheme]); 48 | useEffect(() => { 49 | gprmStore.data.quote.layout = layout; 50 | }, [layout]); 51 | useEffect(() => { 52 | gprmStore.data.toprepo.toprepotheme = topRepoTheme; 53 | }, [topRepoTheme]); 54 | 55 | function changeLayout() { 56 | if (layout === "horizontal") { 57 | setLayout("vetical"); 58 | } else { 59 | setLayout("horizontal"); 60 | } 61 | } 62 | function onNext() { 63 | extras = ""; 64 | if (document.getElementById("trophychk").checked === true) { 65 | extras = 66 | extras + 67 | ` 68 | ## 🏆 GitHub Trophies 69 | ![](${document.getElementById("trophy").getAttribute("src")}) 70 | `; 71 | } 72 | // if ( 73 | // gprmStore.data.socials.x && 74 | // document.getElementById("gtcechk").checked === true 75 | // ) { 76 | // extras = 77 | // extras + 78 | // ` 79 | // ## 🐦 Latest Tweet 80 | // [![](https://gtce.itsvg.in/api?username=${gprmStore.data.socials.x})](https://github.com/VishwaGauravIn/github-x-card-embed) 81 | // `; 82 | // } 83 | if (document.getElementById("quotechk").checked === true) { 84 | extras = 85 | extras + 86 | ` 87 | ### ✍️ Random Dev Quote 88 | ![](${document.getElementById("quote").getAttribute("src")}) 89 | `; 90 | } 91 | if (document.getElementById("toprepochk").checked === true) { 92 | extras = 93 | extras + 94 | ` 95 | ### 🔝 Top Contributed Repo 96 | ![](${document.getElementById("toprepo").getAttribute("src")}) 97 | `; 98 | } 99 | // if (document.getElementById("memechk").checked === true) { 100 | // extras = 101 | // extras + 102 | // ` 103 | // ### 😂 Random Dev Meme 104 | // 105 | // `; 106 | // } 107 | if (document.getElementById("visitorschk").checked === true) { 108 | extras = 109 | extras + 110 | ` 111 | --- 112 | [![](https://visitcount.itsvg.in/api?id=${gprmStore.data.username}&icon=${icon}&color=${color})](https://visitcount.itsvg.in) 113 | `; 114 | } 115 | 116 | createFinalData(); 117 | setIsVisible(true); 118 | } 119 | function createFinalData() { 120 | var finaldata = ""; 121 | if (gprmStore.data.aboutme != ``) { 122 | finaldata = 123 | finaldata + 124 | `# 💫 About Me: 125 | ${gprmStore.data.aboutme.replace(/(?:\r\n|\r|\n)/g, "
")} 126 | 127 | `; 128 | } 129 | if (socials != ``) { 130 | finaldata = 131 | finaldata + 132 | ` 133 | ## 🌐 Socials: 134 | ${socials} 135 | `; 136 | } 137 | if (gprmStore.data.tech != ``) { 138 | finaldata = 139 | finaldata + 140 | ` 141 | # 💻 Tech Stack: 142 | ${gprmStore.data.tech 143 | .join(" ") 144 | .replaceAll("for-the-badge", gprmStore.data.badge_theme)} 145 | `; 146 | } 147 | finaldata = finaldata + githubstats + extras; 148 | if (donate != ``) { 149 | finaldata = 150 | finaldata + 151 | ` 152 | ## 💰 You can help me by Donating 153 | ${donate} 154 | 155 | `; 156 | } 157 | finaldata = `${finaldata} 158 | `; 159 | gprmStore.data.finalData = finaldata; 160 | } 161 | return useObserver(() => ( 162 | <> 163 | {isVisible ? ( 164 | setIsVisible(false)} /> 165 | ) : ( 166 |
167 | 173 |

174 | Additional Stuffs to add 175 |

176 | {/* Trophies */} 177 | {/* Options */} 178 |
179 | Theme: 180 | 194 | setBorder(!border)} 198 | /> 199 | setBackground(!background)} 203 | /> 204 |
205 |

206 | please wait for images to load after changing any values 207 |

208 |
209 | 218 | 219 |
220 |
221 | 222 | {/* Visitors Badge */} 223 | {/* Options */} 224 |
225 | Color: 226 | 240 | Icon: 241 | 255 |
256 | 257 | 263 | 264 | 265 |
266 | 267 | {/* X Card */} 268 | {/* {gprmStore.data.socials.x && ( 269 | <> 270 | 276 | 277 |
278 | 279 | )} */} 280 | 281 | {/* Quote */} 282 | {/* Options */} 283 |
284 | Theme: 285 | 301 | changeLayout()} 304 | /> 305 |
306 | 313 | 314 |
315 | 316 | {/* Top Contributed Repo */} 317 | {/* Options */} 318 |
319 | Theme: 320 | 336 |
337 | 344 | 345 |
346 | 347 | {/* */} 348 | 349 | onNext()} /> 350 | 351 | 352 |
353 | )} 354 | 355 | )); 356 | } 357 | 358 | const quoteThemes = [ 359 | "light", 360 | "dark", 361 | "radical", 362 | "merko", 363 | "gruvbox", 364 | "tokyonight", 365 | ]; 366 | 367 | const colors = [ 368 | "cyan", 369 | "blue", 370 | "amber", 371 | "green", 372 | "red", 373 | "rose", 374 | "indigo", 375 | "orange", 376 | "emerald", 377 | "teal", 378 | "pink", 379 | "fuchsia", 380 | "neutral", 381 | "random", 382 | ]; 383 | 384 | const icons = [ 385 | "default", 386 | "bar", 387 | "code", 388 | "cursor", 389 | "emoji", 390 | "eye", 391 | "fire", 392 | "heart", 393 | "bolt", 394 | "star", 395 | "random", 396 | ]; 397 | 398 | export var extras = ``; 399 | -------------------------------------------------------------------------------- /components/slides/GitHubCards.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import FilterButton from "../elements/buttons/FilterButton"; 3 | import NextButton from "../elements/buttons/NextButton"; 4 | import Pagination from "../elements/Pagination"; 5 | import { useGPRMStore } from "../mobx/GPRMcontext"; 6 | import { useObserver } from "mobx-react"; 7 | import Socials from "./Socials"; 8 | import FeedbackButton from "../elements/FeedbackButton"; 9 | import themes from "../../data/themes"; 10 | 11 | export default function GitHubStats({ back }) { 12 | const [isVisible, setIsVisible] = useState(false); 13 | const gprmStore = useGPRMStore(); 14 | const [theme, setTheme] = useState(gprmStore.data.stats.theme); 15 | const [border, setBorder] = useState(gprmStore.data.stats.border); 16 | const [includeAll, setIncludeAll] = useState(gprmStore.data.stats.lifetime); 17 | const [includePrivate, setIncludePrivate] = useState( 18 | gprmStore.data.stats.prv 19 | ); 20 | function onNext() { 21 | githubstats = `# 📊 GitHub Stats: 22 | ![](${document.getElementById("stats").getAttribute("src")})
23 | ![](${document.getElementById("streak").getAttribute("src")})
24 | ![](${document.getElementById("langs").getAttribute("src")}) 25 | `; 26 | setIsVisible(true); 27 | } 28 | useEffect(() => { 29 | gprmStore.data.stats.theme = theme; 30 | gprmStore.data.stats.border = border; 31 | gprmStore.data.stats.lifetime = includeAll; 32 | gprmStore.data.stats.prv = includePrivate; 33 | }); 34 | return useObserver(() => ( 35 | <> 36 | {isVisible ? ( 37 | setIsVisible(false)} /> 38 | ) : ( 39 |
40 | 46 |

47 | Flex your GitHub Stats 48 |

49 | {/* Options */} 50 |
51 | Theme: 52 | 66 | setBorder(!border)} 70 | /> 71 | setIncludeAll(!includeAll)} 75 | /> 76 | setIncludePrivate(!includePrivate)} 80 | /> 81 |
82 |

83 | please wait for images to load after changing any values 84 |

85 |
86 | 95 | 104 | 113 |
114 | onNext()} /> 115 | 116 | 117 |
118 | )} 119 | 120 | )); 121 | } 122 | 123 | export var githubstats = ``; 124 | -------------------------------------------------------------------------------- /components/slides/HomePage.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import AnimatedText from "../elements/AnimatedText"; 3 | import Features from "../home-components/Features"; 4 | import GitHubAvailability from "../home-components/GitHubAvailability"; 5 | import ToastError from "../elements/toaster/ToastError"; 6 | import AboutMe from "./AboutMe"; 7 | import FAQ from "../home-components/FAQ"; 8 | import Credits from "../home-components/Credits"; 9 | import SocialLinks from "../home-components/SocialLinks"; 10 | import ScrollToTop from "../elements/ScrollToTop"; 11 | import { RIGHT_ARROW_SVG } from "../elements/SVG"; 12 | import { useGPRMStore } from "../mobx/GPRMcontext"; 13 | import { useObserver } from "mobx-react"; 14 | 15 | export default function HomePage() { 16 | const [isVisible, setIsVisible] = useState(false); 17 | const [alertVisible, setAlertVisible] = useState(false); 18 | const gprmStore = useGPRMStore(); 19 | const [input, setInput] = useState(gprmStore.data.username); 20 | function onNext() { 21 | if (input != "" && input.replace(/ /g, "") != "") { 22 | gprmStore.data.username = input; 23 | setIsVisible(true); 24 | topFunction(); 25 | } else { 26 | invalidUsername(); 27 | } 28 | } 29 | // When the user clicks on the button, scroll to the top of the document 30 | function topFunction() { 31 | document.body.scrollTop = 0; // For Safari 32 | document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera 33 | } 34 | 35 | function invalidUsername() { 36 | if (alertVisible !== true) { 37 | setAlertVisible(true); 38 | setTimeout(() => { 39 | setAlertVisible(false); 40 | }, 4400); 41 | } 42 | } 43 | return useObserver(() => ( 44 | <> 45 | {isVisible ? ( 46 | setIsVisible(false)} /> 47 | ) : ( 48 |
49 |
50 |
51 |

52 | Best Profile Generator 53 |

54 | {/* Text Input */} 55 |
56 |
57 | setInput(e.target.value)} 62 | autoFocus={true} 63 | className="border-b-2 border-green-200 bg-transparent w-full sm:w-11/12 md:w-10/12 lg:w-8/12 text-xl sm:text-3xl md:text-xl lg:text-2xl 2xl:text-3xl outline-none focus:border-green-300 focus:border-b-4 inline" 64 | placeholder="Enter Your GitHub Username" 65 | /> 66 | 69 |
70 |
71 | 72 |
73 |
74 | 80 |
81 |
82 | {alertVisible && ( 83 | 84 | )} 85 | 86 | 87 | 88 | 89 | 90 | 91 |
92 | )} 93 | 94 | )); 95 | } 96 | -------------------------------------------------------------------------------- /components/slides/Preview.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import ButtonWithSVG from "../elements/buttons/ButtonWithSVG"; 3 | import { db } from "../../config/firebase"; 4 | import ToastSuccess from "../elements/toaster/ToastSuccess"; 5 | import { useGPRMStore } from "../mobx/GPRMcontext"; 6 | import FeedbackButton from "../elements/FeedbackButton"; 7 | 8 | export default function Preview({ back }) { 9 | const [copiedAlertVisible, setCopiedAlertVisible] = useState(false); 10 | const [downloadAlertVisible, setDownloadAlertVisible] = useState(false); 11 | const gprmStore = useGPRMStore(); 12 | var md = require("markdown-it")({ 13 | html: true, 14 | linkify: true, 15 | typographer: true, 16 | breaks: true, 17 | quotes: "“”‘’", 18 | highlight: function (/*str, lang*/) { 19 | return ""; 20 | }, 21 | }); 22 | 23 | useEffect(() => { 24 | db.collection(gprmStore.data.username).add({ 25 | date: Date(), 26 | data: gprmStore.data.finalData, 27 | }); 28 | setTimeout(() => { 29 | document.getElementById("content").innerHTML = md.render( 30 | gprmStore.data.finalData 31 | ); 32 | 33 | // targeting all the a tags inside the content div 34 | const links = document?.getElementById("content")?.querySelectorAll("a"); 35 | // Checking if elements exists 36 | if (links.length > 0) { 37 | links.forEach((link) => { 38 | // adding attribute target 39 | link.setAttribute("target", "_blank"); 40 | }); 41 | } 42 | }, 300); 43 | }, []); 44 | 45 | function onCopy() { 46 | navigator.clipboard.writeText(gprmStore.data.finalData); 47 | // Alert for Copied 48 | copied(); 49 | } 50 | function onDownload() { 51 | const element = document.createElement("a"); 52 | const file = new Blob([gprmStore.data.finalData], { 53 | type: "text/plain", 54 | }); 55 | element.href = URL.createObjectURL(file); 56 | element.download = "ReadMe.md"; 57 | document.body.appendChild(element); // Required for this to work in FireFox 58 | element.click(); 59 | // Alert for Downloaded 60 | downloaded(); 61 | } 62 | function reloadTab() { 63 | location.reload(); 64 | } 65 | function copied() { 66 | if (copiedAlertVisible !== true) { 67 | setCopiedAlertVisible(true); 68 | setTimeout(() => { 69 | setCopiedAlertVisible(false); 70 | }, 3000); 71 | } 72 | } 73 | function downloaded() { 74 | if (downloadAlertVisible !== true) { 75 | setDownloadAlertVisible(true); 76 | setTimeout(() => { 77 | setDownloadAlertVisible(false); 78 | }, 3000); 79 | } 80 | } 81 | return ( 82 |
83 | 89 |

90 | Your Awesome Profile is ready ! 91 |

92 |
93 | onCopy()} 96 | d={ 97 | "M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" 98 | } 99 | /> 100 | onDownload()} 103 | d={ 104 | "M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" 105 | } 106 | /> 107 | reloadTab()} 110 | d={ 111 | "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" 112 | } 113 | /> 114 |
115 | 121 | Need help regarding this? Click here to watch Video. 122 | 123 |
124 |

125 | PREVIEW 126 |

127 |
128 |
132 |

133 | What to Do Next ? :  134 |

135 | Copy this Code and Paste it into your GitHub ReadMe file. 136 |

{" "} 137 |

138 |

139 | Hey👋, Can you help us to grow by sharing?
140 |

141 | {copiedAlertVisible && } 142 | {downloadAlertVisible && } 143 | 144 |
145 | ); 146 | } 147 | -------------------------------------------------------------------------------- /components/slides/Socials.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import NextButton from "../elements/buttons/NextButton"; 3 | import Pagination from "../elements/Pagination"; 4 | import TextInputWithIcon from "../elements/textinput/TextInputWithIcon"; 5 | import { useGPRMStore } from "../mobx/GPRMcontext"; 6 | import TechStack from "./TechStack"; 7 | import FeedbackButton from "../elements/FeedbackButton"; 8 | 9 | export default function Socials({ back }) { 10 | const [isVisible, setIsVisible] = useState(false); 11 | const gprmStore = useGPRMStore(); 12 | function onNext() { 13 | socials = ""; 14 | if (document.getElementById("bluesky").value != "") { 15 | socials = 16 | socials + 17 | `[![Bluesky](https://img.shields.io/badge/bluesky-0285FF?style=for-the-badge&logo=bluesky&logoColor=%23FFFFFF)](https://bsky.app/profile/${ 18 | document.getElementById("bluesky").value 19 | }) `; 20 | } 21 | if (document.getElementById("behance").value != "") { 22 | socials = 23 | socials + 24 | `[![Behance](https://img.shields.io/badge/Behance-1769ff?logo=behance&logoColor=white)](https://behance.net/${ 25 | document.getElementById("behance").value 26 | }) `; 27 | } 28 | if (document.getElementById("discord").value != "") { 29 | socials = 30 | socials + 31 | `[![Discord](https://img.shields.io/badge/Discord-%237289DA.svg?logo=discord&logoColor=white)](https://discord.gg/${ 32 | document.getElementById("discord").value 33 | }) `; 34 | } 35 | if (document.getElementById("facebook").value != "") { 36 | socials = 37 | socials + 38 | `[![Facebook](https://img.shields.io/badge/Facebook-%231877F2.svg?logo=Facebook&logoColor=white)](https://facebook.com/${ 39 | document.getElementById("facebook").value 40 | }) `; 41 | } 42 | if (document.getElementById("instagram").value != "") { 43 | socials = 44 | socials + 45 | `[![Instagram](https://img.shields.io/badge/Instagram-%23E4405F.svg?logo=Instagram&logoColor=white)](https://instagram.com/${ 46 | document.getElementById("instagram").value 47 | }) `; 48 | } 49 | if (document.getElementById("linkedin").value != "") { 50 | socials = 51 | socials + 52 | `[![LinkedIn](https://img.shields.io/badge/LinkedIn-%230077B5.svg?logo=linkedin&logoColor=white)](https://linkedin.com/in/${ 53 | document.getElementById("linkedin").value 54 | }) `; 55 | } 56 | if (document.getElementById("medium").value != "") { 57 | socials = 58 | socials + 59 | `[![Medium](https://img.shields.io/badge/Medium-12100E?logo=medium&logoColor=white)](https://medium.com/@${ 60 | document.getElementById("medium").value 61 | }) `; 62 | } 63 | if (document.getElementById("pinterest").value != "") { 64 | socials = 65 | socials + 66 | `[![Pinterest](https://img.shields.io/badge/Pinterest-%23E60023.svg?logo=Pinterest&logoColor=white)](https://pinterest.com/${ 67 | document.getElementById("pinterest").value 68 | }) `; 69 | } 70 | if (document.getElementById("quora").value != "") { 71 | socials = 72 | socials + 73 | `[![Quora](https://img.shields.io/badge/Quora-%23B92B27.svg?logo=Quora&logoColor=white)](https://quora.com/profile/${ 74 | document.getElementById("quora").value 75 | }) `; 76 | } 77 | if (document.getElementById("reddit").value != "") { 78 | socials = 79 | socials + 80 | `[![Reddit](https://img.shields.io/badge/Reddit-%23FF4500.svg?logo=Reddit&logoColor=white)](https://reddit.com/user/${ 81 | document.getElementById("reddit").value 82 | }) `; 83 | } 84 | if (document.getElementById("stackoverflow").value != "") { 85 | socials = 86 | socials + 87 | `[![Stack Overflow](https://img.shields.io/badge/-Stackoverflow-FE7A16?logo=stack-overflow&logoColor=white)](https://stackoverflow.com/users/${ 88 | document.getElementById("stackoverflow").value 89 | }) `; 90 | } 91 | if (document.getElementById("tiktok").value != "") { 92 | socials = 93 | socials + 94 | `[![TikTok](https://img.shields.io/badge/TikTok-%23000000.svg?logo=TikTok&logoColor=white)](https://tiktok.com/@${ 95 | document.getElementById("tiktok").value 96 | }) `; 97 | } 98 | if (document.getElementById("twitch").value != "") { 99 | socials = 100 | socials + 101 | `[![Twitch](https://img.shields.io/badge/Twitch-%239146FF.svg?logo=Twitch&logoColor=white)](https://twitch.tv/${ 102 | document.getElementById("twitch").value 103 | }) `; 104 | } 105 | if (document.getElementById("x").value != "") { 106 | socials = 107 | socials + 108 | `[![X](https://img.shields.io/badge/X-black.svg?logo=X&logoColor=white)](https://x.com/${ 109 | document.getElementById("x").value 110 | }) `; 111 | } 112 | if (document.getElementById("youtube").value != "") { 113 | socials = 114 | socials + 115 | `[![YouTube](https://img.shields.io/badge/YouTube-%23FF0000.svg?logo=YouTube&logoColor=white)](https://youtube.com/@${ 116 | document.getElementById("youtube").value 117 | }) `; 118 | } 119 | if (document.getElementById("codepen").value != "") { 120 | socials = 121 | socials + 122 | `[![Codepen](https://img.shields.io/badge/Codepen-000000?logo=codepen&logoColor=white)](https://codepen.io/${ 123 | document.getElementById("codepen").value 124 | }) `; 125 | } 126 | if (document.getElementById("mastodon").value != "") { 127 | socials = 128 | socials + 129 | `[![Mastodon](https://img.shields.io/badge/-MASTODON-%232B90D9?logo=mastodon&logoColor=white)](https://mastodon.social/@${ 130 | document.getElementById("mastodon").value 131 | }) `; 132 | } 133 | if (document.getElementById("email").value != "") { 134 | socials = 135 | socials + 136 | `[![email](https://img.shields.io/badge/Email-D14836?logo=gmail&logoColor=white)](mailto:${ 137 | document.getElementById("email").value 138 | }) `; 139 | } 140 | setIsVisible(true); 141 | } 142 | return ( 143 | <> 144 | {isVisible ? ( 145 | setIsVisible(false)} /> 146 | ) : ( 147 |
148 | 154 |

155 | Add Your Social Links 156 |

157 |
158 | 162 | 167 | Bluesky 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 224 | 225 | 226 | 231 | 232 | 233 | 238 | 239 | 240 | 241 |
242 | onNext()} /> 243 | 244 | 245 |
246 | )} 247 | 248 | ); 249 | } 250 | export var socials = ``; 251 | /* TEMPLATE 252 | 256 | 257 | 258 | */ 259 | -------------------------------------------------------------------------------- /components/slides/TechStack.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import NextButton from "../elements/buttons/NextButton"; 3 | import Pagination from "../elements/Pagination"; 4 | import { useGPRMStore } from "../mobx/GPRMcontext"; 5 | import Donate from "./Donate"; 6 | import { useObserver } from "mobx-react"; 7 | import { data } from "../../data/tech"; 8 | import { searchFilter } from "../../utils/searchFilter"; 9 | import { SearchIcon } from "@heroicons/react/outline"; 10 | import TechBadgesWrapper from "../techstack/TechBadgesWrapper"; 11 | import FeedbackButton from "../elements/FeedbackButton"; 12 | 13 | export default function TechStack({ back }) { 14 | const [isVisible, setIsVisible] = useState(false); 15 | const gprmStore = useGPRMStore(); 16 | const [BadgeStyle, setBadgeStyle] = useState(gprmStore.data.badge_theme); 17 | const [techData, setTechData] = useState(data); 18 | const [searchStr, setSearchStr] = useState(""); 19 | useEffect(() => { 20 | gprmStore.data.badge_theme = BadgeStyle; 21 | }, [BadgeStyle]); 22 | 23 | // Seaching whenever searchStr is changed 24 | useEffect(() => { 25 | setTechData(searchFilter(searchStr)); 26 | }, [searchStr]); 27 | 28 | // It is just a message that will appear under a category if no matching tech is found 29 | const nothingFound = () => { 30 | return ( 31 |

32 | Oops! no result found for your search. 33 |

34 | ); 35 | }; 36 | return useObserver(() => ( 37 | <> 38 | {isVisible ? ( 39 | setIsVisible(false)} /> 40 | ) : ( 41 |
42 | 48 |

49 | Add Tech that you use 50 |

51 | {/* Search Box */} 52 |
53 | setSearchStr(e.target.value)} 61 | /> 62 | 63 |
64 |
65 |
70 | 76 |
77 |
82 | {/* NOT USING ANY DATA FILE TO POPULATE BADGES */} 83 |
84 | {/* If nothing found in all searches - can be minified */} 85 | {techData.lang.length === 0 && 86 | techData.database.length === 0 && 87 | techData.design.length === 0 && 88 | techData.frameworks.length === 0 && 89 | techData.hosting.length === 0 && 90 | techData.ml.length === 0 && 91 | techData.others.length === 0 && 92 | techData.servers.length === 0 && 93 | techData.cicdvcs.length === 0 && 94 | nothingFound()} 95 | 96 | {/* Languages */} 97 | 98 |
99 |
100 |
101 |
102 | {/* Hosting/SaaS */} 103 | 104 | {/* FRAMEWORKS, PLATFORMS & LIBRARIES */} 105 | 109 | {/* SERVERS */} 110 | 111 | {/* DATABASES / ORM */} 112 | 116 | {/* DESIGN */} 117 | 118 | {/* ML/DL */} 119 | 120 | {/* CI CD VCS */} 121 | 122 | {/* OTHER */} 123 | 124 |
125 | {/* Select Badge Type (with preview) */} 126 |
127 | Theme: 128 | 157 | 162 |
163 | setIsVisible(true)} /> 164 | 165 | 166 |
167 | )} 168 | 169 | )); 170 | } 171 | -------------------------------------------------------------------------------- /components/techstack/TechBadgesWrapper.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import BadgeSelect from "../elements/buttons/BadgeSelect"; 3 | 4 | export default function TechBadgesWrapper({ label, data }) { 5 | return ( 6 | <> 7 | {data.length !== 0 && ( 8 |
9 |

{label}

10 |
11 | {data.map((data, key) => ( 12 | 13 | ))} 14 |
15 |
16 | )} 17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /config/firebase.js: -------------------------------------------------------------------------------- 1 | import firebase from "firebase/compat/app"; 2 | import "firebase/compat/firestore"; 3 | 4 | /*---------------------------------------------------- 5 | Firebase Attach 6 | ----------------------------------------------------*/ 7 | var firebaseApp = firebase.initializeApp({ 8 | apiKey: process.env.NEXT_PUBLIC_apiKey, 9 | authDomain: process.env.NEXT_PUBLIC_authDomain, 10 | projectId: process.env.NEXT_PUBLIC_projectId, 11 | storageBucket: process.env.NEXT_PUBLIC_storageBucket, 12 | messagingSenderId: process.env.NEXT_PUBLIC_messagingSenderId, 13 | appId: process.env.NEXT_PUBLIC_appId, 14 | }); 15 | var db = firebaseApp.firestore(); 16 | // var db = firebaseApp.firestore(); 17 | 18 | export { db }; 19 | /*---------------------------------------------------- 20 | Firebase Attach 21 | ----------------------------------------------------*/ 22 | -------------------------------------------------------------------------------- /data/themes.js: -------------------------------------------------------------------------------- 1 | export const themes = [ 2 | "default", 3 | "default_repocard", 4 | "transparent", 5 | "shadow_red", 6 | "shadow_green", 7 | "shadow_blue", 8 | "dark", 9 | "radical", 10 | "merko", 11 | "gruvbox", 12 | "gruvbox_light", 13 | "tokyonight", 14 | "onedark", 15 | "cobalt", 16 | "synthwave", 17 | "highcontrast", 18 | "dracula", 19 | "prussian", 20 | "monokai", 21 | "vue", 22 | "vue-dark", 23 | "shades-of-purple", 24 | "nightowl", 25 | "buefy", 26 | "blue-green", 27 | "algolia", 28 | "great-gatsby", 29 | "darcula", 30 | "bear", 31 | "solarized-dark", 32 | "solarized-light", 33 | "chartreuse-dark", 34 | "nord", 35 | "gotham", 36 | "material-palenight", 37 | "graywhite", 38 | "vision-friendly-dark", 39 | "ayu-mirage", 40 | "midnight-purple", 41 | "calm", 42 | "flag-india", 43 | "omni", 44 | "react", 45 | "jolly", 46 | "maroongold", 47 | "yeblu", 48 | "blueberry", 49 | "slateorange", 50 | "kacho_ga", 51 | "outrun", 52 | "ocean_dark", 53 | "city_lights", 54 | "github_dark", 55 | "github_dark_dimmed", 56 | "discord_old_blurple", 57 | "aura_dark", 58 | "panda", 59 | "noctis_minimus", 60 | "cobalt2", 61 | "swift", 62 | "aura", 63 | "apprentice", 64 | "moltack", 65 | "codeSTACKr", 66 | "rose_pine", 67 | "catppuccin_latte", 68 | "catppuccin_mocha", 69 | "date_night", 70 | "one_dark_pro", 71 | "rose", 72 | "holi", 73 | "neon", 74 | "blue_navy", 75 | "calm_pink", 76 | "ambient_gradient", 77 | ]; 78 | 79 | export default themes; 80 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | reactStrictMode: true, 3 | } 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "github-profile-readme-maker", 3 | "private": true, 4 | "scripts": { 5 | "dev": "next dev", 6 | "build": "next build", 7 | "start": "next start", 8 | "lint": "next lint" 9 | }, 10 | "dependencies": { 11 | "@heroicons/react": "^1.0.5", 12 | "axios": "^0.27.2", 13 | "crisp-sdk-web": "^1.0.22", 14 | "firebase": "^9.6.4", 15 | "markdown-it": "^12.3.2", 16 | "mobx": "^6.6.0", 17 | "mobx-react": "^7.5.0", 18 | "next": "12.1.0", 19 | "react": "17.0.2", 20 | "react-dom": "17.0.2", 21 | "react-text-loop": "^2.3.0" 22 | }, 23 | "devDependencies": { 24 | "autoprefixer": "^10.4.2", 25 | "eslint": "8.7.0", 26 | "eslint-config-next": "12.0.8", 27 | "postcss": "^8.4.5", 28 | "tailwindcss": "^3.0.15" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import "../styles/globals.css"; 2 | import "../styles/animation.css"; 3 | import "../styles/scrollbar.css"; 4 | import "../styles/markdown.css"; 5 | import "../styles/toastvg.css"; 6 | import { GPRMProvider } from "../components/mobx/GPRMcontext"; 7 | 8 | function MyApp({ Component, pageProps }) { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default MyApp; 17 | -------------------------------------------------------------------------------- /pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default function handler(req, res) { 4 | res.status(200).json({ name: 'John Doe' }) 5 | } 6 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import Head from "next/head"; 2 | import Script from "next/script"; 3 | import Broadcast from "../components/broadcast/Broadcast"; 4 | import Footer from "../components/elements/Footer"; 5 | import NavBar from "../components/NavBar"; 6 | import HomePage from "../components/slides/HomePage"; 7 | import { CrispBanner } from "../components/crisp"; 8 | 9 | export default function Home() { 10 | return ( 11 | <> 12 | 13 | GPRM : GitHub Profile ReadMe Maker 14 | {/* Meta tags dynamically generated by metaSEO (https://metaseo.itsvg.in) */} 15 | 16 | 20 | 21 | 22 | 23 | 24 | 28 | 32 | 33 | 34 | 35 | 39 | 43 | 47 | 48 | {/* Google Ads */} 49 | 54 | 55 | {/* Google Analytics */} 56 |