docs: update .all-contributorsrc [skip ci]

docs: update README.md [skip ci]
Merge pull request #229 from aaditkamat/add-vuepress
2020-10-04 15:41:48 +00:00 · 2020-10-04 15:41:47 +00:00 · 2020-10-04 19:27:02 +05:30 · 2020-10-04 21:20:40 +08:00 · 2020-10-04 17:12:26 +05:30 · 2020-10-04 16:58:10 +05:30
53 changed files with 10770 additions and 2103 deletions
@@ -0,0 +1,42 @@
+{
+  "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": "antonkomarev",
+      "name": "Anton Komarev",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/1849174?v=4",
+      "profile": "https://komarev.com",
+      "contributions": [
+        "plugin"
+      ]
+    },
+    {
+      "login": "Mohitmadhav",
+      "name": "Mohit_007",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/59333817?v=4",
+      "profile": "https://github.com/Mohitmadhav",
+      "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,17 @@
+# Configuration for new-issue-welcome - https://github.com/behaviorbot/new-issue-welcome
+
+# Comment to be posted to on first time issues
+newIssueWelcomeComment: >
+  Thanks for opening your first issue here! Your contribution means alot. 🙌 Join Discord Server (https://discord.gg/HHMs7Eg) for discussing issues, pull-requests, new features, etc.
+
+# Configuration for new-pr-welcome - https://github.com/behaviorbot/new-pr-welcome
+
+# Comment to be posted to on PRs from first time contributors in your repository
+newPRWelcomeComment: >
+  Thanks for opening this pull request! Make sure you have assigned an issue to this respective PR 😇
+
+# Configuration for first-pr-merge - https://github.com/behaviorbot/first-pr-merge
+
+# Comment to be posted to on pull requests merged by a first time user
+firstPRMergeComment: >
+  Congrats on merging your first pull request🎉! Thanks alot for your contribution. 🙏
@@ -0,0 +1,76 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+ advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at rahuldkjain@gmail.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq
@@ -0,0 +1,21 @@
+# Contributing
+
+When contributing to this repository, please first discuss the change you wish to make via issue,
+email, or any other method with the owners of this repository before making a change.
+
+<a href="https://discord.gg/HHMs7Eg" target="blank">
+<img src="https://img.shields.io/discord/735303195105951764?color=%23677BC4&label=Join%20Community&style=flat-square" alt="join discord community of github profile readme generator"/>
+</a>
+
+Please note we have a code of conduct, please follow it in all your interactions with the project.
+
+## Pull Request Process
+
+1. Ensure any install or build dependencies are removed before the end of the layer when doing a
+   build.
+2. Update the README.md with details of changes to the interface, this includes new environment
+   variables, exposed ports, useful file locations and container parameters.
+3. Increase the version numbers in any examples files and the README.md to the new version that this
+   Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/).
+4. You may merge the Pull Request once you have the sign-off of two other developers, or if you
+   do not have permission to do that, you may request the second reviewer merge it for you.
@@ -4,7 +4,7 @@
  </a>
 </p>
 <h1 align="center">
-  GitHub Profile Readme Generator
+  GitHub Profile README Generator
 </h1>

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

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

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

 #### Tired of editing GitHub Profile README with new features?
-This tool provides an easy way to create github profile readme with latest addons like `visitors count`, `github stats` etc. 

-#### 🚀 Try it out: [Live demo](https://rahuldkjain.github.io/gh-profile-readme-generator)
+This tool provides an easy way to create a GitHub profile readme with the latest add-ons such as `visitors count`, `github stats`, etc.
+
+
+## 🚀 Demo 
+<a href="https://rahuldkjain.github.io/gh-profile-readme-generator" target="blank">
+<img src="https://img.shields.io/website?url=https%3A%2F%2Frahuldkjain.github.io%2Fgh-profile-readme-generator&logo=github&style=flat-square" />
+</a>
+
+Try the tool: [GitHub Profile README Generator](https://rahuldkjain.github.io/gh-profile-readme-generator)

 ## 🧐 Features
-Just fill the details like `Name`, `Tagline`, `Dev Platforms Username`, `Current Work`, `Portfolio`, `Blog` etc. with a minimal UI.
+
+Just fill in the details such as `Name`, `Tagline`, `Dev Platforms Username`, `Current Work`, `Portfolio`, `Blog`, etc. with a minimal UI.
+
+- **Uniform Dev Icons**
+
+- **Uniform Social Icons**
+
+- **Visitors Counter Badge**
+
+- **GitHub Profile Stats Card**
+
+- **GitHub Top Skills**
+
+- **Dynamic Dev(.)to Blogs** (GitHub Action)
+
+- **Dynamic Medium Blogs** (GitHub Action)
+
+- **Dynamic Personal Blogs from RSS Feed** (GitHub Action)
+
+- **Wakatime Stats** [contribute](https://github.com/rahuldkjain/github-profile-readme-generator/issues/115)

 Click on `Generate README` to get your README in `markdown`.
 You can preview the README too.

-You can add latest addons like `visitors count`, `shields`, `dev icons`, `github stats` etc to your README in just one click.
+## 🛠️ Installation Steps

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

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

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

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

-## Support 🙏
 <p align="left">
-<a href="https://www.paypal.me/rahuldkjain"><img src="https://ionicabizau.github.io/badges/paypal.svg" alt="sponsor github profile readme generator"/>
+<a href="https://www.paypal.me/rahuldkjain/10"><img src="https://ionicabizau.github.io/badges/paypal.svg" alt="sponsor github profile readme generator"/>
 </a>
 <a href="https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator">
 <img src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator" alt="tweet github profile readme generator"/>
@@ -97,6 +155,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-3-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://komarev.com"><img src="https://avatars0.githubusercontent.com/u/1849174?v=4" width="100px;" alt=""/><br /><sub><b>Anton Komarev</b></sub></a><br /><a href="#plugin-antonkomarev" title="Plugin/utility libraries">🔌</a></td>
+    <td align="center"><a href="https://github.com/Mohitmadhav"><img src="https://avatars2.githubusercontent.com/u/59333817?v=4" width="100px;" alt=""/><br /><sub><b>Mohit_007</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=Mohitmadhav" title="Code">💻</a></td>
+  </tr>
+</table>
+
+<!-- markdownlint-enable -->
+<!-- prettier-ignore-end -->
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
 <hr>
 <p align="center">
 Developed with ❤️ in India 🇮🇳 
@@ -0,0 +1 @@
+module.exports = "test-file-stub"
@@ -0,0 +1,27 @@
+const React = require("react")
+const gatsby = jest.requireActual("gatsby")
+
+module.exports = {
+  ...gatsby,
+  graphql: jest.fn(),
+  Link: jest.fn().mockImplementation(
+    // these props are invalid for an `a` tag
+    ({
+      activeClassName,
+      activeStyle,
+      getProps,
+      innerRef,
+      partiallyActive,
+      ref,
+      replace,
+      to,
+      ...rest
+    }) =>
+      React.createElement("a", {
+        ...rest,
+        href: to,
+      })
+  ),
+  StaticQuery: jest.fn(),
+  useStaticQuery: jest.fn(),
+}
@@ -1,2 +1,2 @@
-import "./src/styles/tailwind.css";
-require("prismjs/themes/prism-okaidia.css");
+import "./src/styles/tailwind.css"
+require("prismjs/themes/prism-okaidia.css")
@@ -24,10 +24,8 @@ module.exports = {
    {
      resolve: `gatsby-transformer-remark`,
      options: {
-        plugins: [
-          `gatsby-remark-prismjs`,
-        ]
-      }
+        plugins: [`gatsby-remark-prismjs`],
+      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
@@ -56,7 +54,7 @@ module.exports = {
      resolve: `gatsby-plugin-postcss`,
      options: {
        postCssPlugins: [require("tailwindcss")],
-      }
+      },
    },
    {
      resolve: `gatsby-plugin-purgecss`,
@@ -64,9 +62,9 @@ module.exports = {
        printRejected: false,
        develop: false,
        tailwind: true,
-      }
+      },
    },
-    `gatsby-plugin-twitter`
+    `gatsby-plugin-twitter`,
  ],
  // this (optional) plugin enables Progressive Web App + Offline functionality
  // To learn more, visit: https://gatsby.dev/offline
@@ -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,
+      },
    })
