docs: update .all-contributorsrc [skip ci]

docs: update README.md [skip ci]
[fix]: readme with all-contributors
2020-09-26 08:05:54 +00:00 · 2020-09-26 08:05:53 +00:00 · 2020-09-25 18:00:44 +05:30 · 2020-09-25 17:54:58 +05:30 · 2020-09-25 12:12:35 +00:00 · 2020-09-25 12:12:34 +00:00
38 changed files with 2713 additions and 1722 deletions
@@ -0,0 +1,33 @@
+{
+  "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": "alinasahoo",
+      "name": "Alina Sahoo",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/71794673?v=4",
+      "profile": "https://github.com/alinasahoo",
+      "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,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/U7YU3J" 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/U7YU3J" 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,112 @@
 </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)
+
+- **YouTube Stats** [contribute](https://github.com/rahuldkjain/github-profile-readme-generator/issues/119)

 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,7 +157,27 @@ 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-2-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/alinasahoo"><img src="https://avatars1.githubusercontent.com/u/71794673?v=4" width="100px;" alt=""/><br /><sub><b>Alina Sahoo</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=alinasahoo" title="Code">💻</a></td>
+  </tr>
+</table>
+
+<!-- markdownlint-enable -->
+<!-- prettier-ignore-end -->
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
 <hr>
 <p align="center">
 Developed with ❤️ in India 🇮🇳 
-</p>
+</p>
@@ -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
@@ -1,39 +1,39 @@
 exports.createPages = async ({ actions, graphql, reporter }) => {
-    const { createPage } = actions
-  
-    const blogPostTemplate = require.resolve(`./src/templates/blogTemplate.js`)
-  
-    const result = await graphql(`
-      {
-        allMarkdownRemark(
-          sort: { order: DESC, fields: [frontmatter___date] }
-          limit: 1000
-        ) {
-          edges {
-            node {
-              frontmatter {
-                slug
-              }
+  const { createPage } = actions
+
+  const blogPostTemplate = require.resolve(`./src/templates/blogTemplate.js`)
+
+  const result = await graphql(`
+    {
+      allMarkdownRemark(
+        sort: { order: DESC, fields: [frontmatter___date] }
+        limit: 1000
+      ) {
+        edges {
+          node {
+            frontmatter {
+              slug
            }
          }
        }
      }
-    `)
-  
-    // Handle errors
-    if (result.errors) {
-      reporter.panicOnBuild(`Error while running GraphQL query.`)
-      return
    }
-  
-    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
-      createPage({
-        path: node.frontmatter.slug,
-        component: blogPostTemplate,
-        context: {
-          // additional data can be passed via context
-          slug: node.frontmatter.slug,
-        },
-      })
+  `)
+
+  // Handle errors
+  if (result.errors) {
+    reporter.panicOnBuild(`Error while running GraphQL query.`)
+    return
+  }
+
+  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
+    createPage({
+      path: node.frontmatter.slug,
+      component: blogPostTemplate,
+      context: {
+        // additional data can be passed via context
+        slug: node.frontmatter.slug,
+      },
    })
-  }
+  })
+}
@@ -1,73 +1,143 @@
 import React from "react"
-import { withPrefix } from 'gatsby'
+import { withPrefix } from "gatsby"
 import { latestBlogs } from "../utils/workflows"
 import links from "../constants/page-links"
 import { isMediumUsernameValid } from "../utils/validation"
