Merge pull request #241 from Mohitmadhav/Issue-#228

[update] gatsby-plugin-sharp version
Merge pull request #250 from kunaljain0212/cockroachicon
2020-10-08 22:36:32 +05:30 · 2020-10-08 22:24:13 +05:30 · 2020-10-07 23:59:24 +05:30 · 2020-10-07 20:20:40 +05:30 · 2020-10-06 23:36:53 -03:00 · 2020-10-06 22:53:18 -03:00
56 changed files with 27778 additions and 2104 deletions
@@ -0,0 +1,97 @@
+{
+  "files": [
+    "README.md"
+  ],
+  "imageSize": 100,
+  "commit": false,
+  "contributors": [
+    {
+      "login": "sarbikbetal",
+      "name": "Sarbik Betal",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/41508422?v=4",
+      "profile": "https://github.com/sarbikbetal",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "Hardik0307",
+      "name": "Hardik Bagada",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/41434099?v=4",
+      "profile": "https://github.com/Hardik0307",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "antonkomarev",
+      "name": "Anton Komarev",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/1849174?v=4",
+      "profile": "https://komarev.com",
+      "contributions": [
+        "plugin"
+      ]
+    },
+    {
+      "login": "KKVANONYMOUS",
+      "name": "Kunal Kumar Verma",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/58628586?v=4",
+      "profile": "https://kkvanonymous.github.io/",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "jaideepghosh",
+      "name": "Jaideep Ghosh",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/3909648?v=4",
+      "profile": "http://jaideepghosh.blogspot.com",
+      "contributions": [
+        "code"
+      ]
+    }
+    {
+      "login": "YashKandalkar",
+      "name": "yash",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/35102959?v=4",
+      "profile": "http://yashkandalkar.github.io",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "abhijit-hota",
+      "name": "Abhijit Hota",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/8116174?v=4",
+      "profile": "https://github.com/abhijit-hota",
+      "contributions": [
+        "code",
+        "test"
+      ]
+    },
+    {
+      "login": "Maddoxx88",
+      "name": "Sunit Shirke",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/34238672?v=4",
+      "profile": "https://maddoxx88.github.io/",
+      "contributions": [
+        "code"
+      ]
+    }
+    {
+      "login": "g-savitha",
+      "name": "Savitha Gollamudi",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/31612459?v=4",
+      "profile": "https://www.gsavitha.in",
+      "contributions": [
+        "code"
+      ]
+    }
+  ],
+  "contributorsPerLine": 7,
+  "projectName": "github-profile-readme-generator",
+  "projectOwner": "rahuldkjain",
+  "repoType": "github",
+  "repoHost": "https://github.com",
+  "skipCi": true
+}
@@ -2,11 +2,12 @@

 github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
 patreon: # Replace with a single Patreon username
-open_collective: # Replace with a single Open Collective username
+open_collective: github-profile-readme-generator
 ko_fi: rahuldkjain
 tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 liberapay: # Replace with a single Liberapay username
 issuehunt: # Replace with a single IssueHunt username
 otechie: # Replace with a single Otechie username
-custom: ['https://paypal.me/rahuldkjain']
+custom:
+  ["https://paypal.me/rahuldkjain", "https://www.buymeacoffee.com/rahuldkjain"]
@@ -1,10 +1,9 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: ''
+title: ""
 labels: bug
-assignees: ''
-
+assignees: ""
 ---

 **Describe the bug**
@@ -12,6 +11,7 @@ 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 '....'
@@ -24,15 +24,20 @@ A clear and concise description of what you expected to happen.
 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]
+
+- 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]
+
+- 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.
+
+Join the **Discord Server** for further discussions.
+Server Link: https://discord.gg/HHMs7Eg
@@ -1,10 +1,9 @@
 ---
 name: Feature/Enhancement request
 about: Suggest an idea for this project
-title: ''
+title: ""
 labels: enhancement
-assignees: ''
-
+assignees: ""
 ---

 **Is your feature request related to a problem? Please describe.**
@@ -18,3 +17,7 @@ A clear and concise description of any alternative solutions or features you've

 **Additional context**
 Add any other context or screenshots about the feature request here.
+
+Join the **Discord Server** for further discussions.
+
+Server Link: https://discord.gg/HHMs7Eg
@@ -0,0 +1,43 @@
+<!--
+     For Work In Progress Pull Requests, please use the Draft PR feature,
+     see https://github.blog/2019-02-14-introducing-draft-pull-requests/ for further details.
+
+     For a timely review/response, please avoid force-pushing additional
+     commits if your PR already received reviews or comments.
+
+     Before submitting a Pull Request, please ensure you've done the following:
+     - 📖 Read the Contributing Guide: https://github.com/rahuldkjain/github-profile-readme-generator/blob/master/CONTRIBUTING.md#create-a-pull-request.
+     - 📖 Read the Code of Conduct: https://github.com/rahuldkjain/github-profile-readme-generator/blob/master/CODE_OF_CONDUCT.md.
+     - 👷‍♀️ Create small PRs. In most cases this will be possible.
+     - ✅ Provide issue number with link.
+     - 📝 Use descriptive commit messages.
+     - 📗 Update any related documentation and include any relevant screenshots.
+-->
+
+## What type of PR is this? (check all applicable)
+
+- [ ] Refactor
+- [ ] Feature
+- [ ] Bug Fix
+- [ ] Enhancement
+- [ ] Documentation Update
+
+## Description
+
+## Related Tickets & Documents
+
+## QA Instructions, Screenshots, Recordings
+
+_Please replace this line with instructions on how to test your changes, as well
+as any relevant images for UI changes._
+
+<!-- ## Added tests?
+
+- [ ] yes
+- [ ] no, because they aren't needed
+- [ ] no, because I need help -->
+
+## Added to documentation?
+
+- [ ] readme
+
@@ -0,0 +1,17 @@
+# Configuration for new-issue-welcome - https://github.com/behaviorbot/new-issue-welcome
+
+# Comment to be posted to on first time issues
+newIssueWelcomeComment: >
+  Thanks for opening your first issue here! Your contribution means alot. 🙌 Join Discord Server (https://discord.gg/HHMs7Eg) for discussing issues, pull-requests, new features, etc.
+
+# Configuration for new-pr-welcome - https://github.com/behaviorbot/new-pr-welcome
+
+# Comment to be posted to on PRs from first time contributors in your repository
+newPRWelcomeComment: >
+  Thanks for opening this pull request! Make sure you have assigned an issue to this respective PR 😇
+
+# Configuration for first-pr-merge - https://github.com/behaviorbot/first-pr-merge
+
+# Comment to be posted to on pull requests merged by a first time user
+firstPRMergeComment: >
+  Congrats on merging your first pull request🎉! Thanks alot for your contribution. 🙏
@@ -0,0 +1,76 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+ advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at rahuldkjain@gmail.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq
@@ -0,0 +1,21 @@
+# Contributing
+
+When contributing to this repository, please first discuss the change you wish to make via issue,
+email, or any other method with the owners of this repository before making a change.
+
+<a href="https://discord.gg/HHMs7Eg" target="blank">
+<img src="https://img.shields.io/discord/735303195105951764?color=%23677BC4&label=Join%20Community&style=flat-square" alt="join discord community of github profile readme generator"/>
+</a>
+
+Please note we have a code of conduct, please follow it in all your interactions with the project.
+
+## Pull Request Process
+
+1. Ensure any install or build dependencies are removed before the end of the layer when doing a
+   build.
+2. Update the README.md with details of changes to the interface, this includes new environment
+   variables, exposed ports, useful file locations and container parameters.
+3. Increase the version numbers in any examples files and the README.md to the new version that this
+   Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/).
+4. You may merge the Pull Request once you have the sign-off of two other developers, or if you
+   do not have permission to do that, you may request the second reviewer merge it for you.
@@ -4,7 +4,7 @@
  </a>
 </p>
 <h1 align="center">
-  GitHub Profile Readme Generator
+  GitHub Profile README Generator
 </h1>

 <p align="center">
@@ -23,6 +23,9 @@
 <a href="https://github.com/rahuldkjain/github-profile-readme-generator/pulls" target="blank">
 <img src="https://img.shields.io/github/issues-pr/rahuldkjain/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator pull-requests"/>
 </a>
+<a href="https://discord.gg/HHMs7Eg" target="blank">
+<img src="https://img.shields.io/discord/735303195105951764?label=Join%20Community&logo=discord&style=flat-square" alt="join discord community of github profile readme generator"/>
+</a>
 </p>

 <p align="center"><img src="./src/images/github-profile-readme-generator.gif" alt="github-profile-readme-generator gif" /></p>
@@ -36,55 +39,110 @@
 </p>

 <p align="center">
-<i>Loved the tool? Please consider <a href="https://paypal.me/rahuldkjain">donating</a>  💸 to help it improve!</i>
+<i>Loved the tool? Please consider <a href="https://paypal.me/rahuldkjain/10">donating</a>  💸 to help it improve!</i>
+</p>
+
+<p align="center">
+<a href="https://www.paypal.me/rahuldkjain"><img src="https://img.shields.io/badge/support-PayPal-blue?logo=PayPal&style=flat-square&label=Donate" alt="sponsor github profile readme generator"/>
+</a>
+<a href='https://ko-fi.com/A0A81XXSX' target='_blank'><img height='23' width="100" src='https://cdn.ko-fi.com/cdn/kofi3.png?v=2' alt='Buy Coffee for rahuldkjain' />
+</a>
+<a href="https://www.buymeacoffee.com/rahuldkjain" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="23" width="100" style="border-radius:1px" />
 </p>

 #### 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](https://rahuldkjain.github.io/gh-profile-readme-generator)