-  }
+  })
+}
@@ -0,0 +1,5 @@
+const babelOptions = {
+  presets: ["babel-preset-gatsby"],
+}
+
+module.exports = require("babel-jest").createTransformer(babelOptions)
@@ -0,0 +1,15 @@
+module.exports = {
+  transform: {
+    "^.+\\.jsx?$": `<rootDir>/jest-preprocess.js`,
+  },
+  moduleNameMapper: {
+    ".+\\.(css|styl|less|sass|scss)$": `identity-obj-proxy`,
+    ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": `<rootDir>/__mocks__/file-mock.js`,
+  },
+  testPathIgnorePatterns: [`node_modules`, `\\.cache`, `<rootDir>.*/public`],
+  transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],
+  globals: {
+    __PATH_PREFIX__: ``,
+  },
+  setupFiles: [`<rootDir>/loadershim.js`],
+}
@@ -0,0 +1,3 @@
+global.___loader = {
+  enqueue: jest.fn(),
+}
@@ -25,12 +25,17 @@
    "react-helmet": "^6.1.0"
  },
  "devDependencies": {
+    "babel-jest": "26.3.0",
+    "babel-preset-gatsby": "0.5.11",
    "gatsby-plugin-postcss": "^2.3.11",
    "gatsby-plugin-purgecss": "^5.0.0",
    "gatsby-plugin-twitter": "^2.3.10",
    "gatsby-remark-embedder": "^3.0.0",
    "gh-pages": "^3.1.0",
+    "identity-obj-proxy": "3.0.0",
+    "jest": "26.4.2",
    "prettier": "2.0.5",
+    "react-test-renderer": "16.13.1",
    "tailwindcss": "^1.7.6"
  },
  "keywords": [
@@ -44,7 +49,7 @@
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
-    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
+    "test": "jest",
    "deploy": "gatsby build --prefix-paths && gh-pages -d public -b master"
  },
  "repository": {
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Title renders correctly 1`] = `
+<div
+  className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10"
+>
+  <div
+    className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2"
+  >
+    Title
+  </div>
+  <div
+    className="flex justify-start items-center w-full text-regular text-xs sm:text-lg"
+  >
+    <input
+      className="outline-none w-24 sm:w-40 mr-10 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700 prefix"
+      id="title-prefix"
+      onChange={[Function]}
+      value="Hi 👋, I'm"
+    />
+    <input
+      className="outline-none placeholder-gray-700 w-1/2 sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="title-name"
+      onChange={[Function]}
+      placeholder="name"
+      value=""
+    />
+  </div>
+</div>
+`;
@@ -0,0 +1,13 @@
+import React from "react"
+import renderer from "react-test-renderer"
+
+import Title from "../title"
+
+describe("Title", () => {
+  it("renders correctly", () => {
+    const tree = renderer
+      .create(<Title prefix={{ title: "Hi 👋, I'm" }} data={{ title: "" }} />)
+      .toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})
@@ -1,73 +1,259 @@
-import React from "react"
-import { withPrefix } from 'gatsby'
+import React, { useState, useEffect } from "react"
+import { withPrefix } from "gatsby"
 import { latestBlogs } from "../utils/workflows"
 import links from "../constants/page-links"
-import { isMediumUsernameValid } from "../utils/validation"
-const Addons = (props) => {
-    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);
-    }
-    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>
+import { isMediumUsernameValid, isGitHubUsernameValid } from "../utils/validation"
+import { ToolsIcon, XCircleIcon } from "@primer/octicons-react";

-            {(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>
-    )
+const AddonsItem = ({inputId, inputChecked, onInputChange, Icon, onIconClick, ...props}) => {
+  return (
+    <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
+      <label htmlFor={inputId} className="cursor-pointer flex items-center">
+        <input
+          type="checkbox"
+          id={inputId}
+          checked={inputChecked}
+          onChange={onInputChange}
+        />
+        <span className="pl-4">{props.children}</span>
+      </label>
+      {
+        Icon?
+          <button onClick={onIconClick} className="flex ml-3 focus:bg-gray-400" style={{outline: "none"}}>
+            <Icon className="transform scale-100 md:scale-125" />
+          </button>
+          :''
+      }
+    </div>
+  )
 }

-export default Addons;
+const CustomizeBadge = ({githubName, badgeOptions, onBadgeUpdate}) =>  {
+  return (
+    <div className={`border-2 border-solid border-gray-900 bg-gray-100 p-2 ml-8`} style={{maxWidth: '21rem'}}>
+      <header className="text-base sm:text-lg">Customize Badge</header>
+      <hr className="border-gray-500"/>
+      <div className="text-sm sm:text-lg flex flex-col mt-2 ml-0 md:ml-4">
+        <label htmlFor="badge-style">Style:&nbsp;
+          <select 
+            id="badge-style" 
+            onChange={(e) => onBadgeUpdate('badgeStyle', e.target.value)} 
+            value = {badgeOptions.badgeStyle}
+          >
+            <option value="flat">Flat</option>
+            <option value="flat-square">Flat Square</option>
+            <option value="plastic">Plastic</option>
+          </select> 
+        </label>
+        
+        <label htmlFor="badge-color">Color:&nbsp;
+          <input 
+            type="color" 
+            id="badge-color" 
+            defaultValue={`#${badgeOptions.badgeColor}`} 
+            className="w-6"
+            onChange={(e) => onBadgeUpdate('badgeColor', e.target.value.replace('#', ''))}
+          />
+        </label>
+        
+        <label htmlFor="badge-label-text">Label Text:&nbsp;
+          <input 
+            type="text" 
+            id="badge-label-text" 
+            placeholder="Profile views" 
+            className="w-2/4 bg-gray-300 pl-2"
+            onChange={(e) => onBadgeUpdate('badgeLabel', e.target.value.trim())}
+            defaultValue={badgeOptions.badgeLabel}
+          />
+        </label>
+        
+        <span className="mt-2 flex items-center">
+          Preview:&nbsp;
+          {
+            isGitHubUsernameValid(githubName)?
+              <img 
+                src={`https://komarev.com/ghpvc/`
+                    + `?username=${githubName}`
+                    + `&label=${encodeURI(badgeOptions.badgeLabel)}`
+                    + `&color=${badgeOptions.badgeColor}`
+                    + `&style=${badgeOptions.badgeStyle}`
+                    }
+              />
+            : <span className="text-xxs md:text-sm text-red-600">Invalid GitHub username</span>
+          }
+          
+        </span>
+      </div>
+    </div>
+  )
+}
+
+const Addons = props => {
+  const [customizeBadgeOpen, setCustomizeOpen] = useState(false);
+  const [debounce, setDebounce] = useState(undefined);
+  const [badgeOptions, setBadgeOptions] = useState({
+    badgeStyle: props.data.badgeStyle, 
+    badgeColor: props.data.badgeColor, 
+    badgeLabel: props.data.badgeLabel
+  });
+
+  useEffect(() => {
+    setBadgeOptions({
+      badgeStyle: props.data.badgeStyle, 
+      badgeColor: props.data.badgeColor, 
+      badgeLabel: props.data.badgeLabel
+    })
+  }, [props.data.badgeStyle, props.data.badgeColor, props.data.badgeLabel])
+
+  const blogPostPorkflow = () => {
+    let payload = {
+      dev: {
+        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,
+      },
+    }
+    var actionContent = latestBlogs(payload)
+    var tempElement = document.createElement("a")
+    tempElement.setAttribute(
+      "href",
+      "data:text/yaml;charset=utf-8," + encodeURIComponent(actionContent)
+    )
+    tempElement.setAttribute("download", "blog-post-workflow.yml")
+    tempElement.style.display = "none"
+    document.body.appendChild(tempElement)
+    tempElement.click()
+    document.body.removeChild(tempElement)
+  }
+
+  const onCustomizeClick = () => {
+    setCustomizeOpen(!customizeBadgeOpen);
+  }
+
+  const onBadgeUpdate = (option, value) => {
+    const callback = () => {
+      let newVal = (option==='badgeLabel' && value==='')?'Profile views':value;
+      setBadgeOptions({...badgeOptions, [option]: newVal});
+      props.handleDataChange(option, {target: {value: newVal}})
+    }
+    clearTimeout(debounce);
+    setDebounce(setTimeout(callback, 300));
+  }
+  return (
+    <div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10">
+      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">
+        Add-ons
+      </div>
+      <AddonsItem
+        inputId="visitors-count"
+        inputChecked={props.data.visitorsBadge}
+        onInputChange={() => props.handleCheckChange("visitorsBadge")}
+        Icon={ customizeBadgeOpen ? XCircleIcon : ToolsIcon }
+        onIconClick={onCustomizeClick}
+      >
+        display visitors count badge
+      </AddonsItem>
+      {
+        customizeBadgeOpen?
+          <CustomizeBadge 
+            githubName={props.social.github} 
+            badgeOptions={badgeOptions}
+            onBadgeUpdate={onBadgeUpdate}
+          />
+        : ''
+      }
+      <AddonsItem
+        inputId="github-profile-trophy"
+        inputChecked={props.data.githubProfileTrophy}
+        onInputChange={() => props.handleCheckChange("githubProfileTrophy")}
+      >
+        display github trophy
+      </AddonsItem>
+      <AddonsItem
+        inputId="github-stats"
+        inputChecked={props.data.githubStats}
+        onInputChange={() => props.handleCheckChange("githubStats")}
+      >
+        display github profile stats card
+      </AddonsItem>
+      <AddonsItem
+        inputId="top-languages"
+        inputChecked={props.data.topLanguages}
+        onInputChange={() => props.handleCheckChange("topLanguages")}
+      >
+        display top skills
+      </AddonsItem>
+      <AddonsItem
+        inputId="twitter-badge"
+        inputChecked={props.data.twitterBadge}
+        onInputChange={() => props.handleCheckChange("twitterBadge")}
+      >
+        display twitter badge
+      </AddonsItem>
+      <AddonsItem
+        inputId="dev-dynamic-blogs"
+        inputChecked={props.data.devDynamicBlogs}
+        onInputChange={() => props.handleCheckChange("devDynamicBlogs")}
+      >
+        display latest dev.to blogs dynamically (GitHub Action)
+      </AddonsItem>
+      <AddonsItem
+        inputId="medium-dynamic-blogs"
+        inputChecked={props.data.mediumDynamicBlogs}
+        onInputChange={() => props.handleCheckChange("mediumDynamicBlogs")}
+      >
+        display latest medium blogs dynamically (GitHub Action)
+      </AddonsItem>
+      <AddonsItem
+        inputId="rss-dynamic-blogs"
+        inputChecked={props.data.rssDynamicBlogs}
+        onInputChange={() => props.handleCheckChange("rssDynamicBlogs")}
+      >
+        display latest blogs from your personal blog dynamically (GitHub Action)
+      </AddonsItem>
+
+      {(props.data.devDynamicBlogs && props.social.dev) ||
+      (props.data.rssDynamicBlogs && props.social.rssurl) ||
+      (props.data.mediumDynamicBlogs &&
+        props.social.medium &&
+        isMediumUsernameValid(props.social.medium)) ? (
+        <div className="workflow">
+          <div>
+            download
+            <span
+              onClick={blogPostPorkflow}
+              onKeyDown={(e) => e.keyCode === 13 && blogPostPorkflow()}
+              role="button"
+              tabIndex="0"
+              style={{ cursor: "pointer", color: "#002ead" }}
+            >
+              {" "}
+              blog-post-workflow.yml
+            </span>{" "}
+            file(learn
+            <a
+              href={withPrefix(links.addons)}
+              target="blank"
+              style={{ color: "#002ead" }}
+            >
+              {" "}
+              how to setup
+            </a>
+            )
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+    </div>
+  )
+}
+
+export default Addons
@@ -0,0 +1,82 @@
+import React from "react"
+const Donate = () => {
+  return (
+    <>
+      <div className="text-center text-4xl my-2">Support&nbsp;
+        <span role="img" aria-label="praying hand emoji">🙏</span>
+      </div>
+      <div className="flex flex-col sm:flex-row items-start justify-between">
+        <div className="w-full sm:w-2/3">
+          <div className="text-2xl mb-2">
+            Are you using the tool and happy with it to create your GitHub
+            Profile?
+          </div>
+          <div className="text-lg">
+            Your kind support keeps open-source tools like this free for others.
+          </div>
+          <div className="mt-4">
+            <a
+              className="flex items-center justify-start w-20"
+              href="https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator"
+            >
+              <img
+                className="w-20"
+                src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator"
+                alt="tweet github profile readme generator"
+              />
+            </a>
+            Let the world know how you feel using this tool. Share with others
+            on twitter.
+          </div>
+        </div>
+        <div className="w-full sm:w-1/3 flex flex-col justify-center items-center">
+          <span>Tip<span role="img" aria-label="Dollar medal">💰</span></span>
+          {/* Ko-Fi */}
+          <a
+            href="https://ko-fi.com/A0A81XXSX"
+            className="flex items-center justify-evenly bg-red-500 text-white py-2 px-4 my-2"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <img
+              className="w-6 h-6 mr-2"
+              src="https://www.vectorlogo.zone/logos/ko-fi/ko-fi-icon.svg"
+              alt="Buy ko-fi for rahuldkjain"
+            />
+            Buy me a ko-fi
+          </a>
+          {/* Paypal */}
+          <a
+            href="https://www.paypal.me/rahuldkjain/10"
+            className="flex items-center justify-evenly bg-blue-500 text-white py-2 px-4 my-2"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <img
+              className="w-6 h-6 mr-2"
+              src="https://cdn.worldvectorlogo.com/logos/paypal-icon.svg"
+              alt="Donate rahuldkjain via paypal"
+            />
+            Paypal
+          </a>
+          {/* BuyMeACoffee */}
+          <a
+            href="https://www.buymeacoffee.com/rahuldkjain"
+            className="flex items-center justify-evenly bg-orange-500 text-white py-2 px-4 my-2"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <img
+              className="w-6 h-6 mr-2"
+              src="https://www.vectorlogo.zone/logos/buymeacoffee/buymeacoffee-icon.svg"
+              alt="Buy rahuldkjain A Coffee"
+            />
+            Buy me a coffee
+          </a>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Donate
@@ -1,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,505 @@
-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 />
+        </>
+      )
    }
-    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
+                + `&label=${props.badgeOptions.badgeLabel}`
+                + `&color=${props.badgeOptions.badgeColor}`
+                + `&style=${props.badgeOptions.badgeStyle}`
+    if (props.show) {
+      return (
+        <>
+          {`<p align="left"> <img src="${link}" alt="${props.github}" /> </p>`}
+          <br />
+          <br />
+        </>
+      )
    }
-    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/></>) : '';
+    return ""
+  }
+  const TwitterBadge = props => {
+    let link = "https://img.shields.io/twitter/follow/" + props.twitter + "?logo=twitter&style=for-the-badge"
+    if (props.show) {
+      return (
+        <>
+          {`<p align="left"> <img src="${link}" alt="${props.twitter}" /> </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 '';
+    return ""
+  }
+  const GithubProfileTrophy = props => {
+    let link =
+      "https://github-profile-trophy.vercel.app/?username=" + props.github
+    if (props.show) {
+      return (
+        <>
+          {`<p align="left"> <a href="https://github.com/ryo-ma/github-profile-trophy"><img src="${link}" alt="${props.github}" /></a> </p>`}
+          <br />
+          <br />
+        </>
+      )
    }
-    const 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}
+          badgeOptions={{
+            badgeLabel: encodeURI(props.data.badgeLabel),
+            badgeColor: props.data.badgeColor,
+            badgeStyle: props.data.badgeStyle
+          }}
+        />
+      </>
+      <>
+        <GithubProfileTrophy
+          show={props.data.githubProfileTrophy}
+          github={props.social.github}
+        />
+        <TwitterBadge
+          show={props.data.twitterBadge}
+          twitter={props.social.twitter}
+        />
+      </>
+      <>
+        <DisplayWork
+          prefix={props.prefix.currentWork}
+          project={props.data.currentWork}
+          link={props.link.currentWork}
+        />
+      </>
+      <>
+        <DisplayWork
+          prefix={props.prefix.currentLearn}
+          project={props.data.currentLearn}
+        />
+      </>
+      <>
+        <DisplayWork
+          prefix={props.prefix.collaborateOn}
+          project={props.data.collaborateOn}
+          link={props.link.collaborateOn}
+        />
+      </>
+      <>
+        <DisplayWork
+          prefix={props.prefix.helpWith}
+          project={props.data.helpWith}
+          link={props.link.helpWith}
+        />
+      </>
+      <>
+        <DisplayWork
+          prefix={props.prefix.portfolio}
+          link={props.link.portfolio}
+        />
+      </>
+      <>
+        <DisplayWork prefix={props.prefix.blog} link={props.link.blog} />
+      </>
+      <>
+        <DisplayWork prefix={props.prefix.ama} project={props.data.ama} />
+      </>
+      <>
+        <DisplayWork
+          prefix={props.prefix.contact}
+          project={props.data.contact}
+        />
+      </>
+      <>
+        <DisplayWork prefix={props.prefix.resume} link={props.link.resume} />
+      </>
+      <>
+        <DisplayWork
+          prefix={props.prefix.funFact}
+          project={props.data.funFact}
+        />
+      </>
+      <>
+        <DisplayDynamicBlogs
+          show={
+            (props.data.devDynamicBlogs && props.social.dev) ||
+            (props.data.rssDynamicBlogs && props.social.rssurl) ||
+            (props.data.mediumDynamicBlogs &&
+              props.social.medium &&
+              isMediumUsernameValid(props.social.medium))
+          }
+        />
+      </>
+      {isSocial(props.social) ? `<p align="left">` : ""} <br />
+      <>
+        <SectionTitle label="Connect with me:" />
+      </>
+      <>
+        <DisplaySocial
+          base="https://codepen.io"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
+          username={props.social.codepen}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://dev.to"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
+          username={props.social.dev}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://twitter.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg"
+          username={props.social.twitter}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://linkedin.com/in"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
+          username={props.social.linkedin}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://stackoverflow.com/users"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
+          username={props.social.stackoverflow}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://codesandbox.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
+          username={props.social.codesandbox}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://kaggle.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg"
+          username={props.social.kaggle}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://fb.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg"
+          username={props.social.fb}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://instagram.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg"
+          username={props.social.instagram}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://dribbble.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dribbble.svg"
+          username={props.social.dribbble}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.behance.net"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/behance.svg"
+          username={props.social.behance}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://medium.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/medium.svg"
+          username={props.social.medium}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.youtube.com/c"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/youtube.svg"
+          username={props.social.youtube}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.codechef.com/users"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/codechef.svg"
+          username={props.social.codechef}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.hackerrank.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerrank.svg"
+          username={props.social.hackerrank}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://codeforces.com/profile"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codeforces.svg"
+          username={props.social.codeforces}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.leetcode.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/leetcode.svg"
+          username={props.social.leetcode}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.hackerearth.com"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerearth.svg"
+          username={props.social.hackerearth}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://auth.geeksforgeeks.org/user"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/geeksforgeeks.svg"
+          username={props.social.geeks_for_geeks}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.topcoder.com/members"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/topcoder.svg"
+          username={props.social.topcoder}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base=""
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/rss.svg"
+          username={props.social.rssurl}
+        />
+      </>
+      {isSocial(props.social) ? (
+        <>
+          {`</p>`}
+          <br />
+          <br />
+        </>
+      ) : (
+        ""
+      )}
+      <>
+        <DisplaySkills skills={props.skills} />
+      </>
+      <>
+        <DisplayTopLanguages
+          show={props.data.topLanguages}
+          showStats={props.data.githubStats}
+          github={props.social.github}
+        />
+      </>
+      <>
+        <GitHubStats
+          show={props.data.githubStats}
+          github={props.social.github}
+        />
+      </>
+    </div>
+  )
+}

-            <><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,359 @@
-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.resume} link={link.resume} />
+        <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
+                + `&label=${props.badgeOptions.badgeLabel}`
+                + `&color=${props.badgeOptions.badgeColor}`
+                + `&style=${props.badgeOptions.badgeStyle}`
+    if (props.show) {
+      return (
+        <div className="text-left my-2">
+          {" "}
+          <img className="h-4 sm:h-6" src={link} alt={props.github} />{" "}
+        </div>
+      )
+    }
+    return null
+  }
+  const TwitterBadgePreview = props => {
+    let link = "https://img.shields.io/twitter/follow/" + props.twitter + "?logo=twitter&style=for-the-badge"
+    if (props.show) {
+      return (
+        <div className="text-left my-2">
+          {" "}
+          <img className="h-4 sm:h-6" src={link} alt={props.twitter} />{" "}
+        </div>
+      )
+    }
+    return null
+  }
+  const GithubProfileTrophyPreview = props => {
+    let link =
+      "https://github-profile-trophy.vercel.app/?username=" + props.github
+    if (props.show) {
+      return (
+        <div className="text-left my-2">
+          {" "}
+          <a href="https://github.com/ryo-ma/github-profile-trophy">
+            <img src={link} alt={props.github} />
+          </a>{" "}
+        </div>
+      )
+    }
+    return 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" rel="noreferrer">
+            <img
+              className="mb-4 mr-4 h-6 w-6 sm:h-10 sm:w-10"
+              key={skill}
+              src={icons[skill]}
+              alt={skill}
+            />
+          </a>
+        )
+      }
+    })
+    return listSkills.length > 0 ? (
+      <div className="flex flex-wrap justify-start items-center">
+        <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}
+        badgeOptions={{
+          badgeLabel: encodeURI(props.data.badgeLabel),
+          badgeColor: props.data.badgeColor,
+          badgeStyle: props.data.badgeStyle
+        }}
+      />
+      <GithubProfileTrophyPreview
+        show={props.data.githubProfileTrophy}
+        github={props.social.github}
+      />
+      <TwitterBadgePreview
+        show={props.data.twitterBadge}
+        twitter={props.social.twitter}
+      />
+      <WorkPreview work={props} />
+      <SocialPreview social={props.social} />
+      <SkillsPreview skills={props.skills} />
+      <div className="block sm:flex sm:justify-center sm:items-start">
+        <TopLanguagesPreview
+          show={props.data.topLanguages}
+          github={props.social.github}
+        />
+        <GitHubStatsPreview
+          show={props.data.githubStats}
+          github={props.social.github}
+        />
+      </div>
+    </div>
+  )
 }

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

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

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

-const Social = (props) => {
-    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,29 +139,45 @@ const Work = props => {
      <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
        <input
          id="blog-prefix"
-          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
          value={props.prefix.blog}
          onChange={event => props.handlePrefixChange("blog", event)}
        />
        <input
          id="blog"
          placeholder="blog link"
-          className="placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
          value={props.link.blog}
          onChange={event => props.handleLinkChange("blog", event)}
        />
      </div>
+      <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
+        <input
+          id="resume-prefix"
+          className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          value={props.prefix.resume}
+          onChange={event => props.handlePrefixChange("resume", event)}
+        />
+        <input
+          id="resume"
+          placeholder="resume link"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          value={props.link.resume}
+          onChange={event => props.handleLinkChange("resume", event)}
+        />
+      </div>
+      
      <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
        <input
          id="funFact-prefix"
-          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
          value={props.prefix.funFact}
          onChange={event => props.handlePrefixChange("funFact", event)}
        />
        <input
          id="funFact"
-          placeholder="Chai over Coffee"
-          className="placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          placeholder="I think I am funny"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
          value={props.data.funFact}
          onChange={event => props.handleDataChange("funFact", event)}
        />
@@ -1,7 +1,7 @@
 const links = {
-    home: '/',
-    about: '/about',
-    addons: '/addons',
-    support: '/support'
+  home: "/",
+  about: "/about",
+  addons: "/addons",
+  support: "/support",
 }
-export default links
+export default links
@@ -11,6 +11,7 @@ const categorizedSkills = {
      "javascript",
      "typescript",
      "php",
+      "perl",
      "ruby",
      "scala",
      "python",
@@ -43,6 +44,10 @@ const categorizedSkills = {
      "tailwind",
      "materialize",
      "bulma",
+      "gtk",
+      "qt",
+      "wx_widgets",
+      "ember",
    ],
  },

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

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

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

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

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

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

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

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

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

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

 const initialSkillState = {}

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

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

 const categories = Object.keys(categorizedSkills)

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

 So many developers contributed to the project and made it more awesome to use. You can contribute too to make it grow even further.
+
 <p align="left">
 <a href="https://github.com/rahuldkjain/github-profile-readme-generator/issues" target="blank">
 <img src="https://img.shields.io/github/issues/rahuldkjain/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator issues"/>
@@ -27,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]	7ee994d5da	docs: update .all-contributorsrc [skip ci]	2020-10-04 15:41:48 +00:00
allcontributors[bot]	80c8896dff	docs: update README.md [skip ci]	2020-10-04 15:41:47 +00:00
Rahul Jain	cc962a940a	Merge pull request #229 from aaditkamat/add-vuepress [add]: VuePress as a static site generator	2020-10-04 19:27:02 +05:30
Aadit Kamat	fb20ed73ac	Add vuepress under skillWebsites	2020-10-04 21:20:40 +08:00
Rahul Jain	4a2bd779c4	Merge pull request #204 from Aarush-Goyal/master [add]: design addons	2020-10-04 17:12:26 +05:30
Rahul Jain	91b1d2f6ea	Merge pull request #160 from abhijit-hota/add-unit-tests [test]: Add unit tests #47	2020-10-04 16:58:10 +05:30
Aadit Kamat	264161c054	Replace with SVG	2020-10-04 15:30:04 +08:00
zolostays	8812ea048f	[add]: package.json	2020-10-04 12:49:05 +05:30
Aadit Kamat	656e055cd0	Add VuePress as a static site generator	2020-10-04 15:15:22 +08:00
Rahul Jain	3793bcdad9	Merge pull request #214 from nidhi-bhanushali/master [add]: Resume field in the work section	2020-10-04 12:37:58 +05:30
Nidhi Bhanushali	808d613dc1	Deleted package-lock.json	2020-10-04 12:29:04 +05:30
Rahul Jain	580047ba7a	Merge pull request #179 from Darkangeel-hd/add-perl-language [add]: Perl to Programming Languages	2020-10-04 12:25:52 +05:30
Rahul Jain	dd682423db	Merge pull request #180 from Darkangeel-hd/add-openrest-backend [add]: OpenResty to Backend Development	2020-10-04 12:25:07 +05:30
Nidhi Bhanushali	ba609c3229	Made changes to package.json	2020-10-04 12:18:19 +05:30
Nidhi Bhanushali	2b35031629	Made changes to package.json	2020-10-04 12:16:10 +05:30
Rahul Jain	f38e0dbf0e	Merge pull request #197 from vivek32ta/add-static-site-generators [add]: 11ty, Scully, Sculpin, Sapper under static site generators	2020-10-04 12:01:59 +05:30
Rahul Jain	68b331b56b	Merge branch 'master' into add-static-site-generators	2020-10-04 11:56:21 +05:30
Rahul Jain	14e3a7e57d	Merge pull request #181 from Darkangeel-hd/add-cockroach-database [add]: CockroachDB to Database	2020-10-04 11:52:01 +05:30
Rahul Jain	556a08365c	Merge pull request #218 from lucid-dreem/master [design]: add header design	2020-10-04 11:45:15 +05:30
Rahul Jain	9a2416bc5d	Merge pull request #202 from sarbikbetal/srbk/dev [design]: About page design idea.	2020-10-04 11:37:18 +05:30
Rahul Jain	b81a30ebd0	Merge pull request #173 from parikshitghosh3/xd [add]: Abobe XD in Skills	2020-10-04 11:16:36 +05:30
Rahul Jain	26a8c08b92	Merge pull request #147 from YashKandalkar/warnings-resolved [fix]: warnings	2020-10-04 11:12:29 +05:30
zolostays	7d80d29a8b	[fix]: syntax-error	2020-10-04 10:47:53 +05:30
Rahul Jain	a4377c1dd6	Merge pull request #162 from Maddoxx88/patch-5 [add]: checkbox for twitterBadge as add-on.	2020-10-04 10:37:53 +05:30
zolostays	77df86a9a6	[fix]: syntax error	2020-10-04 10:21:17 +05:30
Rahul Jain	eb7a06f1c0	Merge branch 'master' into patch-5	2020-10-04 10:15:35 +05:30
Rahul Jain	5725fdb018	Merge pull request #157 from Maddoxx88/patch-4 [add]: twitterBadge in const data	2020-10-04 10:05:32 +05:30
Rahul Jain	908cfa095e	Merge pull request #209 from YashKandalkar/profile-badge-customization [add]: Profile badge customization	2020-10-04 09:51:23 +05:30
lucid-dreem	36ce7a68ac	add header design Adding a potential design idea for the header. It rearranges the old elements and makes some slight additions to give a more professional feel.	2020-10-03 12:17:31 +05:30
Nidhi Bhanushali	5305ae1f6e	Made changes in markdown.js	2020-10-03 11:15:52 +05:30
Nidhi Bhanushali	7d6dd860aa	Made changes in markdownPreview.js	2020-10-03 11:12:22 +05:30
Nidhi Bhanushali	011720885e	Added Resume field in the work section	2020-10-03 10:08:21 +05:30
YashKandalkar	5c51edd4eb	Resolved merge conflicts	2020-10-03 00:59:18 +05:30
YashKandalkar	080e5f7822	Added check for preview	2020-10-03 00:45:10 +05:30
Angel	e2ed889d5b	Merge branch 'master' into add-cockroach-database	2020-10-02 20:35:34 +02:00
Aarush Goyal	bbb8ce6bd3	added design addons	2020-10-02 23:51:37 +05:30
Sarbik Betal	ef55e85dba	Added about page redesign.	2020-10-02 20:43:41 +05:30
zolostays	1d814d385d	[restore]: images	2020-10-02 20:33:49 +05:30
YashKandalkar	e48d9eeac6	Added profile badge customization	2020-10-02 20:28:41 +05:30
Rahul Jain	6f1530dc1b	Merge pull request #1 from rahuldkjain/imgbot [ImgBot] Optimize images	2020-10-02 20:26:33 +05:30
ImgBotApp	bd0a35bedc	[ImgBot] Optimize images *Total -- 3,072.02kb -> 2,809.95kb (8.53%) /src/designs/GPRG Style Guide.png -- 619.53kb -> 419.01kb (32.37%) /src/images/mdg.png -- 11.20kb -> 8.99kb (19.72%) /src/images/github-profile-readme-generator.gif -- 2,436.75kb -> 2,377.42kb (2.43%) /src/images/icons/mysqlworkbench.svg -- 4.54kb -> 4.53kb (0.26%) Signed-off-by: ImgBotApp <ImgBotHelp@gmail.com>	2020-10-02 14:54:42 +00:00
zolostays	804edf96d3	[add]: design-styleguide	2020-10-02 20:21:55 +05:30
zolostays	31094f8d4e	[add]: mysql-workbench icon	2020-10-02 20:20:04 +05:30
zolostays	2f80d2cc8d	[add]: design	2020-10-02 20:19:20 +05:30
zolostays	8012eea403	[add]: design folder	2020-10-02 20:17:46 +05:30
Vivek T A	a21589381f	changed images to svg	2020-10-02 19:47:48 +05:30
Savitha Gollamudi	321ce36eb7	Merge pull request #178 from jaideepghosh/master feat: Added github trophy.	2020-10-02 18:36:11 +05:30
Savitha Gollamudi	91810816ba	Merge pull request #194 from KKVANONYMOUS/master Created a new category of Game Engines and added Unity to it	2020-10-02 18:27:05 +05:30
Savitha Gollamudi	0d83419d03	Merge pull request #195 from swapneelr09/all-contributors/add-swapneelr09 Added Graphql Skill	2020-10-02 18:13:17 +05:30
Sunit Shirke	bff504b498	Updated Twitter Badge Component	2020-10-02 18:07:48 +05:30
Sunit Shirke	97b555e63c	Updated Twitter Badge Markdown Preview	2020-10-02 18:01:52 +05:30
Sunit Shirke	3fa08161ce	Merge branch 'master' into patch-5	2020-10-02 17:54:18 +05:30
Savitha Gollamudi	314abc7be5	integrate welcome bot	2020-10-02 17:30:38 +05:30
jaideepghosh	2338a7db00	feat(trophy):Added credit link.	2020-10-02 16:37:49 +05:30
Vivek T A	1773c32033	add 11ty, scully, sculpin, sapper	2020-10-02 16:22:29 +05:30
Swapneel Roy	d96593fe46	Added Graphql Skill	2020-10-02 15:15:07 +05:30
kkvanonymous	0c23182f4e	add-unity	2020-10-02 15:04:13 +05:30
Savitha Gollamudi	d91f5d3a45	Merge pull request #155 from shajanjp/fix-title-alignment fix: #158 aligns titles to the left	2020-10-02 14:04:09 +05:30
Savitha Gollamudi	090001b956	Merge pull request #182 from MuhBayu/master Added DevOps Skills	2020-10-02 13:07:59 +05:30
MuhBayu	e9bc837492	Added DevOps Skills	2020-10-02 10:19:13 +07:00
Darkangeel-hd	3b4f2add83	Added CockroachDB to Database	2020-10-02 01:24:15 +02:00
Darkangeel-hd	5ef270a9f4	Added OpenResty Backend OpenResty is a full-fledged web platform that integrates our enhanced version of the Nginx core, our enhanced version of LuaJIT.	2020-10-02 01:11:05 +02:00
Darkangeel-hd	7a9a4dcf47	Added Perl to Programming Languages	2020-10-02 00:59:42 +02:00
jaideepghosh	21483d66e0	feat(app):Added github trophy feat.	2020-10-02 02:12:03 +05:30
Parikshit Ghosh	fe88af9544	Added XD respect to Issue #149	2020-10-01 17:35:50 +00:00
Savitha Gollamudi	e3ed30baa6	Merge pull request #170 from quintenbuis/patch-1 Fix: #169 Remove youtube from README	2020-10-01 22:02:58 +05:30
Quinten Buis	e54222ddbf	#169 Remove youtube from README	2020-10-01 16:35:20 +02:00
Rahul Jain	b36e7001b5	Merge pull request #148 from thauska/master [add]: Quasar framework skill	2020-10-01 19:07:54 +05:30
Rahul Jain	8dd547e88d	Merge pull request #144 from YashKandalkar/addon-enhancement [fix]: text wrapping below checkbox on mobile	2020-10-01 19:07:23 +05:30
Sunit Shirke	1737d02957	Added a checkbox for twitterBadge as add-on	2020-10-01 16:36:07 +05:30
abhijitXD	1f5aa89161	Add basic unit test for the Title component	2020-10-01 15:36:24 +05:30
abhijitXD	3f05970642	Add dependencies and configs for unit tests	2020-10-01 15:36:01 +05:30
Rahul Jain	a87f7cc2a5	[del]: yarn.lock	2020-10-01 15:15:08 +05:30
Sunit Shirke	33d18f4c8f	Update index with twitterBadge in data Added basic validation during before readme generation	2020-10-01 14:20:50 +05:30
Rahul Jain	b1c813540f	Merge pull request #156 from kala2/dicord-fix-server-id [fix]: change discord server-id	2020-10-01 14:00:41 +05:30
kala2	5c7b3ed923	fix: change discord server id	2020-10-01 11:27:28 +03:00
shajanjp	45c6a3a97c	fix: aligns titles to the left	2020-10-01 13:53:47 +05:30
YashKandalkar	5cb817a03e	Bug fixes	2020-10-01 13:18:59 +05:30
YashKandalkar	6d0377a6a9	Resolved eslint warnings	2020-10-01 12:34:20 +05:30
Thayana Mamoré	86593cecbd	[add]: Added Quasar framework skill	2020-09-30 23:16:40 -03:00
YashKandalkar	0a73c08dcf	Moved AddonsItem component to addons.js file	2020-09-27 18:41:45 +05:30
Rahul Jain	19a511d94f	Merge pull request #138 from rahuldkjain/all-contributors/add-antonkomarev docs: add antonkomarev as a contributor	2020-09-27 18:05:17 +05:30
zolostays	06b6537795	[fix]: markdown formatting	2020-09-27 17:57:07 +05:30
YashKandalkar	63f68f3ce7	Added a new component AddonItem, improved text wrapping of an addon on smaller screens	2020-09-27 01:16:48 +05:30
allcontributors[bot]	c345c204d1	docs: update .all-contributorsrc [skip ci]	2020-09-25 16:32:23 +00:00
allcontributors[bot]	c963e03c28	docs: update README.md [skip ci]	2020-09-25 16:32:22 +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
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" version="1"><rect width="28" height="28" x="-30" y="-30" fill="#26557c" rx="1.4" ry="1.4" transform="matrix(0,-1,-1,0,0,0)"/><path d="m8.0254 8.0001c-0.7825-0.0166-1.1494 0.5244-0.9883 1.457 0.052 0.3006 0.3152 0.7299 0.8828 1.4419 0.63122 0.7909 0.88514 1.2227 1.1602 1.9707 0.4336 1.1793 0.63403 1.5748 0.98633 1.9434 0.27366 0.2863 0.27369 0.28712 0.08984 0.87109-0.28507 0.90556-0.34407 2.7207-0.11523 3.5742 0.34248 1.2774 0.76402 1.8574 1.3516 1.8574 0.41968 0 0.76364-0.35092 0.88672-0.9043 0.04268-0.19186 0.12249-0.46607 0.17773-0.60938 0.09535-0.24728 0.12093-0.22818 0.49414 0.38086 0.21628 0.35296 0.62866 0.87861 0.91602 1.168 0.6638 0.66845 1.5749 1.4217 1.6406 1.3574 0.02775-0.02713-0.238-0.42177-0.58984-0.87891s-1.0151-1.5189-1.4746-2.3594c-0.53593-0.98029-0.8997-1.5286-1.0137-1.5293-0.37045-0.0025-0.71588 0.58004-0.91602 1.5469-0.23056 1.1138-0.63675 0.92708-0.9668-0.44531-0.19019-0.79085-0.09106-1.856 0.26367-2.8535 0.16137-0.45376 0.29297-0.87373 0.29297-0.93164s-0.25731-0.54348-0.57227-1.0801c-0.315-0.537-0.6851-1.297-0.822-1.69-0.3326-0.954-0.4905-1.232-1.1582-2.043-0.6879-0.8346-0.753-1.2203-0.2051-1.2166 0.42554 0.00281 1.1123 0.28944 1.8027 0.75391 0.4371 0.29404 0.58523 0.33398 1.2871 0.33398 0.88142 0 1.0709 0.0722 2.293 0.87695 1.2445 0.81958 2.1722 1.5813 2.8145 2.3125 0.5704 0.64937 0.88201 1.2138 2.5605 4.6562 0.64433 1.3214 1.2158 1.9593 2.0039 2.2324 1.2173 0.42185 1.6317 0.61314 2.168 0.99805l0.56641 0.40625-0.38086 0.07422c-0.2103 0.04033-0.66847 0.10616-1.0176 0.14648-0.72741 0.084-1.2031 0.38573-1.2031 0.76367 0 0.42592 1.4513 1.6453 2.9062 2.4414 0.69903 0.38247 1.3716 0.75927 1.4941 0.83789 0.32598 0.20922 0.41424 0.18389 0.33008-0.0918-0.17624-0.57738-0.77279-1.1398-2.4297-2.2949-0.97197-0.6776-0.98199-0.65244 0.31641-0.78125 0.925-0.091 1.392-0.249 1.392-0.472 0-0.102-0.47-0.644-1.045-1.203-0.9-0.876-1.204-1.094-2.195-1.577-1.35-0.656-1.842-1.177-2.153-2.283-0.464-1.649-1.712-3.587-3.371-5.23-1.712-1.696-3.347-2.6344-4.845-2.7814-0.609-0.0598-0.924-0.1522-1.239-0.3653-0.5332-0.3611-1.7717-0.7684-2.3766-0.7812zm2.9629 3.002c-0.12266-0.0079-0.22945 0.0085-0.30273 0.05859-0.27341 0.18699-0.24099 0.41504 0.08008 0.55664 0.15092 0.06656 0.36501 0.30147 0.47656 0.52148 0.3751 0.73978 0.94985 0.2445 0.69336-0.59766-0.08085-0.26546-0.5793-0.51547-0.94727-0.53906z" opacity=".2"/><path fill="#fff" d="m8.0254 7c-0.7825-0.0166-1.1494 0.5244-0.9883 1.457 0.052 0.3006 0.3152 0.7302 0.8828 1.4414 0.6312 0.7906 0.8852 1.2226 1.1602 1.9706 0.4336 1.179 0.634 1.575 0.9859 1.943 0.274 0.287 0.274 0.288 0.09 0.872-0.2848 0.905-0.3438 2.72-0.115 3.574 0.342 1.277 0.764 1.857 1.352 1.857 0.419 0 0.763-0.351 0.886-0.904 0.043-0.192 0.123-0.466 0.178-0.609 0.095-0.248 0.121-0.229 0.494 0.38 0.216 0.353 0.629 0.879 0.916 1.168 0.664 0.669 1.575 1.422 1.641 1.358 0.028-0.027-0.238-0.422-0.59-0.879s-1.015-1.519-1.475-2.359c-0.536-0.981-0.899-1.529-1.013-1.53-0.371-0.002-0.716 0.58-0.916 1.547-0.231 1.114-0.637 0.927-0.967-0.445-0.19-0.791-0.091-1.856 0.264-2.854 0.161-0.453 0.293-0.873 0.293-0.931s-0.258-0.544-0.573-1.08c-0.315-0.537-0.6851-1.297-0.822-1.69-0.3326-0.954-0.4905-1.232-1.1582-2.0429-0.6879-0.8348-0.753-1.2204-0.2051-1.2168 0.4255 0.0029 1.1123 0.2895 1.8023 0.7539 0.438 0.2941 0.586 0.334 1.288 0.334 0.881 0 1.07 0.0722 2.293 0.877 1.244 0.8198 2.172 1.5818 2.814 2.3128 0.57 0.649 0.882 1.214 2.561 4.656 0.644 1.321 1.215 1.959 2.003 2.232 1.218 0.422 1.632 0.613 2.168 0.998l0.567 0.407-0.381 0.074c-0.21 0.04-0.669 0.106-1.018 0.146-0.727 0.084-1.203 0.386-1.203 0.764 0 0.426 1.451 1.645 2.906 2.441 0.7 0.383 1.372 0.76 1.495 0.838 0.326 0.21 0.414 0.184 0.33-0.091-0.177-0.578-0.773-1.14-2.43-2.295-0.972-0.678-0.982-0.653 0.316-0.782 0.926-0.092 1.393-0.25 1.393-0.472 0-0.102-0.47-0.644-1.045-1.203-0.9-0.877-1.204-1.094-2.195-1.577-1.35-0.656-1.842-1.177-2.153-2.283-0.464-1.65-1.712-3.587-3.371-5.23-1.712-1.6965-3.347-2.6345-4.845-2.7815-0.609-0.0598-0.924-0.1522-1.239-0.3653-0.5332-0.3611-1.7717-0.7684-2.3766-0.7812zm2.9626 3.002c-0.122-0.0079-0.229 0.008-0.302 0.059-0.274 0.187-0.241 0.415 0.08 0.556 0.151 0.067 0.365 0.302 0.476 0.522 0.375 0.739 0.95 0.244 0.694-0.598-0.081-0.265-0.58-0.515-0.948-0.539z"/><path fill="#fff" d="m3.4004 2c-0.7756 0-1.4004 0.6248-1.4004 1.4004v1c0-0.7756 0.6248-1.4004 1.4004-1.4004h25.2c0.775 0 1.4 0.6248 1.4 1.4004v-1c0-0.7756-0.625-1.4004-1.4-1.4004h-25.2z" opacity=".1"/><path d="m2 28.6v1c0 0.775 0.6248 1.4 1.4004 1.4h25.2c0.775 0 1.4-0.625 1.4-1.4v-1c0 0.775-0.625 1.4-1.4 1.4h-25.2c-0.7752 0-1.4-0.625-1.4-1.4z" opacity=".2"/></svg>