-const Addons = (props) => {
-    const blogPostPorkflow = () => {
-        let payload = {
-            dev: {
-                show: props.data.devDynamicBlogs,
-                username: props.social.dev,
-            },
-            medium: {
-                show: props.data.mediumDynamicBlogs,
-                username: props.social.medium,
-            }
-        }
-        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 Addons = props => {
+  const blogPostPorkflow = () => {
+    let payload = {
+      dev: {
+        show: props.data.devDynamicBlogs,
+        username: props.social.dev,
+      },
+      medium: {
+        show: props.data.mediumDynamicBlogs,
+        username: props.social.medium,
+      },
+      rssurl: {
+        show: props.data.rssDynamicBlogs,
+        username: props.social.rssurl,
+      },
    }
-    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>
-
-            {(props.data.devDynamicBlogs && props.social.dev) || (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>)
-                    </div>
-                </div> : ''}
-        </div>
+    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)
+  }
+  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>
+      <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
+        <label htmlFor="rss-dynamic-blogs" className="cursor-pointer">
+          <input
+            id="rss-dynamic-blogs"
+            type="checkbox"
+            checked={props.data.rssDynamicBlogs}
+            onChange={event => props.handleCheckChange("rssDynamicBlogs")}
+          />
+          &nbsp; display latest blogs from your personal blog dynamically
+          (GitHub Action)
+        </label>
+      </div>
+
+      {(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>
+            )
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+    </div>
+  )
 }

-export default Addons;
+export default Addons
@@ -0,0 +1,77 @@
+import React from "react"
+const Donate = () => {
+  return (
+    <>
+      <div className="text-center text-4xl my-2">Support 🙏</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">
+          Tip💰
+          {/* 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"
+          >
+            <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"
+          >
+            <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"
+          >
+            <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,30 +1,34 @@
-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 { 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>
-                    <Link to={links.about} activeStyle={{ color: "#002ead" }}>
-                        About
-                    </Link>
-                </div>
-                <div>
-                    <Link to={links.addons} activeStyle={{ color: "#002ead" }}>
-                        Addons
-                    </Link>
-                </div>
-                <div>
-                    <Link to={links.support} activeStyle={{ color: "#002ead" }}>
-                        Support
-                    </Link>
-                </div>
-            </div>
-            <div className="py-2">
-                Developed in India <span role="img" aria-label="india"> 🇮🇳</span>
-            </div>
+  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>
+          <Link to={links.about} activeStyle={{ color: "#002ead" }}>
+            About
+          </Link>
        </div>
-    )
+        <div>
+          <Link to={links.addons} activeStyle={{ color: "#002ead" }}>
+            Addons
+          </Link>
+        </div>
+        <div>
+          <Link to={links.support} activeStyle={{ color: "#002ead" }}>
+            Support
+          </Link>
+        </div>
+      </div>
+      <div className="py-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}) => {
-    return (
-        <div className="flex flex-col min-h-screen">
-            <header>
-                <Header heading="GitHub Profile README Generator" />
-            </header>
-            <main className="flex-grow">
-                {children}
-            </main>
-            <footer>
-                <Footer />
-            </footer>
-        </div>
-    )
-};
-export default Layout;
+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>
+      <footer>
+        <Footer />
+      </footer>
+    </div>
+  )
+}
+export default Layout
@@ -1,40 +1,49 @@
-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([]);
-    useEffect(() => {
-        var tl = new gsap.timeline({repeat: -1});
-        tl.fromTo(arrow.current, {
-            y: 0,
-            color: '#3b3b4f',
-        }, {
-            y: -50,
-            color: '#d0d0d5',
-            stagger: 0.1,
-            duration: 0.5,
-            ease: 'Linear.easeNone'
-        });
-        tl.add('cp')
-        tl.fromTo(arrow.current, {
-            y: -50,
-            color: '#d0d0d5',
-        }, {
-            y: 0,
-            color: '#3b3b4f',
-            stagger: 0.1,
-            duration: 0.5,
-            ease: 'Linear.easeNone'
-        }, 'cp-=0.3');
-    });
-    return (
-        <div className="loader">
-            <span ref={el => (arrow.current[0] = el)}>↓</span>
-            <span ref={el => (arrow.current[1] = el)}>↓</span>
-            <span ref={el => (arrow.current[2] = el)}>↓</span>
-            <span ref={el => (arrow.current[3] = el)}>↓</span>
-            <span ref={el => (arrow.current[4] = el)}>↓</span>
-        </div>
+  let arrow = useRef([])
+  useEffect(() => {
+    var tl = new gsap.timeline({ repeat: -1 })
+    tl.fromTo(
+      arrow.current,
+      {
+        y: 0,
+        color: "#3b3b4f",
+      },
+      {
+        y: -50,
+        color: "#d0d0d5",
+        stagger: 0.1,
+        duration: 0.5,
+        ease: "Linear.easeNone",
+      }
    )
+    tl.add("cp")
+    tl.fromTo(
+      arrow.current,
+      {
+        y: -50,
+        color: "#d0d0d5",
+      },
+      {
+        y: 0,
+        color: "#3b3b4f",
+        stagger: 0.1,
+        duration: 0.5,
+        ease: "Linear.easeNone",
+      },
+      "cp-=0.3"
+    )
+  })
+  return (
+    <div className="loader">
+      <span ref={el => (arrow.current[0] = el)}>↓</span>
+      <span ref={el => (arrow.current[1] = el)}>↓</span>
+      <span ref={el => (arrow.current[2] = el)}>↓</span>
+      <span ref={el => (arrow.current[3] = el)}>↓</span>
+      <span ref={el => (arrow.current[4] = el)}>↓</span>
+    </div>
+  )
 }

-export default Loader;
+export default Loader
@@ -1,148 +1,449 @@
-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) => {
-        if (props.prefix && props.title) {
-            return (
-                <>
-                    {`<h1 align="center">${props.prefix + ' ' + props.title}</h1>`}
-                    <br />
-                </>
-            );
-        }
-        return '';
+const Markdown = props => {
+  const Title = props => {
+    if (props.prefix && props.title) {
+      return (
+        <>
+          {`<h1 align="center">${props.prefix + " " + props.title}</h1>`}
+          <br />
+        </>
+      )
    }
-    const SubTitle = (props) => {
-        if (props.subtitle) {
-            return (
-                <>
-                    {`<h3 align="center">${props.subtitle}</h3>`}
-                    <br />
-                    <br />
-                </>
-            );
-        }
-        return '';
+    return ""
+  }
+  const SubTitle = props => {
+    if (props.subtitle) {
+      return (
+        <>
+          {`<h3 align="center">${props.subtitle}</h3>`}
+          <br />
+          <br />
+        </>
+      )
    }
-    const DisplayWork = (props) => {
-        if (props.prefix && props.project) {
-            if (props.link) {
-                return (<>{`- ${props.prefix} [${props.project}](${props.link})`}<br /><br /></>);
-            } else {
-                return (<>{`- ${props.prefix} **${props.project}**`}<br /><br /></>);
-            }
-        }
-        if (props.prefix && props.link) {
-            return (<>{`- ${props.prefix} [${props.link}](${props.link})`}<br /><br /></>);
-        }
-        return '';
+    return ""
+  }
+  const SectionTitle = props => {
+    if (props.label) {
+      return (
+        <>
+          {`<h3 align="left">${props.label}</h3>`}
+          <br />
+          <br />
+        </>
+      )
    }
-    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 '';
+    return ""
+  }
+  const DisplayWork = props => {
+    if (props.prefix && props.project) {
+      if (props.link) {
+        return (
+          <>
+            {`- ${props.prefix} [${props.project}](${props.link})`}
+            <br />
+            <br />
+          </>
+        )
+      } else {
+        return (
+          <>
+            {`- ${props.prefix} **${props.project}**`}
+            <br />
+            <br />
+          </>
+        )
+      }
    }
-    const VisitorsBadge = (props) => {
-        let link = "https://komarev.com/ghpvc/?username=" + props.github
-        if (props.show) {
-            return (<>{`<p align="left"> <img src="${link}" alt="${props.github}" /> </p>`}<br /><br /></>);
-        }
-        return '';
+    if (props.prefix && props.link) {
+      return (
+        <>
+          {`- ${props.prefix} [${props.link}](${props.link})`}
+          <br />
+          <br />
+        </>
+      )
    }
-    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 '';
+    return ""
+  }
+  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="40" /></a>`}
+          <br />
+        </>
+      )
    }
-    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);
+    return ""
+  }
+  const VisitorsBadge = props => {
+    let link = "https://komarev.com/ghpvc/?username=" + props.github
+    if (props.show) {
+      return (
+        <>
+          {`<p align="left"> <img src="${link}" alt="${props.github}" /> </p>`}
+          <br />
+          <br />
+        </>
+      )
    }
-    const DisplaySkills = (props) => {
-        const listChosenSkills = [];
-        skills.forEach(skill => {
-            if (props.skills[skill]) {
-                listChosenSkills.push(`<img src="${icons[skill]}" alt="${skill}" width="40" height="40"/>`);
-            }
-        });
-        return listChosenSkills.length > 0 ? (<>{`<p align="left">${listChosenSkills.join(' ')}</p>`}<br/><br/></>) : '';
-    }
-    const DisplayDynamicBlogs = (props) => {
-        if (props.show) {
-            return (<>{`### Blogs posts`}
-                <br />
-                {`<!-- BLOG-POST-LIST:START -->`}
-                <br />
-                {`<!-- BLOG-POST-LIST:END -->`}<br /> <br /></>)
-        }
-        return '';
-    }
-    const DisplayTopLanguages = (props) => {
-        let link = "https://github-readme-stats.vercel.app/api/top-langs/?username=" + props.github + "&layout=compact&hide=html"
-        if (props.show) {
-            if (!props.showStats) {
-                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 '';
+    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 (
-        <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} /></>
+      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(
+          `
+          <a href="${skillWebsites[skill]}" target="_blank">
+            <img src="${icons[skill]}" alt="${skill}" width="40" height="40"/>
+          </a>
+          `
+        )
+      }
+    })
+    return listChosenSkills.length > 0 ? (
+      <>
+        <SectionTitle label="Languages and Tools:" />
+        {`<p align="left">${listChosenSkills.join(" ")}</p>`}
+        <br />
+        <br />
+      </>
+    ) : (
+      ""
+    )
+  }
+  const DisplayDynamicBlogs = props => {
+    if (props.show) {
+      return (
+        <>
+          {`### Blogs posts`}
+          <br />
+          {`<!-- BLOG-POST-LIST:START -->`}
+          <br />
+          {`<!-- BLOG-POST-LIST:END -->`}
+          <br /> <br />
+        </>
+      )
+    }
+    return ""
+  }
+  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="left" src="${link}" alt="${props.github}" /></p>`}
+          <br />
+          <br />
+        </>
+      )
+    }
+    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.rssDynamicBlogs && props.social.rssurl) ||
+            (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="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>` : ""}
+    </div>
+  )
+}

-            <><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>` : ''}
-        </div>
-    );
-};
-
-export default Markdown;
+export default Markdown
@@ -1,132 +1,314 @@
-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) => {
-        if (props.prefix && props.title) {
-            return (
-                <h1 className="text-center text-xl font-bold">{props.prefix + ' ' + props.title}</h1>
-            )
-        }
-        return null;
+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>
+      )
    }
-    const SubTitlePreview = (props) => {
-        if (props.subtitle) {
-            return (
-                <h3 className="text-center font-medium">{props.subtitle}</h3>
-            )
-        }
-        return null;
+    return null
+  }
+  const SubTitlePreview = props => {
+    if (props.subtitle) {
+      return <h3 className="text-center font-medium">{props.subtitle}</h3>
    }
-    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>
-                    </div>
-                );
-            } else {
-                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>
-                </div>
-            );
-        }
-        return null;
+    return null
+  }
+  const SectionTitle = props => {
+    if (props.label) {
+      return <h3 className="w-full text-lg sm:text-xl">{props.label}</h3>
    }
-    const WorkPreview = (props) => {
-        const prefix = props.work.prefix
-        const data = props.work.data
-        const link = props.work.link
+    return null
+  }
+  const DisplayWork = props => {
+    if (props.prefix && props.project) {
+      if (props.link) {
        return (
-            <>
-                <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.ama} project={data.ama} />
-                <DisplayWork prefix={prefix.portfolio} link={link.portfolio} />
-                <DisplayWork prefix={prefix.blog} link={link.blog} />
-                <DisplayWork prefix={prefix.contact} project={data.contact} />
-                <DisplayWork prefix={prefix.funFact} project={data.funFact} />
-            </>
+          <div className="my-2">
+            {props.prefix + " "}
+            <a
+              href={props.link}
+              className="no-underline text-blue-700"
+              target="blank"
+            >
+              {props.project}
+            </a>
+          </div>
        )
-    }
-    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) => {
+      } else {
        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} />
-            </div>
+          <div className="my-2">
+            {props.prefix + " "}
+            <b>{props.project}</b>
+          </div>
        )
+      }
    }
-    const VisitorsBadgePreview = (props) => {
-        let link = "https://komarev.com/ghpvc/?username=" + props.github
-        if (props.show) {
-            return (<div className="text-left my-2"> <img className="h-4 sm:h-6" src={link} alt={props.github} /> </div>)
-        }
-        return null;
-    }
-    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&hide=html"
-        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) => {
-            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} />)
-            }
-        });
-        return listSkills.length > 0 ? <div className='flex flex-wrap justify-start items-center'>{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} />
-            <WorkPreview work={props} />
-            <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} />
-            </div>
-            <SocialPreview social={props.social} />
+    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>
        </div>
+      )
+    }
+    return null
+  }
+  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.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.ama} project={data.ama} />
+        <DisplayWork prefix={prefix.portfolio} link={link.portfolio} />
+        <DisplayWork prefix={prefix.blog} link={link.blog} />
+        <DisplayWork prefix={prefix.contact} project={data.contact} />
+        <DisplayWork prefix={prefix.funFact} project={data.funFact} />
+      </>
    )
+  }
+  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-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
+    if (props.show) {
+      return (
+        <div className="text-left my-2">
+          {" "}
+          <img className="h-4 sm:h-6" src={link} alt={props.github} />{" "}
+        </div>
+      )
+    }
+    return null
+  }
+  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 => {
+      if (props.skills[skill]) {
+        listSkills.push(
+          <a href={skillWebsites[skill]} target="_blank">
+            <img
+              className="my-4 mx-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">
+        <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}
+      />
+      <WorkPreview work={props} />
+      <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}
+        />
+      </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,7 +28,9 @@ 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}>
@@ -1,99 +1,325 @@
-import React from 'react';
+import React from "react"

-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="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)} />
-                </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)} />
-                </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)} />
-                </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)} />
-                </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)} />
-                </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)} />
-                </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)} />
-                </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)} />
-                </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)} />
-                </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)} />
-                </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)} />
-                </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)} />
-                </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)} />
-                </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)} />
-                </div>
-            </div>
+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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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) => {
-    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>
-    );
+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="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) => {
-    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="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" 
-                value={props.data.title}
-                    onChange={event => props.handleDataChange('title', event)} />
-            </div>
-        </div>
-    );
+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="flex justify-start items-center w-full text-regular text-xs sm:text-lg">
+        <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)}
+        />
+      </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,14 +139,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="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)}
        />
@@ -154,14 +154,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="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"
+          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
+export default links
@@ -43,6 +43,10 @@ const categorizedSkills = {
      "tailwind",
      "materialize",
      "bulma",
+      "gtk",
+      "qt",
+      "wx_widgets",
+      "ember",
    ],
  },

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

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

  database: {
@@ -331,26 +335,151 @@ const icons = {
    "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",
+}
+
+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",
+  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",
+  oracle: "https://www.oracle.com/",
+  photoshop: "https://www.photoshop.com/en",
+  php: "https://www.php.net",
+  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/",
+  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: "",
 }

 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 +487,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}
@@ -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,24 +29,29 @@ 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.)

 3. Commit your fancy new README!
-    - If you're on GitHub's web interface you can choose to commit directly to the repo's main branch (i.e., master or main) which will make it immediately visible on your profile)
+   - If you're on GitHub's web interface you can choose to commit directly to the repo's main branch (i.e., master or main) which will make it immediately visible on your profile)
 4. Push changes to GitHub (if you made changes locally i.e., on your computer and not github.com)
 <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,7 +29,8 @@ 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.  
+
+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: 
+- 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
@@ -72,4 +83,4 @@ jobs:
 - Replace the above url list with your own rss feed urls. See [popular-sources](#popular-sources) for a list of common RSS feed urls.
 - Commit and wait for it to run

-To know more, check out the [official github repository](https://github.com/gautamkrishnar/blog-post-workflow)
+To know more, check out the [official github repository](https://github.com/gautamkrishnar/blog-post-workflow)
@@ -6,29 +6,31 @@ title: "💵 Support OSS"

 > Think of giving not as a duty but as a privilege --John D. Rockefeller Hr.

-🚀 GitHub Profile README Generator tool is free and will always be free. Numerous developers has put their time and efforts to make this tool more powerful. However, these developers are doing their full time job along with open-source contributions. 
+🚀 GitHub Profile README Generator tool is free and will always be free. Numerous developers has put their time and efforts to make this tool more powerful. However, these developers are doing their full time job along with open-source contributions.

 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://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://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>
+
 </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>

 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">&quot;How to Use Github&#39;s README Feature to Track Your Stats in One Click&quot; by <a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@rahuldkjain</a> <a href="https://t.co/3dxv0G2sBJ">https://t.co/3dxv0G2sBJ</a> <a href="https://twitter.com/hashtag/repositoriesongithub?src=hash&amp;ref_src=twsrc%5Etfw">#repositoriesongithub</a> <a href="https://twitter.com/hashtag/react?src=hash&amp;ref_src=twsrc%5Etfw">#react</a></p>&mdash; Hacker Noon (@hackernoon) <a href="https://twitter.com/hackernoon/status/1301615959107678215?ref_src=twsrc%5Etfw">September 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 
+<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">&quot;How to Use Github&#39;s README Feature to Track Your Stats in One Click&quot; by <a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@rahuldkjain</a> <a href="https://t.co/3dxv0G2sBJ">https://t.co/3dxv0G2sBJ</a> <a href="https://twitter.com/hashtag/repositoriesongithub?src=hash&amp;ref_src=twsrc%5Etfw">#repositoriesongithub</a> <a href="https://twitter.com/hashtag/react?src=hash&amp;ref_src=twsrc%5Etfw">#react</a></p>&mdash; Hacker Noon (@hackernoon) <a href="https://twitter.com/hackernoon/status/1301615959107678215?ref_src=twsrc%5Etfw">September 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

 <blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">This is a great tool to generate customized GitHub profile README: <a href="https://t.co/dTpnz0iTP2">https://t.co/dTpnz0iTP2</a> <a href="https://t.co/WcEkK2DKz0">pic.twitter.com/WcEkK2DKz0</a></p>&mdash; Alisher Abdulkhaev (@alisher_ai) <a href="https://twitter.com/alisher_ai/status/1298858350885576704?ref_src=twsrc%5Etfw">August 27, 2020</a></blockquote>

@@ -36,8 +38,7 @@ 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="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>

@@ -45,23 +46,19 @@ 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 morning I set up my <a href="https://twitter.com/hashtag/github?src=hash&amp;ref_src=twsrc%5Etfw">#github</a> profile readme, really amazing what great tools the users have already created to make this easier.<br><br>Big shout out to <a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@rahuldkjain</a>!<a href="https://t.co/bL0XwfJ78B">https://t.co/bL0XwfJ78B</a> <a href="https://t.co/xBLVFOJegt">pic.twitter.com/xBLVFOJegt</a></p>&mdash; Max Schmitt (@maxibanki) <a href="https://twitter.com/maxibanki/status/1296408691273498624?ref_src=twsrc%5Etfw">August 20, 2020</a></blockquote>

-<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"><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> 
+<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;
-  } */
 }
-
-
@@ -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,35 +2,35 @@ 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.
+  data, // this prop will be injected by the GraphQL query below.
 }) {
-    const { markdownRemark } = data // data.markdownRemark holds your post data
-    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`} />
-            </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>
-    )
+  const { markdownRemark } = data // data.markdownRemark holds your post data
+  const { frontmatter, html } = markdownRemark
+  return (
+    <Layout>
+      <Helmet>
+        <meta charSet="utf-8" />
+        <title>{frontmatter.title}</title>
+        <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>
+          <div
+            className="markdown"
+            dangerouslySetInnerHTML={{ __html: html }}
+          />
+        </div>
+      </div>
+    </Layout>
+  )
 }

 export const pageQuery = graphql`
@@ -44,4 +44,4 @@ export const pageQuery = graphql`
      }
    }
  }
-`
+`
@@ -1,12 +1,12 @@
-const isGitHubUsernameValid = (username) => {
-    var pattern = /^[a-z\d](?:[a-z\d]|-(?=[a-z\d])){0,38}$/i
-    return pattern.test(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) => {
-    if (username) {
-        return username[0] === '@'
-    }
-    return true
+const isMediumUsernameValid = username => {
+  if (username) {
+    return username[0] === "@"
+  }
+  return true
 }

-export { isGitHubUsernameValid, isMediumUsernameValid };
+export { isGitHubUsernameValid, isMediumUsernameValid }
@@ -1,30 +1,85 @@
 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
-    } else {
-        rssFeed = 'https://medium.com/feed/' + payload.medium.username
-    }
-    let data = `name: Latest blog post workflow
+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
+  }
+  let data = `name: Latest blog post workflow
 on: 
    schedule:
        - cron: '0 * * * *'
 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
+  return data
 }

-export { latestBlogs }
+export { latestBlogs }
@@ -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: [],
Author	SHA1	Message	Date
allcontributors[bot]	7d7bff35b3	docs: update .all-contributorsrc [skip ci]	2020-09-26 08:05:54 +00:00
allcontributors[bot]	f0113b3660	docs: update README.md [skip ci]	2020-09-26 08:05:53 +00:00
zolostays	351dfbbde1	[fix]: readme with all-contributors	2020-09-25 18:00:44 +05:30
Rahul Jain	a44f36de26	Merge pull request #133 from rahuldkjain/all-contributors/add-sarbikbetal docs: add sarbikbetal as a contributor	2020-09-25 17:54:58 +05:30
allcontributors[bot]	f1e13f4129	docs: create .all-contributorsrc [skip ci]	2020-09-25 12:12:35 +00:00
allcontributors[bot]	af05011d9d	docs: update README.md [skip ci]	2020-09-25 12:12:34 +00:00
Rahul Jain	43733cdb4b	Merge pull request #130 from sarbikbetal/srbk/dev [fix]: align social and skill icons to the left	2020-09-25 17:29:33 +05:30
Rahul Jain	af02bfcab8	Merge pull request #129 from jaideepghosh/master [fix]: issue #128	2020-09-25 17:29:10 +05:30
Sarbik Betal	894c1ebb1e	Code review changes.	2020-09-25 16:55:30 +05:30
Sarbik Betal	8e91804d48	[Fix] Align skills to the left	2020-09-25 16:11:25 +05:30
Rahul Jain	5c2c72706a	[add]: opencollective in funding	2020-09-25 16:08:03 +05:30
jaideepghosh	5d72455864	feat(skills):Added websites.	2020-09-25 15:56:50 +05:30
Sarbik Betal	852931e37d	[Add] added a sectionTitle element.	2020-09-25 15:53:05 +05:30
jaideepghosh	4918dcdff2	feat(skills):Added links.	2020-09-25 15:46:55 +05:30
Sarbik Betal	a74802d33a	[Fix] Align social icons to the left	2020-09-25 15:37:39 +05:30
jaideepghosh	cdd734be82	feat(markdown):Added option to add anchor tag on skills.	2020-09-25 15:12:43 +05:30
jaideepghosh	dc1930144d	feat(skills):Added object to store skill's websites.	2020-09-25 15:12:15 +05:30
Rahul Jain	f3e7277048	[update]: bug-report template with discord server	2020-09-25 12:40:31 +05:30
Rahul Jain	7aa7bada2e	[update]: issue-template with discord server link	2020-09-25 12:39:09 +05:30
Rahul Jain	577a5e7680	Merge pull request #124 from rahuldkjain/donate [add]: donate below markdown-box	2020-09-23 17:44:17 +05:30
zolostays	a8015319a4	[add]: donate below markdown-box	2020-09-23 17:24:18 +05:30
Rahul Jain	8281423b3f	Merge pull request #122 from rahuldkjain/fix-readme [fix]: website link	2020-09-23 15:30:08 +05:30
zolostays	8f3987172a	[fix]: website link	2020-09-23 15:29:22 +05:30
Rahul Jain	eb9c1fdf9f	Merge pull request #121 from MaheshBharadwaj/add-scikit-learn [add]: scikit-learn under AI/ML	2020-09-23 15:24:54 +05:30
Mahesh Bharadwaj	199a5ee2b3	added scikit-learn under AI/ML	2020-09-22 19:18:00 +05:30
Rahul Jain	8e4618f33c	Merge pull request #120 from rahuldkjain/optimize-readme [optimize]: README	2020-09-21 15:08:17 +05:30
zolostays	6507d5ec45	[add]: emojis in README	2020-09-21 15:05:35 +05:30
zolostays	3188861572	[add]: emojis in README	2020-09-21 15:04:47 +05:30
zolostays	a282731b14	[add]: feature checkbox	2020-09-21 14:56:06 +05:30
zolostays	20b3f89e71	[fix]: features-list	2020-09-21 12:56:16 +05:30
zolostays	bef0f933ca	[add]: tech specs in README	2020-09-21 12:54:35 +05:30
Rahul Jain	a7ee16cf14	[add]: CONTRIBUTING.md	2020-09-21 11:49:19 +05:30
Rahul Jain	12f1fa8cc5	[add]: CODE_OF_CONDUCT	2020-09-21 11:45:21 +05:30
Rahul Jain	a56ed46aa9	Merge pull request #117 from DenverCoder1/patch-2 [fix]: spelling and grammar in the README	2020-09-17 15:44:11 +05:30
Rahul Jain	411d694d1a	Merge pull request #118 from rahuldkjain/issue-112 [fix]: remove border outline from input on focus	2020-09-17 15:42:20 +05:30
zolostays	b20c9adccb	[fix]: issue #112	2020-09-17 15:40:14 +05:30
Jonah Lawrence	9bdec79d18	Fixed spelling and grammar in the Readme	2020-09-17 12:58:00 +03:00
zolostays	409ed0420e	[del]: tl.css	2020-09-17 15:10:06 +05:30
Rahul Jain	58a05e1f91	Merge pull request #114 from rahuldkjain/top-languages [fix]: issue #90	2020-09-16 12:36:18 +05:30
zolostays	81e4cbb234	[fix]: issue #90	2020-09-16 12:34:45 +05:30
Rahul Jain	b0f734d955	Merge pull request #111 from rahuldkjain/display-config [fix]: display config options	2020-09-16 12:06:20 +05:30
Rahul Jain	00c8f7531e	Merge pull request #110 from g-savitha/blogs_from_rss_feed [add]: blogs from the personal website using RSS feed	2020-09-16 12:01:58 +05:30
Savitha Gollamudi	3b09ef8d07	Support to dynamically add blogs from personal website	2020-09-15 17:42:05 +05:30
zolostays	e6d636d5f0	[fix]: display config options	2020-09-15 17:00:05 +05:30
Rahul Jain	3ee5764de2	Merge pull request #108 from g-savitha/prettier [fix]: code formatting to the whole project	2020-09-15 16:25:38 +05:30
Savitha Gollamudi	3859e77bb3	Merge branch 'master' into prettier	2020-09-13 23:09:46 +05:30
Savitha Gollamudi	8e0a7996ec	apply prettier to whole project	2020-09-13 23:02:37 +05:30
rahuldkjain	ba80eec908	[add]: discord community server link	2020-09-13 18:59:08 +05:30
rahuldkjain	45a2ea731d	[add]: discord community badge	2020-09-13 18:55:29 +05:30
Rahul Jain	014c2da58c	Merge pull request #107 from komal7292/master [fix]: spelling mistake in placeholder	2020-09-13 18:16:58 +05:30
komal	7a95d2b89e	spelling correction	2020-09-12 17:21:43 +05:30
Rahul Jain	1da98086ed	Merge pull request #102 from g-savitha/fix-dsa-social-links [fix]: DSA social links	2020-09-10 15:51:25 +05:30
Rahul Jain	91061ebe0e	Merge pull request #101 from N00Bmaster2810/satya [del]: commented code	2020-09-10 15:49:30 +05:30
Rahul Jain	5e8b432217	Merge pull request #92 from MauricioHernanCabrera/skills [add]: qtk, wt, xw-widgets in skills	2020-09-10 15:47:40 +05:30
Rahul Jain	2c347888a3	Merge branch 'master' into skills	2020-09-10 15:46:51 +05:30
Savitha Gollamudi	f7285bb8fb	fix dsa social links	2020-09-09 18:09:11 +05:30
Satya Prakash Satyam	067bf32218	commit 2	2020-09-09 12:38:25 +05:30
Satya Prakash Satyam	b81f6054f9	removed unnecessary comments	2020-09-09 12:15:52 +05:30
Mauricio Hernan Cabrera	2de2be3af5	selenium updated	2020-09-05 14:20:47 -03:00
Mauricio Hernan Cabrera	8b13bf783a	jasmine updated	2020-09-05 14:19:36 -03:00
Mauricio Hernan Cabrera	cd38568eff	karma updated	2020-09-05 14:19:06 -03:00
Mauricio Hernan Cabrera	a794107775	puppeteer updated	2020-09-05 14:18:09 -03:00
Mauricio Hernan Cabrera	af9ad29abf	cypress updated	2020-09-05 14:15:01 -03:00
Mauricio Hernan Cabrera	1621f8fbb7	jest updated	2020-09-05 14:14:12 -03:00
Mauricio Hernan Cabrera	49b4458efd	mocha updated	2020-09-05 14:13:51 -03:00
Mauricio Hernan Cabrera	d953b4612b	vuetify updated	2020-09-05 14:11:47 -03:00
Mauricio Hernan Cabrera	4027f1e953	svelte updated	2020-09-05 14:05:53 -03:00
Mauricio Hernan Cabrera	8226ba4024	wx-widgets added	2020-09-05 14:03:15 -03:00
Mauricio Hernan Cabrera	87f7f98299	qt added	2020-09-05 14:01:49 -03:00
Mauricio Hernan Cabrera	ca54e5ef77	gtk added	2020-09-05 14:01:31 -03:00
rahuldkjain	caf68b97ff	[add]: BMC in funding.yml	2020-09-05 20:50:56 +05:30
rahuldkjain	da238c9084	[fix]: flat() is not a function	2020-09-05 20:47:39 +05:30
rahuldkjain	2aa12a581b	[add]: BMC widget	2020-09-05 19:56:18 +05:30
rahuldkjain	9153070f69	[fix]: social css	2020-09-05 17:57:30 +05:30
rahuldkjain	588bb821d6	[add]: tailwind css	2020-09-05 17:25:33 +05:30
Rahul Jain	1b1c1c366f	Merge pull request #94 from kathawala/skills-fix [fix]: CSS change to show names of skills on hover for smaller desktops	2020-09-05 17:14:48 +05:30
Rahul Jain	899c514e30	Merge pull request #88 from simonc/master [add]: ember in skills	2020-09-05 17:14:04 +05:30
Rahul Jain	8659e03e6e	Merge pull request #86 from amruta-kashikar/social-links-addition-3 [add]: social icons	2020-09-05 17:13:24 +05:30
Rahul Jain	455a288d7d	Merge pull request #85 from amruta-kashikar/social-links-addition-2 [add]: social icons	2020-09-05 17:12:15 +05:30
Rahul Jain	072319a836	Merge pull request #84 from amruta-kashikar/social-links-addition-1 [add]: social icons	2020-09-05 17:11:47 +05:30
Rahul Jain	85a6558615	Merge pull request #83 from amruta-kashikar/social-links-addition [add]: social icons	2020-09-05 17:11:13 +05:30
Farhan Kathawala	1b7651d0f5	Minor: CSS change to allow names of skills appearing on hover for smaller desktops	2020-09-03 18:09:13 -05:00
Amruta Kashikar	b8d00ca08a	Update markdown.js	2020-09-03 15:14:37 +05:30
Simon Courtois	04aa4a3c85	Adding Ember to the Frontend Dev list	2020-08-31 01:40:25 +02:00
Amruta Kashikar	917341f700	Update index.js	2020-08-28 20:44:06 +05:30
Amruta Kashikar	ae574055d0	Update markdownPreview.js	2020-08-28 20:43:30 +05:30
Amruta Kashikar	159099ced3	Update markdown.js	2020-08-28 20:38:04 +05:30
Amruta Kashikar	d955504e8f	Added social links	2020-08-28 20:37:22 +05:30