+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 
+<a href="https://rahuldkjain.github.io/gh-profile-readme-generator" target="blank">
+<img src="https://img.shields.io/website?url=https%3A%2F%2Frahuldkjain.github.io%2Fgh-profile-readme-generator&logo=github&style=flat-square" />
+</a>
+
+Try the tool: [GitHub Profile README Generator](https://rahuldkjain.github.io/gh-profile-readme-generator)

 ## 🧐 Features
-Just fill the details like `Name`, `Tagline`, `Dev Platforms Username`, `Current Work`, `Portfolio`, `Blog` etc. with a minimal UI.
+
+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**
+
+- **Dynamic Dev(.)to Blogs** (GitHub Action)
+
+- **Dynamic Medium Blogs** (GitHub Action)
+
+- **Dynamic Personal Blogs from RSS Feed** (GitHub Action)
+
+- **Wakatime Stats** [contribute](https://github.com/rahuldkjain/github-profile-readme-generator/issues/115)

 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

-## Installation Steps
 1. Clone the repository
+
 ```bash
 git clone https://github.com/rahuldkjain/github-profile-readme-generator.git
 ```
+
 2. Change the working directory
+
 ```bash
 cd github-profile-readme-generator
 ```
+
 3. Install dependencies
+
 ```bash
 npm install
 ```
+
 4. Run the app
+
 ```bash
 npm start
 ```
+
 🌟 You are all set!

+## 🍰 Contributing
+
+Please contribute using [GitHub Flow](https://guides.github.com/introduction/flow). Create a branch, add commits, and [open a pull request](https://github.com/rahuldkjain/github-profile-readme-generator/compare).
+
+Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDUCT`](CODE_OF_CONDUCT.md), and the process for submitting pull requests to us.
+
+## 💻 Built with
+- [Gatsby](https://www.gatsbyjs.com/)
+- [Tailwind CSS](https://tailwindcss.com/): for styling
+- [GSAP](https://greensock.com/gsap/): for small SVG Animations
+
+
+## 🙇 Special Thanks

-## Special Thanks 🙇
 - [Anurag Hazra](https://github.com/anuraghazra) for amazing [github-readme-stats](https://github.com/anuraghazra/github-readme-stats)
 - [Anton Komarev](https://github.com/antonkomarev) for super cool [github-profile-views-counter](https://github.com/antonkomarev/github-profile-views-counter)
 - [Gautam Krishna R](https://github.com/gautamkrishnar) for the awesome [blog post workflow](https://github.com/gautamkrishnar/blog-post-workflow)
 - [Julien Monty](https://github.com/konpa) for super useful [devicon](https://github.com/konpa/devicon)

-## Sponsors 🙇
- [Scott C Wilson](https://github.com/scottcwilson) donated the first ever grant to this tool. A big thanks to him.
- [Max Schmitt](https://github.com/mxschmitt) loved the tool and showed the support with his donation. Thanks a lot.
+## 🙇 Sponsors
+
+- [Scott C Wilson](https://github.com/scottcwilson) donated the first-ever grant to this tool. A big thanks to him.
+- [Max Schmitt](https://github.com/mxschmitt) loved the tool and showed support with his donation. Thanks a lot.
+
+## 🙏 Support

-## Support 🙏
 <p align="left">
-<a href="https://www.paypal.me/rahuldkjain"><img src="https://ionicabizau.github.io/badges/paypal.svg" alt="sponsor github profile readme generator"/>
+<a href="https://www.paypal.me/rahuldkjain/10"><img src="https://ionicabizau.github.io/badges/paypal.svg" alt="sponsor github profile readme generator"/>
 </a>
 <a href="https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator">
 <img src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator" alt="tweet github profile readme generator"/>
@@ -97,6 +155,33 @@ npm start
  <a href="https://www.buymeacoffee.com/rahuldkjain" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="23" width="100" style="border-radius:2px" />
 </p>

+## Contributors ✨
+<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+[![All Contributors](https://img.shields.io/badge/all_contributors-9-orange.svg?style=flat-square)](#contributors-)
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tr>
+    <td align="center"><a href="https://github.com/sarbikbetal"><img src="https://avatars2.githubusercontent.com/u/41508422?v=4" width="100px;" alt=""/><br /><sub><b>Sarbik Betal</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=sarbikbetal" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/Hardik0307"><img src="https://avatars3.githubusercontent.com/u/41434099?v=4" width="100px;" alt=""/><br /><sub><b>Hardik Bagada</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=Hardik0307" title="Code">💻</a></td>
+    <td align="center"><a href="https://komarev.com"><img src="https://avatars0.githubusercontent.com/u/1849174?v=4" width="100px;" alt=""/><br /><sub><b>Anton Komarev</b></sub></a><br /><a href="#plugin-antonkomarev" title="Plugin/utility libraries">🔌</a></td>
+    <td align="center"><a href="https://kkvanonymous.github.io/"><img src="https://avatars3.githubusercontent.com/u/58628586?v=4" width="100px;" alt=""/><br /><sub><b>Kunal Kumar Verma</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=KKVANONYMOUS" title="Code">💻</a></td>
+    <td align="center"><a href="http://jaideepghosh.blogspot.com"><img src="https://avatars2.githubusercontent.com/u/3909648?v=4" width="100px;" alt=""/><br /><sub><b>Jaideep Ghosh</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=jaideepghosh" title="Code">💻</a></td>
+    <td align="center"><a href="http://yashkandalkar.github.io"><img src="https://avatars0.githubusercontent.com/u/35102959?v=4" width="100px;" alt=""/><br /><sub><b>yash</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=YashKandalkar" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/abhijit-hota"><img src="https://avatars0.githubusercontent.com/u/8116174?v=4" width="100px;" alt=""/><br /><sub><b>Abhijit Hota</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=abhijit-hota" title="Code">💻</a> <a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=abhijit-hota" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://maddoxx88.github.io/"><img src="https://avatars1.githubusercontent.com/u/34238672?v=4" width="100px;" alt=""/><br /><sub><b>Sunit Shirke</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=Maddoxx88" title="Code">💻</a></td>
+    <td align="center"><a href="https://www.gsavitha.in"><img src="https://avatars0.githubusercontent.com/u/31612459?v=4" width="100px;" alt=""/><br /><sub><b>Savitha Gollamudi</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=g-savitha" title="Code">💻</a></td>
+  </tr>
+</table>
+
+<!-- markdownlint-enable -->
+<!-- prettier-ignore-end -->
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
 <hr>
 <p align="center">
 Developed with ❤️ in India 🇮🇳 
@@ -0,0 +1 @@
+module.exports = "test-file-stub"
@@ -0,0 +1,27 @@
+const React = require("react")
+const gatsby = jest.requireActual("gatsby")
+
+module.exports = {
+  ...gatsby,
+  graphql: jest.fn(),
+  Link: jest.fn().mockImplementation(
+    // these props are invalid for an `a` tag
+    ({
+      activeClassName,
+      activeStyle,
+      getProps,
+      innerRef,
+      partiallyActive,
+      ref,
+      replace,
+      to,
+      ...rest
+    }) =>
+      React.createElement("a", {
+        ...rest,
+        href: to,
+      })
+  ),
+  StaticQuery: jest.fn(),
+  useStaticQuery: jest.fn(),
+}
@@ -1,2 +1,2 @@
-import "./src/styles/tailwind.css";
-require("prismjs/themes/prism-okaidia.css");
+import "./src/styles/tailwind.css"
+require("prismjs/themes/prism-okaidia.css")
@@ -24,10 +24,8 @@ module.exports = {
    {
      resolve: `gatsby-transformer-remark`,
      options: {
-        plugins: [
-          `gatsby-remark-prismjs`,
-        ]
-      }
+        plugins: [`gatsby-remark-prismjs`],
+      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
@@ -56,7 +54,7 @@ module.exports = {
      resolve: `gatsby-plugin-postcss`,
      options: {
        postCssPlugins: [require("tailwindcss")],
-      }
+      },
    },
    {
      resolve: `gatsby-plugin-purgecss`,
@@ -64,9 +62,9 @@ module.exports = {
        printRejected: false,
        develop: false,
        tailwind: true,
-      }
      },
-    `gatsby-plugin-twitter`
+    },
+    `gatsby-plugin-twitter`,
  ],
  // this (optional) plugin enables Progressive Web App + Offline functionality
  // To learn more, visit: https://gatsby.dev/offline
@@ -36,4 +36,4 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
      },
    })
  })
-  }
+}
@@ -0,0 +1,5 @@
+const babelOptions = {
+  presets: ["babel-preset-gatsby"],
+}
+
+module.exports = require("babel-jest").createTransformer(babelOptions)
@@ -0,0 +1,15 @@
+module.exports = {
+  transform: {
+    "^.+\\.jsx?$": `<rootDir>/jest-preprocess.js`,
+  },
+  moduleNameMapper: {
+    ".+\\.(css|styl|less|sass|scss)$": `identity-obj-proxy`,
+    ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": `<rootDir>/__mocks__/file-mock.js`,
+  },
+  testPathIgnorePatterns: [`node_modules`, `\\.cache`, `<rootDir>.*/public`],
+  transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],
+  globals: {
+    __PATH_PREFIX__: ``,
+  },
+  setupFiles: [`<rootDir>/loadershim.js`],
+}
@@ -0,0 +1,3 @@
+global.___loader = {
+  enqueue: jest.fn(),
+}
@@ -12,7 +12,7 @@
    "gatsby-plugin-manifest": "^2.4.14",
    "gatsby-plugin-offline": "^3.2.13",
    "gatsby-plugin-react-helmet": "^3.3.6",
-    "gatsby-plugin-sharp": "^2.6.14",
+    "gatsby-plugin-sharp": "2.6.14",
    "gatsby-remark-prismjs": "^3.5.10",
    "gatsby-source-filesystem": "^2.3.23",
    "gatsby-transformer-remark": "^2.8.27",
@@ -25,12 +25,17 @@
    "react-helmet": "^6.1.0"
  },
  "devDependencies": {
+    "babel-jest": "26.3.0",
+    "babel-preset-gatsby": "0.5.11",
    "gatsby-plugin-postcss": "^2.3.11",
    "gatsby-plugin-purgecss": "^5.0.0",
    "gatsby-plugin-twitter": "^2.3.10",
    "gatsby-remark-embedder": "^3.0.0",
    "gh-pages": "^3.1.0",
+    "identity-obj-proxy": "3.0.0",
+    "jest": "26.4.2",
    "prettier": "2.0.5",
+    "react-test-renderer": "16.13.1",
    "tailwindcss": "^1.7.6"
  },
  "keywords": [
@@ -44,7 +49,7 @@
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
-    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
+    "test": "jest",
    "deploy": "gatsby build --prefix-paths && gh-pages -d public -b master"
  },
  "repository": {
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Title renders correctly 1`] = `
+<div
+  className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10"
+>
+  <div
+    className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2"
+  >
+    Title
+  </div>
+  <div
+    className="flex justify-start items-center w-full text-regular text-xs sm:text-lg"
+  >
+    <input
+      className="outline-none w-24 sm:w-40 mr-10 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700 prefix"
+      id="title-prefix"
+      onChange={[Function]}
+      value="Hi 👋, I'm"
+    />
+    <input
+      className="outline-none placeholder-gray-700 w-1/2 sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="title-name"
+      onChange={[Function]}
+      placeholder="name"
+      value=""
+    />
+  </div>
+</div>
+`;
@@ -0,0 +1,13 @@
+import React from "react"
+import renderer from "react-test-renderer"
+
+import Title from "../title"
+
+describe("Title", () => {
+  it("renders correctly", () => {
+    const tree = renderer
+      .create(<Title prefix={{ title: "Hi 👋, I'm" }} data={{ title: "" }} />)
+      .toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})
@@ -1,9 +1,110 @@
-import React from "react"
-import { withPrefix } from 'gatsby'
+import React, { useState, useEffect } from "react"
+import { withPrefix } from "gatsby"
 import { latestBlogs } from "../utils/workflows"
 import links from "../constants/page-links"
-import { isMediumUsernameValid } from "../utils/validation"
-const Addons = (props) => {
+import { isMediumUsernameValid, isGitHubUsernameValid } from "../utils/validation"
+import { ToolsIcon, XCircleIcon } from "@primer/octicons-react";
+
+const AddonsItem = ({inputId, inputChecked, onInputChange, Icon, onIconClick, ...props}) => {
+  return (
+    <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
+      <label htmlFor={inputId} className="cursor-pointer flex items-center">
+        <input
+          type="checkbox"
+          id={inputId}
+          checked={inputChecked}
+          onChange={onInputChange}
+        />
+        <span className="pl-4">{props.children}</span>
+      </label>
+      {
+        Icon?
+          <button onClick={onIconClick} className="flex ml-3 focus:bg-gray-400" style={{outline: "none"}}>
+            <Icon className="transform scale-100 md:scale-125" />
+          </button>
+          :''
+      }
+    </div>
+  )
+}
+
+const CustomizeBadge = ({githubName, badgeOptions, onBadgeUpdate}) =>  {
+  return (
+    <div className={`border-2 border-solid border-gray-900 bg-gray-100 p-2 ml-8`} style={{maxWidth: '21rem'}}>
+      <header className="text-base sm:text-lg">Customize Badge</header>
+      <hr className="border-gray-500"/>
+      <div className="text-sm sm:text-lg flex flex-col mt-2 ml-0 md:ml-4">
+        <label htmlFor="badge-style">Style:&nbsp;
+          <select 
+            id="badge-style" 
+            onChange={(e) => onBadgeUpdate('badgeStyle', e.target.value)} 
+            value = {badgeOptions.badgeStyle}
+          >
+            <option value="flat">Flat</option>
+            <option value="flat-square">Flat Square</option>
+            <option value="plastic">Plastic</option>
+          </select> 
+        </label>
+        
+        <label htmlFor="badge-color">Color:&nbsp;
+          <input 
+            type="color" 
+            id="badge-color" 
+            defaultValue={`#${badgeOptions.badgeColor}`} 
+            className="w-6"
+            onChange={(e) => onBadgeUpdate('badgeColor', e.target.value.replace('#', ''))}
+          />
+        </label>
+        
+        <label htmlFor="badge-label-text">Label Text:&nbsp;
+          <input 
+            type="text" 
+            id="badge-label-text" 
+            placeholder="Profile views" 
+            className="w-2/4 bg-gray-300 pl-2"
+            onChange={(e) => onBadgeUpdate('badgeLabel', e.target.value.trim())}
+            defaultValue={badgeOptions.badgeLabel}
+          />
+        </label>
+        
+        <span className="mt-2 flex items-center">
+          Preview:&nbsp;
+          {
+            isGitHubUsernameValid(githubName)?
+              <img 
+                src={`https://komarev.com/ghpvc/`
+                    + `?username=${githubName}`
+                    + `&label=${encodeURI(badgeOptions.badgeLabel)}`
+                    + `&color=${badgeOptions.badgeColor}`
+                    + `&style=${badgeOptions.badgeStyle}`
+                    }
+              />
+            : <span className="text-xxs md:text-sm text-red-600">Invalid GitHub username</span>
+          }
+          
+        </span>
+      </div>
+    </div>
+  )
+}
+
+const Addons = props => {
+  const [customizeBadgeOpen, setCustomizeOpen] = useState(false);
+  const [debounce, setDebounce] = useState(undefined);
+  const [badgeOptions, setBadgeOptions] = useState({
+    badgeStyle: props.data.badgeStyle, 
+    badgeColor: props.data.badgeColor, 
+    badgeLabel: props.data.badgeLabel
+  });
+
+  useEffect(() => {
+    setBadgeOptions({
+      badgeStyle: props.data.badgeStyle, 
+      badgeColor: props.data.badgeColor, 
+      badgeLabel: props.data.badgeLabel
+    })
+  }, [props.data.badgeStyle, props.data.badgeColor, props.data.badgeLabel])
+
  const blogPostPorkflow = () => {
    let payload = {
      dev: {
@@ -13,61 +114,146 @@ const Addons = (props) => {
      medium: {
        show: props.data.mediumDynamicBlogs,
        username: props.social.medium,
+      },
+      rssurl: {
+        show: props.data.rssDynamicBlogs,
+        username: props.social.rssurl,
+      },
    }
+    var actionContent = latestBlogs(payload)
+    var tempElement = document.createElement("a")
+    tempElement.setAttribute(
+      "href",
+      "data:text/yaml;charset=utf-8," + encodeURIComponent(actionContent)
+    )
+    tempElement.setAttribute("download", "blog-post-workflow.yml")
+    tempElement.style.display = "none"
+    document.body.appendChild(tempElement)
+    tempElement.click()
+    document.body.removeChild(tempElement)
  }
-        var actionContent = latestBlogs(payload);
-        var tempElement = document.createElement('a');
-        tempElement.setAttribute('href', 'data:text/yaml;charset=utf-8,' + encodeURIComponent(actionContent));
-        tempElement.setAttribute('download', 'blog-post-workflow.yml');
-        tempElement.style.display = 'none';
-        document.body.appendChild(tempElement);
-        tempElement.click();
-        document.body.removeChild(tempElement);
+
+  const onCustomizeClick = () => {
+    setCustomizeOpen(!customizeBadgeOpen);
+  }
+
+  const onBadgeUpdate = (option, value) => {
+    const callback = () => {
+      let newVal = (option==='badgeLabel' && value==='')?'Profile views':value;
+      setBadgeOptions({...badgeOptions, [option]: newVal});
+      props.handleDataChange(option, {target: {value: newVal}})
+    }
+    clearTimeout(debounce);
+    setDebounce(setTimeout(callback, 300));
  }
  return (
    <div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10">
-            <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Add-ons</div>
-            <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
-                <label htmlFor="visitors-count" className="cursor-pointer">
-                    <input type="checkbox" id="visitors-count" checked={props.data.visitorsBadge}
-                        onChange={event => props.handleCheckChange('visitorsBadge')} />&nbsp; display visitors count badge
-                </label>
-            </div>
-            <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
-                <label htmlFor="github-stats" className="cursor-pointer">
-                    <input id="github-stats" type="checkbox" checked={props.data.githubStats}
-                        onChange={event => props.handleCheckChange('githubStats')} />&nbsp; display github profile stats card
-                </label>
-            </div>
-            <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
-                <label htmlFor="top-languages" className="cursor-pointer">
-                    <input id="top-languages" type="checkbox" checked={props.data.topLanguages}
-                        onChange={event => props.handleCheckChange('topLanguages')} />&nbsp; display top skills
-                </label>
-            </div>
-            <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
-                <label htmlFor="dev-dynamic-blogs" className="cursor-pointer">
-                    <input id="dev-dynamic-blogs" type="checkbox" checked={props.data.devDynamicBlogs}
-                        onChange={event => props.handleCheckChange('devDynamicBlogs')} />&nbsp; display latest dev.to blogs dynamically (GitHub Action)
-                </label>
-            </div>
-            <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
-                <label htmlFor="medium-dynamic-blogs" className="cursor-pointer">
-                    <input id="medium-dynamic-blogs" type="checkbox" checked={props.data.mediumDynamicBlogs}
-                        onChange={event => props.handleCheckChange('mediumDynamicBlogs')} />&nbsp; display latest medium blogs dynamically (GitHub Action)
-                </label>
+      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">
+        Add-ons
      </div>
+      <AddonsItem
+        inputId="visitors-count"
+        inputChecked={props.data.visitorsBadge}
+        onInputChange={() => props.handleCheckChange("visitorsBadge")}
+        Icon={ customizeBadgeOpen ? XCircleIcon : ToolsIcon }
+        onIconClick={onCustomizeClick}
+      >
+        display visitors count badge
+      </AddonsItem>
+      {
+        customizeBadgeOpen?
+          <CustomizeBadge 
+            githubName={props.social.github} 
+            badgeOptions={badgeOptions}
+            onBadgeUpdate={onBadgeUpdate}
+          />
+        : ''
+      }
+      <AddonsItem
+        inputId="github-profile-trophy"
+        inputChecked={props.data.githubProfileTrophy}
+        onInputChange={() => props.handleCheckChange("githubProfileTrophy")}
+      >
+        display github trophy
+      </AddonsItem>
+      <AddonsItem
+        inputId="github-stats"
+        inputChecked={props.data.githubStats}
+        onInputChange={() => props.handleCheckChange("githubStats")}
+      >
+        display github profile stats card
+      </AddonsItem>
+      <AddonsItem
+        inputId="top-languages"
+        inputChecked={props.data.topLanguages}
+        onInputChange={() => props.handleCheckChange("topLanguages")}
+      >
+        display top skills
+      </AddonsItem>
+      <AddonsItem
+        inputId="twitter-badge"
+        inputChecked={props.data.twitterBadge}
+        onInputChange={() => props.handleCheckChange("twitterBadge")}
+      >
+        display twitter badge
+      </AddonsItem>
+      <AddonsItem
+        inputId="dev-dynamic-blogs"
+        inputChecked={props.data.devDynamicBlogs}
+        onInputChange={() => props.handleCheckChange("devDynamicBlogs")}
+      >
+        display latest dev.to blogs dynamically (GitHub Action)
+      </AddonsItem>
+      <AddonsItem
+        inputId="medium-dynamic-blogs"
+        inputChecked={props.data.mediumDynamicBlogs}
+        onInputChange={() => props.handleCheckChange("mediumDynamicBlogs")}
+      >
+        display latest medium blogs dynamically (GitHub Action)
+      </AddonsItem>
+      <AddonsItem
+        inputId="rss-dynamic-blogs"
+        inputChecked={props.data.rssDynamicBlogs}
+        onInputChange={() => props.handleCheckChange("rssDynamicBlogs")}
+      >
+        display latest blogs from your personal blog dynamically (GitHub Action)
+      </AddonsItem>

-            {(props.data.devDynamicBlogs && props.social.dev) || (props.data.mediumDynamicBlogs && props.social.medium && isMediumUsernameValid(props.social.medium)) ?
+      {(props.data.devDynamicBlogs && props.social.dev) ||
+      (props.data.rssDynamicBlogs && props.social.rssurl) ||
+      (props.data.mediumDynamicBlogs &&
+        props.social.medium &&
+        isMediumUsernameValid(props.social.medium)) ? (
        <div className="workflow">
          <div>
            download
-                        <span onClick={blogPostPorkflow} role="button" tabIndex="0" style={{ cursor: 'pointer', color: '#002ead' }}> blog-post-workflow.yml</span> file(learn
-                        <a href={withPrefix(links.addons)} target="blank" style={{ color: '#002ead' }}> how to setup</a>)
+            <span
+              onClick={blogPostPorkflow}
+              onKeyDown={(e) => e.keyCode === 13 && blogPostPorkflow()}
+              role="button"
+              tabIndex="0"
+              style={{ cursor: "pointer", color: "#002ead" }}
+            >
+              {" "}
+              blog-post-workflow.yml
+            </span>{" "}
+            file(learn
+            <a
+              href={withPrefix(links.addons)}
+              target="blank"
+              style={{ color: "#002ead" }}
+            >
+              {" "}
+              how to setup
+            </a>
+            )
          </div>
-                </div> : ''}
+        </div>
+      ) : (
+        ""
+      )}
    </div>
  )
 }

-export default Addons;
+export default Addons
@@ -0,0 +1,82 @@
+import React from "react"
+const Donate = () => {
+  return (
+    <>
+      <div className="text-center text-4xl my-2">Support&nbsp;
+        <span role="img" aria-label="praying hand emoji">🙏</span>
+      </div>
+      <div className="flex flex-col sm:flex-row items-start justify-between">
+        <div className="w-full sm:w-2/3">
+          <div className="text-2xl mb-2">
+            Are you using the tool and happy with it to create your GitHub
+            Profile?
+          </div>
+          <div className="text-lg">
+            Your kind support keeps open-source tools like this free for others.
+          </div>
+          <div className="mt-4">
+            <a
+              className="flex items-center justify-start w-20"
+              href="https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator"
+            >
+              <img
+                className="w-20"
+                src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator"
+                alt="tweet github profile readme generator"
+              />
+            </a>
+            Let the world know how you feel using this tool. Share with others
+            on twitter.
+          </div>
+        </div>
+        <div className="w-full sm:w-1/3 flex flex-col justify-center items-center">
+          <span>Tip<span role="img" aria-label="Dollar medal">💰</span></span>
+          {/* Ko-Fi */}
+          <a
+            href="https://ko-fi.com/A0A81XXSX"
+            className="flex items-center justify-evenly bg-red-500 text-white py-2 px-4 my-2"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <img
+              className="w-6 h-6 mr-2"
+              src="https://www.vectorlogo.zone/logos/ko-fi/ko-fi-icon.svg"
+              alt="Buy ko-fi for rahuldkjain"
+            />
+            Buy me a ko-fi
+          </a>
+          {/* Paypal */}
+          <a
+            href="https://www.paypal.me/rahuldkjain/10"
+            className="flex items-center justify-evenly bg-blue-500 text-white py-2 px-4 my-2"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <img
+              className="w-6 h-6 mr-2"
+              src="https://cdn.worldvectorlogo.com/logos/paypal-icon.svg"
+              alt="Donate rahuldkjain via paypal"
+            />
+            Paypal
+          </a>
+          {/* BuyMeACoffee */}
+          <a
+            href="https://www.buymeacoffee.com/rahuldkjain"
+            className="flex items-center justify-evenly bg-orange-500 text-white py-2 px-4 my-2"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <img
+              className="w-6 h-6 mr-2"
+              src="https://www.vectorlogo.zone/logos/buymeacoffee/buymeacoffee-icon.svg"
+              alt="Buy rahuldkjain A Coffee"
+            />
+            Buy me a coffee
+          </a>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Donate
@@ -1,14 +1,25 @@
-import React from 'react';
-import links from '../constants/page-links'
-import { Link } from 'gatsby'
+import React from "react"
+import links from "../constants/page-links"
+import logo from "../images/mdg.png"
+import discord from "../images/Discord-Logo.png"
+import { Link } from "gatsby"
 const Footer = () => {
  return (
    <div className="bg-gray-100 p-4 flex flex-col justify-center items-center shadow-inner mt-2">
-            <div className="w-full flex justify-evenly items-center py-2 text-orange-500">
+      <div className="w-full flex justify-evenly py-2">
+        <div className="mr-6">
+          <h1 className="text-base font-bold font-title sm:text-2xl flex-col items-end">
+            <img
+              src={logo}
+              className="h-24"
+              alt="github profile markdown generator logo"
+            />
+            GitHub Profile README Generator
+          </h1>
+        </div>
        <div>
-                    <Link to={links.about} activeStyle={{ color: "#002ead" }}>
-                        About
-                    </Link>
+          <div className="mb-2 font-bold font-medium font-title">
+            <strong>Pages</strong>
          </div>
          <div>
            <Link to={links.addons} activeStyle={{ color: "#002ead" }}>
@@ -20,11 +31,62 @@ const Footer = () => {
              Support
            </Link>
          </div>
+          <div>
+            <Link to={links.about} activeStyle={{ color: "#002ead" }}>
+              About
+            </Link>
          </div>
-            <div className="py-2">
-                Developed in India <span role="img" aria-label="india"> 🇮🇳</span>
+        </div>
+        <div>
+          <div className="mb-2 font-bold font-medium font-title">
+            <strong>More</strong>
+          </div>
+          <div>
+            <a
+              href="https://github.com/rahuldkjain/github-profile-readme-generator"
+              aria-label="Github rahuldkjain/github-profile-readme-generator"
+              target="blank"
+            >
+              Github
+            </a>
+          </div>
+          <div>
+            <a
+              href="https://github.com/rahuldkjain/github-profile-readme-generator/releases"
+              aria-label="Releases on Github rahuldkjain/github-profile-readme-generator"
+              target="blank"
+            >
+              Releases
+            </a>
+          </div>
+        </div>
+        <div>
+          <div className="mb-2 font-bold font-medium font-title">
+            <strong>Community</strong>
+          </div>
+          <div>
+            <a
+              href="https://discord.gg/HHMs7Eg"
+              aria-label="Discord of the community"
+              target="blank"
+            >
+              <img
+                src={discord}
+                className="h-12"
+                alt="Discord of the community"
+              />
+            </a>
+          </div>
+        </div>
+      </div>
+      <div className="py-2 mt-2">
+        Developed in India{" "}
+        <span role="img" aria-label="india">
+          {" "}
+          🇮🇳
+        </span>
      </div>
    </div>
  )
 }
-export default Footer;
+export default Footer
@@ -61,8 +61,11 @@ const Header = props => {
          className="mr-2"
        >
          <div className="text-xxs sm:text-sm border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1 px-2">
-            <StarIcon size={16} id="star-icon" className="px-1 w-6 star" />Star this repo
-            <span className="github-count px-1 sm:px-2">{stats.starsCount}</span>
+            <StarIcon size={16} id="star-icon" className="px-1 w-6 star" />
+            Star this repo
+            <span className="github-count px-1 sm:px-2">
+              {stats.starsCount}
+            </span>
          </div>
        </a>
        <a
@@ -71,8 +74,15 @@ const Header = props => {
          target="blank"
        >
          <div className="text-xxs sm:text-sm border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1 px-2">
-            <RepoForkedIcon size={16} id="fork-icon" className="px-1 w-6 fork" />Fork on GitHub
-            <span className="github-count px-1 sm:px-2">{stats.forksCount}</span>
+            <RepoForkedIcon
+              size={16}
+              id="fork-icon"
+              className="px-1 w-6 fork"
+            />
+            Fork on GitHub
+            <span className="github-count px-1 sm:px-2">
+              {stats.forksCount}
+            </span>
          </div>
        </a>
      </div>
@@ -1,21 +1,18 @@
-import React from "react";
-import Header from "./header";
-import Footer from "./footer";
+import React from "react"
+import Header from "./header"
+import Footer from "./footer"

-
-const Layout = ({children}) => {
+const Layout = ({ children }) => {
  return (
    <div className="flex flex-col min-h-screen">
      <header>
        <Header heading="GitHub Profile README Generator" />
      </header>
-            <main className="flex-grow">
-                {children}
-            </main>
+      <main className="flex-grow">{children}</main>
      <footer>
        <Footer />
      </footer>
    </div>
  )
-};
-export default Layout;
+}
+export default Layout
@@ -1,31 +1,40 @@
-import React, { useRef, useEffect } from 'react';
-import gsap from 'gsap';
+import React, { useRef, useEffect } from "react"
+import gsap from "gsap"
 const Loader = () => {
-    let arrow = useRef([]);
+  let arrow = useRef([])
  useEffect(() => {
-        var tl = new gsap.timeline({repeat: -1});
-        tl.fromTo(arrow.current, {
+    var tl = new gsap.timeline({ repeat: -1 })
+    tl.fromTo(
+      arrow.current,
+      {
        y: 0,
-            color: '#3b3b4f',
-        }, {
+        color: "#3b3b4f",
+      },
+      {
        y: -50,
-            color: '#d0d0d5',
+        color: "#d0d0d5",
        stagger: 0.1,
        duration: 0.5,
-            ease: 'Linear.easeNone'
-        });
-        tl.add('cp')
-        tl.fromTo(arrow.current, {
+        ease: "Linear.easeNone",
+      }
+    )
+    tl.add("cp")
+    tl.fromTo(
+      arrow.current,
+      {
        y: -50,
-            color: '#d0d0d5',
-        }, {
+        color: "#d0d0d5",
+      },
+      {
        y: 0,
-            color: '#3b3b4f',
+        color: "#3b3b4f",
        stagger: 0.1,
        duration: 0.5,
-            ease: 'Linear.easeNone'
-        }, 'cp-=0.3');
-    });
+        ease: "Linear.easeNone",
+      },
+      "cp-=0.3"
+    )
+  })
  return (
    <div className="loader">
      <span ref={el => (arrow.current[0] = el)}>↓</span>
@@ -37,4 +46,4 @@ const Loader = () => {
  )
 }

-export default Loader;
+export default Loader
@@ -1,20 +1,20 @@
-import React from 'react';
-import { isMediumUsernameValid } from '../utils/validation'
-import { icons, skills } from '../constants/skills';
+import React from "react"
+import { isMediumUsernameValid } from "../utils/validation"
+import { icons, skills, skillWebsites } from "../constants/skills"

-const Markdown = (props) => {
-    const Title = (props) => {
+const Markdown = props => {
+  const Title = props => {
    if (props.prefix && props.title) {
      return (
        <>
-                    {`<h1 align="center">${props.prefix + ' ' + props.title}</h1>`}
+          {`<h1 align="center">${props.prefix + " " + props.title}</h1>`}
          <br />
        </>
-            );
+      )
    }
-        return '';
+    return ""
  }
-    const SubTitle = (props) => {
+  const SubTitle = props => {
    if (props.subtitle) {
      return (
        <>
@@ -22,127 +22,485 @@ const Markdown = (props) => {
          <br />
          <br />
        </>
-            );
+      )
    }
-        return '';
+    return ""
  }
-    const DisplayWork = (props) => {
+  const SectionTitle = props => {
+    if (props.label) {
+      return (
+        <>
+          {`<h3 align="left">${props.label}</h3>`}
+          <br />
+        </>
+      )
+    }
+    return ""
+  }
+  const DisplayWork = props => {
    if (props.prefix && props.project) {
      if (props.link) {
-                return (<>{`- ${props.prefix} [${props.project}](${props.link})`}<br /><br /></>);
+        return (
+          <>
+            {`- ${props.prefix} [${props.project}](${props.link})`}
+            <br />
+            <br />
+          </>
+        )
      } else {
-                return (<>{`- ${props.prefix} **${props.project}**`}<br /><br /></>);
+        return (
+          <>
+            {`- ${props.prefix} **${props.project}**`}
+            <br />
+            <br />
+          </>
+        )
      }
    }
    if (props.prefix && props.link) {
-            return (<>{`- ${props.prefix} [${props.link}](${props.link})`}<br /><br /></>);
+      return (
+        <>
+          {`- ${props.prefix} [${props.link}](${props.link})`}
+          <br />
+          <br />
+        </>
+      )
    }
-        return '';
+    return ""
  }
-    const DisplaySocial = (props) => {
+  const DisplaySocial = props => {
    if (props.username) {
-            return (<>{`<a href="${props.base}/${props.username}" target="blank"><img align="center" src="${props.icon}" alt="${props.username}" height="30" width="30" /></a>`}<br /></>);
+      return (
+        <>
+          {`<a href="${props.base}/${props.username}" target="blank"><img align="center" src="${props.icon}" alt="${props.username}" height="30" width="40" /></a>`}
+          <br />
+        </>
+      )
    }
-        return '';
+    return ""
  }
-    const VisitorsBadge = (props) => {
-        let link = "https://komarev.com/ghpvc/?username=" + props.github
+  const VisitorsBadge = props => {
+    let link = "https://komarev.com/ghpvc/?username=" 
+                + props.github
+                + `&label=${props.badgeOptions.badgeLabel}`
+                + `&color=${props.badgeOptions.badgeColor}`
+                + `&style=${props.badgeOptions.badgeStyle}`
    if (props.show) {
-            return (<>{`<p align="left"> <img src="${link}" alt="${props.github}" /> </p>`}<br /><br /></>);
+      return (
+        <>
+          {`<p align="left"> <img src="${link}" alt="${props.github}" /> </p>`}
+          <br />
+          <br />
+        </>
+      )
    }
-        return '';
+    return ""
  }
-    const GitHubStats = (props) => {
-        let link = "https://github-readme-stats.vercel.app/api?username=" + props.github + "&show_icons=true"
+  const TwitterBadge = props => {
+    let link = "https://img.shields.io/twitter/follow/" + props.twitter + "?logo=twitter&style=for-the-badge"
    if (props.show) {
-            return (<>{`<p>&nbsp;<img align="center" src="${link}" alt="${props.github}" /></p>`}<br /><br /></>);
+      return (
+        <>
+          {`<p align="left"> <a href="${props.base}/${props.twitter}" target="blank"><img src="${link}" alt="${props.twitter}" /></a> </p>`}
+          <br />
+          <br />
+        </>
+      )
    }
-        return '';
+    return ""
  }
-    const isSocial = (social) => {
-        return (social.dev || social.twitter || social.codepen || social.codesandbox || social.stackoverflow
-            || social.linkedin || social.kaggle || social.instagram || social.fb || social.dribbble || social.behance || social.medium || social.youtube);
+  const GithubProfileTrophy = props => {
+    let link =
+      "https://github-profile-trophy.vercel.app/?username=" + props.github
+    if (props.show) {
+      return (
+        <>
+          {`<p align="left"> <a href="https://github.com/ryo-ma/github-profile-trophy"><img src="${link}" alt="${props.github}" /></a> </p>`}
+          <br />
+          <br />
+        </>
+      )
    }
-    const DisplaySkills = (props) => {
-        const listChosenSkills = [];
+    return ""
+  }
+  const GitHubStats = props => {
+    let link =
+      "https://github-readme-stats.vercel.app/api?username=" +
+      props.github +
+      "&show_icons=true"
+    if (props.show) {
+      return (
+        <>
+          {`<p>&nbsp;<img align="center" src="${link}" alt="${props.github}" /></p>`}
+          <br />
+          <br />
+        </>
+      )
+    }
+    return ""
+  }
+  const isSocial = social => {
+    return (
+      social.dev ||
+      social.twitter ||
+      social.codepen ||
+      social.codesandbox ||
+      social.stackoverflow ||
+      social.linkedin ||
+      social.kaggle ||
+      social.instagram ||
+      social.fb ||
+      social.dribbble ||
+      social.behance ||
+      social.medium ||
+      social.youtube ||
+      social.codechef ||
+      social.hackerrank ||
+      social.codeforces ||
+      social.leetcode ||
+      social.topcoder ||
+      social.hackerearth ||
+      social.geeks_for_geeks ||
+      social.rssurl
+    )
+  }
+  const DisplaySkills = props => {
+    const listChosenSkills = []
    skills.forEach(skill => {
      if (props.skills[skill]) {
-                listChosenSkills.push(`<img src="${icons[skill]}" alt="${skill}" width="40" height="40"/>`);
+        listChosenSkills.push(
+          `
+          <a href="${skillWebsites[skill]}" target="_blank">
+            <img src="${icons[skill]}" alt="${skill}" width="40" height="40"/>
+          </a>
+          `
+        )
      }
-        });
-        return listChosenSkills.length > 0 ? (<>{`<p align="left">${listChosenSkills.join(' ')}</p>`}<br/><br/></>) : '';
+    })
+    return listChosenSkills.length > 0 ? (
+      <>
+        <SectionTitle label="Languages and Tools:" />
+        {`<p align="left">${listChosenSkills.join(" ")}</p>`}
+        <br />
+        <br />
+      </>
+    ) : (
+      ""
+    )
  }
-    const DisplayDynamicBlogs = (props) => {
+  const DisplayDynamicBlogs = props => {
    if (props.show) {
-            return (<>{`### Blogs posts`}
+      return (
+        <>
+          {`### Blogs posts`}
          <br />
          {`<!-- BLOG-POST-LIST:START -->`}
          <br />
-                {`<!-- BLOG-POST-LIST:END -->`}<br /> <br /></>)
+          {`<!-- BLOG-POST-LIST:END -->`}
+          <br /> <br />
+        </>
+      )
    }
-        return '';
+    return ""
  }
-    const DisplayTopLanguages = (props) => {
-        let link = "https://github-readme-stats.vercel.app/api/top-langs/?username=" + props.github + "&layout=compact&hide=html"
+  const DisplayTopLanguages = props => {
+    let link =
+      "https://github-readme-stats.vercel.app/api/top-langs/?username=" +
+      props.github +
+      "&layout=compact"
    if (props.show) {
      if (!props.showStats) {
-                return (<>{`<p><img align="center" src="${link}" alt="${props.github}" /></p>`}<br /><br /></>);
+        return (
+          <>
+            {`<p><img align="center" src="${link}" alt="${props.github}" /></p>`}
+            <br />
+            <br />
+          </>
+        )
      }
-            return (<>{`<p><img align="left" src="${link}" alt="${props.github}" /></p>`}<br /><br /></>);
+      return (
+        <>
+          {`<p><img align="left" src="${link}" alt="${props.github}" /></p>`}
+          <br />
+          <br />
+        </>
+      )
    }
-        return '';
+    return ""
  }
  return (
    <div id="markdown-content" className="break-words">
-            <><Title prefix={props.prefix.title} title={props.data.title} /></>
-            <><SubTitle subtitle={props.data.subtitle} /></>
-            <><VisitorsBadge show={props.data.visitorsBadge} github={props.social.github} /></>
-
-            <><DisplayWork prefix={props.prefix.currentWork} project={props.data.currentWork} link={props.link.currentWork} /></>
-            <><DisplayWork prefix={props.prefix.currentLearn} project={props.data.currentLearn} /></>
-            <><DisplayWork prefix={props.prefix.collaborateOn} project={props.data.collaborateOn} link={props.link.collaborateOn} /></>
-            <><DisplayWork prefix={props.prefix.helpWith} project={props.data.helpWith} link={props.link.helpWith} /></>
-            <><DisplayWork prefix={props.prefix.portfolio} link={props.link.portfolio} /></>
-            <><DisplayWork prefix={props.prefix.blog} link={props.link.blog} /></>
-            <><DisplayWork prefix={props.prefix.ama} project={props.data.ama} /></>
-            <><DisplayWork prefix={props.prefix.contact} project={props.data.contact} /></>
-            <><DisplayWork prefix={props.prefix.funFact} project={props.data.funFact} /></>
-
-            <><DisplayDynamicBlogs show={(props.data.devDynamicBlogs && props.social.dev) ||
-                (props.data.mediumDynamicBlogs && props.social.medium && isMediumUsernameValid(props.social.medium))} /></>
-            <><DisplaySkills skills={props.skills} /></>
-            <><DisplayTopLanguages show={props.data.topLanguages} showStats={props.data.githubStats} github={props.social.github} /></>
-            <><GitHubStats show={props.data.githubStats} github={props.social.github} /></>
-            {isSocial(props.social) ? `<p align="center">` : ''} <br />
-            <><DisplaySocial base='https://codepen.io' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg'
-                username={props.social.codepen} /></>
-            <><DisplaySocial base='https://dev.to' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg'
-                username={props.social.dev} /></>
-            <><DisplaySocial base='https://twitter.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg'
-                username={props.social.twitter} /></>
-            <><DisplaySocial base='https://linkedin.com/in' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg'
-                username={props.social.linkedin} /></>
-            <><DisplaySocial base='https://stackoverflow.com/users'
-                icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg' username={props.social.stackoverflow} /></>
-            <><DisplaySocial base='https://codesandbox.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg'
-                username={props.social.codesandbox} /></>
-            <><DisplaySocial base='https://kaggle.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg'
-                username={props.social.kaggle} /></>
-            <><DisplaySocial base='https://fb.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg'
-                username={props.social.fb} /></>
-            <><DisplaySocial base='https://instagram.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg'
-                username={props.social.instagram} /></>
-            <><DisplaySocial base='https://dribbble.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dribbble.svg'
-                username={props.social.dribbble} /></>
-            <><DisplaySocial base='https://www.behance.net' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/behance.svg'
-                username={props.social.behance} /></>
-            <><DisplaySocial base='https://medium.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/medium.svg'
-                username={props.social.medium} /></>
-            <><DisplaySocial base='https://www.youtube.com/c' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/youtube.svg'
-                username={props.social.youtube} /></>
-            {isSocial(props.social) ? `</p>` : ''}
+      <>
+        <Title prefix={props.prefix.title} title={props.data.title} />
+      </>
+      <>
+        <SubTitle subtitle={props.data.subtitle} />
+      </>
+      <>
+        <VisitorsBadge
+          show={props.data.visitorsBadge}
+          github={props.social.github}
+          badgeOptions={{
+            badgeLabel: encodeURI(props.data.badgeLabel),
+            badgeColor: props.data.badgeColor,
+            badgeStyle: props.data.badgeStyle
+          }}
+        />
+      </>
+      <>
+        <GithubProfileTrophy
+          show={props.data.githubProfileTrophy}
+          github={props.social.github}
+        />
+        <TwitterBadge
+          base="https://twitter.com"
+          show={props.data.twitterBadge}
+          twitter={props.social.twitter}
+        />
+      </>
+      <>
+        <DisplayWork
+          prefix={props.prefix.currentWork}
+          project={props.data.currentWork}
+          link={props.link.currentWork}
+        />
+      </>
+      <>
+        <DisplayWork
+          prefix={props.prefix.currentLearn}
+          project={props.data.currentLearn}
+        />
+      </>
+      <>
+        <DisplayWork
+          prefix={props.prefix.collaborateOn}
+          project={props.data.collaborateOn}
+          link={props.link.collaborateOn}
+        />
+      </>
+      <>
+        <DisplayWork
+          prefix={props.prefix.helpWith}
+          project={props.data.helpWith}
+          link={props.link.helpWith}
+        />
+      </>
+      <>
+        <DisplayWork
+          prefix={props.prefix.portfolio}
+          link={props.link.portfolio}
+        />
+      </>
+      <>
+        <DisplayWork prefix={props.prefix.blog} link={props.link.blog} />
+      </>
+      <>
+        <DisplayWork prefix={props.prefix.ama} project={props.data.ama} />
+      </>
+      <>
+        <DisplayWork
+          prefix={props.prefix.contact}
+          project={props.data.contact}
+        />
+      </>
+      <>
+        <DisplayWork prefix={props.prefix.resume} link={props.link.resume} />
+      </>
+      <>
+        <DisplayWork
+          prefix={props.prefix.funFact}
+          project={props.data.funFact}
+        />
+      </>
+      <>
+        <DisplayDynamicBlogs
+          show={
+            (props.data.devDynamicBlogs && props.social.dev) ||
+            (props.data.rssDynamicBlogs && props.social.rssurl) ||
+            (props.data.mediumDynamicBlogs &&
+              props.social.medium &&
+              isMediumUsernameValid(props.social.medium))
+          }
+        />
+      </>
+      {isSocial(props.social) ? `<p align="left">` : ""} <br />
+      <>
+        <SectionTitle label="Connect with me:" />
+      </>
+      <>
+        <DisplaySocial
+          base="https://codepen.io"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
+          username={props.social.codepen}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://dev.to"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
+          username={props.social.dev}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://twitter.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg"
+          username={props.social.twitter}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://linkedin.com/in"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
+          username={props.social.linkedin}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://stackoverflow.com/users"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
+          username={props.social.stackoverflow}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://codesandbox.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
+          username={props.social.codesandbox}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://kaggle.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg"
+          username={props.social.kaggle}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://fb.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg"
+          username={props.social.fb}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://instagram.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg"
+          username={props.social.instagram}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://dribbble.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dribbble.svg"
+          username={props.social.dribbble}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.behance.net"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/behance.svg"
+          username={props.social.behance}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://medium.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/medium.svg"
+          username={props.social.medium}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.youtube.com/c"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/youtube.svg"
+          username={props.social.youtube}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.codechef.com/users"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/codechef.svg"
+          username={props.social.codechef}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.hackerrank.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerrank.svg"
+          username={props.social.hackerrank}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://codeforces.com/profile"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codeforces.svg"
+          username={props.social.codeforces}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.leetcode.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/leetcode.svg"
+          username={props.social.leetcode}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.hackerearth.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerearth.svg"
+          username={props.social.hackerearth}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://auth.geeksforgeeks.org/user"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/geeksforgeeks.svg"
+          username={props.social.geeks_for_geeks}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.topcoder.com/members"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/topcoder.svg"
+          username={props.social.topcoder}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base=""
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/rss.svg"
+          username={props.social.rssurl}
+        />
+      </>
+      {isSocial(props.social) ? (
+        <>
+          {`</p>`}
+          <br />
+          <br />
+        </>
+      ) : (
+        ""
+      )}
+      <>
+        <DisplaySkills skills={props.skills} />
+      </>
+      <>
+        <DisplayTopLanguages
+          show={props.data.topLanguages}
+          showStats={props.data.githubStats}
+          github={props.social.github}
+        />
+      </>
+      <>
+        <GitHubStats
+          show={props.data.githubStats}
+          github={props.social.github}
+        />
+      </>
    </div>
-    );
-};
+  )
+}

-export default Markdown;
+export default Markdown
@@ -1,132 +1,361 @@
-import React from 'react';
-import { icons, skills } from '../constants/skills';
+import React from "react"
+import { icons, skills, skillWebsites } from "../constants/skills"

-const MarkdownPreview = (props) => {
-    const TitlePreview = (props) => {
+const MarkdownPreview = props => {
+  const TitlePreview = props => {
    if (props.prefix && props.title) {
      return (
-                <h1 className="text-center text-xl font-bold">{props.prefix + ' ' + props.title}</h1>
+        <h1 className="text-center text-xl font-bold">
+          {props.prefix + " " + props.title}
+        </h1>
      )
    }
-        return null;
+    return null
  }
-    const SubTitlePreview = (props) => {
+  const SubTitlePreview = props => {
    if (props.subtitle) {
-            return (
-                <h3 className="text-center font-medium">{props.subtitle}</h3>
-            )
+      return <h3 className="text-center font-medium">{props.subtitle}</h3>
    }
-        return null;
+    return null
  }
-    const DisplayWork = (props) => {
+  const SectionTitle = props => {
+    if (props.label) {
+      return <h3 className="w-full text-lg sm:text-xl">{props.label}</h3>
+    }
+    return null
+  }
+  const DisplayWork = props => {
    if (props.prefix && props.project) {
      if (props.link) {
        return (
          <div className="my-2">
-                        {props.prefix + ' '}<a href={props.link} className="no-underline text-blue-700" target="blank">{props.project}</a>
+            {props.prefix + " "}
+            <a
+              href={props.link}
+              className="no-underline text-blue-700"
+              target="blank"
+            >
+              {props.project}
+            </a>
          </div>
-                );
+        )
      } else {
-                return (<div className="my-2">{props.prefix + ' '}<b>{props.project}</b></div>);
+        return (
+          <div className="my-2">
+            {props.prefix + " "}
+            <b>{props.project}</b>
+          </div>
+        )
      }
    }
    if (props.prefix && props.link) {
      return (
        <div className="my-2">
-                    {props.prefix + ' '}<a href={props.link} className="no-underline text-blue-700" target="blank">{props.link}</a>
+          {props.prefix + " "}
+          <a
+            href={props.link}
+            className="no-underline text-blue-700"
+            target="blank"
+          >
+            {props.link}
+          </a>
        </div>
-            );
+      )
    }
-        return null;
+    return null
  }
-    const WorkPreview = (props) => {
+  const WorkPreview = props => {
    const prefix = props.work.prefix
    const data = props.work.data
    const link = props.work.link
    return (
      <>
-                <DisplayWork prefix={prefix.currentWork} project={data.currentWork} link={link.currentWork} />
+        <DisplayWork
+          prefix={prefix.currentWork}
+          project={data.currentWork}
+          link={link.currentWork}
+        />
        <DisplayWork prefix={prefix.currentLearn} project={data.currentLearn} />
-                <DisplayWork prefix={prefix.helpWith} project={data.helpWith} link={link.helpWith} />
-                <DisplayWork prefix={prefix.collaborateOn} project={data.collaborateOn}
-                    link={link.collaborateOn} />
+        <DisplayWork
+          prefix={prefix.helpWith}
+          project={data.helpWith}
+          link={link.helpWith}
+        />
+        <DisplayWork
+          prefix={prefix.collaborateOn}
+          project={data.collaborateOn}
+          link={link.collaborateOn}
+        />
        <DisplayWork prefix={prefix.ama} project={data.ama} />
        <DisplayWork prefix={prefix.portfolio} link={link.portfolio} />
        <DisplayWork prefix={prefix.blog} link={link.blog} />
+        <DisplayWork prefix={prefix.resume} link={link.resume} />
        <DisplayWork prefix={prefix.contact} project={data.contact} />
        <DisplayWork prefix={prefix.funFact} project={data.funFact} />
      </>
    )
  }
-    const DisplaySocial = (props) => {
+  const DisplaySocial = props => {
    if (props.username) {
-            return (<a className="no-underline text-blue-700 m-2" href={props.base + '/' + props.username} target="blank"><img className="w-6 h-6" src={props.icon} alt="props.username" /></a>)
-        }
-        return null;
-    }
-    const SocialPreview = (props) => {
      return (
-            <div className="flex justify-center items-end">
-                <DisplaySocial base="https://codepen.io" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg" username={props.social.codepen} />
-                <DisplaySocial base="https://dev.to" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg" username={props.social.dev} />
-                <DisplaySocial base="https://twitter.com" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg" username={props.social.twitter} />
-                <DisplaySocial base="https://linkedin.com/in" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg" username={props.social.linkedin} />
-                <DisplaySocial base="https://stackoverflow.com/users" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg" username={props.social.stackoverflow} />
-                <DisplaySocial base="https://codesandbox.com" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg" username={props.social.codesandbox} />
-                <DisplaySocial base="https://kaggle.com" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg" username={props.social.kaggle} />
-                <DisplaySocial base="https://fb.com" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg" username={props.social.fb} />
-                <DisplaySocial base="https://instagram.com" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg" username={props.social.instagram} />
-                <DisplaySocial base='https://dribbble.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dribbble.svg' username={props.social.dribbble} />
-                <DisplaySocial base='https://www.behance.net' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/behance.svg' username={props.social.behance} />
-                <DisplaySocial base='https://medium.com' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/medium.svg' username={props.social.medium} />
-                <DisplaySocial base='https://www.youtube.com/c' icon='https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/youtube.svg' username={props.social.youtube} />
+        <a
+          className="no-underline text-blue-700 m-2"
+          href={props.base + "/" + props.username}
+          target="blank"
+        >
+          <img className="w-6 h-6" src={props.icon} alt="props.username" />
+        </a>
+      )
+    }
+    return null
+  }
+  const SocialPreview = props => {
+    return (
+      <div className="flex justify-start items-end flex-wrap">
+        <SectionTitle label="Connect with me:" />
+        <DisplaySocial
+          base="https://codepen.io"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
+          username={props.social.codepen}
+        />
+        <DisplaySocial
+          base="https://dev.to"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
+          username={props.social.dev}
+        />
+        <DisplaySocial
+          base="https://twitter.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg"
+          username={props.social.twitter}
+        />
+        <DisplaySocial
+          base="https://linkedin.com/in"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
+          username={props.social.linkedin}
+        />
+        <DisplaySocial
+          base="https://stackoverflow.com/users"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
+          username={props.social.stackoverflow}
+        />
+        <DisplaySocial
+          base="https://codesandbox.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
+          username={props.social.codesandbox}
+        />
+        <DisplaySocial
+          base="https://kaggle.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg"
+          username={props.social.kaggle}
+        />
+        <DisplaySocial
+          base="https://fb.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg"
+          username={props.social.fb}
+        />
+        <DisplaySocial
+          base="https://instagram.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg"
+          username={props.social.instagram}
+        />
+        <DisplaySocial
+          base="https://dribbble.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dribbble.svg"
+          username={props.social.dribbble}
+        />
+        <DisplaySocial
+          base="https://www.behance.net"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/behance.svg"
+          username={props.social.behance}
+        />
+        <DisplaySocial
+          base="https://medium.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/medium.svg"
+          username={props.social.medium}
+        />
+        <DisplaySocial
+          base="https://www.youtube.com/c"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/youtube.svg"
+          username={props.social.youtube}
+        />
+
+        <DisplaySocial
+          base="https://www.codechef.com/users"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codechef.svg"
+          username={props.social.codechef}
+        />
+        <DisplaySocial
+          base="https://codeforces.com/profile"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codeforces.svg"
+          username={props.social.codeforces}
+        />
+        <DisplaySocial
+          base="https://www.hackerrank.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerrank.svg"
+          username={props.social.hackerrank}
+        />
+        <DisplaySocial
+          base="https://auth.geeksforgeeks.org/user"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/geeksforgeeks.svg"
+          username={props.social.geeks_for_geeks}
+        />
+        <DisplaySocial
+          base="https://www.hackerearth.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerearth.svg"
+          username={props.social.hackerearth}
+        />
+        <DisplaySocial
+          base="https://www.topcoder.com/members"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/topcoder.svg"
+          username={props.social.topcoder}
+        />
+        <DisplaySocial
+          base="https://www.leetcode.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/leetcode.svg"
+          username={props.social.leetcode}
+        />
+        <DisplaySocial
+          base=""
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/rss.svg"
+          username={props.social.rssurl}
+        />
      </div>
    )
  }
-    const VisitorsBadgePreview = (props) => {
-        let link = "https://komarev.com/ghpvc/?username=" + props.github
+  const VisitorsBadgePreview = props => {
+    let link = "https://komarev.com/ghpvc/?username=" 
+                + props.github
+                + `&label=${props.badgeOptions.badgeLabel}`
+                + `&color=${props.badgeOptions.badgeColor}`
+                + `&style=${props.badgeOptions.badgeStyle}`
    if (props.show) {
-            return (<div className="text-left my-2"> <img className="h-4 sm:h-6" src={link} alt={props.github} /> </div>)
+      return (
+        <div className="text-left my-2">
+          {" "}
+          <img className="h-4 sm:h-6" src={link} alt={props.github} />{" "}
+        </div>
+      )
    }
-        return null;
+    return null
  }
-    const GitHubStatsPreview = (props) => {
-        let link = "https://github-readme-stats.vercel.app/api?username=" + props.github + "&show_icons=true"
+  const TwitterBadgePreview = props => {
+    let link = "https://img.shields.io/twitter/follow/" + props.twitter + "?logo=twitter&style=for-the-badge"
    if (props.show) {
-            return (<div className="text-center mx-4 mb-4"><img src={link} alt={props.github} /></div>)
+      return (
+        <div className="text-left my-2">
+          {" "}
+          <a href="https://twitter.com/${props.twitter}" target="blank">
+            <img className="h-4 sm:h-6" src={link} alt={props.twitter} />
+          </a>{" "}
+        </div>
+      )
    }
-        return null;
+    return null
  }
-    const TopLanguagesPreview = (props) => {
-        let link = "https://github-readme-stats.vercel.app/api/top-langs/?username=" + props.github + "&layout=compact&hide=html"
+  const GithubProfileTrophyPreview = props => {
+    let link =
+      "https://github-profile-trophy.vercel.app/?username=" + props.github
    if (props.show) {
-            return (<div className="text-center mx-4 mb-4"><img src={link} alt={props.github} /></div>)
+      return (
+        <div className="text-left my-2">
+          {" "}
+          <a href="https://github.com/ryo-ma/github-profile-trophy">
+            <img src={link} alt={props.github} />
+          </a>{" "}
+        </div>
+      )
    }
-        return <div className="text-center mx-4 mb-4"> &nbsp;</div>;
+    return null
  }
-    const SkillsPreview = (props) => {
+  const GitHubStatsPreview = props => {
+    let link =
+      "https://github-readme-stats.vercel.app/api?username=" +
+      props.github +
+      "&show_icons=true"
+    if (props.show) {
+      return (
+        <div className="text-center mx-4 mb-4">
+          <img src={link} alt={props.github} />
+        </div>
+      )
+    }
+    return null
+  }
+  const TopLanguagesPreview = props => {
+    let link =
+      "https://github-readme-stats.vercel.app/api/top-langs/?username=" +
+      props.github +
+      "&layout=compact"
+    if (props.show) {
+      return (
+        <div className="text-center mx-4 mb-4">
+          <img src={link} alt={props.github} />
+        </div>
+      )
+    }
+    return <div className="text-center mx-4 mb-4"> &nbsp;</div>
+  }
+  const SkillsPreview = props => {
    var listSkills = []
-        skills.forEach((skill) => {
+    skills.forEach(skill => {
      if (props.skills[skill]) {
-                listSkills.push(<img className="my-4 mx-4 h-6 w-6 sm:h-10 sm:w-10" key={skill} src={icons[skill]} alt={skill} />)
+        listSkills.push(
+          <a href={skillWebsites[skill]} target="_blank" rel="noreferrer">
+            <img
+              className="mb-4 mr-4 h-6 w-6 sm:h-10 sm:w-10"
+              key={skill}
+              src={icons[skill]}
+              alt={skill}
+            />
+          </a>
+        )
      }
-        });
-        return listSkills.length > 0 ? <div className='flex flex-wrap justify-start items-center'>{listSkills}</div> : ''
+    })
+    return listSkills.length > 0 ? (
+      <div className="flex flex-wrap justify-start items-center">
+        <SectionTitle label="Languages and Tools:" />
+        {listSkills}
+      </div>
+    ) : (
+      ""
+    )
  }
  return (
    <div id="markdown-preview">
      <TitlePreview prefix={props.prefix.title} title={props.data.title} />
      <SubTitlePreview subtitle={props.data.subtitle} />
-            <VisitorsBadgePreview show={props.data.visitorsBadge} github={props.social.github} />
+      <VisitorsBadgePreview
+        show={props.data.visitorsBadge}
+        github={props.social.github}
+        badgeOptions={{
+          badgeLabel: encodeURI(props.data.badgeLabel),
+          badgeColor: props.data.badgeColor,
+          badgeStyle: props.data.badgeStyle
+        }}
+      />
+      <GithubProfileTrophyPreview
+        show={props.data.githubProfileTrophy}
+        github={props.social.github}
+      />
+      <TwitterBadgePreview
+        show={props.data.twitterBadge}
+        twitter={props.social.twitter}
+      />
      <WorkPreview work={props} />
+      <SocialPreview social={props.social} />
      <SkillsPreview skills={props.skills} />
      <div className="block sm:flex sm:justify-center sm:items-start">
-                <TopLanguagesPreview show={props.data.topLanguages} github={props.social.github} />
-                <GitHubStatsPreview show={props.data.githubStats} github={props.social.github} />
+        <TopLanguagesPreview
+          show={props.data.topLanguages}
+          github={props.social.github}
+        />
+        <GitHubStatsPreview
+          show={props.data.githubStats}
+          github={props.social.github}
+        />
      </div>
-            <SocialPreview social={props.social} />
    </div>
  )
 }

-export default MarkdownPreview;
+export default MarkdownPreview
@@ -5,14 +5,21 @@ const Skills = props => {
  const createSkill = skill => {
    return (
      <div className="w-1/3 sm:w-1/4 my-6" key={skill}>
-        <label htmlFor={skill} className="skillCheckboxLabel cursor-pointer flex items-center justify-start">
+        <label
+          htmlFor={skill}
+          className="skillCheckboxLabel cursor-pointer flex items-center justify-start"
+        >
          <input
            id={skill}
            type="checkbox"
            checked={props.skills[skill]}
-            onChange={(event) => props.handleSkillsChange(skill)}
+            onChange={event => props.handleSkillsChange(skill)}
+          />
+          <img
+            className="ml-4 w-8 h-8 sm:w-10 sm:h-10"
+            src={icons[skill]}
+            alt={skill}
          />
-          <img className="ml-4 w-8 h-8 sm:w-10 sm:h-10" src={icons[skill]} alt={skill} />
          <span className="tooltiptext">{skill}</span>
        </label>
      </div>
@@ -21,11 +28,13 @@ const Skills = props => {

  return (
    <div className="px-2 sm:px-6 mb-10">
-      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Skills</div>
+      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">
+        Skills
+      </div>

      {Object.keys(categorizedSkills).map(key => (
        <div key={key}>
-          <h4 className="text-sm sm:text-xl text-gray-900 text-center">
+          <h4 className="text-sm sm:text-xl text-gray-900 text-left">
            {categorizedSkills[key].title}
          </h4>
          <div className="flex justify-start items-center flex-wrap w-full mb-6 pl-4 sm:pl-10">
@@ -1,99 +1,325 @@
-import React from 'react';
+import React from "react"

-const Social = (props) => {
+const Social = props => {
  return (
    <div className="px-2 sm:px-6 mb-4">
-            <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Social</div>
+      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">
+        Social
+      </div>
      <div className="flex flex-wrap justify-center items-center">
        <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
-                    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="github" />
-                    <input id="github" placeholder="github username"
-                        className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-1 sm:px-2 focus:border-blue-700"
-                        value={props.social.github} onChange={event => props.handleSocialChange('github', event)} />
+          <img
+            src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="github"
+          />
+          <input
+            id="github"
+            placeholder="github username"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-1 sm:px-2 focus:border-blue-700"
+            value={props.social.github}
+            onChange={event => props.handleSocialChange("github", event)}
+          />
        </div>
        <div className="w-1/2  flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
-                    <img src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/twitter.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="twitter" />
-                    <input id="twitter" placeholder="twitter username"
-                        className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
-                        value={props.social.twitter} onChange={event => props.handleSocialChange('twitter', event)} />
+          <img
+            src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/twitter.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="twitter"
+          />
+          <input
+            id="twitter"
+            placeholder="twitter username"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            value={props.social.twitter}
+            onChange={event => props.handleSocialChange("twitter", event)}
+          />
        </div>
        <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
-                    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="dev.to" />
-                    <input id="dev" placeholder="dev.to username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
-                        value={props.social.dev} onChange={event => props.handleSocialChange('dev', event)} />
+          <img
+            src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="dev.to"
+          />
+          <input
+            id="dev"
+            placeholder="dev.to username"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            value={props.social.dev}
+            onChange={event => props.handleSocialChange("dev", event)}
+          />
        </div>
        <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
-                    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="codepen" />
-                    <input id="codepen" placeholder="codepen username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
-                        value={props.social.codepen} onChange={event => props.handleSocialChange('codepen', event)} />
+          <img
+            src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="codepen"
+          />
+          <input
+            id="codepen"
+            placeholder="codepen username"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            value={props.social.codepen}
+            onChange={event => props.handleSocialChange("codepen", event)}
+          />
        </div>
        <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
-                    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="codesandbox" />
-                    <input id="codesandbox" placeholder="codesandbox username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
-                        value={props.social.codesandbox} onChange={event => props.handleSocialChange('codesandbox', event)} />
+          <img
+            src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="codesandbox"
+          />
+          <input
+            id="codesandbox"
+            placeholder="codesandbox username"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            value={props.social.codesandbox}
+            onChange={event => props.handleSocialChange("codesandbox", event)}
+          />
        </div>
        <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
-                    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="stackoverflow" />
-                    <input id="stackoverflow" placeholder="stackoverflow user ID" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
-                        value={props.social.stackoverflow} onChange={event => props.handleSocialChange('stackoverflow', event)} />
+          <img
+            src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="stackoverflow"
+          />
+          <input
+            id="stackoverflow"
+            placeholder="stackoverflow user ID"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            value={props.social.stackoverflow}
+            onChange={event => props.handleSocialChange("stackoverflow", event)}
+          />
        </div>
        <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
-                    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="linkedin" />
-                    <input id="linkedin" placeholder="linkedin username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
-                        value={props.social.linkedin} onChange={event => props.handleSocialChange('linkedin', event)} />
+          <img
+            src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="linkedin"
+          />
+          <input
+            id="linkedin"
+            placeholder="linkedin username"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            value={props.social.linkedin}
+            onChange={event => props.handleSocialChange("linkedin", event)}
+          />
        </div>
        <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
-                    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="kaggle" />
-                    <input id="kaggle" placeholder="kaggle username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
-                        value={props.social.kaggle} onChange={event => props.handleSocialChange('kaggle', event)} />
+          <img
+            src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="kaggle"
+          />
+          <input
+            id="kaggle"
+            placeholder="kaggle username"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            value={props.social.kaggle}
+            onChange={event => props.handleSocialChange("kaggle", event)}
+          />
        </div>
        <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
-                    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="facebook" />
-                    <input id="fb" placeholder="facebook username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
-                        value={props.social.fb} onChange={event => props.handleSocialChange('fb', event)} />
+          <img
+            src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="facebook"
+          />
+          <input
+            id="fb"
+            placeholder="facebook username"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            value={props.social.fb}
+            onChange={event => props.handleSocialChange("fb", event)}
+          />
        </div>
        <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
-                    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="instagram" />
-                    <input id="instagram" placeholder="instagram username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
-                        value={props.social.instagram} onChange={event => props.handleSocialChange('instagram', event)} />
+          <img
+            src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="instagram"
+          />
+          <input
+            id="instagram"
+            placeholder="instagram username"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            value={props.social.instagram}
+            onChange={event => props.handleSocialChange("instagram", event)}
+          />
        </div>
        <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
-                    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/dribbble.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="dribbble" />
-                    <input id="dribbble" placeholder="dribbble username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
-                        value={props.social.dribbble} onChange={event => props.handleSocialChange('dribbble', event)} />
+          <img
+            src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/dribbble.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="dribbble"
+          />
+          <input
+            id="dribbble"
+            placeholder="dribbble username"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            value={props.social.dribbble}
+            onChange={event => props.handleSocialChange("dribbble", event)}
+          />
        </div>
        <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
-                    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/behance.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="behance" />
-                    <input id="behance" placeholder="behance username" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
-                        value={props.social.behance} onChange={event => props.handleSocialChange('behance', event)} />
+          <img
+            src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/behance.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="behance"
+          />
+          <input
+            id="behance"
+            placeholder="behance username"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            value={props.social.behance}
+            onChange={event => props.handleSocialChange("behance", event)}
+          />
        </div>
        <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
-                    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/medium.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="medium" />
-                    <input id="medium" placeholder="medium username (with @)" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
-                        value={props.social.medium} onChange={event => props.handleSocialChange('medium', event)} />
+          <img
+            src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/medium.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="medium"
+          />
+          <input
+            id="medium"
+            placeholder="medium username (with @)"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            value={props.social.medium}
+            onChange={event => props.handleSocialChange("medium", event)}
+          />
        </div>
        <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
-                    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/youtube.svg"
-                        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="youtube" />
-                    <input id="youtube" placeholder="youtube channel name" className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
-                        value={props.social.youtube} onChange={event => props.handleSocialChange('youtube', event)} />
+          <img
+            src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/youtube.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="youtube"
+          />
+          <input
+            id="youtube"
+            placeholder="youtube channel name"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            value={props.social.youtube}
+            onChange={event => props.handleSocialChange("youtube", event)}
+          />
+        </div>
+        <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
+          <img
+            src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/codechef.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="codechef"
+          />
+          <input
+            id="codechef"
+            placeholder="codechef username"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            value={props.social.codechef}
+            onChange={event => props.handleSocialChange("codechef", event)}
+          />
+        </div>
+        <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
+          <img
+            src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/hackerrank.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="hackerrank"
+          />
+          <input
+            id="hackerrank"
+            placeholder="hackerrank username"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            value={props.social.hackerrank}
+            onChange={event => props.handleSocialChange("hackerrank", event)}
+          />
+        </div>
+        <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
+          <img
+            src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/codeforces.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="codeforces"
+          />
+          <input
+            id="codeforces"
+            placeholder="codeforces username"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            value={props.social.codeforces}
+            onChange={event => props.handleSocialChange("codeforces", event)}
+          />
+        </div>
+        <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
+          <img
+            src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/leetcode.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="leetcode"
+          />
+          <input
+            id="leetcode"
+            placeholder="leetcode username"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            value={props.social.leetcode}
+            onChange={event => props.handleSocialChange("leetcode", event)}
+          />
+        </div>
+        <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
+          <img
+            src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/topcoder.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="topcoder"
+          />
+          <input
+            id="topcoder"
+            placeholder="topcoder username"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            value={props.social.topcoder}
+            onChange={event => props.handleSocialChange("topcoder", event)}
+          />
+        </div>
+        <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
+          <img
+            src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/hackerearth.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="hackerearth"
+          />
+          <input
+            id="hackerearth"
+            placeholder="hackerearth user (with @)"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            value={props.social.hackerearth}
+            onChange={event => props.handleSocialChange("hackerearth", event)}
+          />
+        </div>
+        <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
+          <img
+            src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/geeksforgeeks.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="geeksforgeeks"
+          />
+          <input
+            id="geeksforgeeks"
+            placeholder="GFG (<username>/profile)"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            value={props.social.geeks_for_geeks}
+            onChange={event =>
+              props.handleSocialChange("geeks_for_geeks", event)
+            }
+          />
+        </div>
+        <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
+          <img
+            src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/rss.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="rssfeed"
+          />
+          <input
+            id="rssurl"
+            placeholder="RSS feed URL"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            value={props.social.rssurl}
+            onChange={event => props.handleSocialChange("rssurl", event)}
+          />
        </div>
      </div>
    </div>
-    );
+  )
 }

-export default Social;
+export default Social
@@ -1,13 +1,19 @@
-import React from 'react';
+import React from "react"

-const Subtitle = (props) => {
+const Subtitle = props => {
  return (
    <div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10">
-            <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Subtitle</div>
-            <input id="subtitle" className="w-full text-xs sm:text-lg sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700" value={props.data.subtitle} 
-            onChange={event => props.handleDataChange('subtitle', event)} />
+      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">
+        Subtitle
      </div>
-    );
+      <input
+        id="subtitle"
+        className="outline-none w-full text-xs sm:text-lg sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+        value={props.data.subtitle}
+        onChange={event => props.handleDataChange("subtitle", event)}
+      />
+    </div>
+  )
 }

-export default Subtitle;
+export default Subtitle
@@ -1,19 +1,28 @@
-import React from 'react';
+import React from "react"

-const Title = (props) => {
+const Title = props => {
  return (
    <div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10">
-            <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Title</div>
+      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">
+        Title
+      </div>
      <div className="flex justify-start items-center w-full text-regular text-xs sm:text-lg">
-                <input id="title-prefix"
-                    className="w-24 sm:w-40 mr-10 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700 prefix"
-                    value={props.prefix.title} onChange={event => props.handlePrefixChange('title', event)} />
-                <input id="title-name" placeholder="name" className="placeholder-gray-700 w-1/2 sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700" 
+        <input
+          id="title-prefix"
+          className="outline-none w-24 sm:w-40 mr-10 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700 prefix"
+          value={props.prefix.title}
+          onChange={event => props.handlePrefixChange("title", event)}
+        />
+        <input
+          id="title-name"
+          placeholder="name"
+          className="outline-none placeholder-gray-700 w-1/2 sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
          value={props.data.title}
-                    onChange={event => props.handleDataChange('title', event)} />
+          onChange={event => props.handleDataChange("title", event)}
+        />
      </div>
    </div>
-    );
+  )
 }

-export default Title;
+export default Title
@@ -10,21 +10,21 @@ const Work = props => {
        <input
          id="currentWork-prefix"
          placeholder="Hi, I'm "
-          className="placeholder-gray-700 mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
          value={props.prefix.currentWork}
          onChange={event => props.handlePrefixChange("currentWork", event)}
        />
        <input
          id="currentWork"
          placeholder="project name"
-          className="placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
          value={props.data.currentWork}
          onChange={event => props.handleDataChange("currentWork", event)}
        />
        <input
          id="currentWork-link"
          placeholder="project link"
-          className="placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
          value={props.link.currentWork}
          onChange={event => props.handleLinkChange("currentWork", event)}
        />
@@ -32,21 +32,21 @@ const Work = props => {
      <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
        <input
          id="collaborateOn-prefix"
-          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
          value={props.prefix.collaborateOn}
          onChange={event => props.handlePrefixChange("collaborateOn", event)}
        />
        <input
          id="collaborateOn"
          placeholder="project name"
-          className="placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
          value={props.data.collaborateOn}
          onChange={event => props.handleDataChange("collaborateOn", event)}
        />
        <input
          id="collaborateOn-link"
          placeholder="project link"
-          className="placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
          value={props.link.collaborateOn}
          onChange={event => props.handleLinkChange("collaborateOn", event)}
        />
@@ -54,21 +54,21 @@ const Work = props => {
      <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
        <input
          id="helpWith-prefix"
-          className="placeholder-gray-700 mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
          value={props.prefix.helpWith}
          onChange={event => props.handlePrefixChange("helpWith", event)}
        />
        <input
          id="helpWith"
          placeholder="project name"
-          className="placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
          value={props.data.helpWith}
          onChange={event => props.handleDataChange("helpWith", event)}
        />
        <input
          id="helpWith-link"
          placeholder="project link"
-          className="placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
          value={props.link.helpWith}
          onChange={event => props.handleLinkChange("helpWith", event)}
        />
@@ -77,14 +77,14 @@ const Work = props => {
      <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
        <input
          id="currentLearn-prefix"
-          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
          value={props.prefix.currentLearn}
          onChange={event => props.handlePrefixChange("currentLearn", event)}
        />
        <input
          id="currentLearn"
          placeholder="Frameworks, courses etc."
-          className="placeholder-gray-700 w-full sm:w-1/3  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 w-full sm:w-1/3  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
          value={props.data.currentLearn}
          onChange={event => props.handleDataChange("currentLearn", event)}
        />
@@ -92,14 +92,14 @@ const Work = props => {
      <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
        <input
          id="ama-prefix"
-          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
          value={props.prefix.ama}
          onChange={event => props.handlePrefixChange("ama", event)}
        />
        <input
          id="ama"
          placeholder="react, vue and gsap"
-          className="placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
          value={props.data.ama}
          onChange={event => props.handleDataChange("ama", event)}
        />
@@ -108,14 +108,14 @@ const Work = props => {
      <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
        <input
          id="contact-prefix"
-          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
          value={props.prefix.contact}
          onChange={event => props.handlePrefixChange("contact", event)}
        />
        <input
          id="contact"
          placeholder="example@gmail.com"
-          className="placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
          value={props.data.contact}
          onChange={event => props.handleDataChange("contact", event)}
        />
@@ -124,14 +124,14 @@ const Work = props => {
      <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
        <input
          id="portfolio-prefix"
-          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
          value={props.prefix.portfolio}
          onChange={event => props.handlePrefixChange("portfolio", event)}
        />
        <input
          id="portfolio"
          placeholder="portfolio link"
-          className="placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
          value={props.link.portfolio}
          onChange={event => props.handleLinkChange("portfolio", event)}
        />
@@ -139,29 +139,45 @@ const Work = props => {
      <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
        <input
          id="blog-prefix"
-          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
          value={props.prefix.blog}
          onChange={event => props.handlePrefixChange("blog", event)}
        />
        <input
          id="blog"
          placeholder="blog link"
-          className="placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
          value={props.link.blog}
          onChange={event => props.handleLinkChange("blog", event)}
        />
      </div>
+      <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
+        <input
+          id="resume-prefix"
+          className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          value={props.prefix.resume}
+          onChange={event => props.handlePrefixChange("resume", event)}
+        />
+        <input
+          id="resume"
+          placeholder="resume link"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          value={props.link.resume}
+          onChange={event => props.handleLinkChange("resume", event)}
+        />
+      </div>
+      
      <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
        <input
          id="funFact-prefix"
-          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
          value={props.prefix.funFact}
          onChange={event => props.handlePrefixChange("funFact", event)}
        />
        <input
          id="funFact"
-          placeholder="Chai over Coffee"
-          className="placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          placeholder="I think I am funny"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
          value={props.data.funFact}
          onChange={event => props.handleDataChange("funFact", event)}
        />
@@ -1,7 +1,7 @@
 const links = {
-    home: '/',
-    about: '/about',
-    addons: '/addons',
-    support: '/support'
+  home: "/",
+  about: "/about",
+  addons: "/addons",
+  support: "/support",
 }
 export default links
@@ -11,6 +11,7 @@ const categorizedSkills = {
      "javascript",
      "typescript",
      "php",
+      "perl",
      "ruby",
      "scala",
      "python",
@@ -43,6 +44,10 @@ const categorizedSkills = {
      "tailwind",
      "materialize",
      "bulma",
+      "gtk",
+      "qt",
+      "wx_widgets",
+      "ember",
    ],
  },

@@ -52,11 +57,13 @@ const categorizedSkills = {
      "nodejs",
      "spring",
      "express",
+      "graphql",
      "kafka",
      "solr",
      "rabbitMQ",
      "hadoop",
      "nginx",
+      "openresty",
    ],
  },

@@ -76,7 +83,7 @@ const categorizedSkills = {

  ai: {
    title: "AI/ML",
-    skills: ["tensorflow", "pytorch", "opencv"],
+    skills: ["tensorflow", "pytorch", "opencv", "scikit_learn"],
  },

  database: {
@@ -92,12 +99,14 @@ const categorizedSkills = {
      "hive",
      "realm",
      "mariadb",
+      "cockroachdb",
+      "elasticsearch",
    ],
  },

  data_visualization: {
    title: "Data Visualization",
-    skills: ["d3js", "chartjs", "canvasjs"],
+    skills: ["d3js", "chartjs", "canvasjs", "kibana", "grafana"],
  },

  devops: {
@@ -111,6 +120,7 @@ const categorizedSkills = {
      "bash",
      "azure",
      "vagrant",
+      "circleci"
    ],
  },

@@ -130,6 +140,7 @@ const categorizedSkills = {
      "codeigniter",
      "rails",
      "flask",
+      "quasar"
    ],
  },

@@ -151,6 +162,7 @@ const categorizedSkills = {
    skills: [
      "illustrator",
      "photoshop",
+      "xd",
      "figma",
      "blender",
      "sketch",
@@ -161,7 +173,24 @@ const categorizedSkills = {

  static_site_generator: {
    title: "Static Site Generators",
-    skills: ["gatsby", "gridsome", "hugo", "jekyll", "nextjs", "nuxtjs"],
+    skills: [
+      "gatsby", 
+      "gridsome", 
+      "hugo", 
+      "jekyll", 
+      "nextjs", 
+      "nuxtjs", 
+      "11ty", 
+      "scully",
+      "sculpin",
+      "sapper",
+      "vuepress"
+    ],
+  },
+
+  game_engines:{
+    title: "Game Engines",
+    skills: ["unity"],
  },

  other: {
@@ -210,6 +239,7 @@ const icons = {
  express:
    "https://devicons.github.io/devicon/devicon.git/icons/express/express-original-wordmark.svg",
  go: "https://devicons.github.io/devicon/devicon.git/icons/go/go-original.svg",
+  graphql: "https://www.vectorlogo.zone/logos/graphql/graphql-icon.svg",
  gulp:
    "https://devicons.github.io/devicon/devicon.git/icons/gulp/gulp-plain.svg",
  html5:
@@ -232,12 +262,18 @@ const icons = {
    "https://devicons.github.io/devicon/devicon.git/icons/nginx/nginx-original.svg",
  nodejs:
    "https://devicons.github.io/devicon/devicon.git/icons/nodejs/nodejs-original-wordmark.svg",
+  openresty:
+    "https://symbols-electrical.getvecta.com/stencil_25/66_openresty.403a21ca72.svg",
  oracle:
    "https://devicons.github.io/devicon/devicon.git/icons/oracle/oracle-original.svg",
  photoshop:
    "https://devicons.github.io/devicon/devicon.git/icons/photoshop/photoshop-plain.svg",
+  xd:
+    "https://cdn.worldvectorlogo.com/logos/adobe-xd.svg",
  php:
    "https://devicons.github.io/devicon/devicon.git/icons/php/php-original.svg",
+  perl:
+    "https://api.iconify.design/logos-perl.svg",
  postgresql:
    "https://devicons.github.io/devicon/devicon.git/icons/postgresql/postgresql-original-wordmark.svg",
  python:
@@ -325,32 +361,196 @@ const icons = {
  nextjs: "https://cdn.worldvectorlogo.com/logos/nextjs-3.svg",
  reactnative: "https://reactnative.dev/img/header_logo.svg",
  mariadb: "https://www.vectorlogo.zone/logos/mariadb/mariadb-icon.svg",
+  cockroachdb:  "https://cdn.worldvectorlogo.com/logos/cockroachdb.svg",
  objectivec:
    "https://www.vectorlogo.zone/logos/apple_objectivec/apple_objectivec-icon.svg",
  clojure:
    "https://upload.wikimedia.org/wikipedia/commons/5/5d/Clojure_logo.svg",
  haskell:
    "https://upload.wikimedia.org/wikipedia/commons/1/1c/Haskell-Logo.svg",
-  svelte:
-    "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Svelte_Logo.svg/498px-Svelte_Logo.svg.png",
-  vuetify:
-    "https://seeklogo.com/images/V/vuetify-logo-3BCF73C928-seeklogo.com.png",
+  svelte: "https://upload.wikimedia.org/wikipedia/commons/1/1b/Svelte_Logo.svg",
+  vuetify: "https://bestofjs.org/logos/vuetify.svg",
  pug: "https://cdn.worldvectorlogo.com/logos/pug.svg",
-  mocha: "https://i.ibb.co/0MCw42Q/mocha.png",
-  jest: "https://i.ibb.co/Yj6p14L/jest.png",
-  cypress: "https://i.ibb.co/CWQq8gw/cypress.webp",
-  selenium: "https://i.ibb.co/9T29DD0/selenium.png",
-  puppeteer: "https://i.ibb.co/Qk299CX/puppeteer.png",
-  karma: "https://i.ibb.co/dbgh2DH/jasmine.png",
-  jasmine: "https://i.ibb.co/55txF2S/karma.png",
+  mocha: "https://www.vectorlogo.zone/logos/mochajs/mochajs-icon.svg",
+  jest: "https://www.vectorlogo.zone/logos/jestjsio/jestjsio-icon.svg",
+  cypress:
+    "https://raw.githubusercontent.com/simple-icons/simple-icons/6e46ec1fc23b60c8fd0d2f2ff46db82e16dbd75f/icons/cypress.svg",
+  selenium:
+    "https://raw.githubusercontent.com/detain/svg-logos/780f25886640cef088af994181646db2f6b1a3f8/svg/selenium-logo.svg",
+  puppeteer: "https://www.vectorlogo.zone/logos/pptrdev/pptrdev-official.svg",
+  karma:
+    "https://raw.githubusercontent.com/detain/svg-logos/780f25886640cef088af994181646db2f6b1a3f8/svg/karma.svg",
+  jasmine: "https://www.vectorlogo.zone/logos/jasmine/jasmine-icon.svg",
+  gtk: "https://upload.wikimedia.org/wikipedia/commons/7/71/GTK_logo.svg",
+  qt: "https://upload.wikimedia.org/wikipedia/commons/0/0b/Qt_logo_2016.svg",
+  wx_widgets:
+    "https://upload.wikimedia.org/wikipedia/commons/b/bb/WxWidgets.svg",
+  ember:
+    "https://devicons.github.io/devicon/devicon.git/icons/ember/ember-original-wordmark.svg",
+  scikit_learn:
+    "https://upload.wikimedia.org/wikipedia/commons/0/05/Scikit_learn_logo_small.svg",
+  quasar:
+    "https://cdn.quasar.dev/logo/svg/quasar-logo.svg",
+  kibana:
+    "https://www.vectorlogo.zone/logos/elasticco_kibana/elasticco_kibana-icon.svg",
+  grafana:
+    "https://www.vectorlogo.zone/logos/grafana/grafana-icon.svg",
+  elasticsearch:
+    "https://www.vectorlogo.zone/logos/elastic/elastic-icon.svg",
+  circleci:
+    "https://www.vectorlogo.zone/logos/circleci/circleci-icon.svg",
+  scully:
+    "https://raw.githubusercontent.com/scullyio/scully/main/assets/logos/SVG/scullyio-icon.svg",
+  "11ty":
+    "https://gist.githubusercontent.com/vivek32ta/c7f7bf583c1fb1c58d89301ea40f37fd/raw/f4c85cce5790758286b8f155ef9a177710b995df/11ty.svg",
+  sculpin:
+    "https://gist.githubusercontent.com/vivek32ta/c7f7bf583c1fb1c58d89301ea40f37fd/raw/1782aef8672484698c0dd407f900c4a329ed5bc4/sculpin.svg",
+  sapper:
+    "https://raw.githubusercontent.com/bestofjs/bestofjs-webui/master/public/logos/sapper.svg", 
+  vuepress:
+    "https://raw.githubusercontent.com/AliasIO/wappalyzer/master/src/drivers/webextension/images/icons/VuePress.svg",
+  unity:
+    "https://www.vectorlogo.zone/logos/unity3d/unity3d-icon.svg"
+}
+
+const skillWebsites = {
+  vuejs: "https://vuejs.org/",
+  react: "https://reactjs.org/",
+  angularjs: "https://angular.io",
+  aws: "https://aws.amazon.com",
+  android: "https://developer.android.com",
+  backbonejs: "https://backbonejs.org",
+  bootstrap: "https://getbootstrap.com",
+  c: "https://www.cprogramming.com/",
+  canvasjs: "https://canvasjs.com",
+  coffeescript: "https://offeescript.org",
+  codeigniter: "https://codeigniter.com",
+  cplusplus: "https://www.w3schools.com/cpp/",
+  css3: "https://www.w3schools.com/css/",
+  csharp: "https://www.w3schools.com/cs/",
+  d3js: "https://d3js.org/",
+  django: "https://www.djangoproject.com/",
+  docker: "https://www.docker.com/",
+  dotnet: "https://dotnet.microsoft.com/",
+  electron: "https://www.electronjs.org",
+  express: "https://expressjs.com",
+  go: "https://golang.org",
+  graphql: "https://graphql.org",
+  gulp: "https://gulpjs.com",
+  html5: "https://www.w3.org/html/",
+  hugo: "https://gohugo.io/",
+  java: "https://www.java.com",
+  javascript: "https://developer.mozilla.org/en-US/docs/Web/JavaScript",
+  ionic: "https://ionicframework.com",
+  laravel: "https://laravel.com/",
+  meteor: "https://www.meteor.com/",
+  mongodb: "https://www.mongodb.com/",
+  mysql: "https://www.mysql.com/",
+  nginx: "https://www.nginx.com",
+  nodejs: "https://nodejs.org",
+  openresty: "https://openresty.org/",
+  oracle: "https://www.oracle.com/",
+  photoshop: "https://www.photoshop.com/en",
+  xd: "https://www.adobe.com/products/xd.html",
+  php: "https://www.php.net",
+  perl: "https://www.perl.org/",
+  postgresql: "https://www.postgresql.org",
+  python: "https://www.python.org",
+  rails: "https://rubyonrails.org",
+  redis: "https://redis.io",
+  ruby: "https://www.ruby-lang.org/en/",
+  rust: "https://www.rust-lang.org",
+  sass: "https://sass-lang.com",
+  scala: "https://www.scala-lang.org",
+  symfony: "https://symfony.com",
+  spring: "",
+  swift: "",
+  typescript: "https://www.typescriptlang.org/",
+  linux: "https://www.linux.org/",
+  redux: "https://redux.js.org",
+  webpack: "https://webpack.js.org",
+  flutter: "https://flutter.dev",
+  dart: "https://dart.dev",
+  kotlin: "https://kotlinlang.org",
+  tensorflow: "https://www.tensorflow.org",
+  chartjs: "https://www.chartjs.org",
+  jenkins: "https://www.jenkins.io",
+  gcp: "https://cloud.google.com",
+  kubernetes: "https://kubernetes.io",
+  azure: "https://azure.microsoft.com/en-in/",
+  git: "https://git-scm.com/",
+  kafka: "https://kafka.apache.org/",
+  solr: "https://lucene.apache.org/solr/",
+  cassandra: "https://cassandra.apache.org/",
+  rabbitMQ: "https://www.rabbitmq.com",
+  hadoop: "https://hadoop.apache.org/",
+  bash: "https://www.gnu.org/software/bash/",
+  pytorch: "https://pytorch.org/",
+  opencv: "https://opencv.org/",
+  illustrator: "https://www.adobe.com/in/products/illustrator.html",
+  figma: "https://www.figma.com/",
+  blender: "",
+  babel: "https://babeljs.io/",
+  sketch: "https://www.sketch.com/",
+  flask: "",
+  nativescript: "https://nativescript.org/",
+  xamarin: "https://dotnet.microsoft.com/apps/xamarin",
+  vagrant: "",
+  tailwind: "https://tailwindcss.com/",
+  materialize: "https://materializecss.com/",
+  invision: "https://www.invisionapp.com/",
+  framer: "",
+  bulma: "https://bulma.io/",
+  couchdb: "",
+  firebase: "https://firebase.google.com/",
+  amplify: "https://aws.amazon.com/amplify/",
+  hive: "",
+  realm: "",
+  gatsby: "https://www.gatsbyjs.com/",
+  gridsome: "",
+  nuxtjs: "https://nuxtjs.org/",
+  jekyll: "https://jekyllrb.com/",
+  nextjs: "https://nextjs.org/",
+  reactnative: "https://reactnative.dev/",
+  mariadb: "https://mariadb.org/",
+  cockroachdb: "https://www.cockroachlabs.com/product/cockroachdb/",
+  objectivec: "",
+  clojure: "",
+  haskell: "",
+  svelte: "https://svelte.dev",
+  vuetify: "https://vuetifyjs.com/en/",
+  pug: "https://pugjs.org",
+  mocha: "https://mochajs.org",
+  jest: "https://jestjs.io",
+  cypress: "https://www.cypress.io",
+  selenium: "https://www.selenium.dev",
+  puppeteer: "https://github.com/puppeteer/puppeteer",
+  karma: "https://karma-runner.github.io/latest/index.html",
+  jasmine: "https://jasmine.github.io/",
+  gtk: "",
+  qt: "",
+  wx_widgets: "",
+  ember: "",
+  scikit_learn: "",
+  quasar: "https://quasar.dev/",
+  kibana: "https://www.elastic.co/kibana",
+  grafana: "https://grafana.com",
+  elasticsearch: "https://www.elastic.co",
+  circleci: "https://circleci.com",
+  scully: "https://scully.io/",
+  sculpin: "https://sculpin.io/",
+  "11ty": "https://www.11ty.dev/",
+  sapper: "https://sapper.svelte.dev/",
+  vuepress: "https://vuepress.vuejs.org/",
+  unity: "https://unity.com/"
 }

 const initialSkillState = {}

-const skills = Object.keys(categorizedSkills)
-  .map(key => categorizedSkills[key].skills)
-  .flat()
-  .sort()
+const skillsArray = Object.keys(categorizedSkills).map(
+  key => categorizedSkills[key].skills
+)
+const skills = [].concat.apply([], skillsArray).sort()

 skills.forEach(skill => {
  initialSkillState[skill] = false
@@ -358,4 +558,11 @@ skills.forEach(skill => {

 const categories = Object.keys(categorizedSkills)

-export { initialSkillState, icons, skills, categorizedSkills, categories }
+export {
+  initialSkillState,
+  icons,
+  skills,
+  skillWebsites,
+  categorizedSkills,
+  categories,
+}
@@ -12,7 +12,17 @@ export default function HTML(props) {
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        {props.headComponents}
-        <script data-name="BMC-Widget" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="rahuldkjain" data-description="Support me on Buy me a coffee!" data-message="Thank you for visiting. You can now buy me a coffee!" data-color="#FF813F" data-position="" data-x_margin="18" data-y_margin="18"></script>
+        <script
+          data-name="BMC-Widget"
+          src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
+          data-id="rahuldkjain"
+          data-description="Support me on Buy me a coffee!"
+          data-message="Loved the tool🚀. Buy me a coffee to support the work!"
+          data-color="#FF813F"
+          data-position=""
+          data-x_margin="18"
+          data-y_margin="18"
+        ></script>
      </head>
      <body {...props.bodyAttributes}>
        {props.preBodyComponents}
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" version="1"><rect width="28" height="28" x="-30" y="-30" fill="#26557c" rx="1.4" ry="1.4" transform="matrix(0,-1,-1,0,0,0)"/><path d="m8.0254 8.0001c-0.7825-0.0166-1.1494 0.5244-0.9883 1.457 0.052 0.3006 0.3152 0.7299 0.8828 1.4419 0.63122 0.7909 0.88514 1.2227 1.1602 1.9707 0.4336 1.1793 0.63403 1.5748 0.98633 1.9434 0.27366 0.2863 0.27369 0.28712 0.08984 0.87109-0.28507 0.90556-0.34407 2.7207-0.11523 3.5742 0.34248 1.2774 0.76402 1.8574 1.3516 1.8574 0.41968 0 0.76364-0.35092 0.88672-0.9043 0.04268-0.19186 0.12249-0.46607 0.17773-0.60938 0.09535-0.24728 0.12093-0.22818 0.49414 0.38086 0.21628 0.35296 0.62866 0.87861 0.91602 1.168 0.6638 0.66845 1.5749 1.4217 1.6406 1.3574 0.02775-0.02713-0.238-0.42177-0.58984-0.87891s-1.0151-1.5189-1.4746-2.3594c-0.53593-0.98029-0.8997-1.5286-1.0137-1.5293-0.37045-0.0025-0.71588 0.58004-0.91602 1.5469-0.23056 1.1138-0.63675 0.92708-0.9668-0.44531-0.19019-0.79085-0.09106-1.856 0.26367-2.8535 0.16137-0.45376 0.29297-0.87373 0.29297-0.93164s-0.25731-0.54348-0.57227-1.0801c-0.315-0.537-0.6851-1.297-0.822-1.69-0.3326-0.954-0.4905-1.232-1.1582-2.043-0.6879-0.8346-0.753-1.2203-0.2051-1.2166 0.42554 0.00281 1.1123 0.28944 1.8027 0.75391 0.4371 0.29404 0.58523 0.33398 1.2871 0.33398 0.88142 0 1.0709 0.0722 2.293 0.87695 1.2445 0.81958 2.1722 1.5813 2.8145 2.3125 0.5704 0.64937 0.88201 1.2138 2.5605 4.6562 0.64433 1.3214 1.2158 1.9593 2.0039 2.2324 1.2173 0.42185 1.6317 0.61314 2.168 0.99805l0.56641 0.40625-0.38086 0.07422c-0.2103 0.04033-0.66847 0.10616-1.0176 0.14648-0.72741 0.084-1.2031 0.38573-1.2031 0.76367 0 0.42592 1.4513 1.6453 2.9062 2.4414 0.69903 0.38247 1.3716 0.75927 1.4941 0.83789 0.32598 0.20922 0.41424 0.18389 0.33008-0.0918-0.17624-0.57738-0.77279-1.1398-2.4297-2.2949-0.97197-0.6776-0.98199-0.65244 0.31641-0.78125 0.925-0.091 1.392-0.249 1.392-0.472 0-0.102-0.47-0.644-1.045-1.203-0.9-0.876-1.204-1.094-2.195-1.577-1.35-0.656-1.842-1.177-2.153-2.283-0.464-1.649-1.712-3.587-3.371-5.23-1.712-1.696-3.347-2.6344-4.845-2.7814-0.609-0.0598-0.924-0.1522-1.239-0.3653-0.5332-0.3611-1.7717-0.7684-2.3766-0.7812zm2.9629 3.002c-0.12266-0.0079-0.22945 0.0085-0.30273 0.05859-0.27341 0.18699-0.24099 0.41504 0.08008 0.55664 0.15092 0.06656 0.36501 0.30147 0.47656 0.52148 0.3751 0.73978 0.94985 0.2445 0.69336-0.59766-0.08085-0.26546-0.5793-0.51547-0.94727-0.53906z" opacity=".2"/><path fill="#fff" d="m8.0254 7c-0.7825-0.0166-1.1494 0.5244-0.9883 1.457 0.052 0.3006 0.3152 0.7302 0.8828 1.4414 0.6312 0.7906 0.8852 1.2226 1.1602 1.9706 0.4336 1.179 0.634 1.575 0.9859 1.943 0.274 0.287 0.274 0.288 0.09 0.872-0.2848 0.905-0.3438 2.72-0.115 3.574 0.342 1.277 0.764 1.857 1.352 1.857 0.419 0 0.763-0.351 0.886-0.904 0.043-0.192 0.123-0.466 0.178-0.609 0.095-0.248 0.121-0.229 0.494 0.38 0.216 0.353 0.629 0.879 0.916 1.168 0.664 0.669 1.575 1.422 1.641 1.358 0.028-0.027-0.238-0.422-0.59-0.879s-1.015-1.519-1.475-2.359c-0.536-0.981-0.899-1.529-1.013-1.53-0.371-0.002-0.716 0.58-0.916 1.547-0.231 1.114-0.637 0.927-0.967-0.445-0.19-0.791-0.091-1.856 0.264-2.854 0.161-0.453 0.293-0.873 0.293-0.931s-0.258-0.544-0.573-1.08c-0.315-0.537-0.6851-1.297-0.822-1.69-0.3326-0.954-0.4905-1.232-1.1582-2.0429-0.6879-0.8348-0.753-1.2204-0.2051-1.2168 0.4255 0.0029 1.1123 0.2895 1.8023 0.7539 0.438 0.2941 0.586 0.334 1.288 0.334 0.881 0 1.07 0.0722 2.293 0.877 1.244 0.8198 2.172 1.5818 2.814 2.3128 0.57 0.649 0.882 1.214 2.561 4.656 0.644 1.321 1.215 1.959 2.003 2.232 1.218 0.422 1.632 0.613 2.168 0.998l0.567 0.407-0.381 0.074c-0.21 0.04-0.669 0.106-1.018 0.146-0.727 0.084-1.203 0.386-1.203 0.764 0 0.426 1.451 1.645 2.906 2.441 0.7 0.383 1.372 0.76 1.495 0.838 0.326 0.21 0.414 0.184 0.33-0.091-0.177-0.578-0.773-1.14-2.43-2.295-0.972-0.678-0.982-0.653 0.316-0.782 0.926-0.092 1.393-0.25 1.393-0.472 0-0.102-0.47-0.644-1.045-1.203-0.9-0.877-1.204-1.094-2.195-1.577-1.35-0.656-1.842-1.177-2.153-2.283-0.464-1.65-1.712-3.587-3.371-5.23-1.712-1.6965-3.347-2.6345-4.845-2.7815-0.609-0.0598-0.924-0.1522-1.239-0.3653-0.5332-0.3611-1.7717-0.7684-2.3766-0.7812zm2.9626 3.002c-0.122-0.0079-0.229 0.008-0.302 0.059-0.274 0.187-0.241 0.415 0.08 0.556 0.151 0.067 0.365 0.302 0.476 0.522 0.375 0.739 0.95 0.244 0.694-0.598-0.081-0.265-0.58-0.515-0.948-0.539z"/><path fill="#fff" d="m3.4004 2c-0.7756 0-1.4004 0.6248-1.4004 1.4004v1c0-0.7756 0.6248-1.4004 1.4004-1.4004h25.2c0.775 0 1.4 0.6248 1.4 1.4004v-1c0-0.7756-0.625-1.4004-1.4-1.4004h-25.2z" opacity=".1"/><path d="m2 28.6v1c0 0.775 0.6248 1.4 1.4004 1.4h25.2c0.775 0 1.4-0.625 1.4-1.4v-1c0 0.775-0.625 1.4-1.4 1.4h-25.2c-0.7752 0-1.4-0.625-1.4-1.4z" opacity=".2"/></svg>
@@ -3,6 +3,7 @@ slug: "/about"
 date: "2019-05-04"
 title: "👨‍💻 About"
 ---
+
 <a href="https://github.com/rahuldkjain/github-profile-readme-generator/blob/master/LICENSE" target="blank">
 <img src="https://img.shields.io/github/license/rahuldkjain/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator licence" />
 </a>
@@ -16,6 +17,7 @@ The profile should be neat and minimal to give a clear overview of the work. Non
 To solve this, GitHub Profile README Generator came into existence.

 So many developers contributed to the project and made it more awesome to use. You can contribute too to make it grow even further.
+
 <p align="left">
 <a href="https://github.com/rahuldkjain/github-profile-readme-generator/issues" target="blank">
 <img src="https://img.shields.io/github/issues/rahuldkjain/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator issues"/>
@@ -27,14 +29,18 @@ So many developers contributed to the project and made it more awesome to use. Y
 </p>

 ### Contributors 🙏
+
 List of the developers who contributed to the project. A big shout out for them.
 <a href="https://github.com/rahuldkjain/github-profile-readme-generator/graphs/contributors">
-  <img src="https://contributors-img.web.app/image?repo=rahuldkjain/github-profile-readme-generator" />
+<img src="https://contributors-img.web.app/image?repo=rahuldkjain/github-profile-readme-generator" />
 </a>
+
 <hr/>

 ## How do I create a profile README?
+
 The profile README is created by creating a new repository that’s the same name as your username. For example, my GitHub username is **rahuldkjain** so I created a new repository with the name **rahuldkjain**. Note: at the time of this writing, in order to access the profile README feature, the letter-casing must match your GitHub username.
+
 1. Create a new repository with the same name (including casing) as your GitHub username: https://github.com/new

 2. Create a README.md file inside the new repo with content (text, GIFs, images, emojis, etc.)
@@ -45,6 +51,7 @@ The profile README is created by creating a new repository that’s the same nam
 <hr/>

 ## How to use?
+
 Tired of editing profile README(.md) to add new features like visitors-count badge, github-stats etc?

 Don't worry. Keep calm, fill the form and let the tool do the work for you
@@ -55,6 +62,7 @@ alt="github profile readme generator" width="320" /><br/><br/>
 <hr/>

 ## Why visitors count keeps on increasing?
+
 So many users raised an issue that the counter keeps on increasing everytime the page reloads.

 Well it is visitors count not "unique" visitors count. The goal of the addon is to provide a good stat of how well the github profile is doing.
@@ -7,14 +7,17 @@ title: "🚀 Addons"
 GitHub Profile README Generator tool uses few open-source addons developed by other developers. Including such features makes the tool useful. The developers of this tool is very grateful to use these awesome addons.

 ## [GitHub README Stats](https://github.com/anuraghazra/github-readme-stats)
+
 ⚡️ Dynamically generated stats for your github readmes

 #### GitHub Stats Card
+
 <a href="https://github.com/rahuldkjain" target="blank">
  <img src="https://github-readme-stats.vercel.app/api?username=rahuldkjain&show_icons=true" width="320" alt="Rahul's github stats"/>
 </a>

 #### Top Skills Card
+
 <a href="https://github.com/rahuldkjain" target="blank">
  <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=rahuldkjain&layout=compact&hide=html" width="320" alt="Rahul's github top skills"/>
 </a>
@@ -26,6 +29,7 @@ You can customize the theme too. See how to customize yours [here](https://githu
 <br/>

 ## [GitHub Profile Views Counter](https://github.com/antonkomarev/github-profile-views-counter)
+
 It counts how many times your GitHub profile has been viewed. Free cloud micro-service.

 ![rahuldkjain](https://komarev.com/ghpvc/?username=rahuldkjain&style=flat-square)
@@ -37,27 +41,34 @@ You can customize the color, label and style too. See how to customize [here](ht
 <br/>

 ## [Dynamic Latest Blog Posts](https://github.com/gautamkrishnar/blog-post-workflow)
+
 Show your latest blog posts from any sources(like dev(.)to, medium etc) or StackOverflow activity on your GitHub profile/project readme automatically using the RSS feed.

 <img src="https://user-images.githubusercontent.com/8397274/88047382-29b8b280-cb6f-11ea-9efb-2af2b10f3e0c.png" width="320" alt="dynamic latest blog example"/>

 Developed by [Gautam Krishna R](https://github.com/gautamkrishnar)
+
 ### How to use
+
 - Go to your repository
 - Add the following section to your **README.md** file, you can give whatever title you want. Just make sure that you use **<!-- BLOG-POST-LIST:START --><!-- BLOG-POST-LIST:END -->** in your readme. The workflow will replace this comment with the actual blog post list:
+
 ```markdown
 # Blog posts
+
 <!-- BLOG-POST-LIST:START -->
 <!-- BLOG-POST-LIST:END -->
 ```
+
 - Create a folder named `.github` and create `workflows` folder inside it if it doesn't exist.
 - Create a new file named `blog-post-workflow.yml` with the following contents inside the workflows folder:
+
 ```yaml
 name: Latest blog post workflow
 on:
  schedule:
    # Runs every hour
-    - cron: '0 * * * *'
+    - cron: "0 * * * *"
 jobs:
  update-readme-with-blog:
    name: Update this repo's README with latest blog posts
@@ -11,17 +11,19 @@ title: "💵 Support OSS"
 You can come forward to support the developers by making small donations. You will never know what this support mean to them. If you find the tool really helpful, then it will be very grateful to support the tool 🙇.

 <p align="left">
-  <a href="https://www.paypal.me/rahuldkjain"><img src="https://ionicabizau.github.io/badges/paypal.svg" alt="sponsor github profile readme generator"/>
+  <a href="https://www.paypal.me/rahuldkjain/10"><img src="https://ionicabizau.github.io/badges/paypal.svg" alt="sponsor github profile readme generator"/>
  </a>

-  <a href='https://ko-fi.com/A0A81XXSX' target='_blank'><img height='23' width="100" src='https://cdn.ko-fi.com/cdn/kofi3.png?v=2' alt='Buy Coffee for rahuldkjain' />
-  </a>
+<a href='https://ko-fi.com/A0A81XXSX' target='_blank'><img height='23' width="100" src='https://cdn.ko-fi.com/cdn/kofi3.png?v=2' alt='Buy Coffee for rahuldkjain' />
+</a>
+
+<a href="https://www.buymeacoffee.com/rahuldkjain" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="23" width="100" style="border-radius:2px" />
+</a>

-  <a href="https://www.buymeacoffee.com/rahuldkjain" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="23" width="100" style="border-radius:2px" />
-  </a>
 </p>

 ## Social Support 🤝
+
 <a href="https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator">
 <img src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator" alt="tweet github profile readme generator"/>
 </a>
@@ -36,7 +38,6 @@ Let the world know how you feel using this tool. Share with others on twitter.

 <blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">This is super cool 😎 A Github Profile README Generator.<br><br>👉 Link: <a href="https://t.co/KHC4M9vSzw">https://t.co/KHC4M9vSzw</a> <a href="https://t.co/JmrQ3P6Wkp">pic.twitter.com/JmrQ3P6Wkp</a></p>&mdash; Dat Tran (@datitran) <a href="https://twitter.com/datitran/status/1298947006371713024?ref_src=twsrc%5Etfw">August 27, 2020</a></blockquote>

-
 <blockquote class="twitter-tweet data-dnt="true""><p lang="en" dir="ltr">Nice GitHub Profile generator, for the relatively new account README:<a href="https://t.co/YG3O0Pqy3M">https://t.co/YG3O0Pqy3M</a><a href="https://twitter.com/hashtag/github?src=hash&amp;ref_src=twsrc%5Etfw">#github</a></p>&mdash; Steve &quot;ardalis&quot; Smith (@ardalis) <a href="https://twitter.com/ardalis/status/1300953474868314118?ref_src=twsrc%5Etfw">September 2, 2020</a></blockquote>

 <blockquote class="twitter-tweet data-dnt="true""><p lang="ro" dir="ltr">Github Profile Readme Generator <a href="https://t.co/p20HK5gGHF">https://t.co/p20HK5gGHF</a> <a href="https://t.co/nFyhrO3XjN">pic.twitter.com/nFyhrO3XjN</a></p>&mdash; Speckyboy (@speckyboy) <a href="https://twitter.com/speckyboy/status/1301233718405869568?ref_src=twsrc%5Etfw">September 2, 2020</a></blockquote>
@@ -47,21 +48,17 @@ Let the world know how you feel using this tool. Share with others on twitter.

 <blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">Special thanks to everyone&#39;s repos that are featured in my latest video:<a href="https://twitter.com/bathtype?ref_src=twsrc%5Etfw">@bathtype</a><a href="https://twitter.com/anuraghazru?ref_src=twsrc%5Etfw">@anuraghazru</a><a href="https://twitter.com/Shields_io?ref_src=twsrc%5Etfw">@Shields_io</a><a href="https://twitter.com/AlexandreSanlim?ref_src=twsrc%5Etfw">@AlexandreSanlim</a><a href="https://twitter.com/Ileriayooo?ref_src=twsrc%5Etfw">@Ileriayooo</a><a href="https://twitter.com/james_madhacks?ref_src=twsrc%5Etfw">@james_madhacks</a><a href="https://twitter.com/misteranmol?ref_src=twsrc%5Etfw">@misteranmol</a><a href="https://twitter.com/n_moore?ref_src=twsrc%5Etfw">@n_moore</a><a href="https://twitter.com/novatorem?ref_src=twsrc%5Etfw">@novatorem</a><a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@Rahuldkjain</a><a href="https://twitter.com/geeky_abhiz?ref_src=twsrc%5Etfw">@geeky_abhiz</a><br><br>These developers are making your GitHub Profiles look awesome! 💪</p>&mdash; 𝚌𝚘𝚍𝚎𝚂𝚃𝙰𝙲𝙺𝚛 ⚡👨‍💻 (@codeSTACKr) <a href="https://twitter.com/codeSTACKr/status/1294618297086943232?ref_src=twsrc%5Etfw">August 15, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

-
 <blockquote class="twitter-tweet data-dnt="true"" data-theme="light"><p lang="tr" dir="ltr">GitHub Profile Readme Generator ile GitHub profilinizi profesyonelleştirin! <a href="https://t.co/iaZAdGtf9t">https://t.co/iaZAdGtf9t</a></p>&mdash; Yazılım Karavanı (@yazilimkaravani) <a href="https://twitter.com/yazilimkaravani/status/1301467413591007232?ref_src=twsrc%5Etfw">September 3, 2020</a></blockquote>

-
 <blockquote class="twitter-tweet data-dnt="true""><p lang="ro" dir="ltr"><a href="https://twitter.com/hashtag/CSS?src=hash&amp;ref_src=twsrc%5Etfw">#CSS</a> <a href="https://twitter.com/hashtag/Automated?src=hash&amp;ref_src=twsrc%5Etfw">#Automated</a> | Github Profile README Generator <a href="https://t.co/CTcrnDuWov">https://t.co/CTcrnDuWov</a></p>&mdash; Yohan J. Rodríguez (@hasdid) <a href="https://twitter.com/hasdid/status/1299070955646586882?ref_src=twsrc%5Etfw">August 27, 2020</a></blockquote>

-
-
 <blockquote class="twitter-tweet data-dnt="true""><p lang="en" dir="ltr">If you are unsure or need to spice up your GitHub README page. Check out this cool Github profile readme Generator by ⁦<a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@Rahuldkjain</a>⁩. <a href="https://twitter.com/hashtag/rstats?src=hash&amp;ref_src=twsrc%5Etfw">#rstats</a> <a href="https://twitter.com/hashtag/github?src=hash&amp;ref_src=twsrc%5Etfw">#github</a> ⁦<a href="https://twitter.com/github?ref_src=twsrc%5Etfw">@github</a>⁩ <a href="https://twitter.com/hashtag/AcademicTwitter?src=hash&amp;ref_src=twsrc%5Etfw">#AcademicTwitter</a> <a href="https://t.co/OMyYJJYmxR">https://t.co/OMyYJJYmxR</a></p>&mdash; Seevasant Indran (@zeeva85) <a href="https://twitter.com/zeeva85/status/1301213068060438528?ref_src=twsrc%5Etfw">September 2, 2020</a></blockquote>

-
 <blockquote class="twitter-tweet data-dnt="true""><p lang="en" dir="ltr">Github Profile README Generator<br>By <a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@Rahuldkjain</a> <br><br>Pretty way to create GitHub profile README with addons.<br><br>Check out on <a href="https://twitter.com/ProductHunt?ref_src=twsrc%5Etfw">@ProductHunt</a> <a href="https://t.co/qgxhLmUgV2">https://t.co/qgxhLmUgV2</a></p>&mdash; Raj Maurya (@codemaurya) <a href="https://twitter.com/codemaurya/status/1299700992577957888?ref_src=twsrc%5Etfw">August 29, 2020</a></blockquote>

 <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

 ## Sponsors 🙇
+
 - [Scott C Wilson](https://github.com/scottcwilson) donated the first ever grant to this tool. A big thanks to him.
 - [Max Schmitt](https://github.com/mxschmitt) loved the tool and showed the support with his donation. Thanks a lot.
@@ -21,24 +21,10 @@

 html,
 body {
-  /* margin: 1%; */
-  /* padding: 0% 0.5%; */
  font-family: "Roboto Mono", monospace;
  color: var(--grey-90);
 }

-/* .section-title {
-  margin: 0 !important;
-  font-family: "Lato", sans-serif;
-  padding-left: 2%;
-  font-size: 24px;
-  font-weight: 600;
-} */
-
-/* input:focus {
-  outline: none;
-} */
-
 [type="checkbox"] {
  -webkit-box-shadow: 0 1px 1px var(--grey-90) !important;
  -moz-box-shadow: 0 1px 1px var(--grey-90) !important;
@@ -47,165 +33,22 @@ body {
  border-radius: 0px !important;
 }

-/* .icon {
-  width: 25px;
-  height: 25px;
-} */
-
 .section {
  width: 100%;
  overflow: hidden;
  margin: 2% 0%;
 }

-/* .inputField {
-  border: 0px solid;
-  border-bottom: 1px solid grey;
-  margin: 2%;
-  padding: 1% 2% 1% 1%;
-  font-size: 18px;
-  height: 25px;
-} */
-/* 
-.row {
-  width: 100%;
-  display: flex;
-  justify-content: flex-start;
-} */
-
-/* .inputField:focus {
-  border-bottom: 1px solid var(--dark-blue);
-  color: var(--grey-90);
-} */
-
-/* .sm {
-  width: 15%;
-}
-
-.md {
-  width: 35%;
-}
-
-.lg {
-  width: 50%;
-} */
-
-/* .prefix {
-  color: var(--grey-80);
-} */
-
-/* .button {
-  padding: 1% 0%;
-  background: var(--grey-05);
-  border: 2px solid var(--grey-85);
-  color: var(--grey-90);
-  width: 25%;
-  text-align: center;
-  cursor: pointer;
-} */
-
-/* .container {
-  width: 50%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-} */
-
-/* .checkbox {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding-left: 2%;
-  margin: 1% 0%;
-} */
-
-/* 
-.checkboxLabel {
-  font-weight: 500;
-  cursor: pointer;
-} */
-
-/* .submit {
-  display: flex;
-  justify-content: center;
-} */
-
 .warning {
  color: var(--red);
  background: var(--grey-05);
  margin-left: 2%;
  padding: 1%;
 }
-/* 
-.preview {
-  border: 2px solid var(--grey-75);
-  -webkit-box-shadow: 0px 0px 5px 5px rgba(208, 208, 213, 0.75);
-  -moz-box-shadow: 0px 0px 5px 5px rgba(208, 208, 213, 0.75);
-  box-shadow: 0px 0px 5px 5px rgba(208, 208, 213, 0.75);
-  padding: 0% 2%;
-} */

 .markdown-section {
  min-height: calc(100vh - 100px);
 }
-/* 
-.markdown {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-} */
-
-/* .markdown-box {
-  width: 100%;
-  font-size: 12px;
-  color: var(--grey-85);
-  border: 2px solid var(--grey-75);
-  -webkit-box-shadow: 3px 5px 5px 5px rgba(208, 208, 213, 0.75);
-  -moz-box-shadow: 3px 5px 5px 5px rgba(208, 208, 213, 0.75);
-  box-shadow: 3px 5px 5px 5px rgba(208, 208, 213, 0.75);
-  padding: 1% 2% 0.5% 2%;
-  margin-top: 0.5%;
-} */
-
-/* .copy-button {
-  background: var(--grey-05);
-  border: 2px solid var(--grey-75);
-  text-align: center;
-  cursor: pointer;
-  width: 80%;
-  justify-self: center;
-  padding: 2% 0%;
-  align-self: center;
-} */
-
-/* .download-button {
-  background: var(--grey-05);
-  border: 2px solid var(--grey-75);
-  text-align: center;
-  cursor: pointer;
-  width: 80%;
-  justify-self: center;
-  padding: 2% 0%;
-  align-self: center;
-} */
-
-/* .utils {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-  margin-top: 4%;
-} */
-/* 
-.preview-button {
-  background: var(--grey-05);
-  border: 2px solid var(--grey-75);
-  text-align: center;
-  cursor: pointer;
-  width: 60%;
-  justify-self: end;
-  padding: 2% 0%;
-  align-self: center;
-} */

 .loader {
  height: 100vh;
@@ -216,152 +59,15 @@ body {
  font-size: 24px;
 }

-/* .back-button {
-  background: var(--grey-05);
-  border: 2px solid var(--grey-75);
-  text-align: center;
-  cursor: pointer;
-  width: 60%;
-  justify-self: start;
-  padding: 2% 0%;
-  align-self: center;
-} */
-/* 
-.title {
-  text-align: center;
-} */
-
-/* .subtitle {
-  text-align: center;
-} */
-
-/* .link {
-  text-decoration: none;
-  color: var(--dark-blue);
-} */
-
-/* .social-icon {
-  margin: 1%;
-} */
-
-/* .badge {
-  text-align: left;
-} */
-
-/* .github-cards {
-  display: flex;
-  justify-content: center;
-} */
-/* .github-stats-card {
-  margin: 1%;
-} */
-/* .top-languages-card {
-  margin: 1%;
-} */
-/* .social {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-} */
-/* 
-.icon {
-  width: 25px;
-  height: 25px;
-  margin: 1%;
-  cursor: pointer;
-} */
-
-/* .header {
-  width: 100%;
-  text-align: center;
-  display: inline-block;
-} */
-
-/* .heading {
-  color: var(--dark-blue);
-  font-family: "Lato", sans-serif;
-  cursor: pointer;
-} */
-
-/* .footer {
-  margin-top: 2%;
-  width: 100%;
-  text-align: center;
-  padding: 1%;
-} */
-/* .footer-pages {
-  display: grid;
-  grid-template-columns: repeat(
-    auto-fill,
-    minmax(min(calc(20% + 20vmin), 100%), 1fr)
-  );
-  color: var(--grey-75);
-} */
-/* .footer-proud {
-  margin: 2% 0%;
-} */
-
 a {
  text-decoration: none;
  cursor: pointer;
  color: inherit;
 }

-/* .github {
-  display: inline-flex;
-} */
-
-/* .github-button {
-  color: var(--grey-90);
-  font-size: 12px;
-  font-weight: bolder;
-  padding: 3%;
-  background: var(--grey-05);
-  border: 2px solid var(--grey-85);
-  margin: 1%;
-  width: 230px;
-} */
-
 .github-count {
  color: var(--dark-purple);
 }
-/* 
-.logo {
-  width: 40px;
-  height: 40px;
-} */
-
-/* .skills {
-  margin: 1%;
-  width: 100%;
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-}
-.skills-category-title {
-  margin: 1% 1% 1% 2%;
-  font-size: 16px;
-  text-align: center;
-  color: var(--grey-75);
-}
-.skillCheckbox {
-  padding-left: 10%;
-}
-
-.skill-icon {
-  margin-left: 12%;
-  width: 40px;
-  height: 40px;
-  object-fit: contain;
-} */
-
-/* .skill-preview-icon {
-  width: 40px;
-  height: 40px;
-  margin: 1%;
-} */
-
-/* Tooltip css */

 .tooltiptext {
  visibility: hidden;
@@ -395,105 +101,22 @@ a {
  background: var(--grey-05);
 }

-/* .config-options {
-  margin-top: 48px;
-  padding: 1% 1% 1% 2%;
-  font-weight: 700;
-  font-size: 12px;
-  border: 2px solid var(--grey-15);
-} */
-/* .new-tag {
-  font-size: 14px;
-  padding: 2px 4px;
-  background: var(--dark-green);
-  color: white;
-} */
-/* .actions {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
+@media only screen and (max-width: 580px) {
+  .tooltiptext {
+    display: none;
+  }
 }

-.actions .button {
-  max-width: 90px;
-  padding: 8px 16px;
-  align-self: center;
-  justify-self: end;
-  text-align: center;
-}
-
-.actions .data {
-  display: flex;
-  align-items: center;
-}
-
-.actions .data input {
-  flex: 1;
-} */
-
@media only screen and (max-width: 1199px) {
-  /* .section-title {
-    font-size: 18px;
-    margin: 2% 0% !important;
-  }
-  .inputField {
-    font-size: 10px;
-  } */
-  /* .icon {
-    width: 20px;
-    height: 20px;
-  } */
  .checkbox {
    font-size: 12px;
  }
-  /* .button {
-    width: 60%;
-    margin: 2% 0%;
-    font-size: 14px;
-  } */
-  /* .badgeImage {
-    height: 15px;
-  } */
-  /* .heading {
-    font-size: 18px;
-  }
-  .footer {
-    font-size: 12px;
-  }
-  .footer-pages {
-    grid-template-columns: repeat(
-      auto-fill,
-      minmax(min(calc(10% + 20vmin), 100%), 1fr)
-    );
-  } */
-  /* .github-button {
-    font-size: 10px !important;
-    padding: 2% 1% !important;
-    width: 140px;
-  } */
+
  .logo {
    width: 20px;
    height: 20px;
  }
-  /* .skills {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-  }
-  .skill-icon {
-    margin-left: 12%;
-    width: 25px;
-    height: 25px;
-  } */
-  /* .skill-preview-icon {
-    width: 20px;
-    height: 20px;
-    margin: 1%;
-  } */
-  /* .hide-on-mobile {
-    display: none;
-  } */
-  /* #markdown-content {
-    word-break: break-all;
-  } */
+
  .tooltiptext {
    display: none;
  }
@@ -503,29 +126,4 @@ a {
  .workflow {
    font-size: 12px;
  }
-  /* .github-cards {
-    display: block;
-  } */
-  /* .github-stats-card{
-    text-align: center;
-  } */
-  /* .top-languages-card {
-    text-align: center;
-  } */
-  /* .github-stats-card > img{
-    width: 80%;
-  } */
-  /* .top-languages-card > img{
-    width: 80%;
-  } */
-  /* .skills-category-title {
-    font-size: 14px;
-  }
-
-  .actions {
-    grid-template-columns: 1fr;
-    flex-direction: column;
-  } */
 }
-
-
@@ -8,6 +8,7 @@ import Work from "../components/work"
 import Social from "../components/social"
 import Addons from "../components/addons"
 import Skills from "../components/skills"
+import Donate from "../components/donate"
 import { initialSkillState } from "../constants/skills"
 import gsap from "gsap"
 import Loader from "../components/loader"
@@ -26,6 +27,7 @@ import SEO from "../components/seo"
 import {
  isGitHubUsernameValid,
  isMediumUsernameValid,
+  isTwitterUsernameValid
 } from "../utils/validation"
 import Layout from "../components/layout"

@@ -37,9 +39,11 @@ const DEFAULT_PREFIX = {
  helpWith: "🤝 I’m looking for help with",
  ama: "💬 Ask me about",
  contact: "📫 How to reach me",
+  resume: "📄 Know about my experiences",
  funFact: "⚡ Fun fact",
  portfolio: "👨‍💻 All of my projects are available at",
  blog: "📝 I regulary write articles on",
+  
 }

 const DEFAULT_DATA = {
@@ -52,11 +56,17 @@ const DEFAULT_DATA = {
  ama: "",
  contact: "",
  funFact: "",
+  twitterBadge: false,
  visitorsBadge: false,
+  badgeStyle: "flat",
+  badgeColor: "0e75b6",
+  badgeLabel: "Profile views",
+  githubProfileTrophy: false,
  githubStats: false,
  topLanguages: false,
  devDynamicBlogs: false,
  mediumDynamicBlogs: false,
+  rssDynamicBlogs: false,
 }

 const DEFAULT_LINK = {
@@ -65,6 +75,7 @@ const DEFAULT_LINK = {
  helpWith: "",
  portfolio: "",
  blog: "",
+  resume: "",
 }

 const DEFAULT_SOCIAL = {
@@ -82,6 +93,14 @@ const DEFAULT_SOCIAL = {
  behance: "",
  medium: "",
  youtube: "",
+  codechef: "",
+  hackerrank: "",
+  codeforces: "",
+  leetcode: "",
+  topcoder: "",
+  hackerearth: "",
+  geeks_for_geeks: "",
+  rssurl: "",
 }

 const KeepCacheUpdated = ({ prefix, data, link, social, skills }) => {
@@ -112,6 +131,7 @@ const IndexPage = () => {
  const [generatePreview, setGeneratePreview] = useState(false)
  const [generateMarkdown, setGenerateMarkdown] = useState(false)
  const [displayLoader, setDisplayLoader] = useState(false)
+  const [showConfig, setShowConfig] = useState(true)
  const [copyObj, setcopyObj] = useState({
    isCopied: false,
    copiedText: "copy-markdown",
@@ -158,13 +178,14 @@ const IndexPage = () => {
  }

  const generate = () => {
+    setShowConfig(false)
    var tl = new gsap.timeline()
    tl.to(".generate", {
      scale: 0,
      duration: 0.5,
      ease: "Linear.easeNone",
    })
-		tl.set("#form", { display: "none" });
+    tl.set("#form", { display: "none" })
    setDisplayLoader(true)
    setTimeout(() => {
      setDisplayLoader(false)
@@ -180,6 +201,17 @@ const IndexPage = () => {
          ease: "Linear.easeNone",
        }
      )
+      gsap.fromTo(
+        "#support",
+        {
+          autoAlpha: 0,
+        },
+        {
+          autoAlpha: 1,
+          duration: 2,
+          ease: "Linear.easeNone",
+        }
+      )
      document.body.scrollTop = 0 // For Safari
      document.documentElement.scrollTop = 0 // For Chrome, Firefox, IE and Opera
    }, 3000)
@@ -198,10 +230,19 @@ const IndexPage = () => {
    trimDataValues(social, setSocial)
    trimDataValues(link, setLink)
    resetCopyMarkdownButton()
-		if (data.visitorsBadge || data.githubStats || data.topLanguages) {
+    if (
+      data.visitorsBadge ||
+      data.githubProfileTrophy ||
+      data.githubStats ||
+      data.topLanguages
+    ) {
      if (social.github && isGitHubUsernameValid(social.github)) {
        generate()
      }
+    } else if (data.twitterBadge) {
+      if (social.twitter && isTwitterUsernameValid(social.twitter)) {
+        generate()
+      }
    } else if (social.github) {
      if (isGitHubUsernameValid(social.github)) {
        generate()
@@ -320,6 +361,7 @@ const IndexPage = () => {
  const handleBackToEdit = () => {
    setGeneratePreview(false)
    setGenerateMarkdown(false)
+    setShowConfig(true)
    gsap.set("#form", {
      display: "",
    })
@@ -335,10 +377,10 @@ const IndexPage = () => {
      return
    }

-		setPrefix(cache.prefix || DEFAULT_PREFIX)
-		setData(cache.data || DEFAULT_DATA)
-		setLink(cache.link || DEFAULT_LINK)
-		setSocial(cache.social || DEFAULT_SOCIAL)
+    setPrefix(cache.prefix ? {...DEFAULT_PREFIX, ...cache.prefix} : DEFAULT_PREFIX)
+    setData(cache.data ? {...DEFAULT_DATA, ...cache.data} : DEFAULT_DATA)
+    setLink(cache.link ? {...DEFAULT_LINK, ...cache.link} : DEFAULT_LINK)
+    setSocial(cache.social ? {...DEFAULT_SOCIAL, ...cache.social} : DEFAULT_SOCIAL)

    const cacheSkills = mergeDefaultWithNewDataSkills(
      DEFAULT_SKILLS,
@@ -440,9 +482,13 @@ const IndexPage = () => {
            data={data}
            social={social}
            handleCheckChange={handleCheckChange}
+            handleDataChange={handleDataChange}
          />
          <div className="section">
-						{(data.visitorsBadge || data.githubStats || data.topLanguages) &&
+            {(data.visitorsBadge ||
+              data.githubProfileTrophy ||
+              data.githubStats ||
+              data.topLanguages) &&
            !social.github ? (
              <div className="warning">
                * Please add github username to use these add-ons
@@ -479,6 +525,28 @@ const IndexPage = () => {
            ) : (
              ""
            )}
+            {data.rssDynamicBlogs && !social.rssurl ? (
+              <div className="warning">
+                * Please add your rss feed url to display latest blogs
+                dynamically from your personal blog
+              </div>
+            ) : (
+              ""
+            )}
+            {data.twitterBadge && !social.twitter ? (
+              <div className="warning">
+                * Please add twitter username to use these add-ons
+              </div>
+            ) : (
+              ""
+            )}
+            {social.twitter && !isTwitterUsernameValid(social.twitter) ? (
+              <div className="warning">
+                * Twitter username is invalid, please add a valid username
+              </div>
+            ) : (
+              ""
+            )}
          </div>
          <div className="flex items-center justify-center w-full">
            <div
@@ -486,6 +554,7 @@ const IndexPage = () => {
              tabIndex="0"
              role="button"
              onClick={handleGenerate}
+              onKeyDown={(e) => e.keyCode === 13 && handleGenerate()}
            >
              Generate README
            </div>
@@ -497,21 +566,17 @@ const IndexPage = () => {
        {generateMarkdown || generatePreview ? (
          <div className="markdown-section p-4 sm:py-4 sm:px-10">
            <div className="w-full flex justify-between items-center">
-							<div
-								className="cursor-pointer text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
-								tabIndex="0"
-								role="button"
+              <button
+                className="text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
                onClick={handleBackToEdit}
              >
-								<ArrowLeftIcon size={16} />
+                <ArrowLeftIcon size={24} />
                <span className="hidden sm:block"> back to edit</span>
-							</div>
+              </button>

-							<div
-								className="cursor-pointer text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
-								tabIndex="0"
+              <button
+                className="text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
                id="copy-button"
-								role="button"
                onClick={handleCopyToClipboard}
              >
                {copyObj.isCopied === true ? (
@@ -522,38 +587,32 @@ const IndexPage = () => {
                <span className="hidden sm:block" id="copy-markdown">
                  {copyObj.copiedText}
                </span>
-							</div>
+              </button>

-							<div
-								className="cursor-pointer text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
-								tabIndex="0"
+              <button
+                className="text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
                id="download-md-button"
-								role="button"
                onClick={handleDownloadMarkdown}
              >
                <DownloadIcon size={24} />
                <span className="hidden sm:block" id="download-markdown">
                  download markdown
                </span>
-							</div>
+              </button>

-							<div
-								className="cursor-pointer text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
-								tabIndex="0"
+              <button
+                className="text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
                id="download-json-button"
-								role="button"
                onClick={handleDownloadJson}
              >
                <FileCodeIcon size={24} />
                <span className="hidden sm:block" id="download-json">
                  download backup
                </span>
-							</div>
+              </button>

-							<div
-								className="cursor-pointer text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
-								tabIndex="0"
-								role="button"
+              <button
+                className="text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
                onClick={handleGeneratePreview}
              >
                {previewMarkdown.isPreview ? (
@@ -564,11 +623,14 @@ const IndexPage = () => {
                <span className="hidden sm:block ml-1" id="preview-markdown">
                  {previewMarkdown.buttonText}
                </span>
-							</div>
+              </button>
            </div>

            <div className="w-full flex justify-center items-center">
-							<div className="w-full text-sm text-gray-900 shadow-xl mt-2 p-4 bg-gray-100 border-2 border-solid border-gray-800" id="markdown-box">
+              <div
+                className="w-full text-sm text-gray-900 shadow-xl mt-2 p-4 bg-gray-100 border-2 border-solid border-gray-800"
+                id="markdown-box"
+              >
                {generatePreview ? (
                  <MarkdownPreview
                    prefix={prefix}
@@ -593,11 +655,19 @@ const IndexPage = () => {
                )}
              </div>
            </div>
+            <div className="mt-10" id="support">
+              <Donate />
+            </div>
          </div>
        ) : (
          ""
        )}
-				<div className={"w-full shadow flex flex-col justify-center items-start mt-16 border-2 border-solid border-gray-600 py-2 px-4 " + (generateMarkdown || generatePreview ? "hidden" : "block")}>
+        <div
+          className={
+            "w-full shadow flex flex-col justify-center items-start mt-16 border-2 border-solid border-gray-600 py-2 px-4 " +
+            (!showConfig ? "hidden" : "block")
+          }
+        >
          <div className="flex justify-between items-center w-full">
            <div className="text-lg sm:text-2xl font-bold font-title mt-2 mb-2">
              Config options
@@ -605,36 +675,36 @@ const IndexPage = () => {
                new feature
              </span>
            </div>
-						<div
+            <button
              className="text-xxs sm:text-sm border-2 w-auto px-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center"
-							role="button"
-							tabIndex="0"
              onClick={handleResetForm}
            >
              Reset form
-            </div>
+            </button>
          </div>
          <div className="w-full flex justify-start items-center my-4">
            <input
              type="text"
-							className="w-1/2 mr-6 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700 prefix"
+              className="outline-none w-1/2 mr-6 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700 prefix"
              placeholder="JSON Backup"
              value={restore}
              onChange={e => setRestore(e.target.value)}
            />
-						<div
+            <button
              className="text-xxs sm:text-sm border-2 w-32 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1"
-							role="button"
-							tabIndex="0"
              onClick={handleRestore}
            >
              Restore
-              </div>
+            </button>
          </div>
          <div className="flex flex-col items-start justify-center">
            <div className="text-green-700 font-medium">Tips</div>
-						<div className="text-sm sm:text-lg text-gray-700">* Enter the downloaded JSON text to restore.</div>
-						<div className="text-sm sm:text-lg text-gray-700">* Press reset to reset the form.</div>
+            <div className="text-sm sm:text-lg text-gray-700">
+              * Enter the downloaded JSON text to restore.
+            </div>
+            <div className="text-sm sm:text-lg text-gray-700">
+              * Press reset to reset the form.
+            </div>
          </div>
        </div>
      </div>
@@ -13,10 +13,26 @@ const UsingTypescript: React.FC<PageProps<DataProps>> = ({ data, path }) => (
  <div>
    <SEO title="Using TypeScript" />
    <h1>Gatsby supports TypeScript by default!</h1>
-    <p>This means that you can create and write <em>.ts/.tsx</em> files for your pages, components etc. Please note that the <em>gatsby-*.js</em> files (like gatsby-node.js) currently don't support TypeScript yet.</p>
-    <p>For type checking you'll want to install <em>typescript</em> via npm and run <em>tsc --init</em> to create a <em>.tsconfig</em> file.</p>
-    <p>You're currently on the page "{path}" which was built on {data.site.buildTime}.</p>
-    <p>To learn more, head over to our <a href="https://www.gatsbyjs.org/docs/typescript/">documentation about TypeScript</a>.</p>
+    <p>
+      This means that you can create and write <em>.ts/.tsx</em> files for your
+      pages, components etc. Please note that the <em>gatsby-*.js</em> files
+      (like gatsby-node.js) currently don't support TypeScript yet.
+    </p>
+    <p>
+      For type checking you'll want to install <em>typescript</em> via npm and
+      run <em>tsc --init</em> to create a <em>.tsconfig</em> file.
+    </p>
+    <p>
+      You're currently on the page "{path}" which was built on{" "}
+      {data.site.buildTime}.
+    </p>
+    <p>
+      To learn more, head over to our{" "}
+      <a href="https://www.gatsbyjs.org/docs/typescript/">
+        documentation about TypeScript
+      </a>
+      .
+    </p>
    <Link to="/">Go back to the homepage</Link>
  </div>
 )
@@ -20,10 +20,6 @@
  @apply mt-0 mb-4;
 }

-/* .markdown p {
-  @apply flex justify-start items-center;
-} */
-
 .markdown li + li {
  @apply mt-1;
 }
@@ -2,8 +2,8 @@ import React from "react"
 import { graphql } from "gatsby"
 // import Header from '../components/header'
 // import Footer from '../components/footer'
-import {Helmet} from "react-helmet";
-import Layout from "../components/layout";
+import { Helmet } from "react-helmet"
+import Layout from "../components/layout"

 export default function Template({
  data, // this prop will be injected by the GraphQL query below.
@@ -12,23 +12,23 @@ export default function Template({
  const { frontmatter, html } = markdownRemark
  return (
    <Layout>
-            {/* <Header heading="GitHub Profile README Generator" /> */}
      <Helmet>
        <meta charSet="utf-8" />
        <title>{frontmatter.title}</title>
-              <link rel="canonical" href={`https://rahuldkjain.github.io/gh-profile-readme-generator`} />
+        <link
+          rel="canonical"
+          href={`https://rahuldkjain.github.io/gh-profile-readme-generator`}
+        />
      </Helmet>
      <div className="m-4 sm:p-10">
        <div className="blog-post">
          <h1 className="text-4xl font-bold">{frontmatter.title}</h1>
-                    {/* <h2>{frontmatter.date}</h2> */}
          <div
            className="markdown"
            dangerouslySetInnerHTML={{ __html: html }}
          />
        </div>
      </div>
-            {/* <Footer /> */}
    </Layout>
  )
 }
@@ -1,12 +1,17 @@
-const isGitHubUsernameValid = (username) => {
+const isGitHubUsernameValid = username => {
  var pattern = /^[a-z\d](?:[a-z\d]|-(?=[a-z\d])){0,38}$/i
  return pattern.test(username)
 }
-const isMediumUsernameValid = (username) => {
+const isMediumUsernameValid = username => {
  if (username) {
-        return username[0] === '@'
+    return username[0] === "@"
  }
  return true
 }

-export { isGitHubUsernameValid, isMediumUsernameValid };
+const isTwitterUsernameValid = username => {
+  var pattern = /^[a-zA-Z0-9_]{1,15}$/
+  return pattern.test(username)
+}
+
+export { isGitHubUsernameValid, isMediumUsernameValid, isTwitterUsernameValid }
@@ -1,13 +1,68 @@
 import { isMediumUsernameValid } from "../utils/validation"

-const latestBlogs = (payload) => {
-    let rssFeed = ''
-    if (payload.dev.show && payload.dev.username && payload.medium.show && payload.medium.username && isMediumUsernameValid(payload.medium.username)) {
-        rssFeed = 'https://dev.to/feed/' + payload.dev.username + ', https://medium.com/feed/' + payload.medium.username
-    } else if(payload.dev.show && payload.dev.username) {
-        rssFeed = 'https://dev.to/feed/' + payload.dev.username
+const latestBlogs = payload => {
+  let rssFeed = ""
+  if (
+    payload.dev.show &&
+    payload.dev.username &&
+    payload.rssurl.show &&
+    payload.rssurl.username &&
+    payload.medium.show &&
+    payload.medium.username &&
+    isMediumUsernameValid(payload.medium.username)
+  ) {
+    rssFeed =
+      "https://dev.to/feed/" +
+      payload.dev.username +
+      ", https://medium.com/feed/" +
+      payload.medium.username +
+      ", " +
+      payload.rssurl.username
+  }
+  //when any two blog providers are selected
+  else if (
+    payload.dev.show &&
+    payload.dev.username &&
+    payload.rssurl.show &&
+    payload.rssurl.username
+  ) {
+    rssFeed =
+      "https://dev.to/feed/" +
+      payload.dev.username +
+      ", " +
+      payload.rssurl.username
+  } else if (
+    payload.rssurl.show &&
+    payload.rssurl.username &&
+    payload.medium.show &&
+    payload.medium.username &&
+    isMediumUsernameValid(payload.medium.username)
+  ) {
+    rssFeed =
+      "https://medium.com/feed/" +
+      payload.medium.username +
+      ", " +
+      payload.rssurl.username
+  } else if (
+    payload.dev.show &&
+    payload.dev.username &&
+    payload.medium.show &&
+    payload.medium.username &&
+    isMediumUsernameValid(payload.medium.username)
+  ) {
+    rssFeed =
+      "https://dev.to/feed/" +
+      payload.dev.username +
+      ", https://medium.com/feed/" +
+      payload.medium.username
+  }
+  // when only one blog provider is selected
+  else if (payload.dev.show && payload.dev.username) {
+    rssFeed = "https://dev.to/feed/" + payload.dev.username
+  } else if (payload.rssurl.show && payload.rssurl.username) {
+    rssFeed = payload.rssurl.username
  } else {
-        rssFeed = 'https://medium.com/feed/' + payload.medium.username
+    rssFeed = "https://medium.com/feed/" + payload.medium.username
  }
  let data = `name: Latest blog post workflow
 on: 
@@ -16,13 +71,13 @@ on:
 jobs: 
    update-readme-with-blog: 
        name: Update this repo's README with latest blog posts
-        runs - on: ubuntu - latest
+        runs-on: ubuntu-latest
        steps: 
-            - uses: actions / checkout@v2
-            - uses: gautamkrishnar / blog - post - workflow@master
+            - uses: actions/checkout@v2
+            - uses: gautamkrishnar/blog-post-workflow@master
              with: 
-                max_post_count: "4",
-                feed_list: "${rssFeed}"`;
+                max_post_count: "4"
+                feed_list: "${rssFeed}"`

  return data
 }
@@ -3,24 +3,24 @@ module.exports = {
  theme: {
    extend: {},
    fontSize: {
-      'xxs': '.60rem',
-      'xs': '.75rem',
-      'sm': '.875rem',
-      'tiny': '.875rem',
-      'base': '1rem',
-      'lg': '1.125rem',
-      'xl': '1.25rem',
-      '2xl': '1.5rem',
-      '3xl': '1.875rem',
-      '4xl': '2.25rem',
-      '5xl': '3rem',
-      '6xl': '4rem',
-      '7xl': '5rem',
+      xxs: ".60rem",
+      xs: ".75rem",
+      sm: ".875rem",
+      tiny: ".875rem",
+      base: "1rem",
+      lg: "1.125rem",
+      xl: "1.25rem",
+      "2xl": "1.5rem",
+      "3xl": "1.875rem",
+      "4xl": "2.25rem",
+      "5xl": "3rem",
+      "6xl": "4rem",
+      "7xl": "5rem",
    },
    fontFamily: {
-      'title': ['Lato', 'sans-serif'],
-      'body': ['Roboto Mono', 'monospace'],
-    }
+      title: ["Lato", "sans-serif"],
+      body: ["Roboto Mono", "monospace"],
+    },
  },
  variants: {},
  plugins: [],
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" version="1"><rect width="28" height="28" x="-30" y="-30" fill="#26557c" rx="1.4" ry="1.4" transform="matrix(0,-1,-1,0,0,0)"/><path d="m8.0254 8.0001c-0.7825-0.0166-1.1494 0.5244-0.9883 1.457 0.052 0.3006 0.3152 0.7299 0.8828 1.4419 0.63122 0.7909 0.88514 1.2227 1.1602 1.9707 0.4336 1.1793 0.63403 1.5748 0.98633 1.9434 0.27366 0.2863 0.27369 0.28712 0.08984 0.87109-0.28507 0.90556-0.34407 2.7207-0.11523 3.5742 0.34248 1.2774 0.76402 1.8574 1.3516 1.8574 0.41968 0 0.76364-0.35092 0.88672-0.9043 0.04268-0.19186 0.12249-0.46607 0.17773-0.60938 0.09535-0.24728 0.12093-0.22818 0.49414 0.38086 0.21628 0.35296 0.62866 0.87861 0.91602 1.168 0.6638 0.66845 1.5749 1.4217 1.6406 1.3574 0.02775-0.02713-0.238-0.42177-0.58984-0.87891s-1.0151-1.5189-1.4746-2.3594c-0.53593-0.98029-0.8997-1.5286-1.0137-1.5293-0.37045-0.0025-0.71588 0.58004-0.91602 1.5469-0.23056 1.1138-0.63675 0.92708-0.9668-0.44531-0.19019-0.79085-0.09106-1.856 0.26367-2.8535 0.16137-0.45376 0.29297-0.87373 0.29297-0.93164s-0.25731-0.54348-0.57227-1.0801c-0.315-0.537-0.6851-1.297-0.822-1.69-0.3326-0.954-0.4905-1.232-1.1582-2.043-0.6879-0.8346-0.753-1.2203-0.2051-1.2166 0.42554 0.00281 1.1123 0.28944 1.8027 0.75391 0.4371 0.29404 0.58523 0.33398 1.2871 0.33398 0.88142 0 1.0709 0.0722 2.293 0.87695 1.2445 0.81958 2.1722 1.5813 2.8145 2.3125 0.5704 0.64937 0.88201 1.2138 2.5605 4.6562 0.64433 1.3214 1.2158 1.9593 2.0039 2.2324 1.2173 0.42185 1.6317 0.61314 2.168 0.99805l0.56641 0.40625-0.38086 0.07422c-0.2103 0.04033-0.66847 0.10616-1.0176 0.14648-0.72741 0.084-1.2031 0.38573-1.2031 0.76367 0 0.42592 1.4513 1.6453 2.9062 2.4414 0.69903 0.38247 1.3716 0.75927 1.4941 0.83789 0.32598 0.20922 0.41424 0.18389 0.33008-0.0918-0.17624-0.57738-0.77279-1.1398-2.4297-2.2949-0.97197-0.6776-0.98199-0.65244 0.31641-0.78125 0.925-0.091 1.392-0.249 1.392-0.472 0-0.102-0.47-0.644-1.045-1.203-0.9-0.876-1.204-1.094-2.195-1.577-1.35-0.656-1.842-1.177-2.153-2.283-0.464-1.649-1.712-3.587-3.371-5.23-1.712-1.696-3.347-2.6344-4.845-2.7814-0.609-0.0598-0.924-0.1522-1.239-0.3653-0.5332-0.3611-1.7717-0.7684-2.3766-0.7812zm2.9629 3.002c-0.12266-0.0079-0.22945 0.0085-0.30273 0.05859-0.27341 0.18699-0.24099 0.41504 0.08008 0.55664 0.15092 0.06656 0.36501 0.30147 0.47656 0.52148 0.3751 0.73978 0.94985 0.2445 0.69336-0.59766-0.08085-0.26546-0.5793-0.51547-0.94727-0.53906z" opacity=".2"/><path fill="#fff" d="m8.0254 7c-0.7825-0.0166-1.1494 0.5244-0.9883 1.457 0.052 0.3006 0.3152 0.7302 0.8828 1.4414 0.6312 0.7906 0.8852 1.2226 1.1602 1.9706 0.4336 1.179 0.634 1.575 0.9859 1.943 0.274 0.287 0.274 0.288 0.09 0.872-0.2848 0.905-0.3438 2.72-0.115 3.574 0.342 1.277 0.764 1.857 1.352 1.857 0.419 0 0.763-0.351 0.886-0.904 0.043-0.192 0.123-0.466 0.178-0.609 0.095-0.248 0.121-0.229 0.494 0.38 0.216 0.353 0.629 0.879 0.916 1.168 0.664 0.669 1.575 1.422 1.641 1.358 0.028-0.027-0.238-0.422-0.59-0.879s-1.015-1.519-1.475-2.359c-0.536-0.981-0.899-1.529-1.013-1.53-0.371-0.002-0.716 0.58-0.916 1.547-0.231 1.114-0.637 0.927-0.967-0.445-0.19-0.791-0.091-1.856 0.264-2.854 0.161-0.453 0.293-0.873 0.293-0.931s-0.258-0.544-0.573-1.08c-0.315-0.537-0.6851-1.297-0.822-1.69-0.3326-0.954-0.4905-1.232-1.1582-2.0429-0.6879-0.8348-0.753-1.2204-0.2051-1.2168 0.4255 0.0029 1.1123 0.2895 1.8023 0.7539 0.438 0.2941 0.586 0.334 1.288 0.334 0.881 0 1.07 0.0722 2.293 0.877 1.244 0.8198 2.172 1.5818 2.814 2.3128 0.57 0.649 0.882 1.214 2.561 4.656 0.644 1.321 1.215 1.959 2.003 2.232 1.218 0.422 1.632 0.613 2.168 0.998l0.567 0.407-0.381 0.074c-0.21 0.04-0.669 0.106-1.018 0.146-0.727 0.084-1.203 0.386-1.203 0.764 0 0.426 1.451 1.645 2.906 2.441 0.7 0.383 1.372 0.76 1.495 0.838 0.326 0.21 0.414 0.184 0.33-0.091-0.177-0.578-0.773-1.14-2.43-2.295-0.972-0.678-0.982-0.653 0.316-0.782 0.926-0.092 1.393-0.25 1.393-0.472 0-0.102-0.47-0.644-1.045-1.203-0.9-0.877-1.204-1.094-2.195-1.577-1.35-0.656-1.842-1.177-2.153-2.283-0.464-1.65-1.712-3.587-3.371-5.23-1.712-1.6965-3.347-2.6345-4.845-2.7815-0.609-0.0598-0.924-0.1522-1.239-0.3653-0.5332-0.3611-1.7717-0.7684-2.3766-0.7812zm2.9626 3.002c-0.122-0.0079-0.229 0.008-0.302 0.059-0.274 0.187-0.241 0.415 0.08 0.556 0.151 0.067 0.365 0.302 0.476 0.522 0.375 0.739 0.95 0.244 0.694-0.598-0.081-0.265-0.58-0.515-0.948-0.539z"/><path fill="#fff" d="m3.4004 2c-0.7756 0-1.4004 0.6248-1.4004 1.4004v1c0-0.7756 0.6248-1.4004 1.4004-1.4004h25.2c0.775 0 1.4 0.6248 1.4 1.4004v-1c0-0.7756-0.625-1.4004-1.4-1.4004h-25.2z" opacity=".1"/><path d="m2 28.6v1c0 0.775 0.6248 1.4 1.4004 1.4h25.2c0.775 0 1.4-0.625 1.4-1.4v-1c0 0.775-0.625 1.4-1.4 1.4h-25.2c-0.7752 0-1.4-0.625-1.4-1.4z" opacity=".2"/></svg>