docs: update .all-contributorsrc [skip ci]

.all-contributorsrc

@@ -15,74 +15,10 @@
       ]
     },
     {
-      "login": "Hardik0307",
+      "login": "insaurabh",
-      "name": "Hardik Bagada",
+      "name": "Saurabh Ranjan",
-      "avatar_url": "https://avatars3.githubusercontent.com/u/41434099?v=4",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/26545067?v=4",
-      "profile": "https://github.com/Hardik0307",
+      "profile": "https://www.hestabit.com/",
-      "contributions": [
-        "code"
-      ]
-    },
-    {
-      "login": "antonkomarev",
-      "name": "Anton Komarev",
-      "avatar_url": "https://avatars0.githubusercontent.com/u/1849174?v=4",
-      "profile": "https://komarev.com",
-      "contributions": [
-        "plugin"
-      ]
-    },
-    {
-      "login": "KKVANONYMOUS",
-      "name": "Kunal Kumar Verma",
-      "avatar_url": "https://avatars3.githubusercontent.com/u/58628586?v=4",
-      "profile": "https://kkvanonymous.github.io/",
-      "contributions": [
-        "code"
-      ]
-    },
-    {
-      "login": "jaideepghosh",
-      "name": "Jaideep Ghosh",
-      "avatar_url": "https://avatars2.githubusercontent.com/u/3909648?v=4",
-      "profile": "http://jaideepghosh.blogspot.com",
-      "contributions": [
-        "code"
-      ]
-    }
-    {
-      "login": "YashKandalkar",
-      "name": "yash",
-      "avatar_url": "https://avatars0.githubusercontent.com/u/35102959?v=4",
-      "profile": "http://yashkandalkar.github.io",
-      "contributions": [
-        "code"
-      ]
-    },
-    {
-      "login": "abhijit-hota",
-      "name": "Abhijit Hota",
-      "avatar_url": "https://avatars0.githubusercontent.com/u/8116174?v=4",
-      "profile": "https://github.com/abhijit-hota",
-      "contributions": [
-        "code",
-        "test"
-      ]
-    },
-    {
-      "login": "Maddoxx88",
-      "name": "Sunit Shirke",
-      "avatar_url": "https://avatars1.githubusercontent.com/u/34238672?v=4",
-      "profile": "https://maddoxx88.github.io/",
-      "contributions": [
-        "code"
-      ]
-    }
-    {
-      "login": "g-savitha",
-      "name": "Savitha Gollamudi",
-      "avatar_url": "https://avatars0.githubusercontent.com/u/31612459?v=4",
-      "profile": "https://www.gsavitha.in",
       "contributions": [
         "code"
       ]

.eslintignore

@@ -1 +0,0 @@
-node_modules/**

.eslintrc.json

@@ -1,18 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es2021": true
-  },
-  "extends": ["plugin:react/recommended", "airbnb", "prettier"],
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "ecmaVersion": 12,
-    "sourceType": "module"
-  },
-  "plugins": ["react"],
-  "rules": {
-    "react/forbid-prop-types": 0
-  }
-}

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,9 +1,9 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: ''
+title: ""
 labels: bug
-assignees: ''
+assignees: ""
 ---
 
 **Describe the bug**
@@ -40,9 +40,4 @@ If applicable, add screenshots to help explain your problem.
 Add any other context about the problem here.
 
 Join the **Discord Server** for further discussions.
-
-<a href="https://discord.gg/HHMs7Eg">
-<img src="https://discord.com/assets/e4923594e694a21542a489471ecffa50.svg" alt="GPRG Discord Server Link" width="300px"/>
-</a>
-
 Server Link: https://discord.gg/HHMs7Eg

.github/ISSUE_TEMPLATE/feature-enhancement-request.md

@@ -1,9 +1,9 @@
 ---
 name: Feature/Enhancement request
 about: Suggest an idea for this project
-title: ''
+title: ""
-labels: enhancement, hacktoberfest
+labels: enhancement
-assignees: ''
+assignees: ""
 ---
 
 **Is your feature request related to a problem? Please describe.**
@@ -20,8 +20,4 @@ Add any other context or screenshots about the feature request here.
 
 Join the **Discord Server** for further discussions.
 
-<a href="https://discord.gg/HHMs7Eg">
-<img src="https://discord.com/assets/e4923594e694a21542a489471ecffa50.svg" alt="GPRG Discord Server Link" width="300px"/>
-</a>
-
 Server Link: https://discord.gg/HHMs7Eg

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,42 +0,0 @@
-<!--
-     For Work In Progress Pull Requests, please use the Draft PR feature,
-     see https://github.blog/2019-02-14-introducing-draft-pull-requests/ for further details.
-
-     For a timely review/response, please avoid force-pushing additional
-     commits if your PR already received reviews or comments.
-
-     Before submitting a Pull Request, please ensure you've done the following:
-     - 📖 Read the Contributing Guide: https://github.com/rahuldkjain/github-profile-readme-generator/blob/master/CONTRIBUTING.md#create-a-pull-request.
-     - 📖 Read the Code of Conduct: https://github.com/rahuldkjain/github-profile-readme-generator/blob/master/CODE_OF_CONDUCT.md.
-     - 👷‍♀️ Create small PRs. In most cases this will be possible.
-     - ✅ Provide issue number with link.
-     - 📝 Use descriptive commit messages.
-     - 📗 Update any related documentation and include any relevant screenshots.
--->
-
-## What type of PR is this? (check all applicable)
-
-- [ ] Refactor
-- [ ] Feature
-- [ ] Bug Fix
-- [ ] Enhancement
-- [ ] Documentation Update
-
-## Description
-
-## Related Tickets & Documents
-
-## QA Instructions, Screenshots, Recordings
-
-_Please replace this line with instructions on how to test your changes, as well
-as any relevant images for UI changes._
-
-<!-- ## Added tests?
-
-- [ ] yes
-- [ ] no, because they aren't needed
-- [ ] no, because I need help -->
-
-## Added to documentation?
-
-- [ ] readme

.github/config.yml

@@ -1,17 +0,0 @@
-# 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. 🙏

.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx --no-install lint-staged

.prettierrc

@@ -1,9 +1,4 @@
 {
-  "singleQuote": true,
+  "arrowParens": "avoid",
-  "jsxSingleQuote": false,
+  "semi": false
-  "tabWidth": 2,
-  "printWidth": 480,
-  "trailingComma": "all",
-  "semi": true,
-  "exclude": ["node_modules", "codepipeline"]
 }

.travis.yml

@@ -1,6 +0,0 @@
-language: node_js
-node_js:
-  - "14"
-cache:
-  directories:
-    - "node_modules"

CODE_OF_CONDUCT.md

@@ -14,22 +14,22 @@ appearance, race, religion, or sexual identity and orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-- Using welcoming and inclusive language
+* Using welcoming and inclusive language
-- Being respectful of differing viewpoints and experiences
+* Being respectful of differing viewpoints and experiences
-- Gracefully accepting constructive criticism
+* Gracefully accepting constructive criticism
-- Focusing on what is best for the community
+* Focusing on what is best for the community
-- Showing empathy towards other community members
+* 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
+* The use of sexualized language or imagery and unwelcome sexual attention or
-  advances
+ advances
-- Trolling, insulting/derogatory comments, and personal or political attacks
+* Trolling, insulting/derogatory comments, and personal or political attacks
-- Public or private harassment
+* Public or private harassment
-- Publishing others' private information, such as a physical or electronic
+* Publishing others' private information, such as a physical or electronic
-  address, without explicit permission
+ address, without explicit permission
-- Other conduct which could reasonably be considered inappropriate in a
+* Other conduct which could reasonably be considered inappropriate in a
-  professional setting
+ professional setting
 
 ## Our Responsibilities
 

CODE_STYLE_GUIDE.md

@@ -1,97 +0,0 @@
-# Coding Style
-
-## File Layout (`src/components/*.js`)
-
-1. Imports
-2. Reusable components needed for the main component
-3. Main component (Eg: Addons in addons.js)
-4. export default \<MainComponent\>;
-
-## Reusable components
-
-- Do not make a new file for smaller components.
-- Smaller, reusable components needed in the main components should be added **above** the main component, **not** inside it.
-- Use ES6 arrow functions for defining components.
-
-## Spacing
-
-1. **JS:**
-   - Use a space after `if`, `for`, `while`, `switch`.
-   - Do not use a space after the opening `(` and before the closing `)`.
-   - Use a space before and after destructuring objects.
-   ```js
-   //good
-   const { apple, mangoes } = fruits;
-
-   //bad
-   const { apple, mangoes } = fruits;
-   ```
-
-
-        //Same for destructuring props:
-        //good
-        const BeautifulComponent = ({ prop1, prop2 }) => {}
-
-        //bad
-        const UglyComponent = ({prop1, prop2}) => {}
-    ```
-
-2. **JSX:**
-
-   - Use a space before the forward slash (`/`) of a self-closing tag
-
-   ```js
-   //good
-   <Foo />
-
-   //bad
-   <Foo/>
-   ```
-
-   - Do **not** use spaces for JSX curly braces
-
-   ```js
-   //good
-   <Foo bar={baz} />
-
-   //bad
-   <Foo bar={ baz } />
-   ```
-
-## **Props:**
-
-- Use camelCase for prop names, or PascalCase if the prop value is a React component.
-- Use new lines when props do not fit on the same line.
-
-  ```js
-  //good
-  <Foo
-      prop1={value1}
-      prop2={value2}
-      prop3={value3}
-  />
-
-  //bad
-  <Foo prop1={value1} prop2={value2} prop3={value3} />
-  ```
-
-## **Best practices:**
-
-- **Always** add semicolons after a line.
-- Use ES6 arrow functions.
-- Keep the indentation in your code correct.
-- Use 4 spaces for tabs.
-- Don't Repeat Yourself. If you think you're repeating too much code, make a smaller component, or a function.
-- **Always** add alt prop to `img` tags.
-- Add `rel="noopener"` for `a` tags which has `target="_blank"`.
-- Don't do `outline: none` on user input elements. If you do not want outline, give them faint, visible background on focus. This is for accessibility.
-
-### Other things to note
-
-- We are using [octicons](https://primer.style/octicons/) for icons. Use this if you need to add icons. Do **not** add a new library for icons.
-- Try to not commit changes in `package.json`, `package-lock.json`.
-- Discuss with contributors on discord if you're planning to add/remove a package.
-
-## Further reading:
-
-This guide is based on [airbnb's react guide](https://github.com/airbnb/javascript/tree/master/react). You can read all the best practices there.

CONTRIBUTING.md

@@ -3,7 +3,7 @@
 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">
+<a href="https://discord.gg/U7YU3J" target="blank">
 <img src="https://img.shields.io/discord/735303195105951764?color=%23677BC4&label=Join%20Community&style=flat-square" alt="join discord community of github profile readme generator"/>
 </a>
 

README.md

@@ -9,7 +9,7 @@
 
 <p align="center">
 <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 license" />
+<img src="https://img.shields.io/github/license/rahuldkjain/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator licence" />
 </a>
 <a href="https://github.com/rahuldkjain/github-profile-readme-generator/fork" target="blank">
 <img src="https://img.shields.io/github/forks/rahuldkjain/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator forks"/>
@@ -23,7 +23,7 @@
 <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">
+<a href="https://discord.gg/U7YU3J" target="blank">
 <img src="https://img.shields.io/discord/735303195105951764?label=Join%20Community&logo=discord&style=flat-square" alt="join discord community of github profile readme generator"/>
 </a>
 </p>
@@ -54,8 +54,8 @@
 
 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
 
+## 🚀 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>
@@ -76,8 +76,6 @@ Just fill in the details such as `Name`, `Tagline`, `Dev Platforms Username`, `C
 
 - **GitHub Top Skills**
 
-- **GitHub Streak Stats**
-
 - **Dynamic Dev(.)to Blogs** (GitHub Action)
 
 - **Dynamic Medium Blogs** (GitHub Action)
@@ -86,7 +84,7 @@ Just fill in the details such as `Name`, `Tagline`, `Dev Platforms Username`, `C
 
 - **Wakatime Stats** [contribute](https://github.com/rahuldkjain/github-profile-readme-generator/issues/115)
 
-- **Buy Me A Coffee button**
+- **YouTube Stats** [contribute](https://github.com/rahuldkjain/github-profile-readme-generator/issues/119)
 
 Click on `Generate README` to get your README in `markdown`.
 You can preview the README too.
@@ -126,25 +124,22 @@ Please contribute using [GitHub Flow](https://guides.github.com/introduction/flo
 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
 
 - [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)
-- [Jonah Lawrence](https://github.com/DenverCoder1) for the incredible [github-readme-streak-stats](https://github.com/DenverCoder1/github-readme-streak-stats)
 - [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 support with his donation. Thanks a lot.
-- [Aadit Kamat](https://github.com/aaditkamat) find the tool useful and showed support with his donation. A big thanks to him.
-- [Jean-Michel Fayard](https://github.com/jmfayard) used the generator to create his GitHub Profile README and he loved it. Thanks to him for showing support to the tool with the donation.
 
 ## 🙏 Support
 
@@ -162,7 +157,27 @@ Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDU
   <a href="https://www.buymeacoffee.com/rahuldkjain" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="23" width="100" style="border-radius:2px" />
 </p>
 
+## Contributors ✨
+<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tr>
+    <td align="center"><a href="https://github.com/sarbikbetal"><img src="https://avatars2.githubusercontent.com/u/41508422?v=4" width="100px;" alt=""/><br /><sub><b>Sarbik Betal</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=sarbikbetal" title="Code">💻</a></td>
+    <td align="center"><a href="https://www.hestabit.com/"><img src="https://avatars1.githubusercontent.com/u/26545067?v=4" width="100px;" alt=""/><br /><sub><b>Saurabh Ranjan</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=insaurabh" title="Code">💻</a></td>
+  </tr>
+</table>
+
+<!-- markdownlint-enable -->
+<!-- prettier-ignore-end -->
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
 <hr>
 <p align="center">
 Developed with ❤️ in India 🇮🇳 
-</p>
+</p>

__mocks__/file-mock.js

@@ -1 +0,0 @@
-module.exports = 'test-file-stub';

__mocks__/gatsby.js

@@ -1,17 +0,0 @@
-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(),
-};

gatsby-browser.js

@@ -1,2 +1,2 @@
-import './src/styles/tailwind.css';
+import "./src/styles/tailwind.css"
-require('prismjs/themes/prism-okaidia.css');
+require("prismjs/themes/prism-okaidia.css")

gatsby-config.js

@@ -44,7 +44,7 @@ module.exports = {
     {
       resolve: `gatsby-plugin-google-analytics`,
       options: {
-        trackingId: 'UA-168596085-3',
+        trackingId: "UA-168596085-3",
         // this option places the tracking script into the head of the DOM
         head: true,
         // other options
@@ -53,7 +53,7 @@ module.exports = {
     {
       resolve: `gatsby-plugin-postcss`,
       options: {
-        postCssPlugins: [require('tailwindcss')],
+        postCssPlugins: [require("tailwindcss")],
       },
     },
     {
@@ -69,4 +69,4 @@ module.exports = {
   // this (optional) plugin enables Progressive Web App + Offline functionality
   // To learn more, visit: https://gatsby.dev/offline
   // `gatsby-plugin-offline`,
-};
+}

gatsby-node.js

@@ -1,11 +1,14 @@
 exports.createPages = async ({ actions, graphql, reporter }) => {
-  const { createPage } = actions;
+  const { createPage } = actions
 
-  const blogPostTemplate = require.resolve(`./src/templates/blogTemplate.js`);
+  const blogPostTemplate = require.resolve(`./src/templates/blogTemplate.js`)
 
   const result = await graphql(`
     {
-      allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }, limit: 1000) {
+      allMarkdownRemark(
+        sort: { order: DESC, fields: [frontmatter___date] }
+        limit: 1000
+      ) {
         edges {
           node {
             frontmatter {
@@ -15,12 +18,12 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
         }
       }
     }
-  `);
+  `)
 
   // Handle errors
   if (result.errors) {
-    reporter.panicOnBuild(`Error while running GraphQL query.`);
+    reporter.panicOnBuild(`Error while running GraphQL query.`)
-    return;
+    return
   }
 
   result.data.allMarkdownRemark.edges.forEach(({ node }) => {
@@ -31,6 +34,6 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
         // additional data can be passed via context
         slug: node.frontmatter.slug,
       },
-    });
+    })
-  });
+  })
-};
+}

jest-preprocess.js

@@ -1,5 +0,0 @@
-const babelOptions = {
-  presets: ['babel-preset-gatsby'],
-};
-
-module.exports = require('babel-jest').createTransformer(babelOptions);

jest.config.js

@@ -1,26 +0,0 @@
-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__: ``,
-    __BASE_PATH__: ``,
-  },
-  setupFiles: [`<rootDir>/loadershim.js`],
-  setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
-  snapshotSerializers: ['enzyme-to-json/serializer'],
-  coverageThreshold: {
-    global: {
-      branches: 0,
-      functions: 75,
-      lines: 68,
-      statements: 68,
-    },
-  },
-};

loadershim.js

@@ -1,3 +0,0 @@
-global.___loader = {
-  enqueue: jest.fn(),
-};

package.json

@@ -1,69 +1,35 @@
 {
-  "name": "github-profile-readme-generator",
+  "name": "gh-profile-reamde-generator",
   "private": true,
   "description": "A simple react app to generate beautiful github profile readme in md(markdown)",
-  "version": "1.2.0",
+  "version": "0.1.0",
   "author": "Rahul Jain <rahuldkjain@gmail.com>",
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.{js,jsx}": [
-      "prettier --write",
-      "eslint --fix",
-      "git add"
-    ],
-    "*.{html,css,less,ejs}": [
-      "prettier --write",
-      "git add"
-    ]
-  },
   "dependencies": {
     "@primer/octicons-react": "^10.0.0",
-    "axios": "^0.24.0",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.5",
-    "enzyme-to-json": "^3.6.1",
     "gatsby": "^2.23.12",
     "gatsby-image": "^2.4.9",
     "gatsby-plugin-google-analytics": "^2.3.11",
     "gatsby-plugin-manifest": "^2.4.14",
     "gatsby-plugin-offline": "^3.2.13",
     "gatsby-plugin-react-helmet": "^3.3.6",
-    "gatsby-plugin-sharp": "2.6.14",
+    "gatsby-plugin-sharp": "^2.6.14",
     "gatsby-remark-prismjs": "^3.5.10",
     "gatsby-source-filesystem": "^2.3.23",
     "gatsby-transformer-remark": "^2.8.27",
     "gatsby-transformer-sharp": "^2.5.7",
     "gsap": "^3.4.0",
-    "prismjs": "^1.25.0",
+    "prismjs": "^1.20.0",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-helmet": "^6.1.0"
   },
   "devDependencies": {
-    "babel-jest": "26.3.0",
-    "babel-preset-gatsby": "0.5.11",
-    "eslint": "^7.32.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.25.2",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
     "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",
-    "husky": "^7.0.4",
-    "identity-obj-proxy": "3.0.0",
-    "jest": "26.4.2",
-    "lint-staged": "^11.2.6",
     "prettier": "2.0.5",
     "tailwindcss": "^1.7.6"
   },
@@ -78,14 +44,14 @@
     "start": "npm run develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
-    "test": "jest -i -u --coverage",
+    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
     "deploy": "gatsby build --prefix-paths && gh-pages -d public -b master"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/rahuldkjain/github-profile-readme-generator"
+    "url": "https://github.com/rahuldkjain/gh-profile-readme-generator"
   },
   "bugs": {
-    "url": "https://github.com/rahuldkjain/github-profile-readme-generator/issues"
+    "url": "https://github.com/rahuldkjain/gh-profile-readme-generator/issues"
   }
 }

setupTests.js

@@ -1,4 +0,0 @@
-import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-
-configure({ adapter: new Adapter() });

src/components/__tests__/__snapshots__/donate.test.js.snap

@@ -1,101 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Donate renders correctly 1`] = `
-<Fragment>
-  <div
-    className="text-center text-4xl my-2"
-  >
-    Support 
-    <span
-      aria-label="praying hand emoji"
-      role="img"
-    >
-      🙏
-    </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
-            alt="tweet github profile readme generator"
-            className="w-20"
-            src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-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
-          aria-label="Dollar medal"
-          role="img"
-        >
-          💰
-        </span>
-      </span>
-      <a
-        className="flex items-center justify-evenly bg-red-500 text-white py-2 px-4 my-2"
-        href="https://ko-fi.com/A0A81XXSX"
-        rel="noreferrer"
-        target="_blank"
-      >
-        <img
-          alt="Buy ko-fi for rahuldkjain"
-          className="w-6 h-6 mr-2"
-          src="https://www.vectorlogo.zone/logos/ko-fi/ko-fi-icon.svg"
-        />
-        Buy me a ko-fi
-      </a>
-      <a
-        className="flex items-center justify-evenly bg-white-500 text-white py-2 px-4 my-2 border border-solid"
-        href="https://www.paypal.me/rahuldkjain/10"
-        rel="noreferrer"
-        target="_blank"
-      >
-        <img
-          alt="Donate rahuldkjain via paypal"
-          className="w-32 h-4"
-          src="https://cdn.worldvectorlogo.com/logos/paypal-2.svg"
-        />
-      </a>
-      <a
-        className="flex items-center justify-evenly bg-orange-500 text-white py-2 px-4 my-2"
-        href="https://www.buymeacoffee.com/rahuldkjain"
-        rel="noreferrer"
-        target="_blank"
-      >
-        <img
-          alt="Buy rahuldkjain A Coffee"
-          className="w-6 h-6 mr-2"
-          src="https://www.vectorlogo.zone/logos/buymeacoffee/buymeacoffee-icon.svg"
-        />
-        Buy me a coffee
-      </a>
-    </div>
-  </div>
-</Fragment>
-`;

src/components/__tests__/__snapshots__/footer.test.js.snap

@@ -1,189 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Footer component renders correctly 1`] = `
-<div
-  className="bg-gray-100 p-4 flex flex-col justify-center items-center shadow-inner mt-2"
->
-  <div
-    className="w-full flex flex-col sm:flex-row justify-evenly py-2"
-  >
-    <div
-      className="sm:ml-0 sm:mr-6 order-last sm:order-none flex"
-    >
-      <h1
-        className="text-base font-bold font-title text-xl sm:text-2xl mt-3 sm:mt-0"
-      >
-        <div
-          className="flex sm:flex-col items-start mb-3 sm:mb-0"
-        >
-          <img
-            alt="github profile markdown generator logo"
-            className="hidden sm:block h-24"
-            src="test-file-stub"
-          />
-          <div
-            className="mr-2 sm:mr-0"
-          >
-            GitHub Profile 
-            <img
-              alt="github profile markdown generator logo"
-              className="inline sm:hidden h-12"
-              src="test-file-stub"
-            />
-            <span
-              className="block sm:inline"
-            >
-              README Generator
-            </span>
-          </div>
-        </div>
-      </h1>
-    </div>
-    <div
-      className="text-xl sm:text-base font-light sm:font-normal"
-    >
-      <div
-        className="font-title font-bold mb-4 sm:mb-2"
-      >
-        <strong>
-          Pages
-        </strong>
-      </div>
-      <div
-        className="ml-2 sm:ml-0"
-      >
-        <mockConstructor
-          activeStyle={
-            Object {
-              "color": "#002ead",
-            }
-          }
-          to="/addons"
-        >
-          Addons
-        </mockConstructor>
-      </div>
-      <div
-        className="ml-2 sm:ml-0"
-      >
-        <mockConstructor
-          activeStyle={
-            Object {
-              "color": "#002ead",
-            }
-          }
-          to="/support"
-        >
-          Support
-        </mockConstructor>
-      </div>
-      <div
-        className="ml-2 sm:ml-0"
-      >
-        <mockConstructor
-          activeStyle={
-            Object {
-              "color": "#002ead",
-            }
-          }
-          to="/about"
-        >
-          About
-        </mockConstructor>
-      </div>
-    </div>
-    <div
-      className="text-xl sm:text-base font-light sm:font-normal"
-    >
-      <div
-        className="font-title font-bold my-4 sm:my-0 sm:mb-2"
-      >
-        <strong>
-          More
-        </strong>
-      </div>
-      <div
-        className="ml-2 sm:ml-0"
-      >
-        <a
-          aria-label="Github rahuldkjain/github-profile-readme-generator"
-          href="https://github.com/rahuldkjain/github-profile-readme-generator"
-          target="blank"
-        >
-          Github
-        </a>
-      </div>
-      <div
-        className="ml-2 sm:ml-0"
-      >
-        <a
-          aria-label="Releases on Github rahuldkjain/github-profile-readme-generator"
-          href="https://github.com/rahuldkjain/github-profile-readme-generator/releases"
-          target="blank"
-        >
-          Releases
-        </a>
-      </div>
-      <div
-        className="ml-2 sm:ml-0"
-      >
-        <a
-          aria-label="Issues in rahuldkjain/github-profile-readme-generator"
-          href="https://github.com/rahuldkjain/github-profile-readme-generator/issues"
-          target="blank"
-        >
-          Issues
-        </a>
-      </div>
-      <div
-        className="ml-2 sm:ml-0"
-      >
-        <a
-          aria-label="Pull Requests in rahuldkjain/github-profile-readme-generator"
-          href="https://github.com/rahuldkjain/github-profile-readme-generator/pulls"
-          target="blank"
-        >
-          Pull Requests
-        </a>
-      </div>
-    </div>
-    <div>
-      <div
-        className="font-title font-bold text-xl sm:text-base my-4 sm:my-0 sm:mb-2"
-      >
-        <strong>
-          Join Community
-        </strong>
-      </div>
-      <div
-        className="ml-2 sm:ml-0"
-      >
-        <a
-          aria-label="Discord of the community"
-          href="https://discord.gg/HHMs7Eg"
-          target="blank"
-        >
-          <img
-            alt="Discord of the community"
-            className="h-12"
-            src="test-file-stub"
-          />
-        </a>
-      </div>
-    </div>
-  </div>
-  <div
-    className="py-2 mt-2"
-  >
-    Developed in India
-     
-    <span
-      aria-label="india"
-      role="img"
-    >
-       
-      🇮🇳
-    </span>
-  </div>
-</div>
-`;

src/components/__tests__/__snapshots__/header.test.js.snap

@@ -1,73 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Header renders correctly 1`] = `
-<div
-  className="shadow flex items-center justify-center flex-col mb-2 py-2"
->
-  <mockConstructor
-    to="/"
-  >
-    <h1
-      className="text-base font-bold font-title sm:text-2xl font-medium text-blue-800 flex justify-center items-center flex-col"
-    >
-      <img
-        alt="github profile markdown generator logo"
-        className="w-12 h-12"
-        src="test-file-stub"
-      />
-      <div>
-        heading
-      </div>
-    </h1>
-  </mockConstructor>
-  <div
-    className="flex justify-center items-center"
-  >
-    <a
-      aria-label="Star rahuldkjain/github-profile-readme-generator on GitHub"
-      className="mr-2"
-      href="https://github.com/rahuldkjain/github-profile-readme-generator"
-      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"
-      >
-        <StarIcon
-          className="px-1 w-6 star"
-          id="star-icon"
-          size={16}
-          verticalAlign="text-bottom"
-        />
-        Star this repo
-        <span
-          className="github-count px-1 sm:px-2"
-        >
-          0
-        </span>
-      </div>
-    </a>
-    <a
-      aria-label="Fork rahuldkjain/github-profile-readme-generator on GitHub"
-      href="https://github.com/rahuldkjain/github-profile-readme-generator/fork"
-      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
-          className="px-1 w-6 fork"
-          id="fork-icon"
-          size={16}
-          verticalAlign="text-bottom"
-        />
-        Fork on GitHub
-        <span
-          className="github-count px-1 sm:px-2"
-        >
-          0
-        </span>
-      </div>
-    </a>
-  </div>
-</div>
-`;

src/components/__tests__/__snapshots__/loader.test.js.snap

@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Loader renders correctly 1`] = `
-<div
-  className="loader"
->
-  <span>
-    ↓
-  </span>
-  <span>
-    ↓
-  </span>
-  <span>
-    ↓
-  </span>
-  <span>
-    ↓
-  </span>
-  <span>
-    ↓
-  </span>
-</div>
-`;

src/components/__tests__/__snapshots__/markdownPreview.test.js.snap

@@ -1,601 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DisplaySocial Preview renders correctly 1`] = `
-<a
-  className="no-underline text-blue-700 m-2"
-  href="https://codepen.io/dummy"
-  target="blank"
->
-  <img
-    alt="username"
-    className="w-6 h-6"
-    src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
-  />
-</a>
-`;
-
-exports[`DisplaySocial Preview renders correctly with no username 1`] = `""`;
-
-exports[`DisplayWork Preview renders correctly 1`] = `
-<div
-  className="my-2"
->
-  [object Object] 
-  <a
-    className="no-underline text-blue-700"
-    href="https://dummy.com"
-    target="blank"
-  >
-    readme-generator
-  </a>
-</div>
-`;
-
-exports[`DisplayWork Preview renders correctly with no link 1`] = `
-<div
-  className="my-2"
->
-  [object Object] 
-  <b>
-    readme-generator
-  </b>
-</div>
-`;
-
-exports[`DisplayWork Preview renders correctly with no prefix 1`] = `""`;
-
-exports[`DisplayWork Preview renders correctly with no prefix and link 1`] = `""`;
-
-exports[`DisplayWork Preview renders correctly with no prefix, link and project 1`] = `""`;
-
-exports[`DisplayWork Preview renders correctly with no project 1`] = `
-<div
-  className="my-2"
->
-  [object Object] 
-  <a
-    className="no-underline text-blue-700"
-    href="https://dummy.com"
-    target="blank"
-  >
-    https://dummy.com
-  </a>
-</div>
-`;
-
-exports[`DisplayWork Preview renders correctly with no project and link 1`] = `""`;
-
-exports[`DisplayWork Preview renders correctly with no project and prefix 1`] = `""`;
-
-exports[`GitHubStats Preview renders correctly 1`] = `""`;
-
-exports[`GitHubStats Preview renders correctly 2`] = `
-<div
-  className="text-center mx-4 mb-4"
->
-  <img
-    alt=""
-    src="https://github-readme-stats.vercel.app/api?username=&show_icons=true&locale=en"
-  />
-</div>
-`;
-
-exports[`GithubProfileTrophy Preview renders correctly 1`] = `""`;
-
-exports[`GithubProfileTrophy Preview renders correctly with show true 1`] = `
-<div
-  className="text-left my-2"
->
-   
-  <a
-    href="https://github.com/ryo-ma/github-profile-trophy"
-  >
-    <img
-      alt=""
-      src="https://github-profile-trophy.vercel.app/?username="
-    />
-  </a>
-   
-</div>
-`;
-
-exports[`Markdown Preview renders correctly 1`] = `
-<div
-  id="markdown-preview"
->
-  <TitlePreview
-    prefix="Hi 👋, I'm"
-    title="dummy"
-  />
-  <SubTitlePreview
-    subtitle="A passionate frontend developer from India"
-  />
-  <VisitorsBadgePreview
-    badgeOptions={
-      Object {
-        "badgeColor": "0e75b6",
-        "badgeLabel": "Profile%20views",
-        "badgeStyle": "flat",
-      }
-    }
-    github=""
-    show={false}
-  />
-  <GithubProfileTrophyPreview
-    github=""
-    show={false}
-  />
-  <TwitterBadgePreview
-    show={false}
-    twitter=""
-  />
-  <WorkPreview
-    work={
-      Object {
-        "data": Object {
-          "ama": "",
-          "badgeColor": "0e75b6",
-          "badgeLabel": "Profile views",
-          "badgeStyle": "flat",
-          "collaborateOn": "",
-          "contact": "",
-          "currentLearn": "",
-          "currentWork": "readme-generator",
-          "devDynamicBlogs": false,
-          "funFact": "",
-          "githubProfileTrophy": false,
-          "githubStats": false,
-          "githubStatsOptions": Object {
-            "bgColor": "",
-            "cacheSeconds": null,
-            "hideBorder": false,
-            "locale": "en",
-            "textColor": "",
-            "theme": "",
-            "titleColor": "",
-          },
-          "helpWith": "",
-          "mediumDynamicBlogs": false,
-          "rssDynamicBlogs": false,
-          "subtitle": "A passionate frontend developer from India",
-          "title": "dummy",
-          "topLanguages": false,
-          "topLanguagesOptions": Object {
-            "bgColor": "",
-            "cacheSeconds": null,
-            "hideBorder": false,
-            "locale": "en",
-            "textColor": "",
-            "theme": "",
-            "titleColor": "",
-          },
-          "twitterBadge": false,
-          "visitorsBadge": false,
-        },
-        "link": Object {
-          "blog": "",
-          "collaborateOn": "",
-          "currentWork": "https://dummy.com",
-          "helpWith": "",
-          "portfolio": "",
-          "resume": "",
-        },
-        "prefix": Object {
-          "ama": "💬 Ask me about",
-          "blog": "📝 I regularly write articles on",
-          "collaborateOn": "👯 I’m looking to collaborate on",
-          "contact": "📫 How to reach me",
-          "currentLearn": "🌱 I’m currently learning",
-          "currentWork": "🔭 I’m currently working on",
-          "funFact": "⚡ Fun fact",
-          "helpWith": "🤝 I’m looking for help with",
-          "portfolio": "👨‍💻 All of my projects are available at",
-          "resume": "📄 Know about my experiences",
-          "title": "Hi 👋, I'm",
-        },
-        "skills": Object {},
-        "social": Object {
-          "behance": "",
-          "codechef": "",
-          "codeforces": "",
-          "codepen": "dummy",
-          "codesandbox": "",
-          "dev": "",
-          "discord": "",
-          "dribbble": "",
-          "fb": "",
-          "geeks_for_geeks": "",
-          "github": "",
-          "hackerearth": "",
-          "hackerrank": "",
-          "instagram": "",
-          "kaggle": "",
-          "leetcode": "",
-          "linkedin": "",
-          "medium": "",
-          "rssurl": "",
-          "stackoverflow": "",
-          "topcoder": "",
-          "twitter": "",
-          "youtube": "",
-        },
-        "support": Object {
-          "buyMeACoffee": "",
-        },
-      }
-    }
-  />
-  <SocialPreview
-    social={
-      Object {
-        "behance": "",
-        "codechef": "",
-        "codeforces": "",
-        "codepen": "dummy",
-        "codesandbox": "",
-        "dev": "",
-        "discord": "",
-        "dribbble": "",
-        "fb": "",
-        "geeks_for_geeks": "",
-        "github": "",
-        "hackerearth": "",
-        "hackerrank": "",
-        "instagram": "",
-        "kaggle": "",
-        "leetcode": "",
-        "linkedin": "",
-        "medium": "",
-        "rssurl": "",
-        "stackoverflow": "",
-        "topcoder": "",
-        "twitter": "",
-        "youtube": "",
-      }
-    }
-  />
-  <SkillsPreview
-    skills={Object {}}
-  />
-  <SupportPreview
-    support={
-      Object {
-        "buyMeACoffee": "",
-      }
-    }
-  />
-  <div
-    className="block sm:flex sm:justify-center sm:items-start"
-  >
-    <TopLanguagesPreview
-      github=""
-      options={
-        Object {
-          "bgColor": "",
-          "cacheSeconds": null,
-          "hideBorder": false,
-          "locale": "en",
-          "textColor": "",
-          "theme": "",
-          "titleColor": "",
-        }
-      }
-      show={false}
-    />
-    <GitHubStatsPreview
-      github=""
-      options={
-        Object {
-          "bgColor": "",
-          "cacheSeconds": null,
-          "hideBorder": false,
-          "locale": "en",
-          "textColor": "",
-          "theme": "",
-          "titleColor": "",
-        }
-      }
-      show={false}
-    />
-    <StreakStatsPreview
-      github=""
-      options={Object {}}
-      show={false}
-    />
-  </div>
-</div>
-`;
-
-exports[`SectionTitle Preview renders correctly 1`] = `
-<h3
-  className="w-full text-lg sm:text-xl"
->
-  dummy
-</h3>
-`;
-
-exports[`SectionTitle Preview renders correctly with no label 1`] = `""`;
-
-exports[`SectionTitle Preview renders correctly with visible false 1`] = `""`;
-
-exports[`Skills Preview renders correctly 1`] = `
-<div
-  className="flex flex-wrap justify-start items-center"
->
-  <SectionTitle
-    label="Languages and Tools:"
-    visible={true}
-  />
-  <a
-    href="https://unity.com/"
-    key="unity"
-    rel="noreferrer"
-    target="_blank"
-  >
-    <img
-      alt="unity"
-      className="mb-4 mr-4 h-6 w-6 sm:h-10 sm:w-10"
-      src="https://www.vectorlogo.zone/logos/unity3d/unity3d-icon.svg"
-    />
-  </a>
-</div>
-`;
-
-exports[`Skills Preview renders correctly with no skills 1`] = `""`;
-
-exports[`Social Preview renders correctly 1`] = `
-<div
-  className="flex justify-start items-end flex-wrap"
->
-  <SectionTitle
-    label="Connect with me:"
-    visible={true}
-  />
-  <DisplaySocial
-    base="https://codepen.io"
-    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/codepen.svg"
-    username="dummy"
-  />
-  <DisplaySocial
-    base="https://dev.to"
-    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/devto.svg"
-    username=""
-  />
-  <DisplaySocial
-    base="https://twitter.com"
-    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/twitter.svg"
-    username=""
-  />
-  <DisplaySocial
-    base="https://linkedin.com/in"
-    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/linked-in-alt.svg"
-    username=""
-  />
-  <DisplaySocial
-    base="https://stackoverflow.com/users"
-    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/stack-overflow.svg"
-    username=""
-  />
-  <DisplaySocial
-    base="https://codesandbox.com"
-    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/codesandbox.svg"
-    username=""
-  />
-  <DisplaySocial
-    base="https://kaggle.com"
-    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/kaggle.svg"
-    username=""
-  />
-  <DisplaySocial
-    base="https://fb.com"
-    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/facebook.svg"
-    username=""
-  />
-  <DisplaySocial
-    base="https://instagram.com"
-    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/instagram.svg"
-    username=""
-  />
-  <DisplaySocial
-    base="https://dribbble.com"
-    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/dribbble.svg"
-    username=""
-  />
-  <DisplaySocial
-    base="https://www.behance.net"
-    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/behance.svg"
-    username=""
-  />
-  <DisplaySocial
-    base="https://medium.com"
-    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/medium.svg"
-    username=""
-  />
-  <DisplaySocial
-    base="https://www.youtube.com/c"
-    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/youtube.svg"
-    username=""
-  />
-  <DisplaySocial
-    base="https://www.codechef.com/users"
-    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/codechef.svg"
-    username=""
-  />
-  <DisplaySocial
-    base="https://www.hackerrank.com"
-    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/hackerrank.svg"
-    username=""
-  />
-  <DisplaySocial
-    base="https://codeforces.com/profile"
-    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/codeforces.svg"
-    username=""
-  />
-  <DisplaySocial
-    base="https://www.leetcode.com"
-    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/leet-code.svg"
-    username=""
-  />
-  <DisplaySocial
-    base="https://www.hackerearth.com"
-    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/hackerearth.svg"
-    username=""
-  />
-  <DisplaySocial
-    base="https://auth.geeksforgeeks.org/user"
-    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/geeks-for-geeks.svg"
-    username=""
-  />
-  <DisplaySocial
-    base="https://www.topcoder.com/members"
-    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/topcoder.svg"
-    username=""
-  />
-  <DisplaySocial
-    base="https://discord.gg"
-    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/discord.svg"
-    username=""
-  />
-  <DisplaySocial
-    base=""
-    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/rss.svg"
-    username=""
-  />
-</div>
-`;
-
-exports[`SubTitle Preview renders correctly 1`] = `
-<h3
-  className="text-center font-medium"
->
-  A passionate frontend developer from India
-</h3>
-`;
-
-exports[`SubTitle Preview renders correctly with no subtitle 1`] = `""`;
-
-exports[`Title Preview renders correctly 1`] = `
-<h1
-  className="text-center text-xl font-bold"
->
-  Hi 👋, I'm dummy
-</h1>
-`;
-
-exports[`Title Preview renders correctly with no prefix 1`] = `""`;
-
-exports[`Title Preview renders correctly with no title 1`] = `""`;
-
-exports[`Title Preview renders correctly with no title and prefix 1`] = `""`;
-
-exports[`TopLanguages Preview renders correctly 1`] = `
-<div
-  className="text-center mx-4 mb-4"
->
-    
-</div>
-`;
-
-exports[`TopLanguages Preview renders correctly with show true 1`] = `
-<div
-  className="text-center mx-4 mb-4"
->
-  <img
-    alt=""
-    src="https://github-readme-stats.vercel.app/api/top-langs?username=&show_icons=true&locale=en&layout=compact"
-  />
-</div>
-`;
-
-exports[`TwitterBadgePreview Preview renders correctly 1`] = `""`;
-
-exports[`TwitterBadgePreview Preview renders correctly with show true 1`] = `
-<div
-  className="text-left my-2"
->
-   
-  <a
-    href="https://twitter.com/"
-    rel="noreferrer"
-    target="_blank"
-  >
-    <img
-      alt=""
-      className="h-4 sm:h-6"
-      src="https://img.shields.io/twitter/follow/?logo=twitter&style=for-the-badge"
-    />
-  </a>
-   
-</div>
-`;
-
-exports[`VisitorsBadge Preview renders correctly 1`] = `""`;
-
-exports[`VisitorsBadge Preview renders correctly with show true 1`] = `
-<div
-  className="text-left my-2"
->
-   
-  <img
-    alt=""
-    className="h-4 sm:h-6"
-    src="https://komarev.com/ghpvc/?username=&label=Profile%20views&color=0e75b6&style=flat"
-  />
-   
-</div>
-`;
-
-exports[`Work Preview renders correctly 1`] = `
-<Fragment>
-  <DisplayWork
-    link="https://dummy.com"
-    prefix="🔭 I’m currently working on"
-    project="readme-generator"
-  />
-  <DisplayWork
-    link=""
-    prefix="🌱 I’m currently learning"
-    project=""
-  />
-  <DisplayWork
-    link=""
-    prefix="🤝 I’m looking for help with"
-    project=""
-  />
-  <DisplayWork
-    link=""
-    prefix="👯 I’m looking to collaborate on"
-    project=""
-  />
-  <DisplayWork
-    link=""
-    prefix="💬 Ask me about"
-    project=""
-  />
-  <DisplayWork
-    link=""
-    prefix="👨‍💻 All of my projects are available at"
-    project=""
-  />
-  <DisplayWork
-    link=""
-    prefix="📝 I regularly write articles on"
-    project=""
-  />
-  <DisplayWork
-    link=""
-    prefix="📄 Know about my experiences"
-    project=""
-  />
-  <DisplayWork
-    link=""
-    prefix="📫 How to reach me"
-    project=""
-  />
-  <DisplayWork
-    link=""
-    prefix="⚡ Fun fact"
-    project=""
-  />
-</Fragment>
-`;

src/components/__tests__/__snapshots__/skills.test.js.snap

@@ -1,156 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Skills renders correctly 1`] = `
-<div
-  className="px-2 sm:px-6 mb-10 "
->
-  <div
-    className="text-xl sm:text-2xl font-bold font-title mt-2 mb-4 flex justify-between"
-  >
-    Skills
-    <div
-      className="relative flex"
-    >
-      <input
-        className="leading:none text-xs my-0 py-1 px-2 pr-8 sm:text-xl border-2 border-gray-900 focus:border-blue-700 placeholder-gray-700"
-        onChange={[Function]}
-        placeholder="Search Skills"
-        type="text"
-      />
-      <span
-        className="absolute"
-        style={
-          Object {
-            "right": "10px",
-          }
-        }
-      >
-        <SearchIcon
-          className="mb-1 transform scale-100 md:scale-125"
-          size={16}
-          verticalAlign="text-bottom"
-        />
-      </span>
-    </div>
-  </div>
-  <div
-    className="divide-y divide-gray-500"
-    key="language"
-  >
-    <div
-      className="text-sm sm:text-xl text-gray-900 text-left py-1"
-    >
-      Programming Languages
-    </div>
-    <div
-      className="flex justify-start items-center flex-wrap w-full mb-6 pl-4 sm:pl-10"
-    >
-      <div
-        className="w-1/3 sm:w-1/4 my-6"
-        key="javascript"
-      >
-        <label
-          className="checkbox-label flex items-center justify-start"
-          htmlFor="javascript"
-        >
-          <input
-            checked={true}
-            className="checkbox-label__input"
-            id="javascript"
-            onChange={[Function]}
-            type="checkbox"
-          />
-          <span
-            className="checkbox-label__control"
-          />
-          <img
-            alt="javascript"
-            className="ml-4 w-8 h-8 sm:w-10 sm:h-10"
-            src="javascript.svg"
-          />
-          <span
-            className="tooltiptext"
-          >
-            javascript
-          </span>
-        </label>
-      </div>
-    </div>
-  </div>
-  <div
-    className="divide-y divide-gray-500"
-    key="frontend_dev"
-  >
-    <div
-      className="text-sm sm:text-xl text-gray-900 text-left py-1"
-    >
-      Frontend Development
-    </div>
-    <div
-      className="flex justify-start items-center flex-wrap w-full mb-6 pl-4 sm:pl-10"
-    >
-      <div
-        className="w-1/3 sm:w-1/4 my-6"
-        key="react"
-      >
-        <label
-          className="checkbox-label flex items-center justify-start"
-          htmlFor="react"
-        >
-          <input
-            className="checkbox-label__input"
-            id="react"
-            onChange={[Function]}
-            type="checkbox"
-          />
-          <span
-            className="checkbox-label__control"
-          />
-          <img
-            alt="react"
-            className="ml-4 w-8 h-8 sm:w-10 sm:h-10"
-            src="react.svg"
-          />
-          <span
-            className="tooltiptext"
-          >
-            react
-          </span>
-        </label>
-      </div>
-      <div
-        className="w-1/3 sm:w-1/4 my-6"
-        key="svelte"
-      >
-        <label
-          className="checkbox-label flex items-center justify-start"
-          htmlFor="svelte"
-        >
-          <input
-            className="checkbox-label__input"
-            id="svelte"
-            onChange={[Function]}
-            type="checkbox"
-          />
-          <span
-            className="checkbox-label__control"
-          />
-          <img
-            alt="svelte"
-            className="ml-4 w-8 h-8 sm:w-10 sm:h-10"
-            src="svelte.svg"
-          />
-          <span
-            className="tooltiptext"
-          >
-            svelte
-          </span>
-        </label>
-      </div>
-    </div>
-  </div>
-  <span
-    className="flex justify-center text-gray-900"
-  />
-</div>
-`;

src/components/__tests__/__snapshots__/social.test.js.snap

@@ -1,383 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Social renders correctly 1`] = `
-<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
-        alt="github"
-        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
-        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg"
-      />
-      <input
-        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"
-        id="github"
-        onChange={[Function]}
-        placeholder="github username"
-        value="github "
-      />
-    </div>
-    <div
-      className="w-1/2  flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
-    >
-      <img
-        alt="twitter"
-        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
-        src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/twitter.svg"
-      />
-      <input
-        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"
-        id="twitter"
-        onChange={[Function]}
-        placeholder="twitter username"
-        value="twitter"
-      />
-    </div>
-    <div
-      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
-    >
-      <img
-        alt="dev.to"
-        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
-        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
-      />
-      <input
-        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"
-        id="dev"
-        onChange={[Function]}
-        placeholder="dev.to username"
-        value="dev"
-      />
-    </div>
-    <div
-      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
-    >
-      <img
-        alt="codepen"
-        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
-        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
-      />
-      <input
-        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"
-        id="codepen"
-        onChange={[Function]}
-        placeholder="codepen username"
-        value="codepen"
-      />
-    </div>
-    <div
-      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
-    >
-      <img
-        alt="codesandbox"
-        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
-        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
-      />
-      <input
-        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"
-        id="codesandbox"
-        onChange={[Function]}
-        placeholder="codesandbox username"
-        value="codesandbodx"
-      />
-    </div>
-    <div
-      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
-    >
-      <img
-        alt="stackoverflow"
-        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
-        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
-      />
-      <input
-        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"
-        id="stackoverflow"
-        onChange={[Function]}
-        placeholder="stackoverflow user ID"
-        value="stackoverflow"
-      />
-    </div>
-    <div
-      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
-    >
-      <img
-        alt="linkedin"
-        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
-        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
-      />
-      <input
-        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"
-        id="linkedin"
-        onChange={[Function]}
-        placeholder="linkedin username"
-        value="linkedin"
-      />
-    </div>
-    <div
-      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
-    >
-      <img
-        alt="kaggle"
-        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
-        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg"
-      />
-      <input
-        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"
-        id="kaggle"
-        onChange={[Function]}
-        placeholder="kaggle username"
-        value="kaggle"
-      />
-    </div>
-    <div
-      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
-    >
-      <img
-        alt="facebook"
-        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
-        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg"
-      />
-      <input
-        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"
-        id="fb"
-        onChange={[Function]}
-        placeholder="facebook username"
-        value="fb"
-      />
-    </div>
-    <div
-      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
-    >
-      <img
-        alt="instagram"
-        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
-        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg"
-      />
-      <input
-        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"
-        id="instagram"
-        onChange={[Function]}
-        placeholder="instagram username"
-        value="instagram"
-      />
-    </div>
-    <div
-      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
-    >
-      <img
-        alt="dribbble"
-        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
-        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/dribbble.svg"
-      />
-      <input
-        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"
-        id="dribbble"
-        onChange={[Function]}
-        placeholder="dribbble username"
-      />
-    </div>
-    <div
-      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
-    >
-      <img
-        alt="behance"
-        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
-        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/behance.svg"
-      />
-      <input
-        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"
-        id="behance"
-        onChange={[Function]}
-        placeholder="behance username"
-        value="behance"
-      />
-    </div>
-    <div
-      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
-    >
-      <img
-        alt="medium"
-        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
-        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/medium.svg"
-      />
-      <input
-        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"
-        id="medium"
-        onChange={[Function]}
-        placeholder="medium username (with @)"
-        value="medium"
-      />
-    </div>
-    <div
-      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
-    >
-      <img
-        alt="youtube"
-        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
-        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/youtube.svg"
-      />
-      <input
-        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"
-        id="youtube"
-        onChange={[Function]}
-        placeholder="youtube channel name"
-        value="youtube"
-      />
-    </div>
-    <div
-      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
-    >
-      <img
-        alt="codechef"
-        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
-        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/codechef.svg"
-      />
-      <input
-        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"
-        id="codechef"
-        onChange={[Function]}
-        placeholder="codechef username"
-        value="codechef"
-      />
-    </div>
-    <div
-      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
-    >
-      <img
-        alt="hackerrank"
-        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
-        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/hackerrank.svg"
-      />
-      <input
-        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"
-        id="hackerrank"
-        onChange={[Function]}
-        placeholder="hackerrank username"
-      />
-    </div>
-    <div
-      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
-    >
-      <img
-        alt="codeforces"
-        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
-        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/codeforces.svg"
-      />
-      <input
-        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"
-        id="codeforces"
-        onChange={[Function]}
-        placeholder="codeforces username"
-        value="codeforces"
-      />
-    </div>
-    <div
-      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
-    >
-      <img
-        alt="leetcode"
-        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
-        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/leetcode.svg"
-      />
-      <input
-        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"
-        id="leetcode"
-        onChange={[Function]}
-        placeholder="leetcode username"
-        value="leetcode"
-      />
-    </div>
-    <div
-      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
-    >
-      <img
-        alt="topcoder"
-        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
-        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/topcoder.svg"
-      />
-      <input
-        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"
-        id="topcoder"
-        onChange={[Function]}
-        placeholder="topcoder username"
-        value="topcoder"
-      />
-    </div>
-    <div
-      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
-    >
-      <img
-        alt="hackerearth"
-        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
-        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/hackerearth.svg"
-      />
-      <input
-        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"
-        id="hackerearth"
-        onChange={[Function]}
-        placeholder="hackerearth user (with @)"
-        value="@hackerearth"
-      />
-    </div>
-    <div
-      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
-    >
-      <img
-        alt="geeksforgeeks"
-        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
-        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/geeksforgeeks.svg"
-      />
-      <input
-        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"
-        id="geeksforgeeks"
-        onChange={[Function]}
-        placeholder="GFG (<username>/profile)"
-        value="geeks_for_geeks"
-      />
-    </div>
-    <div
-      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
-    >
-      <img
-        alt="discord"
-        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
-        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/discord.svg"
-      />
-      <input
-        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"
-        id="discord"
-        onChange={[Function]}
-        placeholder="discord invite (only code)"
-        value="discord"
-      />
-    </div>
-    <div
-      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
-    >
-      <img
-        alt="rssfeed"
-        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
-        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/rss.svg"
-      />
-      <input
-        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"
-        id="rssurl"
-        onChange={[Function]}
-        placeholder="RSS feed URL"
-        value="rssurl"
-      />
-    </div>
-  </div>
-</div>
-`;

src/components/__tests__/__snapshots__/subtitle.test.js.snap

@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Subtitle 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"
-  >
-    Subtitle
-  </div>
-  <input
-    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"
-    id="subtitle"
-    onChange={[Function]}
-    value="A frontend developer"
-  />
-</div>
-`;

src/components/__tests__/__snapshots__/title.test.js.snap

@@ -1,30 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Title renders title component 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="test_title"
-    />
-    <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="test_data"
-    />
-  </div>
-</div>
-`;

src/components/__tests__/__snapshots__/work.test.js.snap

@@ -1,184 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Work renders work component 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"
-  >
-    Work
-  </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
-      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"
-      id="currentWork-prefix"
-      onChange={[Function]}
-      placeholder="Hi, I'm "
-      value="test_currentwork"
-    />
-    <input
-      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"
-      id="currentWork"
-      onChange={[Function]}
-      placeholder="project name"
-    />
-    <input
-      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"
-      id="currentWork-link"
-      onChange={[Function]}
-      placeholder="project link"
-      value="test_currentwork"
-    />
-  </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
-      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"
-      id="collaborateOn-prefix"
-      onChange={[Function]}
-    />
-    <input
-      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"
-      id="collaborateOn"
-      onChange={[Function]}
-      placeholder="project name"
-    />
-    <input
-      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"
-      id="collaborateOn-link"
-      onChange={[Function]}
-      placeholder="project link"
-    />
-  </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
-      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"
-      id="helpWith-prefix"
-      onChange={[Function]}
-    />
-    <input
-      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"
-      id="helpWith"
-      onChange={[Function]}
-      placeholder="project name"
-    />
-    <input
-      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"
-      id="helpWith-link"
-      onChange={[Function]}
-      placeholder="project link"
-    />
-  </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
-      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"
-      id="currentLearn-prefix"
-      onChange={[Function]}
-    />
-    <input
-      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"
-      id="currentLearn"
-      onChange={[Function]}
-      placeholder="Frameworks, courses etc."
-    />
-  </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
-      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"
-      id="ama-prefix"
-      onChange={[Function]}
-    />
-    <input
-      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"
-      id="ama"
-      onChange={[Function]}
-      placeholder="react, vue and gsap"
-    />
-  </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
-      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"
-      id="contact-prefix"
-      onChange={[Function]}
-    />
-    <input
-      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"
-      id="contact"
-      onChange={[Function]}
-      placeholder="example@gmail.com"
-    />
-  </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
-      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"
-      id="portfolio-prefix"
-      onChange={[Function]}
-    />
-    <input
-      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"
-      id="portfolio"
-      onChange={[Function]}
-      placeholder="portfolio link"
-    />
-  </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
-      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"
-      id="blog-prefix"
-      onChange={[Function]}
-    />
-    <input
-      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"
-      id="blog"
-      onChange={[Function]}
-      placeholder="blog link"
-    />
-  </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
-      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"
-      id="resume-prefix"
-      onChange={[Function]}
-    />
-    <input
-      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"
-      id="resume"
-      onChange={[Function]}
-      placeholder="resume link"
-    />
-  </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
-      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"
-      id="funFact-prefix"
-      onChange={[Function]}
-    />
-    <input
-      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"
-      id="funFact"
-      onChange={[Function]}
-      placeholder="I think I am funny"
-    />
-  </div>
-</div>
-`;

src/components/__tests__/addons.test.js

@@ -1,806 +0,0 @@
-import React from 'react';
-import toJson from 'enzyme-to-json';
-import { shallow, mount } from 'enzyme';
-
-import Addons from '../addons';
-
-jest.useFakeTimers();
-
-describe('Addons', () => {
-  const dataInput = {
-    title: '',
-    subtitle: 'A passionate frontend developer from India',
-    currentWork: '',
-    currentLearn: '',
-    collaborateOn: '',
-    helpWith: '',
-    ama: '',
-    contact: '',
-    funFact: '',
-    twitterBadge: false,
-    visitorsBadge: false,
-    badgeStyle: 'flat',
-    badgeColor: '0e75b6',
-    badgeLabel: 'Profile views',
-    githubProfileTrophy: false,
-    githubStats: false,
-    githubStatsOptions: {
-      theme: '',
-      titleColor: '',
-      textColor: '',
-      bgColor: '',
-      hideBorder: false,
-      cacheSeconds: null,
-      locale: 'en',
-    },
-    topLanguages: false,
-    topLanguagesOptions: {
-      theme: '',
-      titleColor: '',
-      textColor: '',
-      bgColor: '',
-      hideBorder: false,
-      cacheSeconds: null,
-      locale: 'en',
-    },
-    devDynamicBlogs: false,
-    mediumDynamicBlogs: false,
-    rssDynamicBlogs: false,
-  };
-  const socialInput = {
-    github: '',
-    dev: '',
-    linkedin: '',
-    codepen: '',
-    stackoverflow: '',
-    kaggle: '',
-    codesandbox: '',
-    fb: '',
-    instagram: '',
-    twitter: '',
-    dribbble: '',
-    behance: '',
-    medium: '',
-    youtube: '',
-    codechef: '',
-    hackerrank: '',
-    codeforces: '',
-    leetcode: '',
-    topcoder: '',
-    hackerearth: '',
-    geeks_for_geeks: '',
-    discord: '',
-    rssurl: '',
-  };
-
-  let mockHandleCheckChange;
-  let mockHandleDataChange;
-  beforeEach(() => {
-    mockHandleCheckChange = jest.fn();
-    mockHandleDataChange = jest.fn();
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('renders correctly', () => {
-    const addOnComponent = shallow(
-      <Addons
-        data={dataInput}
-        social={socialInput}
-        handleCheckChange={mockHandleCheckChange}
-        handleDataChange={mockHandleDataChange}
-      />
-    );
-
-    expect(toJson(addOnComponent)).toMatchSnapshot();
-  });
-
-  it('should render Customize Badges', () => {
-    const newDataInput = {
-      ...dataInput,
-      mediumDynamicBlogs: 'some-medium-blogs-value',
-    };
-
-    const newSocialInput = {
-      medium: '@abcd',
-    };
-
-    const addOnComponent = mount(
-      <Addons
-        data={newDataInput}
-        social={newSocialInput}
-        handleCheckChange={mockHandleCheckChange}
-        handleDataChange={mockHandleDataChange}
-      />
-    );
-
-    addOnComponent.find('#visitors-count-open-btn').simulate('click', {});
-
-    expect(addOnComponent).toMatchSnapshot();
-  });
-
-  it('should handle data change when badge style is changed', () => {
-    const mockEvent = { target: { value: 'style-new' } };
-    const newDataInput = {
-      ...dataInput,
-      mediumDynamicBlogs: 'some-medium-blogs-value',
-      githubStatsOptions: {
-        theme: 'theme-1',
-        titleColor: 'title-abcd',
-        textColor: 'some-color',
-        bgColor: 'abcd',
-        hideBorder: false,
-        cacheSeconds: null,
-        locale: 'en',
-      },
-    };
-
-    const newSocialInput = {
-      medium: '@abcd',
-    };
-
-    const addOnComponent = mount(
-      <Addons
-        data={newDataInput}
-        social={newSocialInput}
-        handleCheckChange={mockHandleCheckChange}
-        handleDataChange={mockHandleDataChange}
-      />
-    );
-
-    addOnComponent.find('#visitors-count-open-btn').simulate('click', {});
-    addOnComponent.find('#badge-style').simulate('change', mockEvent);
-
-    jest.runAllTimers();
-
-    expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
-    expect(mockHandleDataChange).toHaveBeenCalledWith('badgeStyle', { target: { value: 'style-new' } });
-  });
-
-  it('should handle data change when badge color is changed', () => {
-    const mockEvent = { target: { value: 'new-color-abcd' } };
-    const newDataInput = {
-      ...dataInput,
-      mediumDynamicBlogs: 'some-medium-blogs-value',
-    };
-
-    const newSocialInput = {
-      medium: '@abcd',
-    };
-
-    const addOnComponent = mount(
-      <Addons
-        data={newDataInput}
-        social={newSocialInput}
-        handleCheckChange={mockHandleCheckChange}
-        handleDataChange={mockHandleDataChange}
-      />
-    );
-
-    addOnComponent.find('#visitors-count-open-btn').simulate('click', {});
-    addOnComponent.find('#badge-color').simulate('change', mockEvent);
-
-    jest.runAllTimers();
-
-    expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
-    expect(mockHandleDataChange).toHaveBeenCalledWith('badgeColor', { target: { value: 'new-color-abcd' } });
-  });
-
-  it('should handle data change when badge-label-text is changed', () => {
-    const mockEvent = { target: { value: 'label-abcd-random' } };
-    const newDataInput = {
-      ...dataInput,
-      mediumDynamicBlogs: 'some-medium-blogs-value',
-    };
-
-    const newSocialInput = {
-      medium: '@abcd',
-    };
-
-    const addOnComponent = mount(
-      <Addons
-        data={newDataInput}
-        social={newSocialInput}
-        handleCheckChange={mockHandleCheckChange}
-        handleDataChange={mockHandleDataChange}
-      />
-    );
-
-    addOnComponent.find('#visitors-count-open-btn').simulate('click', {});
-    addOnComponent.find('#badge-label-text').simulate('change', mockEvent);
-
-    jest.runAllTimers();
-
-    expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
-    expect(mockHandleDataChange).toHaveBeenCalledWith('badgeLabel', { target: { value: 'label-abcd-random' } });
-  });
-
-  it('should render Customize Github stats card', () => {
-    const newDataInput = {
-      ...dataInput,
-      mediumDynamicBlogs: 'some-medium-blogs-value',
-    };
-
-    const newSocialInput = {
-      medium: '@abcd',
-    };
-
-    const addOnComponent = mount(
-      <Addons
-        data={newDataInput}
-        social={newSocialInput}
-        handleCheckChange={mockHandleCheckChange}
-        handleDataChange={mockHandleDataChange}
-      />
-    );
-
-    addOnComponent.find('#github-stats-open-btn').simulate('click', {});
-
-    expect(addOnComponent).toMatchSnapshot();
-  });
-
-  it('should handle data change when stats theme is changed', () => {
-    const mockEvent = { target: { value: 'new-theme-for-stats' } };
-    const newDataInput = {
-      ...dataInput,
-      mediumDynamicBlogs: 'some-medium-blogs-value',
-      githubStatsOptions: {
-        titleColor: 'title-abcd',
-        textColor: 'some-color',
-        bgColor: 'abcd',
-        hideBorder: false,
-        cacheSeconds: null,
-        theme: 'new-theme-for-stats',
-        locale: 'en',
-      },
-    };
-
-    const newSocialInput = {
-      medium: '@abcd',
-    };
-
-    const addOnComponent = mount(
-      <Addons
-        data={newDataInput}
-        social={newSocialInput}
-        handleCheckChange={mockHandleCheckChange}
-        handleDataChange={mockHandleDataChange}
-      />
-    );
-
-    addOnComponent.find('#github-stats-open-btn').simulate('click', {});
-    addOnComponent.find('#stats-theme').simulate('change', mockEvent);
-
-    jest.runAllTimers();
-
-    expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
-    expect(mockHandleDataChange).toHaveBeenCalledWith('githubStatsOptions', {
-      target: {
-        value: {
-          theme: 'theme-1',
-          titleColor: 'title-abcd',
-          textColor: 'some-color',
-          bgColor: 'abcd',
-          hideBorder: false,
-          cacheSeconds: null,
-          theme: 'new-theme-for-stats',
-          locale: 'en',
-        },
-      },
-    });
-  });
-
-  it('should handle data change when stats title color is changed', () => {
-    const mockEvent = { target: { value: 'red-color' } };
-    const newDataInput = {
-      ...dataInput,
-      mediumDynamicBlogs: 'some-medium-blogs-value',
-      githubStatsOptions: {
-        theme: 'theme-1',
-        textColor: 'some-color',
-        bgColor: 'abcd',
-        hideBorder: false,
-        cacheSeconds: null,
-        theme: 'new-theme-for-stats',
-        locale: 'en',
-      },
-    };
-
-    const newSocialInput = {
-      medium: '@abcd',
-    };
-
-    const addOnComponent = mount(
-      <Addons
-        data={newDataInput}
-        social={newSocialInput}
-        handleCheckChange={mockHandleCheckChange}
-        handleDataChange={mockHandleDataChange}
-      />
-    );
-
-    addOnComponent.find('#github-stats-open-btn').simulate('click', {});
-    addOnComponent.find('#stats-title-color').simulate('change', mockEvent);
-
-    jest.runAllTimers();
-
-    expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
-    expect(mockHandleDataChange).toHaveBeenCalledWith('githubStatsOptions', {
-      target: {
-        value: {
-          theme: 'theme-1',
-          titleColor: 'red-color',
-          textColor: 'some-color',
-          bgColor: 'abcd',
-          hideBorder: false,
-          cacheSeconds: null,
-          theme: 'new-theme-for-stats',
-          locale: 'en',
-        },
-      },
-    });
-  });
-
-  it('should handle data change when stats bg color is changed', () => {
-    const mockEvent = { target: { value: 'random-color' } };
-    const newDataInput = {
-      ...dataInput,
-      mediumDynamicBlogs: 'some-medium-blogs-value',
-      githubStatsOptions: {
-        theme: 'theme-1',
-        titleColor: 'some-color',
-        textColor: 'abcd',
-        hideBorder: false,
-        cacheSeconds: null,
-        theme: 'new-theme-for-stats',
-        locale: 'en',
-      },
-    };
-
-    const newSocialInput = {
-      medium: '@abcd',
-    };
-
-    const addOnComponent = mount(
-      <Addons
-        data={newDataInput}
-        social={newSocialInput}
-        handleCheckChange={mockHandleCheckChange}
-        handleDataChange={mockHandleDataChange}
-      />
-    );
-
-    addOnComponent.find('#github-stats-open-btn').simulate('click', {});
-    addOnComponent.find('#stats-bg-color').simulate('change', mockEvent);
-
-    jest.runAllTimers();
-
-    expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
-    expect(mockHandleDataChange).toHaveBeenCalledWith('githubStatsOptions', {
-      target: {
-        value: {
-          theme: 'theme-1',
-          titleColor: 'some-color',
-          textColor: 'abcd',
-          bgColor: 'random-color',
-          hideBorder: false,
-          cacheSeconds: null,
-          theme: 'new-theme-for-stats',
-          locale: 'en',
-        },
-      },
-    });
-  });
-
-  it('should handle data change when stats cache seconds is changed', () => {
-    const mockEvent = { target: { value: 1900 } };
-    const newDataInput = {
-      ...dataInput,
-      mediumDynamicBlogs: 'some-medium-blogs-value',
-      githubStatsOptions: {
-        theme: 'theme-1',
-        titleColor: 'some-color',
-        textColor: 'abcd',
-        bgColor: 'random-color',
-        hideBorder: false,
-        cacheSeconds: null,
-        theme: 'new-theme-for-stats',
-        locale: 'en',
-      },
-    };
-
-    const newSocialInput = {
-      medium: '@abcd',
-    };
-
-    const addOnComponent = mount(
-      <Addons
-        data={newDataInput}
-        social={newSocialInput}
-        handleCheckChange={mockHandleCheckChange}
-        handleDataChange={mockHandleDataChange}
-      />
-    );
-
-    addOnComponent.find('#github-stats-open-btn').simulate('click', {});
-    addOnComponent.find('#stats-cache-seconds').simulate('change', mockEvent);
-
-    jest.runAllTimers();
-
-    expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
-    expect(mockHandleDataChange).toHaveBeenCalledWith('githubStatsOptions', {
-      target: {
-        value: {
-          theme: 'theme-1',
-          titleColor: 'some-color',
-          textColor: 'abcd',
-          bgColor: 'random-color',
-          hideBorder: false,
-          cacheSeconds: 1900,
-          theme: 'new-theme-for-stats',
-          locale: 'en',
-        },
-      },
-    });
-  });
-
-  it('should handle data change when stats text color is changed', () => {
-    const mockEvent = { target: { value: 'black-color' } };
-    const newDataInput = {
-      ...dataInput,
-      mediumDynamicBlogs: 'some-medium-blogs-value',
-      githubStatsOptions: {
-        theme: 'theme-1',
-        titleColor: 'some-color',
-        bgColor: 'abcd',
-        hideBorder: false,
-        cacheSeconds: null,
-        theme: 'new-theme-for-stats',
-        locale: 'en',
-      },
-    };
-
-    const newSocialInput = {
-      medium: '@abcd',
-    };
-
-    const addOnComponent = mount(
-      <Addons
-        data={newDataInput}
-        social={newSocialInput}
-        handleCheckChange={mockHandleCheckChange}
-        handleDataChange={mockHandleDataChange}
-      />
-    );
-
-    addOnComponent.find('#github-stats-open-btn').simulate('click', {});
-    addOnComponent.find('#stats-text-color').simulate('change', mockEvent);
-
-    jest.runAllTimers();
-
-    expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
-    expect(mockHandleDataChange).toHaveBeenCalledWith('githubStatsOptions', {
-      target: {
-        value: {
-          theme: 'theme-1',
-          titleColor: 'some-color',
-          textColor: 'black-color',
-          bgColor: 'abcd',
-          hideBorder: false,
-          cacheSeconds: null,
-          theme: 'new-theme-for-stats',
-          locale: 'en',
-        },
-      },
-    });
-  });
-
-  it('should handle data change when stats local is changed', () => {
-    const mockEvent = { target: { value: 'uk' } };
-    const newDataInput = {
-      ...dataInput,
-      mediumDynamicBlogs: 'some-medium-blogs-value',
-      githubStatsOptions: {
-        theme: 'theme-1',
-        titleColor: 'some-color',
-        textColor: 'abcd',
-        bgColor: 'random-color',
-        hideBorder: false,
-        cacheSeconds: null,
-        theme: 'new-theme-for-stats',
-        locale: 'en',
-      },
-    };
-
-    const newSocialInput = {
-      medium: '@abcd',
-    };
-
-    const addOnComponent = mount(
-      <Addons
-        data={newDataInput}
-        social={newSocialInput}
-        handleCheckChange={mockHandleCheckChange}
-        handleDataChange={mockHandleDataChange}
-      />
-    );
-
-    addOnComponent.find('#github-stats-open-btn').simulate('click', {});
-    addOnComponent.find('#stats-locale').simulate('change', mockEvent);
-
-    jest.runAllTimers();
-
-    expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
-    expect(mockHandleDataChange).toHaveBeenCalledWith('githubStatsOptions', {
-      target: {
-        value: {
-          theme: 'theme-1',
-          titleColor: 'some-color',
-          textColor: 'abcd',
-          bgColor: 'random-color',
-          hideBorder: false,
-          cacheSeconds: null,
-          theme: 'new-theme-for-stats',
-          locale: 'uk',
-        },
-      },
-    });
-  });
-
-  it('should handle data change when stats local is changed', () => {
-    const mockEvent = { target: { checked: true } };
-    const newDataInput = {
-      ...dataInput,
-      mediumDynamicBlogs: 'some-medium-blogs-value',
-      githubStatsOptions: {
-        theme: 'theme-1',
-        titleColor: 'some-color',
-        textColor: 'abcd',
-        bgColor: 'random-color',
-        hideBorder: false,
-        cacheSeconds: null,
-        theme: 'new-theme-for-stats',
-        locale: 'en',
-      },
-    };
-
-    const newSocialInput = {
-      medium: '@abcd',
-    };
-
-    const addOnComponent = mount(
-      <Addons
-        data={newDataInput}
-        social={newSocialInput}
-        handleCheckChange={mockHandleCheckChange}
-        handleDataChange={mockHandleDataChange}
-      />
-    );
-
-    addOnComponent.find('#github-stats-open-btn').simulate('click', {});
-    addOnComponent.find('#stats-hide-border').simulate('change', mockEvent);
-
-    jest.runAllTimers();
-
-    expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
-    expect(mockHandleDataChange).toHaveBeenCalledWith('githubStatsOptions', {
-      target: {
-        value: {
-          theme: 'theme-1',
-          titleColor: 'some-color',
-          textColor: 'abcd',
-          bgColor: 'random-color',
-          hideBorder: true,
-          cacheSeconds: null,
-          theme: 'new-theme-for-stats',
-          locale: 'en',
-        },
-      },
-    });
-  });
-
-  it('should render Customize Top Skills Card', () => {
-    const newDataInput = {
-      ...dataInput,
-      mediumDynamicBlogs: 'some-medium-blogs-value',
-    };
-
-    const newSocialInput = {
-      medium: '@abcd',
-    };
-
-    const addOnComponent = mount(
-      <Addons
-        data={newDataInput}
-        social={newSocialInput}
-        handleCheckChange={mockHandleCheckChange}
-        handleDataChange={mockHandleDataChange}
-      />
-    );
-
-    addOnComponent.find('#top-languages-open-btn').simulate('click', {});
-
-    expect(addOnComponent).toMatchSnapshot();
-  });
-
-  it('should handle data change when top skills theme is changed', () => {
-    const mockEvent = { target: { value: 'theme-xyz' } };
-    const newDataInput = {
-      ...dataInput,
-      mediumDynamicBlogs: 'some-medium-blogs-value',
-      topLanguagesOptions: {
-        theme: 'theme-2',
-        titleColor: 'title-abcd-new',
-        textColor: 'random-some-color',
-        bgColor: '1234',
-        hideBorder: false,
-        cacheSeconds: null,
-        theme: 'theme-xyz',
-        locale: 'us',
-      },
-    };
-
-    const newSocialInput = {
-      medium: '@abcd',
-    };
-
-    const addOnComponent = mount(
-      <Addons
-        data={newDataInput}
-        social={newSocialInput}
-        handleCheckChange={mockHandleCheckChange}
-        handleDataChange={mockHandleDataChange}
-      />
-    );
-
-    addOnComponent.find('#top-languages-open-btn').simulate('click', {});
-    addOnComponent.find('#top-lang-theme').simulate('change', mockEvent);
-
-    jest.runAllTimers();
-
-    expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
-    expect(mockHandleDataChange).toHaveBeenCalledWith('topLanguagesOptions', {
-      target: {
-        value: {
-          theme: 'theme-2',
-          titleColor: 'title-abcd-new',
-          textColor: 'random-some-color',
-          bgColor: '1234',
-          hideBorder: false,
-          cacheSeconds: null,
-          theme: 'theme-xyz',
-          locale: 'us',
-        },
-      },
-    });
-  });
-
-  it('should handle check change when add on item inputs are changed', () => {
-    const mockEvent = { target: { value: 'This is a mock event' } };
-
-    const addOnComponent = mount(
-      <Addons
-        data={dataInput}
-        social={socialInput}
-        handleCheckChange={mockHandleCheckChange}
-        handleDataChange={mockHandleDataChange}
-      />
-    );
-
-    addOnComponent.find('#visitors-count').simulate('change', mockEvent);
-    addOnComponent.find('#github-profile-trophy').simulate('change', mockEvent);
-    addOnComponent.find('#github-stats').simulate('change', mockEvent);
-    addOnComponent.find('#top-languages').simulate('change', mockEvent);
-    addOnComponent.find('#twitter-badge').simulate('change', mockEvent);
-    addOnComponent.find('#dev-dynamic-blogs').simulate('change', mockEvent);
-    addOnComponent.find('#rss-dynamic-blogs').simulate('change', mockEvent);
-    addOnComponent.find('#medium-dynamic-blogs').simulate('change', mockEvent);
-
-    expect(mockHandleCheckChange).toHaveBeenCalledTimes(8);
-    expect(mockHandleCheckChange).toHaveBeenNthCalledWith(1, 'visitorsBadge');
-    expect(mockHandleCheckChange).toHaveBeenNthCalledWith(2, 'githubProfileTrophy');
-    expect(mockHandleCheckChange).toHaveBeenNthCalledWith(3, 'githubStats');
-    expect(mockHandleCheckChange).toHaveBeenNthCalledWith(4, 'topLanguages');
-    expect(mockHandleCheckChange).toHaveBeenNthCalledWith(5, 'twitterBadge');
-    expect(mockHandleCheckChange).toHaveBeenNthCalledWith(6, 'devDynamicBlogs');
-    expect(mockHandleCheckChange).toHaveBeenNthCalledWith(7, 'rssDynamicBlogs');
-    expect(mockHandleCheckChange).toHaveBeenNthCalledWith(8, 'mediumDynamicBlogs');
-  });
-
-  it('should display workflow details if devDynamicBlogs and dev social data are available', () => {
-    const newDataInput = {
-      ...dataInput,
-      devDynamicBlogs: 'some-value',
-    };
-
-    const newSocialInput = {
-      dev: 'some-value-123',
-    };
-
-    const addOnComponent = shallow(
-      <Addons
-        data={newDataInput}
-        social={newSocialInput}
-        handleCheckChange={mockHandleCheckChange}
-        handleDataChange={mockHandleDataChange}
-      />
-    );
-
-    const workflowElement = addOnComponent.find('.workflow');
-    expect(workflowElement).toMatchSnapshot();
-  });
-
-  it('should display workflow details if rssDynamicBlogs and rss url data are available', () => {
-    const newDataInput = {
-      ...dataInput,
-      rssDynamicBlogs: 'some-rss-value',
-    };
-
-    const newSocialInput = {
-      rssurl: 'url-random',
-    };
-
-    const addOnComponent = shallow(
-      <Addons
-        data={newDataInput}
-        social={newSocialInput}
-        handleCheckChange={mockHandleCheckChange}
-        handleDataChange={mockHandleDataChange}
-      />
-    );
-
-    const workflowElement = addOnComponent.find('.workflow');
-    expect(workflowElement).toMatchSnapshot();
-  });
-
-  it('should display workflow details if mediumDynamicBlogs, medium social data are available', () => {
-    const newDataInput = {
-      ...dataInput,
-      mediumDynamicBlogs: 'some-medium-blogs-value',
-    };
-
-    const newSocialInput = {
-      medium: '@abcd',
-    };
-
-    const addOnComponent = shallow(
-      <Addons
-        data={newDataInput}
-        social={newSocialInput}
-        handleCheckChange={mockHandleCheckChange}
-        handleDataChange={mockHandleDataChange}
-      />
-    );
-
-    const workflowElement = addOnComponent.find('.workflow');
-    expect(workflowElement).toMatchSnapshot();
-  });
-
-  it('should call document create element when blog post workflow is clicked', () => {
-    let someElement = document.createElement('abcd');
-    document.createElement = jest.fn().mockReturnValueOnce(someElement);
-
-    const newDataInput = {
-      ...dataInput,
-      mediumDynamicBlogs: 'some-medium-blogs-value',
-    };
-
-    const newSocialInput = {
-      medium: '@abcd',
-    };
-
-    const addOnComponent = shallow(
-      <Addons
-        data={newDataInput}
-        social={newSocialInput}
-        handleCheckChange={mockHandleCheckChange}
-        handleDataChange={mockHandleDataChange}
-      />
-    );
-
-    addOnComponent.find('#blog-post-worklow-span').simulate('click', {});
-    expect(document.createElement).toHaveBeenCalledTimes(1);
-  });
-});

src/components/__tests__/donate.test.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import toJson from 'enzyme-to-json';
-import { shallow } from 'enzyme';
-
-import Donate from '../donate';
-
-describe('Donate', () => {
-  it('renders correctly', () => {
-    const component = shallow(<Donate />);
-    expect(toJson(component)).toMatchSnapshot();
-  });
-});

src/components/__tests__/footer.test.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import toJson from 'enzyme-to-json';
-
-import Footer from '../footer';
-
-describe('Footer component', () => {
-  const component = shallow(<Footer />);
-
-  it('renders correctly', () => {
-    expect(toJson(component)).toMatchSnapshot();
-  });
-});

src/components/__tests__/header.test.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import toJson from 'enzyme-to-json';
-
-import Header from '../header';
-
-describe('Header', () => {
-  const component = shallow(<Header heading="heading" />);
-
-  it('renders correctly', () => {
-    expect(toJson(component)).toMatchSnapshot();
-  });
-});

src/components/__tests__/loader.test.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import toJson from 'enzyme-to-json';
-
-import Loader from '../loader';
-
-describe('Loader', () => {
-  const component = shallow(<Loader />);
-
-  it('renders correctly', () => {
-    expect(toJson(component)).toMatchSnapshot();
-  });
-});

src/components/__tests__/markdown.test.js

@@ -1,214 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import toJson from 'enzyme-to-json';
-
-import Markdown from '../markdown';
-
-describe('Markdown', () => {
-  const props = {
-    data: {
-      ama: '',
-      badgeColor: '0e75b6',
-      badgeLabel: 'Profile views',
-      badgeStyle: 'flat',
-      collaborateOn: '',
-      contact: '',
-      currentLearn: '',
-      currentWork: 'currentWork',
-      devDynamicBlogs: false,
-      funFact: '',
-      githubProfileTrophy: false,
-      githubStats: false,
-      githubStatsOptions: {
-        bgColor: '',
-        cacheSeconds: null,
-        hideBorder: false,
-        locale: 'en',
-        textColor: '',
-        theme: '',
-        titleColor: '',
-      },
-      helpWith: '',
-      mediumDynamicBlogs: false,
-      rssDynamicBlogs: false,
-      subtitle: 'A passionate frontend developer from India',
-      title: 'title',
-      topLanguages: false,
-      topLanguagesOptions: {
-        bgColor: '',
-        cacheSeconds: null,
-        hideBorder: false,
-        locale: 'en',
-        textColor: '',
-        theme: '',
-        titleColor: '',
-      },
-      twitterBadge: false,
-      visitorsBadge: false,
-    },
-    link: {
-      blog: 'blog',
-      collaborateOn: 'collaborateOn',
-      currentWork: 'currentWork',
-      helpWith: 'helpWith',
-      portfolio: 'portfolio',
-      resume: 'resume',
-    },
-    prefix: {
-      ama: '💬 Ask me about',
-      blog: '📝 I regularly write articles on',
-      collaborateOn: '👯 I’m looking to collaborate on',
-      contact: '📫 How to reach me',
-      currentLearn: '🌱 I’m currently learning',
-      currentWork: '🔭 I’m currently working on',
-      funFact: '⚡ Fun fact',
-      helpWith: '🤝 I’m looking for help with',
-      portfolio: '👨‍💻 All of my projects are available at',
-      resume: '📄 Know about my experiences',
-      title: "Hi 👋, I'm",
-    },
-    skills: {
-      javascript: true,
-      express: false,
-    },
-    social: {
-      dev: 'dev',
-      codechef: '',
-    },
-  };
-
-  it('renders without subtitle', () => {
-    const component = shallow(
-      <Markdown
-        {...props}
-        data={{
-          ...props.data,
-          subtitle: '',
-        }}
-      />
-    );
-    expect(toJson(component)).toMatchSnapshot();
-  });
-
-  it('renders without prefix.title and data.title', () => {
-    const component = shallow(
-      <Markdown
-        {...props}
-        data={{
-          ...props.data,
-          title: '',
-        }}
-        prefix={{
-          ...props.prefix,
-          title: '',
-        }}
-      />
-    );
-    expect(toJson(component)).toMatchSnapshot();
-  });
-
-  it('renders topLanguages is true', () => {
-    const component = shallow(
-      <Markdown
-        {...props}
-        data={{
-          ...props.data,
-          topLanguages: true,
-        }}
-      />
-    );
-    expect(toJson(component)).toMatchSnapshot();
-  });
-
-  it('renders topLanguages is true and githubStats is true', () => {
-    const component = shallow(
-      <Markdown
-        {...props}
-        data={{
-          ...props.data,
-          topLanguages: true,
-          githubStats: true,
-        }}
-      />
-    );
-    expect(toJson(component)).toMatchSnapshot();
-  });
-
-  it('renders devDynamicBlogs is true', () => {
-    const component = shallow(
-      <Markdown
-        {...props}
-        data={{
-          ...props.data,
-          devDynamicBlogs: true,
-        }}
-      />
-    );
-    expect(toJson(component)).toMatchSnapshot();
-  });
-
-  it('renders without link.currentWork', () => {
-    const component = shallow(
-      <Markdown
-        {...props}
-        link={{
-          ...props.data,
-          currentWork: '',
-        }}
-      />
-    );
-    expect(toJson(component)).toMatchSnapshot();
-  });
-
-  it('renders visitorsBadge is true', () => {
-    const component = shallow(
-      <Markdown
-        {...props}
-        data={{
-          ...props.data,
-          visitorsBadge: true,
-        }}
-      />
-    );
-    expect(toJson(component)).toMatchSnapshot();
-  });
-
-  it('renders twitterBadge is true', () => {
-    const component = shallow(
-      <Markdown
-        {...props}
-        data={{
-          ...props.data,
-          twitterBadge: true,
-        }}
-      />
-    );
-    expect(toJson(component)).toMatchSnapshot();
-  });
-
-  it('renders githubProfileTrophy is true', () => {
-    const component = shallow(
-      <Markdown
-        {...props}
-        data={{
-          ...props.data,
-          githubProfileTrophy: true,
-        }}
-      />
-    );
-    expect(toJson(component)).toMatchSnapshot();
-  });
-
-  it('renders githubProfileTrophy is true', () => {
-    const component = shallow(
-      <Markdown
-        {...props}
-        data={{
-          ...props.data,
-          githubProfileTrophy: true,
-        }}
-      />
-    );
-    expect(toJson(component)).toMatchSnapshot();
-  });
-});

src/components/__tests__/markdownPreview.test.js

@@ -1,404 +0,0 @@
-import React from 'react';
-import { shallow, configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-import MarkdownPreview, {
-  GithubProfileTrophyPreview,
-  GitHubStatsPreview,
-  SkillsPreview,
-  SocialPreview,
-  SubTitlePreview,
-  TitlePreview,
-  TopLanguagesPreview,
-  TwitterBadgePreview,
-  VisitorsBadgePreview,
-  WorkPreview,
-  SectionTitle,
-  DisplayWork,
-  DisplaySocial,
-} from '../markdownPreview';
-
-configure({ adapter: new Adapter() });
-
-const DEFAULT_PREFIX = {
-  title: "Hi 👋, I'm",
-  currentWork: '🔭 I’m currently working on',
-  currentLearn: '🌱 I’m currently learning',
-  collaborateOn: '👯 I’m looking to collaborate on',
-  helpWith: '🤝 I’m looking for help with',
-  ama: '💬 Ask me about',
-  contact: '📫 How to reach me',
-  resume: '📄 Know about my experiences',
-  funFact: '⚡ Fun fact',
-  portfolio: '👨‍💻 All of my projects are available at',
-  blog: '📝 I regularly write articles on',
-};
-
-const DEFAULT_DATA = {
-  title: 'dummy',
-  subtitle: 'A passionate frontend developer from India',
-  currentWork: 'readme-generator',
-  currentLearn: '',
-  collaborateOn: '',
-  helpWith: '',
-  ama: '',
-  contact: '',
-  funFact: '',
-  twitterBadge: false,
-  visitorsBadge: false,
-  badgeStyle: 'flat',
-  badgeColor: '0e75b6',
-  badgeLabel: 'Profile views',
-  githubProfileTrophy: false,
-  githubStats: false,
-  githubStatsOptions: {
-    theme: '',
-    titleColor: '',
-    textColor: '',
-    bgColor: '',
-    hideBorder: false,
-    cacheSeconds: null,
-    locale: 'en',
-  },
-  topLanguages: false,
-  topLanguagesOptions: {
-    theme: '',
-    titleColor: '',
-    textColor: '',
-    bgColor: '',
-    hideBorder: false,
-    cacheSeconds: null,
-    locale: 'en',
-  },
-  devDynamicBlogs: false,
-  mediumDynamicBlogs: false,
-  rssDynamicBlogs: false,
-};
-
-const DEFAULT_LINK = {
-  currentWork: 'https://dummy.com',
-  collaborateOn: '',
-  helpWith: '',
-  portfolio: '',
-  blog: '',
-  resume: '',
-};
-
-const DEFAULT_SOCIAL = {
-  github: '',
-  dev: '',
-  linkedin: '',
-  codepen: 'dummy',
-  stackoverflow: '',
-  kaggle: '',
-  codesandbox: '',
-  fb: '',
-  instagram: '',
-  twitter: '',
-  dribbble: '',
-  behance: '',
-  medium: '',
-  youtube: '',
-  codechef: '',
-  hackerrank: '',
-  codeforces: '',
-  leetcode: '',
-  topcoder: '',
-  hackerearth: '',
-  geeks_for_geeks: '',
-  discord: '',
-  rssurl: '',
-};
-
-const DUMMY_SKILLS = {
-  skills: {
-    unity: true,
-    android: false,
-    angularjs: false,
-    apachecordova: false,
-  },
-};
-
-describe('Markdown Preview', () => {
-  it('renders correctly', () => {
-    let prefix = DEFAULT_PREFIX;
-    let data = DEFAULT_DATA;
-    let link = DEFAULT_LINK;
-    let social = DEFAULT_SOCIAL;
-    let skills = {};
-    const tree = shallow(<MarkdownPreview prefix={prefix} data={data} link={link} social={social} skills={skills} />);
-
-    expect(tree).toMatchSnapshot();
-  });
-});
-describe('Title Preview', () => {
-  it('renders correctly', () => {
-    let prefix = DEFAULT_PREFIX;
-    let data = DEFAULT_DATA;
-    const tree = shallow(<TitlePreview prefix={prefix.title} title={data.title} />);
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('renders correctly with no prefix', () => {
-    let prefix = DEFAULT_PREFIX;
-    const tree = shallow(<TitlePreview prefix={prefix.title} title={''} />);
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('renders correctly with no title', () => {
-    let data = DEFAULT_DATA;
-    const tree = shallow(<TitlePreview title={data.title} prefix={''} />);
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('renders correctly with no title and prefix', () => {
-    const tree = shallow(<TitlePreview />);
-
-    expect(tree).toMatchSnapshot();
-  });
-});
-describe('SubTitle Preview', () => {
-  it('renders correctly', () => {
-    let data = DEFAULT_DATA;
-    const tree = shallow(<SubTitlePreview subtitle={data.subtitle} />);
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('renders correctly with no subtitle', () => {
-    const tree = shallow(<SubTitlePreview subtitle={''} />);
-
-    expect(tree).toMatchSnapshot();
-  });
-});
-describe('SectionTitle Preview', () => {
-  it('renders correctly', () => {
-    const tree = shallow(<SectionTitle visible={true} label={'dummy'} />);
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('renders correctly with no label', () => {
-    const tree = shallow(<SectionTitle visible={true} label={''} />);
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('renders correctly with visible false', () => {
-    const tree = shallow(<SectionTitle visible={false} label={'dummy'} />);
-
-    expect(tree).toMatchSnapshot();
-  });
-});
-describe('DisplayWork Preview', () => {
-  it('renders correctly', () => {
-    let prefix = DEFAULT_PREFIX;
-    let data = DEFAULT_DATA;
-    let link = DEFAULT_LINK;
-    const tree = shallow(<DisplayWork prefix={prefix} project={data.currentWork} link={link.currentWork} />);
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('renders correctly with no prefix, link and project', () => {
-    const tree = shallow(<DisplayWork prefix={undefined} project={undefined} link={undefined} />);
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('renders correctly with no prefix', () => {
-    let data = DEFAULT_DATA;
-    let link = DEFAULT_LINK;
-    const tree = shallow(<DisplayWork prefix={undefined} project={data.currentWork} link={link.currentWork} />);
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('renders correctly with no project', () => {
-    let prefix = DEFAULT_PREFIX;
-    let link = DEFAULT_LINK;
-    const tree = shallow(<DisplayWork prefix={prefix} project={undefined} link={link.currentWork} />);
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('renders correctly with no link', () => {
-    let prefix = DEFAULT_PREFIX;
-    let data = DEFAULT_DATA;
-    const tree = shallow(<DisplayWork prefix={prefix} project={data.currentWork} link={undefined} />);
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('renders correctly with no prefix and link', () => {
-    let data = DEFAULT_DATA;
-    const tree = shallow(<DisplayWork project={data.currentWork} />);
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('renders correctly with no project and link', () => {
-    let prefix = DEFAULT_PREFIX;
-    const tree = shallow(<DisplayWork prefix={prefix} />);
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('renders correctly with no project and prefix', () => {
-    let link = DEFAULT_LINK;
-    const tree = shallow(<DisplayWork link={link.currentWork} />);
-
-    expect(tree).toMatchSnapshot();
-  });
-});
-describe('DisplaySocial Preview', () => {
-  it('renders correctly', () => {
-    let social = DEFAULT_SOCIAL;
-    const tree = shallow(
-      <DisplaySocial
-        base="https://codepen.io"
-        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
-        username={social.codepen}
-      />
-    );
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('renders correctly with no username', () => {
-    const tree = shallow(
-      <DisplaySocial
-        base="https://codepen.io"
-        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
-        username={''}
-      />
-    );
-
-    expect(tree).toMatchSnapshot();
-  });
-});
-describe('VisitorsBadge Preview', () => {
-  it('renders correctly', () => {
-    let data = DEFAULT_DATA;
-    let social = DEFAULT_SOCIAL;
-    const tree = shallow(
-      <VisitorsBadgePreview
-        show={data.visitorsBadge}
-        github={social.github}
-        badgeOptions={{
-          badgeLabel: encodeURI(data.badgeLabel),
-          badgeColor: data.badgeColor,
-          badgeStyle: data.badgeStyle,
-        }}
-      />
-    );
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('renders correctly with show true', () => {
-    let data = DEFAULT_DATA;
-    let social = DEFAULT_SOCIAL;
-    const tree = shallow(
-      <VisitorsBadgePreview
-        show={true}
-        github={social.github}
-        badgeOptions={{
-          badgeLabel: encodeURI(data.badgeLabel),
-          badgeColor: data.badgeColor,
-          badgeStyle: data.badgeStyle,
-        }}
-      />
-    );
-
-    expect(tree).toMatchSnapshot();
-  });
-});
-describe('GithubProfileTrophy Preview', () => {
-  it('renders correctly', () => {
-    let data = DEFAULT_DATA;
-    let social = DEFAULT_SOCIAL;
-    const tree = shallow(<GithubProfileTrophyPreview show={data.githubProfileTrophy} github={social.github} />);
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('renders correctly with show true', () => {
-    let data = DEFAULT_DATA;
-    let social = DEFAULT_SOCIAL;
-    const tree = shallow(<GithubProfileTrophyPreview show={true} github={social.github} />);
-
-    expect(tree).toMatchSnapshot();
-  });
-});
-describe('TwitterBadgePreview Preview', () => {
-  it('renders correctly', () => {
-    let data = DEFAULT_DATA;
-    let social = DEFAULT_SOCIAL;
-    const tree = shallow(<TwitterBadgePreview show={data.twitterBadge} twitter={social.twitter} />);
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('renders correctly with show true', () => {
-    let data = DEFAULT_DATA;
-    let social = DEFAULT_SOCIAL;
-    const tree = shallow(<TwitterBadgePreview show={true} twitter={social.twitter} />);
-
-    expect(tree).toMatchSnapshot();
-  });
-});
-describe('Work Preview', () => {
-  it('renders correctly', () => {
-    let data = DEFAULT_DATA;
-    let prefix = DEFAULT_PREFIX;
-    let link = DEFAULT_LINK;
-    let props = { data: data, prefix: prefix, link: link };
-    const tree = shallow(<WorkPreview work={props} />);
-
-    expect(tree).toMatchSnapshot();
-  });
-});
-describe('Social Preview', () => {
-  it('renders correctly', () => {
-    let social = DEFAULT_SOCIAL;
-    const tree = shallow(<SocialPreview social={social} />);
-
-    expect(tree).toMatchSnapshot();
-  });
-});
-describe('Skills Preview', () => {
-  it('renders correctly', () => {
-    let skills = DUMMY_SKILLS.skills;
-    const tree = shallow(<SkillsPreview skills={skills} />);
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('renders correctly with no skills', () => {
-    let skills = {};
-    const tree = shallow(<SkillsPreview skills={skills} />);
-
-    expect(tree).toMatchSnapshot();
-  });
-});
-describe('TopLanguages Preview', () => {
-  it('renders correctly', () => {
-    let data = DEFAULT_DATA;
-    let social = DEFAULT_SOCIAL;
-    const tree = shallow(
-      <TopLanguagesPreview show={data.topLanguages} github={social.github} options={data.topLanguagesOptions} />
-    );
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('renders correctly with show true', () => {
-    let data = DEFAULT_DATA;
-    let social = DEFAULT_SOCIAL;
-    const tree = shallow(<TopLanguagesPreview show={true} github={social.github} options={data.topLanguagesOptions} />);
-
-    expect(tree).toMatchSnapshot();
-  });
-});
-describe('GitHubStats Preview', () => {
-  it('renders correctly', () => {
-    let data = DEFAULT_DATA;
-    let social = DEFAULT_SOCIAL;
-    const tree = shallow(
-      <GitHubStatsPreview show={data.githubStats} github={social.github} options={data.githubStatsOptions} />
-    );
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('renders correctly', () => {
-    let data = DEFAULT_DATA;
-    let social = DEFAULT_SOCIAL;
-    const tree = shallow(<GitHubStatsPreview show={true} github={social.github} options={data.githubStatsOptions} />);
-
-    expect(tree).toMatchSnapshot();
-  });
-});

src/components/__tests__/skills.test.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import toJson from 'enzyme-to-json';
-
-import Skills from '../skills';
-
-jest.mock('../../constants/skills', () => ({
-  __esModule: true,
-  categorizedSkills: {
-    language: {
-      title: 'Programming Languages',
-      skills: ['javascript'],
-    },
-    frontend_dev: {
-      title: 'Frontend Development',
-      skills: ['react', 'svelte'],
-    },
-  },
-  icons: {
-    javascript: 'javascript.svg',
-    react: 'react.svg',
-    svelte: 'svelte.svg',
-  },
-}));
-
-describe('Skills', () => {
-  it('renders correctly', () => {
-    const component = shallow(<Skills skills={{ javascript: true }} />);
-    expect(toJson(component)).toMatchSnapshot();
-  });
-
-  it('calls handleSkillsChange prop when a skill is clicked', () => {
-    const mockFn = jest.fn();
-    const component = shallow(<Skills skills={{ javascript: true }} handleSkillsChange={mockFn} />);
-
-    component.find('#javascript').simulate('change');
-
-    expect(mockFn).toHaveBeenCalledTimes(1);
-  });
-});

src/components/__tests__/social.test.js

@@ -1,44 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import toJson from 'enzyme-to-json';
-
-import Social from '../social';
-
-describe('Social', () => {
-  const mockEvent = { target: { value: 'This is a mock event' } };
-  const props = {
-    social: {
-      github: 'github ',
-      twitter: 'twitter',
-      dev: 'dev',
-      codepen: 'codepen',
-      codesandbox: 'codesandbodx',
-      stackoverflow: 'stackoverflow',
-      linkedin: 'linkedin',
-      kaggle: 'kaggle',
-      fb: 'fb',
-      instagram: 'instagram',
-      dribble: 'dribble',
-      behance: 'behance',
-      medium: 'medium',
-      youtube: 'youtube',
-      codechef: 'codechef',
-      hackerrack: 'hackerranck',
-      codeforces: 'codeforces',
-      leetcode: 'leetcode',
-      topcoder: 'topcoder',
-      hackerearth: '@hackerearth',
-      geeks_for_geeks: 'geeks_for_geeks',
-      discord: 'discord',
-      rssurl: 'rssurl',
-    },
-    handleSocialChange: jest.fn().mockReturnValue({}),
-  };
-  it('renders correctly', () => {
-    const component = shallow(<Social {...props} />);
-    for (let i = 0; i < component.find('input').length; i++) {
-      component.find('input').at(i).simulate('change', mockEvent);
-    }
-    expect(toJson(component)).toMatchSnapshot();
-  });
-});

src/components/__tests__/subtitle.test.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import toJson from 'enzyme-to-json';
-
-import Subtitle from '../subtitle';
-
-describe('Subtitle', () => {
-  const mockEvent = { target: { value: 'This is a mock event' } };
-  const props = {
-    data: {
-      subtitle: 'A frontend developer',
-    },
-    handleDataChange: jest.fn().mockReturnValue({}),
-  };
-
-  const component = shallow(<Subtitle {...props} />);
-
-  it('renders correctly', () => {
-    expect(toJson(component)).toMatchSnapshot();
-  });
-
-  it('calls onChange', () => {
-    component.find('input').at(0).simulate('change', mockEvent);
-    expect(props.handleDataChange).toBeCalledWith('subtitle', mockEvent);
-  });
-});

src/components/__tests__/title.test.js

@@ -1,27 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import toJson from 'enzyme-to-json';
-
-import Title from '../title';
-
-describe('Title', () => {
-  const mockEvent = { target: { value: 'This is a mock event' } };
-  const props = {
-    prefix: {
-      title: 'test_title',
-      currentWork: 'test_currentwork',
-    },
-    data: { title: 'test_data' },
-    link: { currentWork: 'test_currentwork' },
-    handlePrefixChange: jest.fn().mockReturnValue({}),
-    handleLinkChange: jest.fn().mockReturnValue({}),
-    handleDataChange: jest.fn().mockReturnValue({}),
-  };
-
-  it('renders title component correctly', () => {
-    const component = shallow(<Title {...props} />);
-    component.find('input').at(0).simulate('change', mockEvent);
-    component.find('input').at(1).simulate('change', mockEvent);
-    expect(toJson(component)).toMatchSnapshot();
-  });
-});

src/components/__tests__/work.test.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import toJson from 'enzyme-to-json';
-
-import Work from '../work';
-
-describe('Work', () => {
-  const mockEvent = { target: { value: 'This is a mock event' } };
-  const props = {
-    prefix: {
-      title: 'test_title',
-      currentWork: 'test_currentwork',
-    },
-    data: { title: 'test_data' },
-    link: { currentWork: 'test_currentwork' },
-    handlePrefixChange: jest.fn().mockReturnValue({}),
-    handleLinkChange: jest.fn().mockReturnValue({}),
-    handleDataChange: jest.fn().mockReturnValue({}),
-  };
-
-  it('renders work component correctly', () => {
-    const component = shallow(<Work {...props} />);
-    for (let i = 0; i < component.find('input').length; i++) {
-      component.find('input').at(i).simulate('change', mockEvent);
-    }
-    expect(toJson(component)).toMatchSnapshot();
-  });
-});

src/components/addons.js

@@ -0,0 +1,143 @@
+import React 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,
+      },
+      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)
+  }
+  return (
+    <div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10">
+      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">
+        Add-ons
+      </div>
+      <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
+        <label htmlFor="visitors-count" className="cursor-pointer">
+          <input
+            type="checkbox"
+            id="visitors-count"
+            checked={props.data.visitorsBadge}
+            onChange={event => props.handleCheckChange("visitorsBadge")}
+          />
+          &nbsp; display visitors count badge
+        </label>
+      </div>
+      <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
+        <label htmlFor="github-stats" className="cursor-pointer">
+          <input
+            id="github-stats"
+            type="checkbox"
+            checked={props.data.githubStats}
+            onChange={event => props.handleCheckChange("githubStats")}
+          />
+          &nbsp; display github profile stats card
+        </label>
+      </div>
+      <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
+        <label htmlFor="top-languages" className="cursor-pointer">
+          <input
+            id="top-languages"
+            type="checkbox"
+            checked={props.data.topLanguages}
+            onChange={event => props.handleCheckChange("topLanguages")}
+          />
+          &nbsp; display top skills
+        </label>
+      </div>
+      <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
+        <label htmlFor="dev-dynamic-blogs" className="cursor-pointer">
+          <input
+            id="dev-dynamic-blogs"
+            type="checkbox"
+            checked={props.data.devDynamicBlogs}
+            onChange={event => props.handleCheckChange("devDynamicBlogs")}
+          />
+          &nbsp; display latest dev.to blogs dynamically (GitHub Action)
+        </label>
+      </div>
+      <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
+        <label htmlFor="medium-dynamic-blogs" className="cursor-pointer">
+          <input
+            id="medium-dynamic-blogs"
+            type="checkbox"
+            checked={props.data.mediumDynamicBlogs}
+            onChange={event => props.handleCheckChange("mediumDynamicBlogs")}
+          />
+          &nbsp; display latest medium blogs dynamically (GitHub Action)
+        </label>
+      </div>
+      <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
+        <label htmlFor="rss-dynamic-blogs" className="cursor-pointer">
+          <input
+            id="rss-dynamic-blogs"
+            type="checkbox"
+            checked={props.data.rssDynamicBlogs}
+            onChange={event => props.handleCheckChange("rssDynamicBlogs")}
+          />
+          &nbsp; display latest blogs from your personal blog dynamically
+          (GitHub Action)
+        </label>
+      </div>
+
+      {(props.data.devDynamicBlogs && props.social.dev) ||
+      (props.data.rssDynamicBlogs && props.social.rssurl) ||
+      (props.data.mediumDynamicBlogs &&
+        props.social.medium &&
+        isMediumUsernameValid(props.social.medium)) ? (
+        <div className="workflow">
+          <div>
+            download
+            <span
+              onClick={blogPostPorkflow}
+              role="button"
+              tabIndex="0"
+              style={{ cursor: "pointer", color: "#002ead" }}
+            >
+              {" "}
+              blog-post-workflow.yml
+            </span>{" "}
+            file(learn
+            <a
+              href={withPrefix(links.addons)}
+              target="blank"
+              style={{ color: "#002ead" }}
+            >
+              {" "}
+              how to setup
+            </a>
+            )
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+    </div>
+  )
+}
+
+export default Addons

src/components/addons.jsx

@@ -1,320 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { withPrefix } from 'gatsby';
-import { ToolsIcon, XCircleIcon } from '@primer/octicons-react';
-import latestBlogs from '../utils/workflows';
-import links from '../constants/page-links';
-import { isMediumUsernameValid, isGitHubUsernameValid } from '../utils/validation';
-
-const AddonsItem = (props) => {
-  const { inputId, inputChecked, onInputChange, Options, children } = props;
-  const [open, setOpen] = useState(false);
-  const Icon = open ? XCircleIcon : ToolsIcon;
-
-  return (
-    <>
-      <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
-        <label htmlFor={inputId} className="checkbox-label flex items-center">
-          <input id={inputId} type="checkbox" className="checkbox-label__input" checked={inputChecked} onChange={onInputChange} />
-          <span className="checkbox-label__control" />
-          <span className="pl-4">{children}</span>
-        </label>
-        {Options && (
-          <button type="button" id={`${inputId}-open-btn`} onClick={() => setOpen(!open)} className="flex ml-3 focus:bg-gray-400" style={{ outline: 'none' }}>
-            <Icon className="transform scale-100 md:scale-125" />
-          </button>
-        )}
-      </div>
-      {Options && open && Options}
-    </>
-  );
-};
-AddonsItem.propTypes = {
-  inputId: PropTypes.string.isRequired,
-  inputChecked: PropTypes.bool.isRequired,
-  onInputChange: PropTypes.func.isRequired,
-  Options: PropTypes.element.isRequired,
-  children: PropTypes.element.isRequired,
-};
-
-const CustomizeOptions = ({ title, CustomizationOptions }) => (
-  <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">{title}</header>
-    <hr className="border-gray-500" />
-    <div className="text-sm sm:text-lg flex flex-col mt-2 ml-0 md:ml-4">{CustomizationOptions}</div>
-  </div>
-);
-CustomizeOptions.propTypes = {
-  title: PropTypes.string.isRequired,
-  CustomizationOptions: PropTypes.element.isRequired,
-};
-
-const CustomizeBadge = ({ githubName, badgeOptions, onBadgeUpdate }) => (
-  <>
-    <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}`} alt="profile-visitors-count" /> : <span className="text-xxs md:text-sm text-red-600">Invalid GitHub username</span>}
-    </span>
-  </>
-);
-CustomizeBadge.propTypes = {
-  githubName: PropTypes.string.isRequired,
-  badgeOptions: PropTypes.object.isRequired,
-  onBadgeUpdate: PropTypes.func.isRequired,
-};
-
-const CustomizeGithubStatsBase = ({ prefix, options, onUpdate }) => (
-  <>
-    <label htmlFor={`${prefix}-theme`}>
-      Theme:&nbsp;
-      <select id={`${prefix}-theme`} onChange={({ target: { value } }) => onUpdate('theme', value)} defaultValue={options.theme}>
-        <option value="none">none</option>
-        <option value="dark">Dark</option>
-        <option value="radical">Radical</option>
-        <option value="merko">Merko</option>
-        <option value="gruvbox">Gruvbox</option>
-        <option value="tokyonight">Tokyonight</option>
-        <option value="onedark">Onedark</option>
-        <option value="cobalt">Cobalt</option>
-        <option value="synthwave">Synthwave</option>
-        <option value="highcontrast">Highcontrast</option>
-        <option value="dracula">Dracula</option>
-      </select>
-    </label>
-    <label htmlFor={`${prefix}-title-color`}>
-      Title Color:&nbsp;
-      <input type="color" id={`${prefix}-title-color`} defaultValue={`#${options.titleColor}`} className="w-6" onChange={(e) => onUpdate('titleColor', e.target.value.replace('#', ''))} />
-    </label>
-    <label htmlFor={`${prefix}-text-color`}>
-      Text Color:&nbsp;
-      <input type="color" id={`${prefix}-text-color`} defaultValue={`#${options.textColor}`} className="w-6" onChange={(e) => onUpdate('textColor', e.target.value.replace('#', ''))} />
-    </label>
-    <label htmlFor={`${prefix}-bg-color`}>
-      Background Color:&nbsp;
-      <input type="color" id={`${prefix}-bg-color`} defaultValue={`#${options.bgColor}`} className="w-6" onChange={(e) => onUpdate('bgColor', e.target.value.replace('#', ''))} />
-    </label>
-    <label htmlFor={`${prefix}-hide-border`} className="checkbox-label">
-      Hide border:&nbsp;
-      <input id={`${prefix}-hide-border`} type="checkbox" className="checkbox-label__input" checked={options.hideBorder} onChange={(e) => onUpdate('hideBorder', e.target.checked)} />
-      <span className="checkbox-label__control" />
-    </label>
-    <label htmlFor={`${prefix}-cache-seconds`}>
-      Cache Seconds:&nbsp;
-      <input id={`${prefix}-cache-seconds`} type="number" min={1800} max={86400} placeholder={1800} defaultValue={options.cacheSeconds} onChange={(e) => onUpdate('cacheSeconds', e.target.value)} />
-    </label>
-    <label htmlFor={`${prefix}-locale`}>
-      Locale:&nbsp;
-      <input id={`${prefix}-locale`} type="text" placeholder="en" defaultValue={options.locale} onChange={(e) => onUpdate('locale', e.target.value)} size="2" />
-    </label>
-  </>
-);
-CustomizeGithubStatsBase.propTypes = {
-  prefix: PropTypes.string.isRequired,
-  options: PropTypes.object.isRequired,
-  onUpdate: PropTypes.func.isRequired,
-};
-
-const CustomizeStreakStats = ({ prefix, options, onUpdate }) => (
-  <>
-    <label htmlFor={`${prefix}-theme`}>
-      Theme:&nbsp;
-      <select id={`${prefix}-theme`} onChange={({ target: { value } }) => onUpdate('theme', value)} defaultValue={options.theme}>
-        <option value="default">default</option>
-        <option value="dark">dark</option>
-        <option value="highcontrast">highcontrast</option>
-      </select>
-    </label>
-  </>
-);
-CustomizeStreakStats.propTypes = {
-  prefix: PropTypes.string.isRequired,
-  options: PropTypes.object.isRequired,
-  onUpdate: PropTypes.func.isRequired,
-};
-
-const Addons = (props) => {
-  const { data, social, handleDataChange, handleCheckChange } = props;
-  const [debounce, setDebounce] = useState(undefined);
-  const [badgeOptions, setBadgeOptions] = useState({
-    badgeStyle: data.badgeStyle,
-    badgeColor: data.badgeColor,
-    badgeLabel: data.badgeLabel,
-  });
-
-  useEffect(() => {
-    setBadgeOptions({
-      badgeStyle: data.badgeStyle,
-      badgeColor: data.badgeColor,
-      badgeLabel: data.badgeLabel,
-    });
-  }, [data.badgeStyle, data.badgeColor, data.badgeLabel]);
-
-  const [githubStatsOptions, setGithubStatsOptions] = useState({
-    ...data.githubStatsOptions,
-  });
-
-  useEffect(() => {
-    setGithubStatsOptions({
-      ...data.githubStatsOptions,
-    });
-  }, [data.githubStatsOptions]);
-
-  const [topLanguagesOptions, setTopLanguagesOptions] = useState({
-    ...data.topLanguagesOptions,
-  });
-
-  useEffect(() => {
-    setTopLanguagesOptions({
-      ...data.topLanguagesOptions,
-    });
-  }, [data.topLanguagesOptions]);
-
-  const [streakStatsOptions, setStreakStatsOptions] = useState({
-    ...data.streakStatsOptions,
-  });
-
-  useEffect(() => {
-    setStreakStatsOptions({
-      ...data.streakStatsOptions,
-    });
-  }, [data.streakStatsOptions]);
-
-  const blogPostPorkflow = () => {
-    const payload = {
-      dev: {
-        show: data.devDynamicBlogs,
-        username: social.dev,
-      },
-      medium: {
-        show: data.mediumDynamicBlogs,
-        username: social.medium,
-      },
-      rssurl: {
-        show: data.rssDynamicBlogs,
-        username: social.rssurl,
-      },
-    };
-    const actionContent = latestBlogs(payload);
-    const 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 onBadgeUpdate = (option, value) => {
-    const callback = () => {
-      const newVal = option === 'badgeLabel' && value === '' ? 'Profile views' : value;
-      setBadgeOptions({ ...badgeOptions, [option]: newVal });
-      handleDataChange(option, { target: { value: newVal } });
-    };
-    clearTimeout(debounce);
-    setDebounce(setTimeout(callback, 300));
-  };
-
-  const onStatsUpdate = (option, value) => {
-    const newStatsOptions = { ...githubStatsOptions, [option]: value };
-    setGithubStatsOptions(newStatsOptions);
-    handleDataChange('githubStatsOptions', {
-      target: { value: newStatsOptions },
-    });
-  };
-
-  const onTopLangUpdate = (option, value) => {
-    const newLangOptions = { ...topLanguagesOptions, [option]: value };
-    setTopLanguagesOptions(newLangOptions);
-    handleDataChange('topLanguagesOptions', {
-      target: { value: newLangOptions },
-    });
-  };
-
-  const onStreakStatsUpdate = (option, value) => {
-    const newStreakStatsOptions = { ...streakStatsOptions, [option]: value };
-    setStreakStatsOptions(newStreakStatsOptions);
-    handleDataChange('streakStatsOptions', {
-      target: { value: newStreakStatsOptions },
-    });
-  };
-
-  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={data.visitorsBadge} onInputChange={() => handleCheckChange('visitorsBadge')} Options={<CustomizeOptions title="Customize Badge" CustomizationOptions={<CustomizeBadge githubName={social.github} badgeOptions={badgeOptions} onBadgeUpdate={onBadgeUpdate} />} />}>
-        display visitors count badge
-      </AddonsItem>
-      <AddonsItem inputId="github-profile-trophy" inputChecked={data.githubProfileTrophy} onInputChange={() => handleCheckChange('githubProfileTrophy')}>
-        display github trophy
-      </AddonsItem>
-      <AddonsItem inputId="github-stats" inputChecked={data.githubStats} onInputChange={() => handleCheckChange('githubStats')} Options={<CustomizeOptions title="Customize Github Stats Card" CustomizationOptions={<CustomizeGithubStatsBase prefix="stats" options={githubStatsOptions} onUpdate={onStatsUpdate} />} />}>
-        display github profile stats card
-      </AddonsItem>
-      <AddonsItem inputId="top-languages" inputChecked={data.topLanguages} onInputChange={() => handleCheckChange('topLanguages')} Options={<CustomizeOptions title="Customize Top Skills Card" CustomizationOptions={<CustomizeGithubStatsBase prefix="top-lang" options={topLanguagesOptions} onUpdate={onTopLangUpdate} />} />}>
-        display top skills
-      </AddonsItem>
-      <AddonsItem inputId="streak-stats" inputChecked={data.streakStats} onInputChange={() => handleCheckChange('streakStats')} Options={<CustomizeOptions title="Customize Streak Stats Card" CustomizationOptions={<CustomizeStreakStats prefix="streak-stats" options={streakStatsOptions} onUpdate={onStreakStatsUpdate} />} />}>
-        display github streak stats
-      </AddonsItem>
-      <AddonsItem inputId="twitter-badge" inputChecked={data.twitterBadge} onInputChange={() => handleCheckChange('twitterBadge')}>
-        display twitter badge
-      </AddonsItem>
-      <AddonsItem inputId="dev-dynamic-blogs" inputChecked={data.devDynamicBlogs} onInputChange={() => handleCheckChange('devDynamicBlogs')}>
-        display latest dev.to blogs dynamically (GitHub Action)
-      </AddonsItem>
-      <AddonsItem inputId="medium-dynamic-blogs" inputChecked={data.mediumDynamicBlogs} onInputChange={() => handleCheckChange('mediumDynamicBlogs')}>
-        display latest medium blogs dynamically (GitHub Action)
-      </AddonsItem>
-      <AddonsItem inputId="rss-dynamic-blogs" inputChecked={data.rssDynamicBlogs} onInputChange={() => handleCheckChange('rssDynamicBlogs')}>
-        display latest blogs from your personal blog dynamically (GitHub Action)
-      </AddonsItem>
-
-      {(data.devDynamicBlogs && social.dev) || (data.rssDynamicBlogs && social.rssurl) || (data.mediumDynamicBlogs && social.medium && isMediumUsernameValid(social.medium)) ? (
-        <div className="workflow">
-          <div>
-            download
-            <span id="blog-post-worklow-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;
-Addons.propTypes = {
-  data: PropTypes.object.isRequired,
-  social: PropTypes.object.isRequired,
-  handleDataChange: PropTypes.func.isRequired,
-  handleCheckChange: PropTypes.func.isRequired,
-};

src/components/donate.js

@@ -0,0 +1,77 @@
+import React from "react"
+const Donate = () => {
+  return (
+    <>
+      <div className="text-center text-4xl my-2">Support 🙏</div>
+      <div className="flex flex-col sm:flex-row items-start justify-between">
+        <div className="w-full sm:w-2/3">
+          <div className="text-2xl mb-2">
+            Are you using the tool and happy with it to create your GitHub
+            Profile?
+          </div>
+          <div className="text-lg">
+            Your kind support keeps open-source tools like this free for others.
+          </div>
+          <div className="mt-4">
+            <a
+              className="flex items-center justify-start w-20"
+              href="https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator"
+            >
+              <img
+                className="w-20"
+                src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator"
+                alt="tweet github profile readme generator"
+              />
+            </a>
+            Let the world know how you feel using this tool. Share with others
+            on twitter.
+          </div>
+        </div>
+        <div className="w-full sm:w-1/3 flex flex-col justify-center items-center">
+          Tip💰
+          {/* Ko-Fi */}
+          <a
+            href="https://ko-fi.com/A0A81XXSX"
+            className="flex items-center justify-evenly bg-red-500 text-white py-2 px-4 my-2"
+            target="_blank"
+          >
+            <img
+              className="w-6 h-6 mr-2"
+              src="https://www.vectorlogo.zone/logos/ko-fi/ko-fi-icon.svg"
+              alt="Buy ko-fi for rahuldkjain"
+            />
+            Buy me a ko-fi
+          </a>
+          {/* Paypal */}
+          <a
+            href="https://www.paypal.me/rahuldkjain/10"
+            className="flex items-center justify-evenly bg-blue-500 text-white py-2 px-4 my-2"
+            target="_blank"
+          >
+            <img
+              className="w-6 h-6 mr-2"
+              src="https://cdn.worldvectorlogo.com/logos/paypal-icon.svg"
+              alt="Donate rahuldkjain via paypal"
+            />
+            Paypal
+          </a>
+          {/* BuyMeACoffee */}
+          <a
+            href="https://www.buymeacoffee.com/rahuldkjain"
+            className="flex items-center justify-evenly bg-orange-500 text-white py-2 px-4 my-2"
+            target="_blank"
+          >
+            <img
+              className="w-6 h-6 mr-2"
+              src="https://www.vectorlogo.zone/logos/buymeacoffee/buymeacoffee-icon.svg"
+              alt="Buy rahuldkjain A Coffee"
+            />
+            Buy me a coffee
+          </a>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Donate

src/components/donate.jsx

@@ -1,54 +0,0 @@
-import React from 'react';
-
-const Donate = () => (
-  <>
-    <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-white-500 text-white py-2 px-4 my-2 border border-solid" target="_blank" rel="noreferrer">
-          <img className="w-32 h-4" src="https://cdn.worldvectorlogo.com/logos/paypal-2.svg" alt="Donate rahuldkjain via paypal" />
-          {/* <img
-              className="w-6 h-6 mr-2"
-              src="https://www.vectorlogo.zone/logos/paypal/paypal-ar21.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;

src/components/footer.js

@@ -0,0 +1,34 @@
+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>
+    </div>
+  )
+}
+export default Footer

src/components/footer.jsx

@@ -1,86 +0,0 @@
-import React from 'react';
-import { Link } from 'gatsby';
-import links from '../constants/page-links';
-import logo from '../images/mdg.png';
-import discord from '../images/Discord-Logo.png';
-
-const Footer = () => (
-  <div className="bg-gray-100 p-4 flex flex-col justify-center items-center shadow-inner mt-2">
-    <div className="w-full flex flex-col sm:flex-row justify-evenly py-2">
-      <div className="sm:ml-0 sm:mr-6 order-last sm:order-none flex">
-        <h1 className="text-base font-bold font-title text-xl sm:text-2xl mt-3 sm:mt-0">
-          <div className="flex sm:flex-col items-start mb-3 sm:mb-0">
-            <img src={logo} className="hidden sm:block h-24" alt="github profile markdown generator logo" />
-            <div className="mr-2 sm:mr-0">
-              GitHub Profile <img src={logo} className="inline sm:hidden h-12" alt="github profile markdown generator logo" />
-              <span className="block sm:inline">README Generator</span>
-            </div>
-          </div>
-        </h1>
-      </div>
-      <div className="text-xl sm:text-base font-light sm:font-normal">
-        <div className="font-title font-bold mb-4 sm:mb-2">
-          <strong>Pages</strong>
-        </div>
-        <div className="ml-2 sm:ml-0">
-          <Link to={links.addons} activeStyle={{ color: '#002ead' }}>
-            Addons
-          </Link>
-        </div>
-        <div className="ml-2 sm:ml-0">
-          <Link to={links.support} activeStyle={{ color: '#002ead' }}>
-            Support
-          </Link>
-        </div>
-        <div className="ml-2 sm:ml-0">
-          <Link to={links.about} activeStyle={{ color: '#002ead' }}>
-            About
-          </Link>
-        </div>
-      </div>
-      <div className="text-xl sm:text-base font-light sm:font-normal">
-        <div className="font-title font-bold my-4 sm:my-0 sm:mb-2">
-          <strong>More</strong>
-        </div>
-        <div className="ml-2 sm:ml-0">
-          <a href="https://github.com/rahuldkjain/github-profile-readme-generator" aria-label="Github rahuldkjain/github-profile-readme-generator" target="blank">
-            Github
-          </a>
-        </div>
-        <div className="ml-2 sm:ml-0">
-          <a href="https://github.com/rahuldkjain/github-profile-readme-generator/releases" aria-label="Releases on Github rahuldkjain/github-profile-readme-generator" target="blank">
-            Releases
-          </a>
-        </div>
-        <div className="ml-2 sm:ml-0">
-          <a href="https://github.com/rahuldkjain/github-profile-readme-generator/issues" aria-label="Issues in rahuldkjain/github-profile-readme-generator" target="blank">
-            Issues
-          </a>
-        </div>
-        <div className="ml-2 sm:ml-0">
-          <a href="https://github.com/rahuldkjain/github-profile-readme-generator/pulls" aria-label="Pull Requests in rahuldkjain/github-profile-readme-generator" target="blank">
-            Pull Requests
-          </a>
-        </div>
-      </div>
-      <div>
-        <div className="font-title font-bold text-xl sm:text-base my-4 sm:my-0 sm:mb-2">
-          <strong>Join Community</strong>
-        </div>
-        <div className="ml-2 sm:ml-0">
-          <a href="https://discord.gg/HHMs7Eg" aria-label="Discord of the community" target="blank">
-            <img src={discord} className="h-12" alt="Discord of the community" />
-          </a>
-        </div>
-      </div>
-    </div>
-    <div className="py-2 mt-2">
-      Developed in India{' '}
-      <span role="img" aria-label="india">
-        {' '}
-        🇮🇳
-      </span>
-    </div>
-  </div>
-);
-export default Footer;

src/components/header.js

@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from "react"
+import { StarIcon, RepoForkedIcon } from "@primer/octicons-react"
+import logo from "../images/mdg.png"
+import links from "../constants/page-links"
+import gsap from "gsap"
+import axios from "axios"
+import { Link } from "gatsby"
+
+const Header = props => {
+  const fetchData = async () => {
+    var response = await axios.get(
+      "https://api.github.com/repos/rahuldkjain/github-profile-readme-generator"
+    )
+
+    const { stargazers_count, forks_count } = response.data
+
+    setstats({
+      starsCount: stargazers_count,
+      forksCount: forks_count,
+    })
+  }
+
+  const [stats, setstats] = useState({
+    starsCount: 0,
+    forksCount: 0,
+  })
+
+  useEffect(() => {
+    fetchData()
+    setInterval(fetchData, 60000)
+
+    gsap.set(".star, .fork", {
+      transformOrigin: "center",
+    })
+    gsap.to(".star, .fork", {
+      rotateZ: "360",
+      duration: 2,
+      ease: "elastic.inOut",
+      repeat: -1,
+      yoyo: true,
+    })
+  }, [])
+
+  return (
+    <div className="shadow flex items-center justify-center flex-col mb-2 py-2">
+      <Link to={links.home}>
+        <h1 className="text-base font-bold font-title sm:text-2xl font-medium text-blue-800 flex justify-center items-center flex-col">
+          <img
+            src={logo}
+            className="w-12 h-12"
+            alt="github profile markdown generator logo"
+          />
+          <div>{props.heading}</div>
+        </h1>
+      </Link>
+      <div className="flex justify-center items-center">
+        <a
+          href="https://github.com/rahuldkjain/github-profile-readme-generator"
+          aria-label="Star rahuldkjain/github-profile-readme-generator on GitHub"
+          target="blank"
+          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>
+          </div>
+        </a>
+        <a
+          href="https://github.com/rahuldkjain/github-profile-readme-generator/fork"
+          aria-label="Fork rahuldkjain/github-profile-readme-generator on GitHub"
+          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>
+          </div>
+        </a>
+      </div>
+    </div>
+  )
+}
+
+export default Header

src/components/header.jsx

@@ -1,86 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import { StarIcon, RepoForkedIcon } from '@primer/octicons-react';
-import gsap from 'gsap';
-import axios from 'axios';
-import { Link } from 'gatsby';
-import { act } from 'react-dom/test-utils';
-import links from '../constants/page-links';
-import logo from '../images/mdg.png';
-
-const Header = (props) => {
-  const { heading } = props;
-  const [stats, setstats] = useState({
-    starsCount: 0,
-    forksCount: 0,
-  });
-
-  const shouldRequestStats = () => {
-    const isFirstRequest = stats.starsCount === 0;
-    const isVisible = window.document.visibilityState === 'visible';
-    const hasFocus = window.document.hasFocus();
-    return isFirstRequest || (isVisible && hasFocus);
-  };
-
-  const fetchData = async () => {
-    if (shouldRequestStats()) {
-      const response = await axios.get('https://api.github.com/repos/rahuldkjain/github-profile-readme-generator');
-
-      const { stargazers_count: stargazersCount, forks_count: forksCount } = response.data;
-
-      act(() =>
-        setstats({
-          starsCount: stargazersCount,
-          forksCount,
-        }),
-      );
-    }
-  };
-  useEffect(() => {
-    fetchData();
-    setInterval(fetchData, 60000);
-
-    gsap.set('.star, .fork', {
-      transformOrigin: 'center',
-    });
-    gsap.to('.star, .fork', {
-      rotateZ: '360',
-      duration: 2,
-      ease: 'elastic.inOut',
-      repeat: -1,
-      yoyo: true,
-    });
-  }, []);
-
-  return (
-    <div className="shadow flex items-center justify-center flex-col mb-2 py-2">
-      <Link to={links.home}>
-        <h1 className="text-base font-bold font-title sm:text-2xl font-medium text-blue-800 flex justify-center items-center flex-col">
-          <img src={logo} className="w-12 h-12" alt="github profile markdown generator logo" />
-          <div>{heading}</div>
-        </h1>
-      </Link>
-      <div className="flex justify-center items-center">
-        <a href="https://github.com/rahuldkjain/github-profile-readme-generator" aria-label="Star rahuldkjain/github-profile-readme-generator on GitHub" target="blank" 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>
-          </div>
-        </a>
-        <a href="https://github.com/rahuldkjain/github-profile-readme-generator/fork" aria-label="Fork rahuldkjain/github-profile-readme-generator on GitHub" 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>
-          </div>
-        </a>
-      </div>
-    </div>
-  );
-};
-
-export default Header;
-Header.propTypes = {
-  heading: PropTypes.string.isRequired,
-};

src/components/layout.js

@@ -0,0 +1,18 @@
+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

src/components/layout.jsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Header from './header';
-import Footer from './footer';
-
-const Layout = ({ children }) => (
-  <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;
-
-Layout.defaultProps = {
-  children: '',
-};
-
-Layout.propTypes = {
-  children: PropTypes.element,
-};

src/components/loader.js

@@ -0,0 +1,49 @@
+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>
+  )
+}
+
+export default Loader

src/components/loader.jsx

@@ -1,80 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-import gsap from 'gsap';
-
-const Loader = () => {
-  const arrow = useRef([]);
-  useEffect(() => {
-    const tl = 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;

src/components/markdown.js

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

src/components/markdown.jsx

@@ -1,685 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { isMediumUsernameValid } from '../utils/validation';
-import { icons, skills as SKILLS, skillWebsites } from '../constants/skills';
-import { githubStatsLinkGenerator, topLanguagesLinkGenerator, streakStatsLinkGenerator } from '../utils/link-generators';
-import { DEFAULT_DATA, DEFAULT_LINK, DEFAULT_PREFIX, DEFAULT_SOCIAL, DEFAULT_SUPPORT } from '../constants/defaults';
-
-const Title = (props) => {
-  const { prefix, title } = props;
-  if (prefix && title) {
-    return (
-      <>
-        {`<h1 align="center">${`${prefix} ${title}`}</h1>`}
-        <br />
-      </>
-    );
-  }
-  return '';
-};
-
-Title.propTypes = {
-  prefix: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-};
-
-const SubTitle = (props) => {
-  const { subtitle } = props;
-  if (subtitle) {
-    return (
-      <>
-        {`<h3 align="center">${subtitle}</h3>`}
-        <br />
-        <br />
-      </>
-    );
-  }
-  return '';
-};
-
-SubTitle.propTypes = {
-  subtitle: PropTypes.string.isRequired,
-};
-
-const SectionTitle = (props) => {
-  const { label } = props;
-  if (label) {
-    return (
-      <>
-        {`<h3 align="left">${label}</h3>`}
-        <br />
-      </>
-    );
-  }
-  return '';
-};
-
-SectionTitle.propTypes = {
-  label: PropTypes.string.isRequired,
-};
-
-const DisplayWork = (props) => {
-  const { prefix, project, link } = props;
-  if (prefix && project) {
-    if (link) {
-      return (
-        <>
-          {`- ${prefix} [${project}](${link})`}
-          <br />
-          <br />
-        </>
-      );
-    }
-    return (
-      <>
-        {`- ${prefix} **${project}**`}
-        <br />
-        <br />
-      </>
-    );
-  }
-  if (prefix && link) {
-    return (
-      <>
-        {`- ${prefix} [${link}](${link})`}
-        <br />
-        <br />
-      </>
-    );
-  }
-  return '';
-};
-
-DisplayWork.defaultProps = {
-  prefix: '',
-  project: '',
-  link: '',
-};
-
-DisplayWork.propTypes = {
-  prefix: PropTypes.string,
-  project: PropTypes.string,
-  link: PropTypes.string,
-};
-
-const DisplaySocial = (props) => {
-  const { username, base, icon } = props;
-  if (username) {
-    return (
-      <>
-        {`<a href="${base}/${username}" target="blank"><img align="center" src="${icon}" alt="${username}" height="30" width="40" /></a>`}
-        <br />
-      </>
-    );
-  }
-  return '';
-};
-
-DisplaySocial.propTypes = {
-  username: PropTypes.string.isRequired,
-  base: PropTypes.string.isRequired,
-  icon: PropTypes.string.isRequired,
-};
-
-const VisitorsBadge = (props) => {
-  const { github, badgeOptions, show } = props;
-  const link = `https://komarev.com/ghpvc/?username=${github}&label=${badgeOptions.badgeLabel}&color=${badgeOptions.badgeColor}&style=${badgeOptions.badgeStyle}`;
-  if (show) {
-    return (
-      <>
-        {`<p align="left"> <img src="${link}" alt="${github}" /> </p>`}
-        <br />
-        <br />
-      </>
-    );
-  }
-  return '';
-};
-
-VisitorsBadge.defaultProps = {
-  badgeOptions: {
-    badgeLabel: '',
-    badgeColor: '',
-    badgeStyle: '',
-  },
-};
-
-VisitorsBadge.propTypes = {
-  github: PropTypes.string.isRequired,
-  badgeOptions: {
-    badgeLabel: PropTypes.string.isRequired,
-    badgeColor: PropTypes.string.isRequired,
-    badgeStyle: PropTypes.string.isRequired,
-  },
-  show: PropTypes.bool.isRequired,
-};
-
-const TwitterBadge = (props) => {
-  const { twitter, show, base } = props;
-  const link = `https://img.shields.io/twitter/follow/${twitter}?logo=twitter&style=for-the-badge`;
-  if (show) {
-    return (
-      <>
-        {`<p align="left"> <a href="${base}/${twitter}" target="blank"><img src="${link}" alt="${twitter}" /></a> </p>`}
-        <br />
-        <br />
-      </>
-    );
-  }
-  return '';
-};
-
-TwitterBadge.propTypes = {
-  twitter: PropTypes.string.isRequired,
-  base: PropTypes.string.isRequired,
-  show: PropTypes.bool.isRequired,
-};
-
-const GithubProfileTrophy = (props) => {
-  const { show, github } = props;
-  const link = `https://github-profile-trophy.vercel.app/?username=${github}`;
-  if (show) {
-    return (
-      <>
-        {`<p align="left"> <a href="https://github.com/ryo-ma/github-profile-trophy"><img src="${link}" alt="${github}" /></a> </p>`}
-        <br />
-        <br />
-      </>
-    );
-  }
-  return '';
-};
-
-GithubProfileTrophy.propTypes = {
-  github: PropTypes.string.isRequired,
-  show: PropTypes.bool.isRequired,
-};
-
-const GitHubStats = (props) => {
-  const { show, github, options } = props;
-  if (show) {
-    return (
-      <>
-        {`<p>&nbsp;<img align="center" src="${githubStatsLinkGenerator({
-          github,
-          options,
-        })}" alt="${github}" /></p>`}
-        <br />
-        <br />
-      </>
-    );
-  }
-  return '';
-};
-
-GitHubStats.defaultProps = {
-  options: {
-    theme: '',
-    titleColor: '',
-    textColor: '',
-    bgColor: '',
-    hideBorder: '',
-    cacheSeconds: 0,
-    locale: '',
-  },
-};
-
-GitHubStats.propTypes = {
-  github: PropTypes.string.isRequired,
-  options: {
-    theme: PropTypes.string,
-    titleColor: PropTypes.string,
-    textColor: PropTypes.string,
-    bgColor: PropTypes.string,
-    hideBorder: PropTypes.string,
-    cacheSeconds: PropTypes.number,
-    locale: PropTypes.string,
-  },
-  show: PropTypes.bool.isRequired,
-};
-
-const isSocial = (social) => {
-  let status = false;
-  const SOCIAL_KEYS = Object.keys(DEFAULT_SOCIAL);
-  Object.keys(social).forEach((key) => {
-    if (SOCIAL_KEYS.includes(key)) {
-      status = true;
-    }
-  });
-  return status;
-};
-
-const DisplaySkills = (props) => {
-  const { skills } = props;
-  const listChosenSkills = [];
-  SKILLS.forEach((skill) => {
-    if (skills[skill]) {
-      listChosenSkills.push(
-        `
-        <a href="${skillWebsites[skill]}" target="_blank" rel="noreferrer">
-          <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 />
-    </>
-  ) : (
-    ''
-  );
-};
-
-DisplaySkills.defaultProps = {
-  skills: [],
-};
-
-DisplaySkills.propTypes = {
-  skills: [],
-};
-
-const DisplayDynamicBlogs = (props) => {
-  const { show } = props;
-  if (show) {
-    return (
-      <>
-        ### Blogs posts
-        <br />
-        {'<!-- BLOG-POST-LIST:START -->'}
-        <br />
-        {'<!-- BLOG-POST-LIST:END -->'}
-        <br />
-        <br />
-      </>
-    );
-  }
-  return '';
-};
-
-DisplayDynamicBlogs.defaultProps = {
-  show: false,
-};
-
-DisplayDynamicBlogs.propTypes = {
-  show: PropTypes.bool,
-};
-
-const DisplayTopLanguages = (props) => {
-  const { show, showStats, github, options } = props;
-  if (show) {
-    if (!showStats) {
-      return (
-        <>
-          {`<p><img align="center" src="${topLanguagesLinkGenerator({
-            github,
-            options,
-          })}" alt="${github}" /></p>`}
-          <br />
-          <br />
-        </>
-      );
-    }
-    return (
-      <>
-        {`<p><img align="left" src="${topLanguagesLinkGenerator({
-          github,
-          options,
-        })}" alt="${github}" /></p>`}
-        <br />
-        <br />
-      </>
-    );
-  }
-  return '';
-};
-
-DisplayTopLanguages.defaultProps = {
-  options: {
-    theme: '',
-    titleColor: '',
-    textColor: '',
-    bgColor: '',
-    hideBorder: '',
-    cacheSeconds: '',
-    locale: '',
-  },
-};
-
-DisplayTopLanguages.propTypes = {
-  github: PropTypes.string.isRequired,
-  options: {
-    theme: PropTypes.string,
-    titleColor: PropTypes.string,
-    textColor: PropTypes.string,
-    bgColor: PropTypes.string,
-    hideBorder: PropTypes.string,
-    cacheSeconds: PropTypes.number,
-    locale: PropTypes.string,
-  },
-  show: PropTypes.bool.isRequired,
-  showStats: PropTypes.bool.isRequired,
-};
-
-const DisplayStreakStats = (props) => {
-  const { show, github, options } = props;
-  if (show) {
-    return (
-      <>
-        {`<p><img align="center" src="${streakStatsLinkGenerator({
-          github,
-          options,
-        })}" alt="${github}" /></p>`}
-        <br />
-        <br />
-      </>
-    );
-  }
-  return '';
-};
-
-DisplayStreakStats.defaultProps = {
-  options: {
-    theme: '',
-    titleColor: '',
-    textColor: '',
-    bgColor: '',
-    hideBorder: '',
-    cacheSeconds: '',
-    locale: '',
-  },
-};
-
-DisplayStreakStats.propTypes = {
-  github: PropTypes.string.isRequired,
-  options: {
-    theme: PropTypes.string,
-    titleColor: PropTypes.string,
-    textColor: PropTypes.string,
-    bgColor: PropTypes.string,
-    hideBorder: PropTypes.string,
-    cacheSeconds: PropTypes.number,
-    locale: PropTypes.string,
-  },
-  show: PropTypes.bool.isRequired,
-};
-
-const DisplaySupport = (props) => {
-  const { support } = props;
-  let viewSupport = false;
-  Object.keys(support).forEach((key) => {
-    if (support[key]) {
-      viewSupport = true;
-    }
-  });
-  return viewSupport ? (
-    <div>
-      <SectionTitle label="Support:" />
-      {'<p>'}
-      {support.buyMeACoffee &&
-        `<a href="https://www.buymeacoffee.com/${support.buyMeACoffee}">
-      <img align="left" src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" height="50" width="210" alt="${support.buyMeACoffee}" /></a>`}
-      {support.buyMeAKofi &&
-        `<a href="https://ko-fi.com/${support.buyMeAKofi}">
-      <img align="left" src="https://cdn.ko-fi.com/cdn/kofi3.png?v=3" height="50" width="210" alt="${support.buyMeAKofi}" /></a>`}
-      {'</p><br><br>'}
-      <br />
-      <br />
-    </div>
-  ) : (
-    ''
-  );
-};
-
-DisplaySupport.defaultProps = {
-  support: {
-    buyMeACoffee: '',
-    buyMeAKofi: '',
-  },
-};
-
-DisplaySupport.propTypes = {
-  support: {
-    buyMeACoffee: PropTypes.string,
-    buyMeAKofi: PropTypes.string,
-  },
-};
-
-const Markdown = (props) => {
-  const { prefix, data, link, social, skills, support } = props;
-  const iconBaseUrl = 'https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/';
-  return (
-    <div id="markdown-content" className="break-words">
-      <>
-        <Title prefix={prefix.title} title={data.title} />
-      </>
-      <>
-        <SubTitle subtitle={data.subtitle} />
-      </>
-      <>
-        <VisitorsBadge
-          show={data.visitorsBadge}
-          github={social.github}
-          badgeOptions={{
-            badgeLabel: encodeURI(data.badgeLabel),
-            badgeColor: data.badgeColor,
-            badgeStyle: data.badgeStyle,
-          }}
-        />
-      </>
-      <>
-        <GithubProfileTrophy show={data.githubProfileTrophy} github={social.github} />
-        <TwitterBadge base="https://twitter.com" show={data.twitterBadge} twitter={social.twitter} />
-      </>
-      <>
-        <DisplayWork prefix={prefix.currentWork} project={data.currentWork} link={link.currentWork} />
-      </>
-      <>
-        <DisplayWork prefix={prefix.currentLearn} project={data.currentLearn} />
-      </>
-      <>
-        <DisplayWork prefix={prefix.collaborateOn} project={data.collaborateOn} link={link.collaborateOn} />
-      </>
-      <>
-        <DisplayWork prefix={prefix.helpWith} project={data.helpWith} link={link.helpWith} />
-      </>
-      <>
-        <DisplayWork prefix={prefix.portfolio} link={link.portfolio} />
-      </>
-      <>
-        <DisplayWork prefix={prefix.blog} link={link.blog} />
-      </>
-      <>
-        <DisplayWork prefix={prefix.ama} project={data.ama} />
-      </>
-      <>
-        <DisplayWork prefix={prefix.contact} project={data.contact} />
-      </>
-      <>
-        <DisplayWork prefix={prefix.resume} link={link.resume} />
-      </>
-      <>
-        <DisplayWork prefix={prefix.funFact} project={data.funFact} />
-      </>
-      <>
-        <DisplayDynamicBlogs show={(data.devDynamicBlogs && social.dev) || (data.rssDynamicBlogs && social.rssurl) || (data.mediumDynamicBlogs && social.medium && isMediumUsernameValid(social.medium))} />
-      </>
-      {isSocial(social) ? (
-        <>
-          <SectionTitle label="Connect with me:" />
-          {'<p align="left">'}
-        </>
-      ) : (
-        ''
-      )}
-      <br />
-      <>
-        <DisplaySocial base="https://codepen.io" icon={`${iconBaseUrl}codepen.svg`} username={social.codepen} />
-      </>
-      <>
-        <DisplaySocial base="https://dev.to" icon={`${iconBaseUrl}devto.svg`} username={social.dev} />
-      </>
-      <>
-        <DisplaySocial base="https://twitter.com" icon={`${iconBaseUrl}twitter.svg`} username={social.twitter} />
-      </>
-      <>
-        <DisplaySocial base="https://linkedin.com/in" icon={`${iconBaseUrl}linked-in-alt.svg`} username={social.linkedin} />
-      </>
-      <>
-        <DisplaySocial base="https://stackoverflow.com/users" icon={`${iconBaseUrl}stack-overflow.svg`} username={social.stackoverflow} />
-      </>
-      <>
-        <DisplaySocial base="https://codesandbox.com" icon={`${iconBaseUrl}codesandbox.svg`} username={social.codesandbox} />
-      </>
-      <>
-        <DisplaySocial base="https://kaggle.com" icon={`${iconBaseUrl}kaggle.svg`} username={social.kaggle} />
-      </>
-      <>
-        <DisplaySocial base="https://fb.com" icon={`${iconBaseUrl}facebook.svg`} username={social.fb} />
-      </>
-      <>
-        <DisplaySocial base="https://instagram.com" icon={`${iconBaseUrl}instagram.svg`} username={social.instagram} />
-      </>
-      <>
-        <DisplaySocial base="https://dribbble.com" icon={`${iconBaseUrl}dribbble.svg`} username={social.dribbble} />
-      </>
-      <>
-        <DisplaySocial base="https://www.behance.net" icon={`${iconBaseUrl}behance.svg`} username={social.behance} />
-      </>
-      <>
-        <DisplaySocial base="https://medium.com" icon={`${iconBaseUrl}medium.svg`} username={social.medium} />
-      </>
-      <>
-        <DisplaySocial base="https://www.youtube.com/c" icon={`${iconBaseUrl}youtube.svg`} username={social.youtube} />
-      </>
-      <>
-        <DisplaySocial base="https://www.codechef.com/users" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/codechef.svg" username={social.codechef} />
-      </>
-      <>
-        <DisplaySocial base="https://www.hackerrank.com" icon={`${iconBaseUrl}hackerrank.svg`} username={social.hackerrank} />
-      </>
-      <>
-        <DisplaySocial base="https://codeforces.com/profile" icon={`${iconBaseUrl}codeforces.svg`} username={social.codeforces} />
-      </>
-      <>
-        <DisplaySocial base="https://www.leetcode.com" icon={`${iconBaseUrl}leet-code.svg`} username={social.leetcode} />
-      </>
-      <>
-        <DisplaySocial base="https://www.hackerearth.com" icon={`${iconBaseUrl}hackerearth.svg`} username={social.hackerearth} />
-      </>
-      <>
-        <DisplaySocial base="https://auth.geeksforgeeks.org/user" icon={`${iconBaseUrl}geeks-for-geeks.svg`} username={social.geeks_for_geeks} />
-      </>
-      <>
-        <DisplaySocial base="https://www.topcoder.com/members" icon={`${iconBaseUrl}topcoder.svg`} username={social.topcoder} />
-      </>
-      <>
-        <DisplaySocial base="https://discord.gg" icon={`${iconBaseUrl}discord.svg`} username={social.discord} />
-      </>
-      <>
-        <DisplaySocial base="" icon={`${iconBaseUrl}rss.svg`} username={social.rssurl} />
-      </>
-      {isSocial(social) ? (
-        <>
-          {'</p>'}
-          <br />
-          <br />
-        </>
-      ) : (
-        ''
-      )}
-      <>
-        <DisplaySkills skills={skills} />
-      </>
-      <>
-        <DisplaySupport support={support} />
-      </>
-      <>
-        <DisplayTopLanguages show={data.topLanguages} showStats={data.githubStats} github={social.github} options={data.topLanguagesOptions} />
-      </>
-      <>
-        <GitHubStats show={data.githubStats} github={social.github} options={data.githubStatsOptions} />
-      </>
-      <>
-        <DisplayStreakStats show={data.streakStats} github={social.github} options={data.streakStatsOptions} />
-      </>
-    </div>
-  );
-};
-export default Markdown;
-
-Markdown.defaultProps = {
-  prefix: DEFAULT_PREFIX,
-  data: DEFAULT_DATA,
-  link: DEFAULT_LINK,
-  social: DEFAULT_SOCIAL,
-  support: DEFAULT_SUPPORT,
-  skills: [],
-};
-Markdown.propTypes = {
-  prefix: {
-    title: PropTypes.string,
-    currentWork: PropTypes.string,
-    currentLearn: PropTypes.string,
-    collaborateOn: PropTypes.string,
-    helpWith: PropTypes.string,
-    ama: PropTypes.string,
-    contact: PropTypes.string,
-    resume: PropTypes.string,
-    funFact: PropTypes.string,
-    portfolio: PropTypes.string,
-    blog: PropTypes.string,
-  },
-  data: {
-    title: PropTypes.string,
-    subtitle: PropTypes.string,
-    currentWork: PropTypes.string,
-    currentLearn: PropTypes.string,
-    collaborateOn: PropTypes.string,
-    helpWith: PropTypes.string,
-    ama: PropTypes.string,
-    contact: PropTypes.string,
-    funFact: PropTypes.string,
-    twitterBadge: false,
-    visitorsBadge: false,
-    badgeStyle: PropTypes.string,
-    badgeColor: PropTypes.string,
-    badgeLabel: PropTypes.string,
-    githubProfileTrophy: false,
-    githubStats: false,
-    githubStatsOptions: {
-      theme: PropTypes.string,
-      titleColor: PropTypes.string,
-      textColor: PropTypes.string,
-      bgColor: PropTypes.string,
-      hideBorder: false,
-      cacheSeconds: null,
-      locale: PropTypes.string,
-    },
-    topLanguages: false,
-    topLanguagesOptions: {
-      theme: PropTypes.string,
-      titleColor: PropTypes.string,
-      textColor: PropTypes.string,
-      bgColor: PropTypes.string,
-      hideBorder: false,
-      cacheSeconds: null,
-      locale: PropTypes.string,
-    },
-    streakStats: false,
-    streakStatsOptions: {
-      theme: PropTypes.string,
-    },
-    devDynamicBlogs: false,
-    mediumDynamicBlogs: false,
-    rssDynamicBlogs: false,
-  },
-  link: {},
-  social: {},
-  skills: {},
-  support: {},
-};

src/components/markdownPreview.js

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

src/components/markdownPreview.jsx

@@ -1,454 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { icons, skills as SKILLS, skillWebsites } from '../constants/skills';
-import { githubStatsLinkGenerator, topLanguagesLinkGenerator, streakStatsLinkGenerator } from '../utils/link-generators';
-import { DEFAULT_DATA, DEFAULT_PREFIX, DEFAULT_SOCIAL, DEFAULT_SUPPORT } from '../constants/defaults';
-
-export const TitlePreview = (props) => {
-  const { prefix, title } = props;
-  if (prefix && title) {
-    return <h1 className="text-center text-xl font-bold">{`${prefix} ${title}`}</h1>;
-  }
-  return null;
-};
-TitlePreview.propTypes = {
-  prefix: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-};
-
-export const SubTitlePreview = (props) => {
-  const { subtitle } = props;
-  if (subtitle) {
-    return <h3 className="text-center font-medium">{subtitle}</h3>;
-  }
-  return null;
-};
-SubTitlePreview.propTypes = {
-  subtitle: PropTypes.string.isRequired,
-};
-
-export const SectionTitle = (props) => {
-  const { visible, label } = props;
-  if (!visible) return null;
-  if (label) {
-    return <h3 className="w-full text-lg sm:text-xl">{label}</h3>;
-  }
-  return null;
-};
-SectionTitle.defaultProps = {
-  visible: false,
-};
-SectionTitle.propTypes = {
-  visible: PropTypes.bool,
-  label: PropTypes.string.isRequired,
-};
-
-export const DisplayWork = (props) => {
-  const { prefix, project, link } = props;
-  if (prefix && project) {
-    if (link) {
-      return (
-        <div className="my-2">
-          {`${prefix} `}
-          <a href={link} className="no-underline text-blue-700" target="blank">
-            {project}
-          </a>
-        </div>
-      );
-    }
-    return (
-      <div className="my-2">
-        {`${prefix} `}
-        <b>{project}</b>
-      </div>
-    );
-  }
-  if (prefix && link) {
-    return (
-      <div className="my-2">
-        {`${prefix} `}
-        <a href={link} className="no-underline text-blue-700" target="blank">
-          {link}
-        </a>
-      </div>
-    );
-  }
-  return null;
-};
-
-DisplayWork.defaultProps = {
-  prefix: '',
-  project: '',
-  link: '',
-};
-
-DisplayWork.propTypes = {
-  prefix: PropTypes.string,
-  project: PropTypes.string,
-  link: PropTypes.string,
-};
-
-export const WorkPreview = (props) => {
-  const { work } = props;
-  const { prefix, data, link } = work;
-  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} />
-    </>
-  );
-};
-WorkPreview.propTypes = {
-  work: PropTypes.object.isRequired,
-};
-
-export const DisplaySocial = (props) => {
-  const { username, base, icon } = props;
-  if (username) {
-    return (
-      <a className="no-underline text-blue-700 m-2" href={`${base}/${username}`} target="blank">
-        <img className="w-6 h-6" src={icon} alt="username" />
-      </a>
-    );
-  }
-  return null;
-};
-DisplaySocial.defaultProps = {
-  username: '',
-  base: '',
-  icon: '',
-};
-DisplaySocial.propTypes = {
-  username: PropTypes.string,
-  base: PropTypes.string,
-  icon: PropTypes.string,
-};
-
-export const SocialPreview = (props) => {
-  const { social } = props;
-  let viewSocial = false;
-  const iconBaseUrl = 'https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/';
-  Object.keys(social).forEach((key) => {
-    if (social[key] && key !== 'github') viewSocial = true;
-  });
-  return (
-    <div className="flex justify-start items-end flex-wrap">
-      <SectionTitle label="Connect with me:" visible={viewSocial} />
-      <>
-        <DisplaySocial base="https://codepen.io" icon={`${iconBaseUrl}codepen.svg`} username={social.codepen} />
-      </>
-      <>
-        <DisplaySocial base="https://dev.to" icon={`${iconBaseUrl}devto.svg`} username={social.dev} />
-      </>
-      <>
-        <DisplaySocial base="https://twitter.com" icon={`${iconBaseUrl}twitter.svg`} username={social.twitter} />
-      </>
-      <>
-        <DisplaySocial base="https://linkedin.com/in" icon={`${iconBaseUrl}linked-in-alt.svg`} username={social.linkedin} />
-      </>
-      <>
-        <DisplaySocial base="https://stackoverflow.com/users" icon={`${iconBaseUrl}stack-overflow.svg`} username={social.stackoverflow} />
-      </>
-      <>
-        <DisplaySocial base="https://codesandbox.com" icon={`${iconBaseUrl}codesandbox.svg`} username={social.codesandbox} />
-      </>
-      <>
-        <DisplaySocial base="https://kaggle.com" icon={`${iconBaseUrl}kaggle.svg`} username={social.kaggle} />
-      </>
-      <>
-        <DisplaySocial base="https://fb.com" icon={`${iconBaseUrl}facebook.svg`} username={social.fb} />
-      </>
-      <>
-        <DisplaySocial base="https://instagram.com" icon={`${iconBaseUrl}instagram.svg`} username={social.instagram} />
-      </>
-      <>
-        <DisplaySocial base="https://dribbble.com" icon={`${iconBaseUrl}dribbble.svg`} username={social.dribbble} />
-      </>
-      <>
-        <DisplaySocial base="https://www.behance.net" icon={`${iconBaseUrl}behance.svg`} username={social.behance} />
-      </>
-      <>
-        <DisplaySocial base="https://medium.com" icon={`${iconBaseUrl}medium.svg`} username={social.medium} />
-      </>
-      <>
-        <DisplaySocial base="https://www.youtube.com/c" icon={`${iconBaseUrl}youtube.svg`} username={social.youtube} />
-      </>
-      <>
-        <DisplaySocial base="https://www.codechef.com/users" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/codechef.svg" username={social.codechef} />
-      </>
-      <>
-        <DisplaySocial base="https://www.hackerrank.com" icon={`${iconBaseUrl}hackerrank.svg`} username={social.hackerrank} />
-      </>
-      <>
-        <DisplaySocial base="https://codeforces.com/profile" icon={`${iconBaseUrl}codeforces.svg`} username={social.codeforces} />
-      </>
-      <>
-        <DisplaySocial base="https://www.leetcode.com" icon={`${iconBaseUrl}leet-code.svg`} username={social.leetcode} />
-      </>
-      <>
-        <DisplaySocial base="https://www.hackerearth.com" icon={`${iconBaseUrl}hackerearth.svg`} username={social.hackerearth} />
-      </>
-      <>
-        <DisplaySocial base="https://auth.geeksforgeeks.org/user" icon={`${iconBaseUrl}geeks-for-geeks.svg`} username={social.geeks_for_geeks} />
-      </>
-      <>
-        <DisplaySocial base="https://www.topcoder.com/members" icon={`${iconBaseUrl}topcoder.svg`} username={social.topcoder} />
-      </>
-      <>
-        <DisplaySocial base="https://discord.gg" icon={`${iconBaseUrl}discord.svg`} username={social.discord} />
-      </>
-      <>
-        <DisplaySocial base="" icon={`${iconBaseUrl}rss.svg`} username={social.rssurl} />
-      </>
-    </div>
-  );
-};
-SocialPreview.propTypes = {
-  social: PropTypes.object.isRequired,
-};
-
-export const VisitorsBadgePreview = (props) => {
-  const { github, show, badgeOptions } = props;
-  const link = `https://komarev.com/ghpvc/?username=${github}&label=${badgeOptions.badgeLabel}&color=${badgeOptions.badgeColor}&style=${badgeOptions.badgeStyle}`;
-  if (show) {
-    return (
-      <div className="text-left my-2">
-        {' '}
-        <img className="h-4 sm:h-6" src={link} alt={github} />{' '}
-      </div>
-    );
-  }
-  return null;
-};
-VisitorsBadgePreview.defaultProps = {
-  github: '',
-  show: false,
-  badgeOptions: {},
-};
-VisitorsBadgePreview.propTypes = {
-  github: PropTypes.string,
-  show: PropTypes.bool,
-  badgeOptions: PropTypes.object,
-};
-
-export const TwitterBadgePreview = (props) => {
-  const { twitter, show } = props;
-  const link = `https://img.shields.io/twitter/follow/${twitter}?logo=twitter&style=for-the-badge`;
-  if (show) {
-    return (
-      <div className="text-left my-2">
-        {' '}
-        <a href={`https://twitter.com/${twitter}`} target="_blank" rel="noreferrer">
-          <img className="h-4 sm:h-6" src={link} alt={twitter} />
-        </a>{' '}
-      </div>
-    );
-  }
-  return null;
-};
-TwitterBadgePreview.defaultProps = {
-  twitter: '',
-  show: false,
-};
-TwitterBadgePreview.propTypes = {
-  twitter: PropTypes.string,
-  show: PropTypes.bool,
-};
-
-export const GithubProfileTrophyPreview = (props) => {
-  const { github, show } = props;
-  const link = `https://github-profile-trophy.vercel.app/?username=${github}`;
-  if (show) {
-    return (
-      <div className="text-left my-2">
-        {' '}
-        <a href="https://github.com/ryo-ma/github-profile-trophy">
-          <img src={link} alt={github} />
-        </a>{' '}
-      </div>
-    );
-  }
-  return null;
-};
-GithubProfileTrophyPreview.defaultProps = {
-  github: '',
-  show: false,
-};
-GithubProfileTrophyPreview.propTypes = {
-  github: PropTypes.string,
-  show: PropTypes.bool,
-};
-
-export const GitHubStatsPreview = ({ github, options, show }) => {
-  if (show) {
-    return (
-      <div className="text-center mx-4 mb-4">
-        <img src={githubStatsLinkGenerator({ github, options })} alt={github} />
-      </div>
-    );
-  }
-  return null;
-};
-GitHubStatsPreview.defaultProps = {
-  github: '',
-  options: {},
-  show: false,
-};
-GitHubStatsPreview.propTypes = {
-  github: PropTypes.string,
-  options: PropTypes.object,
-  show: PropTypes.bool,
-};
-
-export const TopLanguagesPreview = ({ github, options, show }) => {
-  if (show) {
-    return (
-      <div className="text-center mx-4 mb-4">
-        <img src={topLanguagesLinkGenerator({ github, options })} alt={github} />
-      </div>
-    );
-  }
-  return <div className="text-center mx-4 mb-4"> &nbsp;</div>;
-};
-TopLanguagesPreview.defaultProps = {
-  github: '',
-  options: {},
-  show: false,
-};
-TopLanguagesPreview.propTypes = {
-  github: PropTypes.string,
-  options: PropTypes.object,
-  show: PropTypes.bool,
-};
-
-export const StreakStatsPreview = ({ github, options, show }) => {
-  if (show) {
-    return (
-      <div className="text-center mx-4 mb-4">
-        <img src={streakStatsLinkGenerator({ github, options })} alt={github} />
-      </div>
-    );
-  }
-  return null;
-};
-StreakStatsPreview.defaultProps = {
-  github: '',
-  options: {},
-  show: false,
-};
-StreakStatsPreview.propTypes = {
-  github: PropTypes.string,
-  options: PropTypes.object,
-  show: PropTypes.bool,
-};
-
-export const SkillsPreview = (props) => {
-  const { skills } = props;
-  const listSkills = [];
-  SKILLS.forEach((skill) => {
-    if (skills[skill]) {
-      listSkills.push(
-        <a href={skillWebsites[skill]} key={skill} target="_blank" rel="noreferrer">
-          <img className="mb-4 mr-4 h-6 w-6 sm:h-10 sm:w-10" src={icons[skill]} alt={skill} />
-        </a>,
-      );
-    }
-  });
-  return listSkills.length > 0 ? (
-    <div className="flex flex-wrap justify-start items-center">
-      <SectionTitle label="Languages and Tools:" visible />
-      {listSkills}
-    </div>
-  ) : (
-    ''
-  );
-};
-SkillsPreview.propTypes = {
-  skills: PropTypes.array.isRequired,
-};
-
-export const SupportPreview = (props) => {
-  const { support } = props;
-  let viewSupport = false;
-  Object.keys(support).forEach((key) => {
-    if (support[key]) {
-      viewSupport = true;
-    }
-  });
-  return support.buyMeACoffee || support.buyMeAKofi ? (
-    <div className="flex flex-wrap justify-start items-center">
-      <SectionTitle label="Support:" visible={viewSupport} />
-      {support.buyMeACoffee && (
-        <a href={`https://www.buymeacoffee.com/${support.buyMeACoffee}`} target="_blank" rel="noreferrer">
-          <img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" className="mb-4 mr-4 w-36 h-8 sm:w-52 sm:h-12" />
-        </a>
-      )}
-      {support.buyMeAKofi && (
-        <a href={`https://ko-fi.com/${support.buyMeAKofi}`} target="_blank" rel="noreferrer">
-          <img src="https://cdn.ko-fi.com/cdn/kofi3.png?v=3" alt="Buy Me A Ko-fi" className="mb-4 mr-4 w-36 h-8 sm:w-52 sm:h-12" />
-        </a>
-      )}
-    </div>
-  ) : (
-    ''
-  );
-};
-SupportPreview.propTypes = {
-  support: PropTypes.object.isRequired,
-};
-
-const MarkdownPreview = (props) => {
-  const { prefix, data, social, skills, support } = props;
-  return (
-    <div id="markdown-preview">
-      <TitlePreview prefix={prefix.title} title={data.title} />
-      <SubTitlePreview subtitle={data.subtitle} />
-      <VisitorsBadgePreview
-        show={data.visitorsBadge}
-        github={social.github}
-        badgeOptions={{
-          badgeLabel: encodeURI(data.badgeLabel),
-          badgeColor: data.badgeColor,
-          badgeStyle: data.badgeStyle,
-        }}
-      />
-      <GithubProfileTrophyPreview show={data.githubProfileTrophy} github={social.github} />
-      <TwitterBadgePreview show={data.twitterBadge} twitter={social.twitter} />
-      <WorkPreview work={props} />
-      <SocialPreview social={social} />
-      <SkillsPreview skills={skills} />
-      <SupportPreview support={support} />
-      <div className="block sm:flex sm:justify-center sm:items-start">
-        <TopLanguagesPreview show={data.topLanguages} github={social.github} options={data.topLanguagesOptions} />
-        <GitHubStatsPreview show={data.githubStats} github={social.github} options={data.githubStatsOptions} />
-        <StreakStatsPreview show={data.streakStats} github={social.github} options={data.streakStatsOptions} />
-      </div>
-    </div>
-  );
-};
-
-export default MarkdownPreview;
-
-MarkdownPreview.defaultProps = {
-  prefix: DEFAULT_PREFIX,
-  data: DEFAULT_DATA,
-  social: DEFAULT_SOCIAL,
-  support: DEFAULT_SUPPORT,
-  skills: [],
-};
-
-MarkdownPreview.propTypes = {
-  prefix: PropTypes.object,
-  data: PropTypes.object,
-  social: PropTypes.object,
-  skills: PropTypes.object,
-  support: PropTypes.object,
-};

src/components/seo.js

@@ -5,10 +5,10 @@
  * See: https://www.gatsbyjs.org/docs/use-static-query/
  */
 
-import React from 'react';
+import React from "react"
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types"
-import { Helmet } from 'react-helmet';
+import { Helmet } from "react-helmet"
-import { useStaticQuery, graphql } from 'gatsby';
+import { useStaticQuery, graphql } from "gatsby"
 
 function SEO({ description, lang, meta, title }) {
   const { site } = useStaticQuery(
@@ -22,10 +22,10 @@ function SEO({ description, lang, meta, title }) {
           }
         }
       }
-    `,
+    `
-  );
+  )
 
-  const metaDescription = description || site.siteMetadata.description;
+  const metaDescription = description || site.siteMetadata.description
 
   return (
     <Helmet
@@ -69,20 +69,20 @@ function SEO({ description, lang, meta, title }) {
         },
       ].concat(meta)}
     />
-  );
+  )
 }
 
 SEO.defaultProps = {
   lang: `en`,
   meta: [],
   description: ``,
-};
+}
 
 SEO.propTypes = {
   description: PropTypes.string,
   lang: PropTypes.string,
   meta: PropTypes.arrayOf(PropTypes.object),
   title: PropTypes.string.isRequired,
-};
+}
 
-export default SEO;
+export default SEO

src/components/skills.js

@@ -0,0 +1,49 @@
+import React from "react"
+import { icons, categorizedSkills } from "../constants/skills"
+
+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"
+        >
+          <input
+            id={skill}
+            type="checkbox"
+            checked={props.skills[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}
+          />
+          <span className="tooltiptext">{skill}</span>
+        </label>
+      </div>
+    )
+  }
+
+  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>
+
+      {Object.keys(categorizedSkills).map(key => (
+        <div key={key}>
+          <h4 className="text-sm sm:text-xl text-gray-900 text-center">
+            {categorizedSkills[key].title}
+          </h4>
+          <div className="flex justify-start items-center flex-wrap w-full mb-6 pl-4 sm:pl-10">
+            {categorizedSkills[key].skills.map(skill => createSkill(skill))}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default Skills

src/components/skills.jsx

@@ -1,83 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { SearchIcon, XIcon } from '@primer/octicons-react';
-import { icons, categorizedSkills } from '../constants/skills';
-
-const Skills = (props) => {
-  const { skills, handleSkillsChange } = props;
-  const [search, setSearch] = useState('');
-  const [debounce, setDebounce] = useState(undefined);
-  const inputRef = React.createRef();
-  const createSkill = (skill) => (
-    <div className="w-1/3 sm:w-1/4 my-6" key={skill}>
-      <label htmlFor={skill} className="checkbox-label flex items-center justify-start">
-        <input id={skill} type="checkbox" className="checkbox-label__input" checked={skills[skill]} onChange={() => handleSkillsChange(skill)} />
-        <span className="checkbox-label__control" />
-        <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>
-  );
-
-  const onSearchChange = (value) => {
-    const callback = () => {
-      setSearch(value);
-    };
-    clearTimeout(debounce);
-    setDebounce(setTimeout(callback, 50));
-  };
-
-  return (
-    <div className="px-2 sm:px-6 mb-10 ">
-      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-4 flex justify-between">
-        Skills
-        <div className="relative flex">
-          <input type="text" onChange={(e) => onSearchChange(e.target.value)} className="leading:none text-xs my-0 py-1 px-2 pr-8 sm:text-xl border-2 border-gray-900 focus:border-blue-700 placeholder-gray-700" placeholder="Search Skills" ref={inputRef} />
-          <span className="absolute" style={{ right: '10px' }}>
-            {search !== '' ? (
-              <button
-                type="button"
-                className="focus:outline-none"
-                onClick={() => {
-                  setSearch('');
-                  inputRef.current.value = '';
-                }}
-              >
-                <XIcon size={16} className="mb-1 transform scale-100 md:scale-125" />
-              </button>
-            ) : (
-              <SearchIcon size={16} className="mb-1 transform scale-100 md:scale-125" />
-            )}
-          </span>
-        </div>
-      </div>
-
-      {Object.keys(categorizedSkills)
-        .filter((key) => {
-          const filtered = categorizedSkills[key].skills.filter((skill) => skill.includes(search.toLowerCase()));
-          return filtered.length !== 0;
-        })
-        .map((key) => (
-          <div key={key} className="divide-y divide-gray-500">
-            <div className="text-sm sm:text-xl text-gray-900 text-left py-1">{categorizedSkills[key].title}</div>
-            <div className="flex justify-start items-center flex-wrap w-full mb-6 pl-4 sm:pl-10">{categorizedSkills[key].skills.filter((skill) => skill.includes(search.toLowerCase())).map((skill) => createSkill(skill))}</div>
-          </div>
-        ))}
-      <span className="flex justify-center text-gray-900">
-        {Object.keys(categorizedSkills).filter((key) => {
-          const filtered = categorizedSkills[key].skills.filter((skill) => skill.includes(search.toLowerCase()));
-          return filtered.length !== 0;
-        }).length === 0
-          ? 'No Results Found'
-          : ''}
-      </span>
-    </div>
-  );
-};
-
-export default Skills;
-
-Skills.propTypes = {
-  skills: PropTypes.array.isRequired,
-  handleSkillsChange: PropTypes.func.isRequired,
-};

src/components/social.js

@@ -0,0 +1,325 @@
+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="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

src/components/social.jsx

@@ -1,111 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const Social = (props) => {
-  const { social, handleSocialChange } = 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={social.github} onChange={(event) => 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={social.twitter} onChange={(event) => 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={social.dev} onChange={(event) => 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={social.codepen} onChange={(event) => 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={social.codesandbox} onChange={(event) => 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={social.stackoverflow} onChange={(event) => 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={social.linkedin} onChange={(event) => 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={social.kaggle} onChange={(event) => 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={social.fb} onChange={(event) => 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={social.instagram} onChange={(event) => 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={social.dribbble} onChange={(event) => 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={social.behance} onChange={(event) => 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={social.medium} onChange={(event) => 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={social.youtube} onChange={(event) => 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={social.codechef} onChange={(event) => 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={social.hackerrank} onChange={(event) => 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={social.codeforces} onChange={(event) => 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={social.leetcode} onChange={(event) => 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={social.topcoder} onChange={(event) => 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={social.hackerearth} onChange={(event) => 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={social.geeks_for_geeks} onChange={(event) => 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/discord.svg" className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="discord" />
-          <input id="discord" placeholder="discord invite (only code)" 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={social.discord} onChange={(event) => handleSocialChange('discord', 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={social.rssurl} onChange={(event) => handleSocialChange('rssurl', event)} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Social;
-Social.propTypes = {
-  social: PropTypes.object.isRequired,
-  handleSocialChange: PropTypes.func.isRequired,
-};

src/components/subtitle.js

@@ -0,0 +1,19 @@
+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="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

src/components/subtitle.jsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const Subtitle = (props) => {
-  const { data, handleDataChange } = 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={data.subtitle} onChange={(event) => handleDataChange('subtitle', event)} />
-    </div>
-  );
-};
-
-export default Subtitle;
-Subtitle.propTypes = {
-  data: PropTypes.object.isRequired,
-  handleDataChange: PropTypes.func.isRequired,
-};

src/components/support.jsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const Support = (props) => {
-  const { support, handleSupportChange } = 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">Support</div>
-      <div className="flex flex-wrap justify-start items-center">
-        <div className="w-1/2 flex justify-start items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
-          <img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" className="w-36 h-8 sm:w-52 sm:h-12 mr-1 sm:mr-4" alt="buymeacoffee" />
-          <input id="buy-me-a-coffee" placeholder="buymeacoffee 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 focus:border-blue-700" value={support.buyMeACoffee || ''} onChange={(event) => handleSupportChange('buyMeACoffee', event)} />
-        </div>
-        <div className="w-1/2 flex justify-start items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
-          <img src="https://cdn.ko-fi.com/cdn/kofi3.png?v=3" className="w-36 h-8 sm:w-52 sm:h-12 mr-1 sm:mr-4" alt="buymeakofi" />
-          <input id="buy-me-a-kofi" placeholder="Ko-fi 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 ml-2 sm:ml-0 focus:border-blue-700" value={support.buyMeAKofi || ''} onChange={(event) => handleSupportChange('buyMeAKofi', event)} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Support;
-Support.propTypes = {
-  support: PropTypes.object.isRequired,
-  handleSupportChange: PropTypes.func.isRequired,
-};

src/components/title.js

@@ -0,0 +1,28 @@
+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="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

src/components/title.jsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const Title = (props) => {
-  const { data, prefix, handlePrefixChange, handleDataChange } = 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={prefix.title} onChange={(event) => 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={data.title} onChange={(event) => handleDataChange('title', event)} />
-      </div>
-    </div>
-  );
-};
-
-export default Title;
-Title.propTypes = {
-  prefix: PropTypes.object.isRequired,
-  data: PropTypes.object.isRequired,
-  handlePrefixChange: PropTypes.func.isRequired,
-  handleDataChange: PropTypes.func.isRequired,
-};

src/components/work.js

@@ -0,0 +1,173 @@
+import React from "react"
+
+const Work = 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">
+        Work
+      </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="currentWork-prefix"
+          placeholder="Hi, I'm "
+          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="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="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)}
+        />
+      </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="collaborateOn-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.collaborateOn}
+          onChange={event => props.handlePrefixChange("collaborateOn", event)}
+        />
+        <input
+          id="collaborateOn"
+          placeholder="project name"
+          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="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)}
+        />
+      </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="helpWith-prefix"
+          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="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="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)}
+        />
+      </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="currentLearn-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.currentLearn}
+          onChange={event => props.handlePrefixChange("currentLearn", event)}
+        />
+        <input
+          id="currentLearn"
+          placeholder="Frameworks, courses etc."
+          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)}
+        />
+      </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="ama-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.ama}
+          onChange={event => props.handlePrefixChange("ama", event)}
+        />
+        <input
+          id="ama"
+          placeholder="react, vue and gsap"
+          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)}
+        />
+      </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="contact-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.contact}
+          onChange={event => props.handlePrefixChange("contact", event)}
+        />
+        <input
+          id="contact"
+          placeholder="example@gmail.com"
+          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)}
+        />
+      </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="portfolio-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.portfolio}
+          onChange={event => props.handlePrefixChange("portfolio", event)}
+        />
+        <input
+          id="portfolio"
+          placeholder="portfolio 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.portfolio}
+          onChange={event => props.handleLinkChange("portfolio", 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="blog-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.blog}
+          onChange={event => props.handlePrefixChange("blog", event)}
+        />
+        <input
+          id="blog"
+          placeholder="blog 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.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="funFact-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.funFact}
+          onChange={event => props.handlePrefixChange("funFact", event)}
+        />
+        <input
+          id="funFact"
+          placeholder="Chai over Coffee"
+          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)}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default Work

src/components/work.jsx

@@ -1,68 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const Work = (props) => {
-  const { prefix, handlePrefixChange, data, handleDataChange, link, handleLinkChange } = 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">Work</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="currentWork-prefix" placeholder="Hi, I'm " 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={prefix.currentWork} onChange={(event) => handlePrefixChange('currentWork', event)} />
-        <input id="currentWork" placeholder="project name" 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={data.currentWork} onChange={(event) => handleDataChange('currentWork', event)} />
-        <input id="currentWork-link" placeholder="project link" 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={link.currentWork} onChange={(event) => handleLinkChange('currentWork', 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="collaborateOn-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={prefix.collaborateOn} onChange={(event) => handlePrefixChange('collaborateOn', event)} />
-        <input id="collaborateOn" placeholder="project name" 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={data.collaborateOn} onChange={(event) => handleDataChange('collaborateOn', event)} />
-        <input id="collaborateOn-link" placeholder="project link" 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={link.collaborateOn} onChange={(event) => handleLinkChange('collaborateOn', 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="helpWith-prefix" 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={prefix.helpWith} onChange={(event) => handlePrefixChange('helpWith', event)} />
-        <input id="helpWith" placeholder="project name" 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={data.helpWith} onChange={(event) => handleDataChange('helpWith', event)} />
-        <input id="helpWith-link" placeholder="project link" 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={link.helpWith} onChange={(event) => handleLinkChange('helpWith', 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="currentLearn-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={prefix.currentLearn} onChange={(event) => handlePrefixChange('currentLearn', event)} />
-        <input id="currentLearn" placeholder="Frameworks, courses etc." 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={data.currentLearn} onChange={(event) => handleDataChange('currentLearn', 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="ama-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={prefix.ama} onChange={(event) => handlePrefixChange('ama', event)} />
-        <input id="ama" placeholder="react, vue and gsap" 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={data.ama} onChange={(event) => handleDataChange('ama', 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="contact-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={prefix.contact} onChange={(event) => handlePrefixChange('contact', event)} />
-        <input id="contact" placeholder="example@gmail.com" 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={data.contact} onChange={(event) => handleDataChange('contact', 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="portfolio-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={prefix.portfolio} onChange={(event) => handlePrefixChange('portfolio', event)} />
-        <input id="portfolio" placeholder="portfolio 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={link.portfolio} onChange={(event) => handleLinkChange('portfolio', 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="blog-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={prefix.blog} onChange={(event) => handlePrefixChange('blog', event)} />
-        <input id="blog" placeholder="blog 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={link.blog} onChange={(event) => 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={prefix.resume} onChange={(event) => 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={link.resume} onChange={(event) => 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="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={prefix.funFact} onChange={(event) => handlePrefixChange('funFact', event)} />
-        <input id="funFact" 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={data.funFact} onChange={(event) => handleDataChange('funFact', event)} />
-      </div>
-    </div>
-  );
-};
-
-export default Work;
-Work.propTypes = {
-  prefix: PropTypes.object.isRequired,
-  data: PropTypes.object.isRequired,
-  link: PropTypes.object.isRequired,
-  handlePrefixChange: PropTypes.func.isRequired,
-  handleDataChange: PropTypes.func.isRequired,
-  handleLinkChange: PropTypes.func.isRequired,
-};

src/constants/defaults.js

@@ -1,97 +0,0 @@
-export const DEFAULT_PREFIX = {
-  title: "Hi 👋, I'm",
-  currentWork: '🔭 I’m currently working on',
-  currentLearn: '🌱 I’m currently learning',
-  collaborateOn: '👯 I’m looking to collaborate on',
-  helpWith: '🤝 I’m looking for help with',
-  ama: '💬 Ask me about',
-  contact: '📫 How to reach me',
-  resume: '📄 Know about my experiences',
-  funFact: '⚡ Fun fact',
-  portfolio: '👨‍💻 All of my projects are available at',
-  blog: '📝 I regularly write articles on',
-};
-
-export const DEFAULT_DATA = {
-  title: '',
-  subtitle: 'A passionate frontend developer from India',
-  currentWork: '',
-  currentLearn: '',
-  collaborateOn: '',
-  helpWith: '',
-  ama: '',
-  contact: '',
-  funFact: '',
-  twitterBadge: false,
-  visitorsBadge: false,
-  badgeStyle: 'flat',
-  badgeColor: '0e75b6',
-  badgeLabel: 'Profile views',
-  githubProfileTrophy: false,
-  githubStats: false,
-  githubStatsOptions: {
-    theme: '',
-    titleColor: '',
-    textColor: '',
-    bgColor: '',
-    hideBorder: false,
-    cacheSeconds: null,
-    locale: 'en',
-  },
-  topLanguages: false,
-  topLanguagesOptions: {
-    theme: '',
-    titleColor: '',
-    textColor: '',
-    bgColor: '',
-    hideBorder: false,
-    cacheSeconds: null,
-    locale: 'en',
-  },
-  streakStats: false,
-  streakStatsOptions: {
-    theme: '',
-  },
-  devDynamicBlogs: false,
-  mediumDynamicBlogs: false,
-  rssDynamicBlogs: false,
-};
-
-export const DEFAULT_LINK = {
-  currentWork: '',
-  collaborateOn: '',
-  helpWith: '',
-  portfolio: '',
-  blog: '',
-  resume: '',
-};
-
-export const DEFAULT_SOCIAL = {
-  github: '',
-  dev: '',
-  linkedin: '',
-  codepen: '',
-  stackoverflow: '',
-  kaggle: '',
-  codesandbox: '',
-  fb: '',
-  instagram: '',
-  twitter: '',
-  dribbble: '',
-  behance: '',
-  medium: '',
-  youtube: '',
-  codechef: '',
-  hackerrank: '',
-  codeforces: '',
-  leetcode: '',
-  topcoder: '',
-  hackerearth: '',
-  geeks_for_geeks: '',
-  discord: '',
-  rssurl: '',
-};
-
-export const DEFAULT_SUPPORT = {
-  buyMeACoffee: '',
-};

src/constants/page-links.js

@@ -1,7 +1,7 @@
 const links = {
-  home: '/',
+  home: "/",
-  about: '/about',
+  about: "/about",
-  addons: '/addons',
+  addons: "/addons",
-  support: '/support',
+  support: "/support",
-};
+}
-export default links;
+export default links

src/constants/skills.js

@@ -1,519 +1,497 @@
+//const baseURL = 'https://devicons.github.io/devicon/devicon.git/icons/';
 const categorizedSkills = {
   language: {
-    title: 'Programming Languages',
+    title: "Programming Languages",
     skills: [
-      'c',
+      "c",
-      'cplusplus',
+      "cplusplus",
-      'csharp',
+      "csharp",
-      'go',
+      "go",
-      'java',
+      "java",
-      'javascript',
+      "javascript",
-      'typescript',
+      "typescript",
-      'php',
+      "php",
-      'perl',
+      "ruby",
-      'ruby',
+      "scala",
-      'scala',
+      "python",
-      'python',
+      "swift",
-      'swift',
+      "objectivec",
-      'objectivec',
+      "clojure",
-      'clojure',
+      "rust",
-      'rust',
+      "haskell",
-      'haskell',
-      'coffeescript',
-      'elixir',
-      'erlang',
-      'nim',
     ],
   },
 
   frontend_dev: {
-    title: 'Frontend Development',
+    title: "Frontend Development",
     skills: [
-      'vuejs',
+      "vuejs",
-      'react',
+      "react",
-      'svelte',
+      "svelte",
-      'angularjs',
+      "angularjs",
-      'angular',
+      "backbonejs",
-      'backbonejs',
+      "bootstrap",
-      'bootstrap',
+      "vuetify",
-      'vuetify',
+      "css3",
-      'css3',
+      "html5",
-      'html5',
+      "pug",
-      'pug',
+      "gulp",
-      'gulp',
+      "sass",
-      'sass',
+      "redux",
-      'redux',
+      "webpack",
-      'webpack',
+      "babel",
-      'babel',
+      "tailwind",
-      'tailwind',
+      "materialize",
-      'materialize',
+      "bulma",
-      'bulma',
+      "gtk",
-      'gtk',
+      "qt",
-      'qt',
+      "wx_widgets",
-      'wx_widgets',
+      "ember",
-      'ember',
     ],
   },
 
   backend_dev: {
-    title: 'Backend Development',
+    title: "Backend Development",
     skills: [
-      'nodejs',
+      "nodejs",
-      'spring',
+      "spring",
-      'express',
+      "express",
-      'graphql',
+      "kafka",
-      'kafka',
+      "solr",
-      'solr',
+      "rabbitMQ",
-      'rabbitMQ',
+      "hadoop",
-      'hadoop',
+      "nginx",
-      'nginx',
-      'openresty',
-      'nestjs',
     ],
   },
 
   mobile_dev: {
-    title: 'Mobile App Development',
+    title: "Mobile App Development",
     skills: [
-      'android',
+      "android",
-      'flutter',
+      "flutter",
-      'dart',
+      "dart",
-      'kotlin',
+      "kotlin",
-      'nativescript',
+      "nativescript",
-      'xamarin',
+      "xamarin",
-      'reactnative',
+      "reactnative",
-      'ionic',
+      "ionic",
-      'apachecordova',
     ],
   },
 
   ai: {
-    title: 'AI/ML',
+    title: "AI/ML",
-    skills: ['tensorflow', 'pytorch', 'pandas', 'seaborn', 'opencv', 'scikit_learn'],
+    skills: ["tensorflow", "pytorch", "opencv", "scikit_learn"],
   },
 
   database: {
-    title: 'Database',
+    title: "Database",
     skills: [
-      'mongodb',
+      "mongodb",
-      'mysql',
+      "mysql",
-      'postgresql',
+      "postgresql",
-      'redis',
+      "redis",
-      'oracle',
+      "oracle",
-      'cassandra',
+      "cassandra",
-      'couchdb',
+      "couchdb",
-      'hive',
+      "hive",
-      'realm',
+      "realm",
-      'mariadb',
+      "mariadb",
-      'cockroachdb',
-      'elasticsearch',
-      'sqlite',
-      'mssql',
     ],
   },
 
   data_visualization: {
-    title: 'Data Visualization',
+    title: "Data Visualization",
-    skills: ['d3js', 'chartjs', 'canvasjs', 'kibana', 'grafana'],
+    skills: ["d3js", "chartjs", "canvasjs"],
   },
 
   devops: {
-    title: 'Devops',
+    title: "Devops",
-    skills: ['aws', 'docker', 'jenkins', 'gcp', 'kubernetes', 'bash', 'azure', 'vagrant', 'circleci', 'travisci'],
-  },
-
-  baas: {
-    title: 'Backend as a Service(BaaS)',
-    skills: ['firebase', 'appwrite', 'amplify', 'heroku'],
-  },
-
-  framework: {
-    title: 'Framework',
-    skills: ['django', 'dotnet', 'electron', 'symfony', 'laravel', 'codeigniter', 'rails', 'flask', 'quasar'],
-  },
-
-  testing: {
-    title: 'Testing',
-    skills: ['cypress', 'selenium', 'jest', 'mocha', 'puppeteer', 'karma', 'jasmine'],
-  },
-
-  software: {
-    title: 'Software',
-    skills: ['illustrator', 'photoshop', 'xd', 'figma', 'blender', 'sketch', 'invision', 'framer', 'matlab', 'postman'],
-  },
-
-  static_site_generator: {
-    title: 'Static Site Generators',
     skills: [
-      'gatsby',
+      "aws",
-      'gridsome',
+      "docker",
-      'hugo',
+      "jenkins",
-      'jekyll',
+      "gcp",
-      'nextjs',
+      "kubernetes",
-      'nuxtjs',
+      "bash",
-      '11ty',
+      "azure",
-      'scully',
+      "vagrant",
-      'sculpin',
-      'sapper',
-      'vuepress',
-      'hexo',
-      'middleman',
     ],
   },
 
-  game_engines: {
+  baas: {
-    title: 'Game Engines',
+    title: "Backend as a Service(BaaS)",
-    skills: ['unity', 'unreal'],
+    skills: ["firebase", "amplify"],
   },
 
-  automation: {
+  framework: {
-    title: 'Automation',
+    title: "Framework",
-    skills: ['zapier', 'ifttt'],
+    skills: [
+      "django",
+      "dotnet",
+      "electron",
+      "symfony",
+      "laravel",
+      "codeigniter",
+      "rails",
+      "flask",
+    ],
+  },
+
+  testing: {
+    title: "Testing",
+    skills: [
+      "cypress",
+      "selenium",
+      "jest",
+      "mocha",
+      "puppeteer",
+      "karma",
+      "jasmine",
+    ],
+  },
+
+  software: {
+    title: "Software",
+    skills: [
+      "illustrator",
+      "photoshop",
+      "figma",
+      "blender",
+      "sketch",
+      "invision",
+      "framer",
+    ],
+  },
+
+  static_site_generator: {
+    title: "Static Site Generators",
+    skills: ["gatsby", "gridsome", "hugo", "jekyll", "nextjs", "nuxtjs"],
   },
 
   other: {
-    title: 'Other',
+    title: "Other",
-    skills: ['linux', 'git', 'arduino'],
+    skills: ["linux", "git"],
   },
-};
+}
 
 const icons = {
-  vuejs: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/vuejs/vuejs-original-wordmark.svg',
+  vuejs:
-  react: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original-wordmark.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/vuejs/vuejs-original-wordmark.svg",
+  react:
+    "https://devicons.github.io/devicon/devicon.git/icons/react/react-original-wordmark.svg",
   angularjs:
-    'https://raw.githubusercontent.com/devicons/devicon/master/icons/angularjs/angularjs-original-wordmark.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/angularjs/angularjs-original.svg",
-  angular: 'https://angular.io/assets/images/logos/angular/angular.svg',
   aws:
-    'https://raw.githubusercontent.com/devicons/devicon/master/icons/amazonwebservices/amazonwebservices-original-wordmark.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/amazonwebservices/amazonwebservices-original-wordmark.svg",
-  android: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/android/android-original-wordmark.svg',
+  android:
-  arduino: 'https://cdn.worldvectorlogo.com/logos/arduino-1.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/android/android-original-wordmark.svg",
   backbonejs:
-    'https://raw.githubusercontent.com/devicons/devicon/master/icons/backbonejs/backbonejs-original-wordmark.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/backbonejs/backbonejs-original-wordmark.svg",
-  bootstrap: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/bootstrap/bootstrap-plain-wordmark.svg',
+  bootstrap:
-  c: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/c/c-original.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/bootstrap/bootstrap-plain.svg",
-  canvasjs: 'https://raw.githubusercontent.com/Hardik0307/Hardik0307/master/assets/canvasjs-charts.svg',
+  c: "https://devicons.github.io/devicon/devicon.git/icons/c/c-original.svg",
+  canvasjs:
+    "https://raw.githubusercontent.com/Hardik0307/Hardik0307/master/assets/canvasjs-charts.svg",
   coffeescript:
-    'https://raw.githubusercontent.com/devicons/devicon/master/icons/coffeescript/coffeescript-original-wordmark.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/coffeescript/coffeescript-original-wordmark.svg",
-  codeigniter: 'https://cdn.worldvectorlogo.com/logos/codeigniter.svg',
+  codeigniter: "https://cdn.worldvectorlogo.com/logos/codeigniter.svg",
-  cplusplus: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/cplusplus/cplusplus-original.svg',
+  cplusplus:
-  css3: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/cplusplus/cplusplus-original.svg",
-  csharp: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/csharp/csharp-original.svg',
+  css3:
-  d3js: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/d3js/d3js-original.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/css3/css3-original-wordmark.svg",
-  django: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/django/django-original.svg',
+  csharp:
-  docker: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/docker/docker-original-wordmark.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/csharp/csharp-original.svg",
-  dotnet: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/dot-net/dot-net-original-wordmark.svg',
+  d3js:
-  electron: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/electron/electron-original.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/d3js/d3js-original.svg",
-  express: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/express/express-original-wordmark.svg',
+  django:
-  go: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/go/go-original.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/django/django-original.svg",
-  graphql: 'https://www.vectorlogo.zone/logos/graphql/graphql-icon.svg',
+  docker:
-  gulp: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/gulp/gulp-plain.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/docker/docker-original-wordmark.svg",
-  html5: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg',
+  dotnet:
-  hugo: 'https://api.iconify.design/logos-hugo.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/dot-net/dot-net-original-wordmark.svg",
-  java: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/java/java-original.svg',
+  electron:
-  javascript: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/electron/electron-original.svg",
-  ionic: 'https://upload.wikimedia.org/wikipedia/commons/d/d1/Ionic_Logo.svg',
+  express:
-  laravel: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/laravel/laravel-plain-wordmark.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/express/express-original-wordmark.svg",
-  meteor: 'https://devicons.github.io/devicon/devicon.git/icons/meteor/meteor-original-wordmark.svg',
+  go: "https://devicons.github.io/devicon/devicon.git/icons/go/go-original.svg",
-  mongodb: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/mongodb/mongodb-original-wordmark.svg',
+  gulp:
-  mysql: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/mysql/mysql-original-wordmark.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/gulp/gulp-plain.svg",
-  nestjs: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/nestjs/nestjs-plain.svg',
+  html5:
-  nginx: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/nginx/nginx-original.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/html5/html5-original-wordmark.svg",
-  nodejs: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original-wordmark.svg',
+  hugo: "https://api.iconify.design/logos-hugo.svg",
-  openresty: 'https://openresty.org/images/logo.png',
+  java:
-  oracle: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/oracle/oracle-original.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/java/java-original-wordmark.svg",
-  photoshop: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/photoshop/photoshop-line.svg',
+  javascript:
-  xd: 'https://cdn.worldvectorlogo.com/logos/adobe-xd.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/javascript/javascript-original.svg",
-  php: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/php/php-original.svg',
+  ionic: "https://upload.wikimedia.org/wikipedia/commons/d/d1/Ionic_Logo.svg",
-  perl: 'https://api.iconify.design/logos-perl.svg',
+  laravel:
+    "https://devicons.github.io/devicon/devicon.git/icons/laravel/laravel-plain-wordmark.svg",
+  meteor:
+    "https://devicons.github.io/devicon/devicon.git/icons/meteor/meteor-original-wordmark.svg",
+  mongodb:
+    "https://devicons.github.io/devicon/devicon.git/icons/mongodb/mongodb-original-wordmark.svg",
+  mysql:
+    "https://devicons.github.io/devicon/devicon.git/icons/mysql/mysql-original-wordmark.svg",
+  nginx:
+    "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",
+  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",
+  php:
+    "https://devicons.github.io/devicon/devicon.git/icons/php/php-original.svg",
   postgresql:
-    'https://raw.githubusercontent.com/devicons/devicon/master/icons/postgresql/postgresql-original-wordmark.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/postgresql/postgresql-original-wordmark.svg",
-  python: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/python/python-original.svg',
+  python:
-  rails: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/rails/rails-original-wordmark.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/python/python-original.svg",
-  redis: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/redis/redis-original-wordmark.svg',
+  rails:
-  ruby: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/ruby/ruby-original.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/rails/rails-original-wordmark.svg",
-  rust: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/rust/rust-plain.svg',
+  redis:
-  sass: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/sass/sass-original.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/redis/redis-original-wordmark.svg",
-  scala: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/scala/scala-original.svg',
+  ruby:
-  solidworks: 'https://cdn.worldvectorlogo.com/logos/solidworks.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/ruby/ruby-original-wordmark.svg",
-  symfony: 'https://symfony.com/logos/symfony_black_03.svg',
+  rust:
-  spring: 'https://www.vectorlogo.zone/logos/springio/springio-icon.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/rust/rust-plain.svg",
-  swift: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/swift/swift-original.svg',
+  sass:
-  typescript: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/typescript/typescript-original.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/sass/sass-original.svg",
-  linux: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/linux/linux-original.svg',
+  scala:
-  redux: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/redux/redux-original.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/scala/scala-original-wordmark.svg",
+  symfony: "https://symfony.com/logos/symfony_black_03.svg",
+  spring: "https://www.vectorlogo.zone/logos/springio/springio-icon.svg",
+  swift:
+    "https://devicons.github.io/devicon/devicon.git/icons/swift/swift-original-wordmark.svg",
+  typescript:
+    "https://devicons.github.io/devicon/devicon.git/icons/typescript/typescript-original.svg",
+  linux:
+    "https://devicons.github.io/devicon/devicon.git/icons/linux/linux-original.svg",
+  redux:
+    "https://devicons.github.io/devicon/devicon.git/icons/redux/redux-original.svg",
   webpack:
-    'https://raw.githubusercontent.com/devicons/devicon/d00d0969292a6569d45b06d3f350f463a0107b0d/icons/webpack/webpack-original-wordmark.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/webpack/webpack-original.svg",
-  flutter: 'https://www.vectorlogo.zone/logos/flutterio/flutterio-icon.svg',
+  flutter: "https://www.vectorlogo.zone/logos/flutterio/flutterio-icon.svg",
-  dart: 'https://www.vectorlogo.zone/logos/dartlang/dartlang-icon.svg',
+  dart: "https://www.vectorlogo.zone/logos/dartlang/dartlang-icon.svg",
-  kotlin: 'https://www.vectorlogo.zone/logos/kotlinlang/kotlinlang-icon.svg',
+  kotlin: "https://www.vectorlogo.zone/logos/kotlinlang/kotlinlang-icon.svg",
-  tensorflow: 'https://www.vectorlogo.zone/logos/tensorflow/tensorflow-icon.svg',
+  tensorflow:
-  chartjs: 'https://www.chartjs.org/media/logo-title.svg',
+    "https://www.vectorlogo.zone/logos/tensorflow/tensorflow-icon.svg",
-  jenkins: 'https://www.vectorlogo.zone/logos/jenkins/jenkins-icon.svg',
+  chartjs: "https://www.chartjs.org/media/logo-title.svg",
-  gcp: 'https://www.vectorlogo.zone/logos/google_cloud/google_cloud-icon.svg',
+  jenkins: "https://www.vectorlogo.zone/logos/jenkins/jenkins-icon.svg",
-  kubernetes: 'https://www.vectorlogo.zone/logos/kubernetes/kubernetes-icon.svg',
+  gcp: "https://www.vectorlogo.zone/logos/google_cloud/google_cloud-icon.svg",
-  azure: 'https://www.vectorlogo.zone/logos/microsoft_azure/microsoft_azure-icon.svg',
+  kubernetes:
-  git: 'https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg',
+    "https://www.vectorlogo.zone/logos/kubernetes/kubernetes-icon.svg",
-  kafka: 'https://www.vectorlogo.zone/logos/apache_kafka/apache_kafka-icon.svg',
+  azure:
-  solr: 'https://www.vectorlogo.zone/logos/apache_solr/apache_solr-icon.svg',
+    "https://www.vectorlogo.zone/logos/microsoft_azure/microsoft_azure-icon.svg",
-  cassandra: 'https://www.vectorlogo.zone/logos/apache_cassandra/apache_cassandra-icon.svg',
+  git: "https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg",
-  rabbitMQ: 'https://www.vectorlogo.zone/logos/rabbitmq/rabbitmq-icon.svg',
+  kafka: "https://www.vectorlogo.zone/logos/apache_kafka/apache_kafka-icon.svg",
-  hadoop: 'https://www.vectorlogo.zone/logos/apache_hadoop/apache_hadoop-icon.svg',
+  solr: "https://www.vectorlogo.zone/logos/apache_solr/apache_solr-icon.svg",
-  bash: 'https://www.vectorlogo.zone/logos/gnu_bash/gnu_bash-icon.svg',
+  cassandra:
-  pytorch: 'https://www.vectorlogo.zone/logos/pytorch/pytorch-icon.svg',
+    "https://www.vectorlogo.zone/logos/apache_cassandra/apache_cassandra-icon.svg",
-  pandas:
+  rabbitMQ: "https://www.vectorlogo.zone/logos/rabbitmq/rabbitmq-icon.svg",
-    'https://raw.githubusercontent.com/devicons/devicon/2ae2a900d2f041da66e950e4d48052658d850630/icons/pandas/pandas-original.svg',
+  hadoop:
-  seaborn: 'https://seaborn.pydata.org/_images/logo-mark-lightbg.svg',
+    "https://www.vectorlogo.zone/logos/apache_hadoop/apache_hadoop-icon.svg",
-  opencv: 'https://www.vectorlogo.zone/logos/opencv/opencv-icon.svg',
+  bash: "https://www.vectorlogo.zone/logos/gnu_bash/gnu_bash-icon.svg",
-  illustrator: 'https://www.vectorlogo.zone/logos/adobe_illustrator/adobe_illustrator-icon.svg',
+  pytorch: "https://www.vectorlogo.zone/logos/pytorch/pytorch-icon.svg",
-  figma: 'https://www.vectorlogo.zone/logos/figma/figma-icon.svg',
+  opencv: "https://www.vectorlogo.zone/logos/opencv/opencv-icon.svg",
-  blender: 'https://download.blender.org/branding/community/blender_community_badge_white.svg',
+  illustrator:
-  babel: 'https://www.vectorlogo.zone/logos/babeljs/babeljs-icon.svg',
+    "https://www.vectorlogo.zone/logos/adobe_illustrator/adobe_illustrator-icon.svg",
-  sketch: 'https://www.vectorlogo.zone/logos/sketchapp/sketchapp-icon.svg',
+  figma: "https://www.vectorlogo.zone/logos/figma/figma-icon.svg",
-  flask: 'https://www.vectorlogo.zone/logos/pocoo_flask/pocoo_flask-icon.svg',
+  blender:
+    "https://download.blender.org/branding/community/blender_community_badge_white.svg",
+  babel: "https://www.vectorlogo.zone/logos/babeljs/babeljs-icon.svg",
+  sketch: "https://www.vectorlogo.zone/logos/sketchapp/sketchapp-icon.svg",
+  flask: "https://www.vectorlogo.zone/logos/pocoo_flask/pocoo_flask-icon.svg",
   nativescript:
-    'https://raw.githubusercontent.com/detain/svg-logos/780f25886640cef088af994181646db2f6b1a3f8/svg/nativescript.svg',
+    "https://raw.githubusercontent.com/detain/svg-logos/780f25886640cef088af994181646db2f6b1a3f8/svg/nativescript.svg",
   xamarin:
-    'https://raw.githubusercontent.com/detain/svg-logos/780f25886640cef088af994181646db2f6b1a3f8/svg/xamarin.svg',
+    "https://raw.githubusercontent.com/detain/svg-logos/780f25886640cef088af994181646db2f6b1a3f8/svg/xamarin.svg",
-  vagrant: 'https://www.vectorlogo.zone/logos/vagrantup/vagrantup-icon.svg',
+  vagrant: "https://www.vectorlogo.zone/logos/vagrantup/vagrantup-icon.svg",
-  tailwind: 'https://www.vectorlogo.zone/logos/tailwindcss/tailwindcss-icon.svg',
+  tailwind:
+    "https://www.vectorlogo.zone/logos/tailwindcss/tailwindcss-icon.svg",
   materialize:
-    'https://raw.githubusercontent.com/prplx/svg-logos/5585531d45d294869c4eaab4d7cf2e9c167710a9/svg/materialize.svg',
+    "https://raw.githubusercontent.com/prplx/svg-logos/5585531d45d294869c4eaab4d7cf2e9c167710a9/svg/materialize.svg",
-  invision: 'https://www.vectorlogo.zone/logos/invisionapp/invisionapp-icon.svg',
+  invision:
-  framer: 'https://www.vectorlogo.zone/logos/framer/framer-icon.svg',
+    "https://www.vectorlogo.zone/logos/invisionapp/invisionapp-icon.svg",
-  bulma: 'https://raw.githubusercontent.com/gilbarbara/logos/804dc257b59e144eaca5bc6ffd16949752c6f789/logos/bulma.svg',
+  framer: "https://www.vectorlogo.zone/logos/framer/framer-icon.svg",
+  bulma:
+    "https://raw.githubusercontent.com/gilbarbara/logos/804dc257b59e144eaca5bc6ffd16949752c6f789/logos/bulma.svg",
   couchdb:
-    'https://raw.githubusercontent.com/devicons/devicon/0d6c64dbbf311879f7d563bfc3ccf559f9ed111c/icons/couchdb/couchdb-original.svg',
+    "https://raw.githubusercontent.com/devicons/devicon/0d6c64dbbf311879f7d563bfc3ccf559f9ed111c/icons/couchdb/couchdb-original.svg",
-  firebase: 'https://www.vectorlogo.zone/logos/firebase/firebase-icon.svg',
+  firebase: "https://www.vectorlogo.zone/logos/firebase/firebase-icon.svg",
-  amplify: 'https://docs.amplify.aws/assets/logo-dark.svg',
+  amplify: "https://docs.amplify.aws/assets/logo-dark.svg",
-  hive: 'https://www.vectorlogo.zone/logos/apache_hive/apache_hive-icon.svg',
+  hive: "https://www.vectorlogo.zone/logos/apache_hive/apache_hive-icon.svg",
   realm:
-    'https://raw.githubusercontent.com/bestofjs/bestofjs-webui/8665e8c267a0215f3159df28b33c365198101df5/public/logos/realm.svg',
+    "https://raw.githubusercontent.com/bestofjs/bestofjs-webui/8665e8c267a0215f3159df28b33c365198101df5/public/logos/realm.svg",
-  gatsby: 'https://www.vectorlogo.zone/logos/gatsbyjs/gatsbyjs-icon.svg',
+  gatsby: "https://www.vectorlogo.zone/logos/gatsbyjs/gatsbyjs-icon.svg",
-  gridsome: 'https://www.vectorlogo.zone/logos/gridsome/gridsome-icon.svg',
+  gridsome: "https://www.vectorlogo.zone/logos/gridsome/gridsome-icon.svg",
-  nuxtjs: 'https://www.vectorlogo.zone/logos/nuxtjs/nuxtjs-icon.svg',
+  nuxtjs: "https://www.vectorlogo.zone/logos/nuxtjs/nuxtjs-icon.svg",
-  jekyll: 'https://www.vectorlogo.zone/logos/jekyllrb/jekyllrb-icon.svg',
+  jekyll: "https://www.vectorlogo.zone/logos/jekyllrb/jekyllrb-icon.svg",
-  nextjs: 'https://cdn.worldvectorlogo.com/logos/nextjs-2.svg',
+  nextjs: "https://cdn.worldvectorlogo.com/logos/nextjs-3.svg",
-  reactnative: 'https://reactnative.dev/img/header_logo.svg',
+  reactnative: "https://reactnative.dev/img/header_logo.svg",
-  mariadb: 'https://www.vectorlogo.zone/logos/mariadb/mariadb-icon.svg',
+  mariadb: "https://www.vectorlogo.zone/logos/mariadb/mariadb-icon.svg",
-  cockroachdb: 'https://cdn.worldvectorlogo.com/logos/cockroachdb.svg',
+  objectivec:
-  objectivec: 'https://www.vectorlogo.zone/logos/apple_objectivec/apple_objectivec-icon.svg',
+    "https://www.vectorlogo.zone/logos/apple_objectivec/apple_objectivec-icon.svg",
-  clojure: 'https://upload.wikimedia.org/wikipedia/commons/5/5d/Clojure_logo.svg',
+  clojure:
-  haskell: 'https://upload.wikimedia.org/wikipedia/commons/1/1c/Haskell-Logo.svg',
+    "https://upload.wikimedia.org/wikipedia/commons/5/5d/Clojure_logo.svg",
-  svelte: 'https://upload.wikimedia.org/wikipedia/commons/1/1b/Svelte_Logo.svg',
+  haskell:
-  vuetify: 'https://bestofjs.org/logos/vuetify.svg',
+    "https://upload.wikimedia.org/wikipedia/commons/1/1c/Haskell-Logo.svg",
-  pug: 'https://cdn.worldvectorlogo.com/logos/pug.svg',
+  svelte: "https://upload.wikimedia.org/wikipedia/commons/1/1b/Svelte_Logo.svg",
-  mocha: 'https://www.vectorlogo.zone/logos/mochajs/mochajs-icon.svg',
+  vuetify: "https://bestofjs.org/logos/vuetify.svg",
-  jest: 'https://www.vectorlogo.zone/logos/jestjsio/jestjsio-icon.svg',
+  pug: "https://cdn.worldvectorlogo.com/logos/pug.svg",
+  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',
+    "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',
+    "https://raw.githubusercontent.com/detain/svg-logos/780f25886640cef088af994181646db2f6b1a3f8/svg/selenium-logo.svg",
-  puppeteer: 'https://www.vectorlogo.zone/logos/pptrdev/pptrdev-official.svg',
+  puppeteer: "https://www.vectorlogo.zone/logos/pptrdev/pptrdev-official.svg",
-  karma: 'https://raw.githubusercontent.com/detain/svg-logos/780f25886640cef088af994181646db2f6b1a3f8/svg/karma.svg',
+  karma:
-  jasmine: 'https://www.vectorlogo.zone/logos/jasmine/jasmine-icon.svg',
+    "https://raw.githubusercontent.com/detain/svg-logos/780f25886640cef088af994181646db2f6b1a3f8/svg/karma.svg",
-  gtk: 'https://upload.wikimedia.org/wikipedia/commons/7/71/GTK_logo.svg',
+  jasmine: "https://www.vectorlogo.zone/logos/jasmine/jasmine-icon.svg",
-  qt: 'https://upload.wikimedia.org/wikipedia/commons/0/0b/Qt_logo_2016.svg',
+  gtk: "https://upload.wikimedia.org/wikipedia/commons/7/71/GTK_logo.svg",
-  wx_widgets: 'https://upload.wikimedia.org/wikipedia/commons/b/bb/WxWidgets.svg',
+  qt: "https://upload.wikimedia.org/wikipedia/commons/0/0b/Qt_logo_2016.svg",
-  ember: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/ember/ember-original-wordmark.svg',
+  wx_widgets:
-  scikit_learn: 'https://upload.wikimedia.org/wikipedia/commons/0/05/Scikit_learn_logo_small.svg',
+    "https://upload.wikimedia.org/wikipedia/commons/b/bb/WxWidgets.svg",
-  quasar: 'https://cdn.quasar.dev/logo/svg/quasar-logo.svg',
+  ember:
-  kibana: 'https://www.vectorlogo.zone/logos/elasticco_kibana/elasticco_kibana-icon.svg',
+    "https://devicons.github.io/devicon/devicon.git/icons/ember/ember-original-wordmark.svg",
-  grafana: 'https://www.vectorlogo.zone/logos/grafana/grafana-icon.svg',
+  scikit_learn:
-  elasticsearch: 'https://www.vectorlogo.zone/logos/elastic/elastic-icon.svg',
+    "https://upload.wikimedia.org/wikipedia/commons/0/05/Scikit_learn_logo_small.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',
-  unreal:
-    'https://raw.githubusercontent.com/kenangundogan/fontisto/036b7eca71aab1bef8e6a0518f7329f13ed62f6b/icons/svg/brand/unreal-engine.svg',
-  elixir: 'https://www.vectorlogo.zone/logos/elixir-lang/elixir-lang-icon.svg',
-  heroku: 'https://www.vectorlogo.zone/logos/heroku/heroku-icon.svg',
-  appwrite: 'https://www.vectorlogo.zone/logos/appwriteio/appwriteio-icon.svg',
-  hexo: 'https://www.vectorlogo.zone/logos/hexoio/hexoio-icon.svg',
-  travisci: 'https://www.vectorlogo.zone/logos/travis-ci/travis-ci-icon.svg',
-  apachecordova: 'https://www.vectorlogo.zone/logos/apache_cordova/apache_cordova-icon.svg',
-  zapier: 'https://www.vectorlogo.zone/logos/zapier/zapier-icon.svg',
-  ifttt: 'https://www.vectorlogo.zone/logos/ifttt/ifttt-ar21.svg',
-  postman: 'https://www.vectorlogo.zone/logos/getpostman/getpostman-icon.svg',
-  erlang: 'https://www.vectorlogo.zone/logos/erlang/erlang-official.svg',
-  nim: 'https://www.vectorlogo.zone/logos/nim-lang/nim-lang-icon.svg',
-  sqlite: 'https://www.vectorlogo.zone/logos/sqlite/sqlite-icon.svg',
-  mssql: 'https://www.svgrepo.com/show/303229/microsoft-sql-server-logo.svg',
-  middleman:
-    'https://raw.githubusercontent.com/leungwensen/svg-icon/b84b3f3a3da329b7c1d02346865f8e98beb05413/dist/svg/logos/middleman.svg',
-  matlab: 'https://upload.wikimedia.org/wikipedia/commons/2/21/Matlab_Logo.png',
-};
 
 const skillWebsites = {
-  arduino: 'https://www.arduino.cc/',
+  vuejs: "https://vuejs.org/",
-  solidworks: 'https://www.solidworks.com/',
+  react: "https://reactjs.org/",
-  vuejs: 'https://vuejs.org/',
+  angularjs: "https://angular.io",
-  react: 'https://reactjs.org/',
+  aws: "https://aws.amazon.com",
-  angularjs: 'https://angular.io',
+  android: "https://developer.android.com",
-  angular: 'https://angular.io',
+  backbonejs: "https://backbonejs.org",
-  aws: 'https://aws.amazon.com',
+  bootstrap: "https://getbootstrap.com",
-  android: 'https://developer.android.com',
+  c: "https://www.cprogramming.com/",
-  backbonejs: 'https://backbonejs.org',
+  canvasjs: "https://canvasjs.com",
-  bootstrap: 'https://getbootstrap.com',
+  coffeescript: "https://offeescript.org",
-  c: 'https://www.cprogramming.com/',
+  codeigniter: "https://codeigniter.com",
-  canvasjs: 'https://canvasjs.com',
+  cplusplus: "https://www.w3schools.com/cpp/",
-  coffeescript: 'https://offeescript.org',
+  css3: "https://www.w3schools.com/css/",
-  codeigniter: 'https://codeigniter.com',
+  csharp: "https://www.w3schools.com/cs/",
-  cplusplus: 'https://www.w3schools.com/cpp/',
+  d3js: "https://d3js.org/",
-  css3: 'https://www.w3schools.com/css/',
+  django: "https://www.djangoproject.com/",
-  csharp: 'https://www.w3schools.com/cs/',
+  docker: "https://www.docker.com/",
-  d3js: 'https://d3js.org/',
+  dotnet: "https://dotnet.microsoft.com/",
-  django: 'https://www.djangoproject.com/',
+  electron: "https://www.electronjs.org",
-  docker: 'https://www.docker.com/',
+  express: "https://expressjs.com",
-  dotnet: 'https://dotnet.microsoft.com/',
+  go: "https://golang.org",
-  electron: 'https://www.electronjs.org',
+  gulp: "https://gulpjs.com",
-  express: 'https://expressjs.com',
+  html5: "https://www.w3.org/html/",
-  go: 'https://golang.org',
+  hugo: "https://gohugo.io/",
-  graphql: 'https://graphql.org',
+  java: "https://www.java.com",
-  gulp: 'https://gulpjs.com',
+  javascript: "https://developer.mozilla.org/en-US/docs/Web/JavaScript",
-  html5: 'https://www.w3.org/html/',
+  ionic: "https://ionicframework.com",
-  hugo: 'https://gohugo.io/',
+  laravel: "https://laravel.com/",
-  java: 'https://www.java.com',
+  meteor: "https://www.meteor.com/",
-  javascript: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript',
+  mongodb: "https://www.mongodb.com/",
-  ionic: 'https://ionicframework.com',
+  mysql: "https://www.mysql.com/",
-  laravel: 'https://laravel.com/',
+  nginx: "https://www.nginx.com",
-  matlab: 'https://www.mathworks.com/',
+  nodejs: "https://nodejs.org",
-  meteor: 'https://www.meteor.com/',
+  oracle: "https://www.oracle.com/",
-  mongodb: 'https://www.mongodb.com/',
+  photoshop: "https://www.photoshop.com/en",
-  mysql: 'https://www.mysql.com/',
+  php: "https://www.php.net",
-  nestjs: 'https://nestjs.com/',
+  postgresql: "https://www.postgresql.org",
-  nginx: 'https://www.nginx.com',
+  python: "https://www.python.org",
-  nodejs: 'https://nodejs.org',
+  rails: "https://rubyonrails.org",
-  openresty: 'https://openresty.org/',
+  redis: "https://redis.io",
-  oracle: 'https://www.oracle.com/',
+  ruby: "https://www.ruby-lang.org/en/",
-  photoshop: 'https://www.photoshop.com/en',
+  rust: "https://www.rust-lang.org",
-  xd: 'https://www.adobe.com/products/xd.html',
+  sass: "https://sass-lang.com",
-  php: 'https://www.php.net',
+  scala: "https://www.scala-lang.org",
-  perl: 'https://www.perl.org/',
+  symfony: "https://symfony.com",
-  postgresql: 'https://www.postgresql.org',
+  spring: "",
-  python: 'https://www.python.org',
+  swift: "",
-  rails: 'https://rubyonrails.org',
+  typescript: "https://www.typescriptlang.org/",
-  redis: 'https://redis.io',
+  linux: "https://www.linux.org/",
-  ruby: 'https://www.ruby-lang.org/en/',
+  redux: "https://redux.js.org",
-  rust: 'https://www.rust-lang.org',
+  webpack: "https://webpack.js.org",
-  sass: 'https://sass-lang.com',
+  flutter: "https://flutter.dev",
-  scala: 'https://www.scala-lang.org',
+  dart: "https://dart.dev",
-  symfony: 'https://symfony.com',
+  kotlin: "https://kotlinlang.org",
-  spring: 'https://spring.io/',
+  tensorflow: "https://www.tensorflow.org",
-  swift: 'https://developer.apple.com/swift/',
+  chartjs: "https://www.chartjs.org",
-  typescript: 'https://www.typescriptlang.org/',
+  jenkins: "https://www.jenkins.io",
-  linux: 'https://www.linux.org/',
+  gcp: "https://cloud.google.com",
-  redux: 'https://redux.js.org',
+  kubernetes: "https://kubernetes.io",
-  webpack: 'https://webpack.js.org',
+  azure: "https://azure.microsoft.com/en-in/",
-  flutter: 'https://flutter.dev',
+  git: "https://git-scm.com/",
-  dart: 'https://dart.dev',
+  kafka: "https://kafka.apache.org/",
-  kotlin: 'https://kotlinlang.org',
+  solr: "https://lucene.apache.org/solr/",
-  tensorflow: 'https://www.tensorflow.org',
+  cassandra: "https://cassandra.apache.org/",
-  chartjs: 'https://www.chartjs.org',
+  rabbitMQ: "https://www.rabbitmq.com",
-  jenkins: 'https://www.jenkins.io',
+  hadoop: "https://hadoop.apache.org/",
-  gcp: 'https://cloud.google.com',
+  bash: "https://www.gnu.org/software/bash/",
-  kubernetes: 'https://kubernetes.io',
+  pytorch: "https://pytorch.org/",
-  azure: 'https://azure.microsoft.com/en-in/',
+  opencv: "https://opencv.org/",
-  git: 'https://git-scm.com/',
+  illustrator: "https://www.adobe.com/in/products/illustrator.html",
-  kafka: 'https://kafka.apache.org/',
+  figma: "https://www.figma.com/",
-  solr: 'https://lucene.apache.org/solr/',
+  blender: "",
-  cassandra: 'https://cassandra.apache.org/',
+  babel: "https://babeljs.io/",
-  rabbitMQ: 'https://www.rabbitmq.com',
+  sketch: "https://www.sketch.com/",
-  hadoop: 'https://hadoop.apache.org/',
+  flask: "",
-  bash: 'https://www.gnu.org/software/bash/',
+  nativescript: "https://nativescript.org/",
-  pytorch: 'https://pytorch.org/',
+  xamarin: "https://dotnet.microsoft.com/apps/xamarin",
-  pandas: 'https://pandas.pydata.org/',
+  vagrant: "",
-  seaborn: 'https://seaborn.pydata.org/',
+  tailwind: "https://tailwindcss.com/",
-  opencv: 'https://opencv.org/',
+  materialize: "https://materializecss.com/",
-  illustrator: 'https://www.adobe.com/in/products/illustrator.html',
+  invision: "https://www.invisionapp.com/",
-  figma: 'https://www.figma.com/',
+  framer: "",
-  blender: 'https://www.blender.org/',
+  bulma: "https://bulma.io/",
-  babel: 'https://babeljs.io/',
+  couchdb: "",
-  sketch: 'https://www.sketch.com/',
+  firebase: "https://firebase.google.com/",
-  flask: 'https://flask.palletsprojects.com/',
+  amplify: "https://aws.amazon.com/amplify/",
-  nativescript: 'https://nativescript.org/',
+  hive: "",
-  xamarin: 'https://dotnet.microsoft.com/apps/xamarin',
+  realm: "",
-  vagrant: 'https://www.vagrantup.com/',
+  gatsby: "https://www.gatsbyjs.com/",
-  tailwind: 'https://tailwindcss.com/',
+  gridsome: "",
-  materialize: 'https://materializecss.com/',
+  nuxtjs: "https://nuxtjs.org/",
-  invision: 'https://www.invisionapp.com/',
+  jekyll: "https://jekyllrb.com/",
-  framer: 'https://www.framer.com/',
+  nextjs: "https://nextjs.org/",
-  bulma: 'https://bulma.io/',
+  reactnative: "https://reactnative.dev/",
-  couchdb: 'https://couchdb.apache.org/',
+  mariadb: "https://mariadb.org/",
-  firebase: 'https://firebase.google.com/',
+  objectivec: "",
-  amplify: 'https://aws.amazon.com/amplify/',
+  clojure: "",
-  hive: 'https://hive.apache.org/',
+  haskell: "",
-  realm: 'https://realm.io/',
+  svelte: "https://svelte.dev",
-  gatsby: 'https://www.gatsbyjs.com/',
+  vuetify: "https://vuetifyjs.com/en/",
-  gridsome: 'https://gridsome.org/',
+  pug: "https://pugjs.org",
-  nuxtjs: 'https://nuxtjs.org/',
+  mocha: "https://mochajs.org",
-  jekyll: 'https://jekyllrb.com/',
+  jest: "https://jestjs.io",
-  nextjs: 'https://nextjs.org/',
+  cypress: "https://www.cypress.io",
-  reactnative: 'https://reactnative.dev/',
+  selenium: "https://www.selenium.dev",
-  mariadb: 'https://mariadb.org/',
+  puppeteer: "https://github.com/puppeteer/puppeteer",
-  cockroachdb: 'https://www.cockroachlabs.com/product/cockroachdb/',
+  karma: "https://karma-runner.github.io/latest/index.html",
-  objectivec:
+  jasmine: "https://jasmine.github.io/",
-    'https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html',
+  gtk: "",
-  clojure: 'https://clojure.org/',
+  qt: "",
-  haskell: 'https://www.haskell.org/',
+  wx_widgets: "",
-  svelte: 'https://svelte.dev',
+  ember: "",
-  vuetify: 'https://vuetifyjs.com/en/',
+  scikit_learn: "",
-  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: 'https://www.gtk.org/',
-  qt: 'https://www.qt.io/',
-  wx_widgets: 'https://www.wxwidgets.org/',
-  ember: 'https://emberjs.com/',
-  scikit_learn: 'https://scikit-learn.org/',
-  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/',
-  unreal: 'https://unrealengine.com/',
-  hexo: 'hexo.io/',
-  heroku: 'https://heroku.com',
-  appwrite: 'https://appwrite.io',
-  zapier: 'https://zapier.com',
-  ifttt: 'https://ifttt.com/',
-  elixir: 'https://elixir-lang.org',
-  travisci: 'https://travis-ci.org',
-  apachecordova: 'https://cordova.apache.org/',
-  sqlite: 'https://www.sqlite.org/',
-  mssql: 'https://www.microsoft.com/en-us/sql-server',
-  postman: 'https://postman.com',
-  erlang: 'https://www.erlang.org/',
-  nim: 'https://nim-lang.org/',
-  middleman: 'https://middlemanapp.com/',
-};
 
-const initialSkillState = {};
+const initialSkillState = {}
 
-const skillsArray = Object.keys(categorizedSkills).map((key) => categorizedSkills[key].skills);
+const skillsArray = Object.keys(categorizedSkills).map(
-const skills = [].concat.apply([], skillsArray).sort();
+  key => categorizedSkills[key].skills
+)
+const skills = [].concat.apply([], skillsArray).sort()
 
-skills.forEach((skill) => {
+skills.forEach(skill => {
-  initialSkillState[skill] = false;
+  initialSkillState[skill] = false
-});
+})
 
-const categories = Object.keys(categorizedSkills);
+const categories = Object.keys(categorizedSkills)
 
-export { initialSkillState, icons, skills, skillWebsites, categorizedSkills, categories };
+export {
+  initialSkillState,
+  icons,
+  skills,
+  skillWebsites,
+  categorizedSkills,
+  categories,
+}

src/html.js

@@ -0,0 +1,47 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default function HTML(props) {
+  return (
+    <html {...props.htmlAttributes}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
+        <meta
+          name="viewport"
+          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="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}
+        <div
+          key={`body`}
+          id="___gatsby"
+          dangerouslySetInnerHTML={{ __html: props.body }}
+        />
+        {props.postBodyComponents}
+      </body>
+    </html>
+  )
+}
+
+HTML.propTypes = {
+  htmlAttributes: PropTypes.object,
+  headComponents: PropTypes.array,
+  bodyAttributes: PropTypes.object,
+  preBodyComponents: PropTypes.array,
+  body: PropTypes.string,
+  postBodyComponents: PropTypes.array,
+}

src/html.jsx

@@ -1,32 +0,0 @@
-/* eslint-disable react/jsx-props-no-spreading */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export default function HTML(props) {
-  const { htmlAttributes, headComponents, bodyAttributes, preBodyComponents, postBodyComponents, body } = props;
-  return (
-    <html {...htmlAttributes} lang="en">
-      <head>
-        <meta charSet="utf-8" />
-        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-        {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="Loved the tool🚀. Buy me a coffee to support the work!" data-color="#FF813F" data-position="" data-x_margin="18" data-y_margin="18" />
-      </head>
-      <body {...bodyAttributes}>
-        {preBodyComponents}
-        <div key="body" id="___gatsby" dangerouslySetInnerHTML={{ __html: body }} />
-        {postBodyComponents}
-      </body>
-    </html>
-  );
-}
-
-HTML.propTypes = {
-  htmlAttributes: PropTypes.object.isRequired,
-  headComponents: PropTypes.array.isRequired,
-  bodyAttributes: PropTypes.object.isRequired,
-  preBodyComponents: PropTypes.array.isRequired,
-  body: PropTypes.string.isRequired,
-  postBodyComponents: PropTypes.array.isRequired,
-};

src/images/icons/AIML/opencv.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" height="64" width="64"><defs><path d="M-69.65 120.638a139.301 139.301 120 1 1 139.301 0L27.71 47.993a55.418 55.418 120 1 0-55.418 0z" id="A"/></defs><g transform="matrix(1.275322 0 0 1.275322 -38.047246 -14.965624)"><use transform="matrix(.063405 0 0 .063405 29.66229 12.95855)" y="140" x="298" xlink:href="#A" fill="#ff0101"/><use transform="matrix(-.063405 0 0 -.063405 87.614835 65.58504)" y="415" x="457" xlink:href="#A" fill="#0101ff"/><use transform="matrix(-.031703 -.054911 .054911 -.031703 20.379704 60.225737)" y="415" x="142" xlink:href="#A" fill="#01ff01"/></g></svg>

src/images/icons/AIML/pytorch.svg

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#EE4C2C;}
-</style>
-<g transform="matrix(2.21262 0 0 2.21262 -39.453867 -1.770085)">
-	<path class="st0" d="M35,7.2l-1.6,1.6c2.6,2.6,2.6,6.9,0,9.5c-2.6,2.6-6.9,2.6-9.5,0s-2.6-6.9,0-9.5l4.2-4.2L28.7,4V0.8l-6.4,6.4
-		c-3.5,3.5-3.5,9.1-0.1,12.6c0,0,0,0,0.1,0.1c3.5,3.5,9.1,3.5,12.6,0.1c0,0,0,0,0.1-0.1C38.6,16.3,38.6,10.6,35,7.2z"/>
-	<circle class="st0" cx="31.9" cy="5.5" r="1.2"/>
-</g>
-</svg>

src/images/icons/AIML/scikit.svg

@@ -1 +0,0 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 48 48" xml:space="preserve"><style>.st2{fill:#010101}</style><g id="g3" transform="translate(-120.60861 -220.26017)"><path id="path5" d="M157.4 253.3c5.9-5.9 6.8-14.4 2.2-19.1-4.7-4.7-13.2-3.7-19.1 2.2-5.9 5.9-4.2 17.1-2.2 19.1 1.7 1.6 13.3 3.7 19.1-2.2z" fill="#f89939"/><path id="path7" d="M133.4 244.8c-3.4-3.4-8.4-4-11.1-1.3-2.7 2.7-2.1 7.7 1.3 11.1 3.4 3.4 9.9 2.4 11.1 1.3.9-.9 2.1-7.7-1.3-11.1z" fill="#3499cd"/></g><g id="g9" transform="translate(-120.60861 -220.26017)"><g id="g11"><path id="path13" class="st2" d="M145.1 251.9c-.6.6-1.1 1-1.6 1.2-.5.3-.9.4-1.3.4-.5 0-.9-.2-1.1-.6-.3-.4-.4-.9-.4-1.5 0-.9.2-2 .6-3.3.4-1.3.9-2.5 1.5-3.6l1.7-.6h.1c.1 0 .2.1.3.3.1.2.1.4.1.8 0 .9-.2 1.8-.6 2.6-.4.8-1.1 1.7-1.9 2.7 0 .5-.1.8-.1.9 0 .4.1.7.2.9.1.2.3.3.6.3.2 0 .5-.1.8-.3.3-.2.7-.5 1.2-1.1l-.1.9zm-2.5-2.6c.6-.6 1-1.3 1.4-2.1.3-.8.5-1.4.5-2 0-.2 0-.3-.1-.4 0-.1-.1-.1-.2-.1-.2 0-.4.4-.7 1.2-.3.8-.6 1.9-.9 3.4z"/><path id="path15" class="st2" d="M150.1 251.9c-.6.6-1.1 1-1.5 1.2-.4.3-.9.4-1.5.4s-1.1-.2-1.5-.6c-.4-.4-.6-.9-.6-1.5 0-.9.3-1.8 1-2.5.6-.8 1.4-1.1 2.2-1.1.4 0 .7.1 1 .3.2.2.4.5.4.8 0 .9-1 1.7-2.9 2.2.2.9.6 1.3 1.4 1.3.3 0 .6-.1.8-.2.3-.2.7-.5 1.2-1v.7zm-3.5-1.2c1.1-.3 1.7-.9 1.7-1.8 0-.4-.2-.6-.5-.6s-.6.2-.8.7c-.3.4-.4.9-.4 1.7z"/><path id="path17" class="st2" d="M157.1 251.9c-.7.7-1.2 1.1-1.5 1.3-.3.2-.6.3-.9.3-.7 0-1-.6-1-1.8-.4.6-.8 1.1-1.2 1.4-.4.3-.8.5-1.2.5-.4 0-.7-.2-1-.5s-.4-.8-.4-1.3c0-.7.2-1.3.5-1.9.4-.6.8-1.1 1.4-1.5.6-.4 1.1-.6 1.5-.6.6 0 .9.3 1.2.8l1.4-.7h.4l-.6 1.9c-.3 1-.5 1.6-.5 2 0 .4.1.6.4.6.2 0 .4-.1.6-.3.2-.2.5-.5.9-.8v.6zm-4.8.3c.4 0 .9-.4 1.3-1.1.4-.8.6-1.4.6-2.1 0-.2-.1-.4-.2-.6-.1-.1-.3-.2-.4-.2-.4 0-.9.4-1.3 1.1-.4.8-.6 1.4-.6 2.1 0 .2.1.4.2.6.1.2.2.2.4.2z"/><path id="path19" class="st2" d="M162.1 251.9c-1.1 1.1-2 1.6-2.6 1.6-.3 0-.5-.1-.7-.3-.2-.2-.3-.5-.3-.8 0-.6.3-1.5 1-2.5-.3.2-.7.3-1.1.4-.3.5-.7 1.1-1.4 1.7v-.6c.3-.4.7-.7.9-1.2-.4-.2-.6-.4-.6-.7 0-.3.1-.7.3-1.1.2-.4.6-.6 1-.6.3 0 .5.2.5.5s-.1.7-.3 1.2c.7-.1 1.4-.6 1.9-1.7h.6l-.6 1.7c-.3.7-.4 1.2-.5 1.5-.1.3-.1.5-.1.7 0 .2 0 .3.1.4.1.1.2.2.3.2.2 0 .3-.1.5-.2.1-.1.5-.4 1-.9l.1.7z"/><path id="path21" class="st2" d="M168.6 251.9c-1 1.1-1.9 1.6-2.6 1.6-.3 0-.5-.1-.7-.3-.2-.2-.3-.5-.3-.8 0-.5.2-1.2.6-2.2.2-.5.3-.9.3-1 0-.1-.1-.2-.2-.2s-.1 0-.2.1-.2.1-.3.3l-.4.4c-.1.1-.2.3-.4.4l-.4.4c-.2.2-.3.4-.3.6-.1.4-.1.7-.1 1v.9l-1.5.3c0-.6-.1-1-.1-1.3 0-.7.1-1.4.2-2 .2-.6.4-1.4.8-2.1l1.6-.3c-.3.9-.6 1.6-.7 2.2.7-.8 1.3-1.4 1.7-1.7.4-.3.8-.5 1.1-.5.2 0 .4.1.6.3.2.2.2.4.2.6 0 .4-.2 1.1-.6 2.1-.3.7-.4 1.1-.4 1.3 0 .3.1.4.3.4.3 0 .8-.4 1.6-1.3v.8z"/></g></g><text id="text25" transform="translate(26.54 25.2403)" font-size="3.9947" font-family="HelveticaNeue-BlackExt" fill="#fff">scikit</text></svg>

src/images/icons/AIML/tensorflow.svg

@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#F6BD3A;}
-	.st1{fill:#EB8C23;}
-	.st2{fill:#E35A2B;}
-</style>
-<g>
-	<path class="st0" d="M20.8,25.9l6.5-3.8l6.4,3.8l-6.4,3.7L20.8,25.9L20.8,25.9z M1.3,14.7L27.3,0l19.3,10.9L40.2,22l-12.9-7.3
-		l-19.4,11L1.3,14.7z"/>
-	<path class="st1" d="M20.8,40.6v-7.4l6.4-3.7l6.5-3.7v7.4l-6.4,3.7v7.4L20.8,48V40.6z M20.8,25.9l-6.5-3.7l-6.5,3.6v-7.3L27.3,7.3
-		V22L20.8,25.9z M40.1,18.4v-3.7l6.4-3.8l0.1,7.4L40.1,22L40.1,18.4z"/>
-	<path class="st2" d="M14.3,44.1v-22l6.4-3.6l0.1,7.3l6.5,3.6v7.4l-6.5-3.5V48L14.3,44.1z M4.6,23.8l-3.2-2v-7.2l6.4,3.7v7.4
-		L4.6,23.8z M27.3,14.7V7.3l12.8,7.3l0.1,7.4L27.3,14.7L27.3,14.7z"/>
-</g>
-</svg>

src/images/icons/Automation/ifttt.svg

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 24 12" style="enable-background:new 0 0 24 12;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FF4A00;}
-</style>
-<path d="M.837 2.756h6.488v4.062H.837z" fill="#09f"/><path d="M.837 6.818H4.9v2.427H.837z" fill="#f1422a"/><path d="M4.9 6.818h2.427v2.427H4.9z" fill="#333"/><path d="M8.168 3.96h1.298v4.08H8.168zm7.418 0H13.36v1.298h.927V8.04h1.298V5.258h.927V3.96zm3.524 0h-2.226v1.298h.927V8.04H19.1V5.258h.927V3.96zm3.524 0h-2.226v1.298h.927V8.04h1.298V5.258h.927V3.96zM13 5.258V3.96h-2.967v4.08h1.298V6.927h1.113V5.63H11.32v-.37z" fill="#09f"/>
-</svg>

src/images/icons/Automation/zapier.svg

@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FF4A00;}
-</style>
-<path class="st0" d="M47.6,19.8H33.4l10-10c-0.8-1.2-1.5-1.9-2.3-3.1C40,5.9,38.9,5,38,4.1L28,14V0.2c-1.3-0.3-2.5-0.4-3.8-0.4
-	c-1.3-0.1-2.6,0-3.8,0.4v14.2L10,4.1C8.8,4.7,7.8,5.6,6.9,6.7C6.2,7.9,5,8.7,4.2,9.8l10,10H0.4L0,23.6c-0.1,1.3,0,2.6,0.4,3.8h14.2
-	L4.2,37.8c1.5,2.3,3.5,4.2,5.8,5.8l10-10v14.2c1.3,0.3,2.5,0.4,3.8,0.4c1.3,0.1,2.6,0,3.8-0.4V33.6l10,10c1.2-0.7,2.2-1.6,3.1-2.7
-	c1-0.9,1.9-2,2.7-3.1l-10-10h14.2c0.3-1.3,0.4-2.5,0.4-3.8C48.1,22.6,47.9,21.2,47.6,19.8L47.6,19.8z M29.9,23.6
-	c0,1.7-0.3,3.4-0.8,5c-1.6,0.6-3.3,0.9-5,0.8c-1.7,0-3.4-0.3-5-0.8c-0.6-1.6-0.9-3.3-0.8-5c0-1.7,0.3-3.4,0.8-5
-	c1.6-0.6,3.3-0.9,5-0.8c1.7,0,3.4,0.3,5,0.8C29.6,20.3,29.9,21.9,29.9,23.6z"/>
-</svg>

src/images/icons/BaaS/amplify.svg

@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:url(#Fill-1_1_);}
-</style>
-<desc>Created with Sketch.</desc>
-<g id="Page-1">
-	
-		<linearGradient id="Fill-1_1_" gradientUnits="userSpaceOnUse" x1="-266.2616" y1="433.4901" x2="-267.2616" y2="432.9336" gradientTransform="matrix(48 0 0 -35.8095 12831 15540.3857)">
-		<stop  offset="0" style="stop-color:#FF9900"/>
-		<stop  offset="1" style="stop-color:#FFC300"/>
-	</linearGradient>
-	<path id="Fill-1" class="st0" d="M10.4,35.8H24l3.5,6.1h-0.1H0l9.6-16.7l4-7l3.5,6L10.4,35.8z M15.5,15.1l3.3-5.8l18.8,32.6H31
-		L15.5,15.1z M20.7,6.1h6.7L48,41.9h-6.7L20.7,6.1z"/>
-</g>
-</svg>

src/images/icons/BaaS/firebase.svg

@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFA000;}
-	.st1{fill:#F57F17;}
-	.st2{fill:#FFCA28;}
-</style>
-<g>
-	<path class="st0" d="M29.4,17.3l-4.8,4.5l-4.5-9l2.3-5.2c0.6-1,1.5-1,2.1,0L29.4,17.3z"/>
-	<path class="st1" d="M20.2,12.8l4.5,9l-18,16.7L20.2,12.8z"/>
-	<path class="st2" d="M34.7,10.5c0.9-0.8,1.7-0.5,2,0.6l4.7,27.2l-15.5,9.3c-0.5,0.3-2,0.4-2,0.4s-1.3-0.2-1.8-0.4L6.7,38.5
-		L34.7,10.5z"/>
-	<path class="st0" d="M20.2,12.8L6.7,38.5l6-37.6c0.2-1.2,0.9-1.3,1.5-0.3L20.2,12.8z"/>
-</g>
-</svg>

src/images/icons/BaaS/heroku.svg

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 5.1 5.1" style="enable-background:new 0 0 5.1 5.1;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#6762A6;}
-	.st1{fill:#FFFFFF;}
-</style>
-<path class="st0" d="M4.1,5.1H1c-0.3,0-0.5-0.2-0.5-0.5V0.5C0.5,0.2,0.7,0,1,0h3.2c0.3,0,0.5,0.2,0.5,0.5v4.1
-	C4.6,4.9,4.4,5.1,4.1,5.1z"/>
-<path class="st1" d="M3,4.4v-2c0,0,0.1-0.5-1.6,0.2c0,0,0-1.9,0-1.9l0.6,0v1.2c0,0,1.6-0.6,1.6,0.5v2L3,4.4L3,4.4z M3.3,1.4H2.7
-	c0.2-0.3,0.4-0.7,0.4-0.7h0.6C3.8,0.7,3.7,1,3.3,1.4L3.3,1.4z M1.4,4.4V3.3l0.6,0.6L1.4,4.4L1.4,4.4z"/>
-</svg>

src/images/icons/BackendDevelopment/express.svg

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
-<path d="M48,37.2c-1.7,0.4-2.8,0-3.8-1.4l-6.9-9.5l-1-1.3l-8,10.9c-0.9,1.3-1.9,1.9-3.6,1.4L35,23.4l-9.6-12.5
-	c1.6-0.3,2.8-0.2,3.8,1.3l7.1,9.7l7.2-9.6c0.9-1.3,1.9-1.8,3.6-1.3l-3.7,4.9l-5,6.6c-0.6,0.8-0.5,1.3,0,2L48,37.2z M0,23.1L0.9,19
-	C3.1,10.8,12.6,7.4,19,12.5c3.8,3,4.7,7.2,4.5,11.9H2.2C1.9,32.9,8,38,15.8,35.4c2.7-0.9,4.4-3.1,5.2-5.7c0.4-1.3,1.1-1.6,2.4-1.2
-	c-0.6,3.4-2.1,6.2-5.2,7.9C13.6,39,7,38.2,3.6,34.5c-2.1-2.1-2.9-4.8-3.3-7.7c-0.1-0.5-0.2-0.9-0.3-1.4C0,24.7,0,23.9,0,23.1L0,23.1
-	z M2.3,22.6h19.3c-0.1-6.1-4-10.5-9.2-10.6C6.6,12,2.5,16.2,2.3,22.6z"/>
-</svg>

src/images/icons/BackendDevelopment/graphql.svg

@@ -1,22 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#E10098;}
-</style>
-<g>
-	<path class="st0" d="M6.5,36.6l-1.8-1l19.6-34l1.8,1L6.5,36.6z"/>
-	<path class="st0" d="M4.4,32.8h39.3v2H4.4V32.8z"/>
-	<path class="st0" d="M24.8,45.3L5.1,34l1-1.8l19.6,11.3L24.8,45.3z M41.8,15.8L22.2,4.4l1-1.8L42.9,14L41.8,15.8z"/>
-	<path class="st0" d="M6.2,15.8l-1-1.8L24.8,2.7l1,1.8L6.2,15.8z"/>
-	<path class="st0" d="M41.5,36.6l-19.6-34l1.8-1l19.6,34L41.5,36.6z M5.9,12.7h2v22.7h-2V12.7z M40,12.7h2v22.7h-2V12.7z"/>
-	<path class="st0" d="M24.4,44.5l-0.9-1.5l17.1-9.9l0.9,1.5L24.4,44.5z"/>
-	<path class="st0" d="M44.8,36c-1.2,2-3.8,2.7-5.8,1.6c-2-1.2-2.7-3.8-1.6-5.8c1.2-2,3.8-2.7,5.8-1.6C45.3,31.3,46,34,44.8,36
-		 M10.6,16.3c-1.2,2-3.8,2.7-5.8,1.6C2.7,16.7,2,14,3.2,12c1.2-2,3.8-2.7,5.8-1.6C11.1,11.6,11.8,14.2,10.6,16.3 M3.2,36
-		c-1.2-2-0.5-4.7,1.6-5.8c2-1.2,4.7-0.5,5.8,1.6c1.2,2,0.5,4.7-1.6,5.8C7,38.7,4.4,38,3.2,36 M37.4,16.3c-1.2-2-0.5-4.7,1.6-5.8
-		c2-1.2,4.7-0.5,5.8,1.6c1.2,2,0.5,4.7-1.6,5.8C41.2,19,38.6,18.3,37.4,16.3 M24,48c-2.4,0-4.3-1.9-4.3-4.3c0-2.4,1.9-4.3,4.3-4.3
-		s4.3,1.9,4.3,4.3c0,0,0,0,0,0C28.3,46.1,26.4,48,24,48 M24,8.6c-2.4,0-4.3-1.9-4.3-4.3c0,0,0,0,0,0C19.7,1.9,21.6,0,24,0
-		s4.3,1.9,4.3,4.3C28.3,6.6,26.4,8.6,24,8.6C24,8.6,24,8.6,24,8.6"/>
-</g>
-</svg>

src/images/icons/BackendDevelopment/hadoop.svg

@@ -1,115 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFF00;}
-	.st1{fill:#FFFFCC;}
-	.st2{fill:#CCCC00;}
-</style>
-<path class="st0" d="M17.7,13.9l-3.2,0.5l-2.9,1.3l-2.5,1.6l-2.4,2.9l-1.3,1.4L4.1,22l-0.3-0.8l0.6-0.9l0.1-1.2l0.4,0l0.4,0.4
-	l-0.1-1.2l-0.5-0.3l0-0.5l-1.1,0.6l-1,1.2l-0.2,1.1l0.4,0.9l0.4,1.5l0.8,0.4l0.9,0l0.8-0.5l-0.6,2.8l0.6,3.2l-0.6,1.5l-2,2.2
-	l0.4,1.3l1,1.5l1.8,1.3l1,0.1l1.1,0l-0.7,2.7l2.4,1l3,0.4l1-0.7l0.1-1.8l1.2-1.9l0.1-1.5l2.8,0.2l2.6-0.2l-2.6,1.6l0.4,1.9l1.6,2.6
-	l1.6,0.7l1.3-0.5l0.5-1l2.7-2l0.5,0.4l4.2,0.2l0.8-0.7l0.1-1.2l-0.3-0.5l-0.2-3.2l-1.4-2.8l0.2-1.2l0.8,0.4l2.4,2.2l1.2,0.1l1.3-0.5
-	l1.3-1l0.6-2.1l3.7,0.2l2.3-0.9l1.8-1.7l1.3-2.5l0.3-2.9l-0.3-3.4l-0.7-3l-0.7-1l-1-0.3l-1.8,1.9l-1.6,0.6l-1.4-2.3l-1.4-1.3
-	l-0.8-0.5l-3-2.5l-2.4-1.3l-2.4-0.2l-2.8,0.5l-2.5,0.9l-1.7,1.4l-1.4,1.6l-1.4,0.4L17.7,13.9"/>
-<path class="st1" d="M8.4,21.1c-2.7,3.2-2.1,7.1-1.4,10.8c-0.4-1-0.8-2-1.2-3.1L5.4,26c0-1,0.1-1.9,0.1-2.9l1.1-2.7l1.7-2.6l2.7-2.2
-	l2.9-1.2l3.4-0.4l-3.2,3.6C11.7,18.4,10.2,19,8.4,21.1"/>
-<path class="st1" d="M21.3,11.4c-1.9,1.9-2.9,3.3-4.1,5.4c-0.9,1.6-1.8,3-2.7,4.6c-0.5,0.8-0.5,1.4-0.6,2.3l-1.3-1.6
-	c0.2-0.6,0.4-1.3,0.6-1.9l2.2-3.9l4.6-4.5C20.3,11.6,20.8,11.5,21.3,11.4 M30.7,6.8c-1.5,0.6-4,0.8-4.2,2.5
-	c-0.1,1.2,0.1,1.9,0.8,3.2c-1.8-1.9-2.3-1.6-5.9-1L23,9.3l2.7-1.7l3.4-0.8L30.7,6.8"/>
-<path class="st2" d="M34.9,30.4c0.5,0.3,0.5,0.5,0.4,0.8c0.4-0.2,0.8-0.3,1.2-0.5l0.8-1l0.6-1.5l-0.7-0.6L33.9,28
-	c-0.1,0.2-0.2,0.4-0.2,0.7c0,0.3,0,0.6,0.1,0.9c0.1,0.2,0.2,0.4,0.3,0.5c0.2,0.1,0.3,0.2,0.5,0.2C34.6,30.4,34.8,30.4,34.9,30.4
-	 M34.6,24.9c-1.6,0.5-1.6,0.6-2.1,2.2C33.1,26.1,33.6,25.6,34.6,24.9 M45.3,12.9c-0.3,0.1-0.6,0.2-0.7,0.5c-0.4,0.6-0.7,1-1.4,1.4
-	c-0.3,0.2-0.7,0.3-1,0.4c-0.3,0.1-0.5,0-0.7,0.2c0.1,0,0.3,0,0.4,0.1h0.9l1.2-0.7l0.7-0.7L45.3,12.9 M19.6,16.5
-	c-0.6,1.7-1.2,3.2-2.2,4.8c1.2-1.3,2-2.5,2.7-4c0.3-0.6,0.3-1.3,1.1-1c0,0.6,0.2,1.2,0.2,1.7c0.4-3,1.6-4.2,4.3-5.3L23.4,13
-	l-2.2,0.5L20.2,15L19.6,16.5 M24.8,16.4c0.6,2.7,1.4,5.4,1.8,8.2c0.2,1.8,0.3,2.7-0.6,4.2c-1-0.1-1.6,0-2.6,0.4
-	c-3.8,1.3-6,3.1-8.6-0.6l2.5,1.2c0.6-0.1,1.2-0.2,1.8-0.3c1-0.6,2.1-1.2,3.1-1.8l2.4-0.5l0.8-3.3l-0.6-4.4c0-0.7,0-1.4-0.1-2.1
-	C24.8,17.1,24.8,16.7,24.8,16.4 M31.5,33.4c-0.3,2.2,0.7,3.4,0.3,4c-0.1,0.2-0.3,0.5-0.5,0.6c-0.7,0.3-1.6-0.1-1.7,0.1h-2.2
-	l-0.9-0.4l1.4-1.6c0.4-1,0.9-1.9,1.3-2.9l0.9-2.9h0.4L31.5,33.4"/>
-<path class="st2" d="M27.7,26.9c0.2,1,0.5,1.3,1,2.2c-0.3,1.6-0.8,3.5-1.4,4.9c-0.3,0.6-0.5,0.9-0.9,1.4c-0.8,0.8-1.5,1.5-2.4,2.1
-	c-0.6,0.5-1.1,0.2-1.8,0.1c-0.3,0.6-0.4,0.9-1,1.2c-0.9,0.5-1.8-0.5-2.5-1.1c0.5,0.8,1.1,1.7,1.6,2.5c0.4,0.3,0.7,0.7,1.1,1l0.9,0.1
-	l1.2-0.8c0.2-0.4,0.4-0.8,0.7-1.2c0.5-0.3,0.9-0.7,1.4-1c0.6-0.5,1.1-1,1.7-1.4l1.1-1.5l1-1.8c0.4-1.2,0.8-2.5,1.2-3.7
-	c0-0.5,0.1-0.9,0.1-1.4c-0.5-0.2-1-0.5-1.5-0.7C28.5,27.6,28.1,27.3,27.7,26.9 M15.4,34.1c1.7,0,3.6-0.1,5.1-0.8
-	c0.4-0.7,0.9-1.2,1.4-1.8c-0.5,0.9-0.7,1.5-0.8,2.5l-0.5,0.8c-1.3,0-2.6,0.1-3.9,0.1c-0.4,0-0.8-0.1-1.3-0.1c0,0-0.1-0.1-0.1-0.1
-	C15.4,34.4,15.4,34.2,15.4,34.1 M15.2,32.9L15,31.6c-0.3,1.8-0.2,3-1,4.6c-0.6,0.7-1.4,1.4-2.2,1.7c0.1,0.4,0.1,0.7,0.1,1
-	c-0.2,1.2-2.5,0.6-3.4,0.6l4.6,1.2l1-0.4c0.1-0.7,0.2-1.3,0.3-2l1-1.8l0.2-1.1L15.2,32.9 M12.6,22.8c0,0.9-0.1,1.2,0.3,2
-	c0.5,1,1.1,1.9,1.6,2.8l0.2-1.9C14,24.8,13.3,23.8,12.6,22.8 M5.6,29.3c-0.1,0.3-0.3,0.6-0.4,0.9c0.4,1.4,0.8,2.2,1.5,3.4
-	c-0.1,0.5-0.2,0.7-0.5,1.1c-0.7-0.1-1.3-0.1-2-0.1c0.8,0.6,1.5,1.2,2.3,1.8c0.4-0.1,0.8-0.1,1.1-0.2l1.1-1.1l-1.6-2.5
-	C6.6,31.5,6.1,30.4,5.6,29.3 M45.3,12.4c0.5,2.1,1.1,4,1,6.2c-0.1,2.6-0.6,6-3,7.5c-2.7,1.8-5.9,0.9-8.9,0.2l3.7,1.5
-	c1.1,0.1,2.3,0.1,3.4,0.2c0.8-0.2,1.6-0.5,2.3-0.7c0.6-0.5,1.2-1,1.8-1.5L47,23l0.5-3.3c-0.1-1.1-0.3-2.2-0.4-3.3l-0.8-3.2
-	C46,12.9,45.7,12.7,45.3,12.4 M4.5,18.7c-1.2,0.8-1.7,1.2-1.6,2.7l0.4,1.3l0.5,0.4l0.6,0.2L5.7,23c0.2-0.6,0.4-1.2,0.6-1.9l-1.7,0.8
-	H4.2c-0.1-0.2-0.3-0.4-0.4-0.7l0.5-0.8L4.6,19c0.1,0,0.2,0.1,0.4,0.1c0.1,0.1,0.3,0.2,0.4,0.3l-0.1-0.8L5,18.2
-	C4.9,18.1,4.8,18,4.7,18L4.5,18.7 M32.4,6.9c1.1,1,2.5,1.9,3.3,3.2c0.3,0.5,0.7,0.7,0,1.4c0.8-0.2,1.1-0.2,1.7-0.1
-	c1.1,0.1,2.2,1.7,2.2,2.9c0,0.1-0.3,0.3-1.2,0.6c0,0-0.5-0.1-0.5,0c0.1,0.2,0.2,0.3,0.4,0.4c0,0.3,0.1,0.7,0.3,1
-	c0.5,0,1.1,0,1.6,0.2c0.2,0.3,0.2,0.6,0.1,0.9l0.6-0.1c-0.1-0.5-0.1-0.9-0.2-1.4c0.2-0.3,0.4-0.6,0.5-0.9L40.5,13
-	c-0.5-0.5-1-1-1.5-1.4l-0.1,0c-0.6-0.3-1.1-0.7-1.7-1l-2.8-2.3L32.4,6.9 M34.2,15.3c-0.1,0.1-0.1,0.3-0.3,0.4
-	c0.5,0.4,0.7,0.7,0.8,1.3c-0.5,0.3-1,0.5-1.6,0.8l-1.3,1.3c-0.6-0.3-0.7-0.5-1-1.1C30.6,18,30.3,18.1,30,18c0.2,0,0.3,0,0.4-0.1
-	l0.8-0.9c0.5-0.4,1-0.7,1.5-1.1l1-0.3C33.9,15.5,34.1,15.4,34.2,15.3"/>
-<path class="st2" d="M35.7,16.9c-1.6,0.9-3.2,1.8-4.1,3.5C31.6,18.2,33.7,17.3,35.7,16.9 M31.3,12.7c-1.2,0.8-2.1,2.5-2,4.2
-	c-0.4-1.4-0.3-2.8,1-3.7c0.2-0.1,0.4-0.2,0.6-0.3C31,12.7,31.1,12.7,31.3,12.7"/>
-<path d="M47.7,16.6c-0.2-1.4-0.6-2.8-1.1-3.7c-0.1-0.1-0.2-0.2-0.3-0.4c-0.3-0.3-0.6-0.5-1-0.6c-0.4-0.1-0.8-0.2-1.2,0
-	c-0.1,0-0.2,0.1-0.2,0.2c-0.2,0.2-0.4,0.5-0.6,0.8c-0.2,0.3-0.4,0.6-0.7,0.8c-0.3,0.2-0.7,0.4-1,0.5c-0.1-0.4-0.3-0.7-0.5-1
-	c-0.2-0.4-0.5-0.7-0.8-1.1c-0.2-0.3-0.5-0.5-0.7-0.7c-0.3-0.2-0.5-0.4-0.8-0.5c-0.8-0.5-1.5-1.1-2.2-1.7c-0.3-0.3-0.6-0.6-1-0.8
-	c-1.7-1.4-3.3-2.1-4.9-2.2C29,6,27.2,6.5,25.1,7.3c-1,0.4-1.7,0.9-2.4,1.5c-0.6,0.6-1.1,1.2-1.7,2c-0.3,0-0.6,0.1-0.9,0.2
-	c-0.3,0.1-0.7,0.4-1.1,0.7c-0.3,0.2-0.6,0.5-0.8,0.8c-0.2,0.2-0.5,0.5-0.7,0.7c-1.9,0.3-3.4,0.6-4.8,1.2c-1.4,0.5-2.7,1.3-3.9,2.4
-	c-0.5,0.4-1,0.9-1.4,1.5c-0.4,0.5-0.7,1-1,1.6c-0.3,0.3-0.5,0.6-0.8,0.8c-0.3,0.2-0.6,0.4-0.9,0.6l0,0c-0.2,0.1-0.3,0.1-0.3,0.1
-	c0,0,0,0,0-0.1c0.5-0.4,0.5-1.1,0.6-1.7C5,19.7,5,19.8,5.1,19.9c0.1,0.1,0.1,0.2,0.2,0.3l0.3,0.4l0.1-0.5c0.1-0.4,0.2-1,0.1-1.4
-	c-0.1-0.3-0.2-0.6-0.5-0.8c0-0.1,0-0.1,0.1-0.2c0.1-0.2,0.2-0.4,0.2-0.6l0.1-0.4l-0.4,0.1c-0.5,0.1-1.7,0.7-2.5,1.6
-	c-0.3,0.3-0.6,0.7-0.7,1c-0.2,0.4-0.3,0.8-0.2,1.2c0.1,0.3,0.2,0.7,0.6,1c0.1,0.2,0.1,0.4,0.2,0.6c0.1,0.2,0.1,0.4,0.2,0.6
-	c0.2,0.5,0.6,0.8,1.1,0.9c0.4,0.1,0.7,0.1,1.1,0c-0.1,0.5-0.1,0.9-0.1,1.4c0,0.6,0,1.4,0.1,2.2c0,0.2,0,0.4,0.1,0.6
-	C5,28,5,28.2,5.1,28.4C5,28.6,4.9,28.8,4.9,29l-0.3,0.9l-0.7,0.7c-0.2,0.2-0.5,0.5-0.7,0.7c0,0-0.1,0.1-0.2,0.2
-	c-0.5,0.4-0.6,0.5-0.4,1.3c0.1,0.5,0.2,1,0.5,1.4c0.2,0.4,0.5,0.9,0.9,1.2c0.5,0.5,1.3,1.1,2.1,1.4c0.5,0.2,1,0.3,1.4,0.2
-	c0,0.1,0,0.1-0.1,0.2c-0.1,0.2-0.2,0.4-0.2,0.6c-0.6,1.2,0,1.9,0.9,2.3c0.5,0.2,1,0.3,1.5,0.5c0.1,0,0.2,0.1,0.3,0.1
-	c0.6,0.2,1.6,0.5,2.6,0.5c1,0.1,1.9-0.1,2.2-1.1c0.1-0.4,0.2-0.6,0.2-0.9c0-0.3,0-0.5,0-0.8c0.3-0.6,0.4-0.8,0.6-1.1
-	c0-0.1,0.1-0.1,0.1-0.2c0.2-0.3,0.3-0.6,0.4-0.9c0-0.3,0-0.5,0-0.9c0,0,0-0.1,0-0.2c0.6,0.1,1.2,0.1,1.8,0.1c0.3,0,0.6,0,0.9,0
-	c-0.1,0-0.2,0.1-0.2,0.1l-0.1,0.1c-0.8,0.4-0.8,1.2-0.6,2c0.2,0.7,0.7,1.4,1,1.9c0.6,0.9,1.2,1.7,1.9,2.2c0.7,0.5,1.6,0.5,2.7-0.1
-	c0.6-0.3,0.7-0.6,1-1c0.1-0.1,0.2-0.3,0.2-0.4c0.2-0.2,0.8-0.6,1.4-1.1c0.2-0.2,0.4-0.3,0.6-0.5c0.1,0.1,0.3,0.2,0.5,0.2
-	c0.3,0.1,0.6,0.1,1,0.1c0.3,0,1.3,0,1.9,0c0.2,0,0.4,0,0.5,0c0.6,0,1.2,0,1.6-0.3c0.4-0.2,0.7-0.7,0.7-1.4c0-0.3,0-0.5,0-0.8
-	c0-0.2-0.1-0.4-0.3-0.6c0-0.3,0-0.7,0-1c0-0.3,0-0.7,0-1c0-0.4-0.1-0.7-0.1-1.1c-0.1-0.3-0.2-0.6-0.4-1c-0.1-0.2-0.2-0.5-0.3-0.7
-	l-0.2,0.1l0,0l0.2-0.1v0c-0.1-0.4-0.3-0.7-0.5-1.1c0-0.1,0-0.2,0-0.2l0.4,0.3l0.5,0.5c0.4,0.4,0.8,0.7,1.2,1c0.5,0.3,1,0.4,1.6,0.4
-	c0.7,0,1.4-0.3,2-0.8c0.6-0.4,1.1-1,1.3-1.7l0.2-0.6l0.1-0.4c1,0.2,2,0.2,3,0.1c1-0.1,1.9-0.3,2.7-0.8c1.2-0.6,2.1-1.6,2.7-2.7h0
-	c0.7-1.2,1.1-2.7,1.3-4.2C48.1,19.8,48,18.1,47.7,16.6z M35.2,26.6c-0.6-0.2-0.9-0.5-1.4-0.8c0.1,0.6,0.2,1.2,0,1.8
-	c-0.3,0.9-0.7,2.5,0.6,2.8c0.5,0.1,0.7,0.1,1.4-0.3c-0.6,0.1-0.8,0.1-1.2,0c-0.3-0.1-0.5-0.3-0.6-0.5c0.1,0.1,0.3,0.1,0.7,0.2
-	c1,0.2,1.9-0.2,2-0.9c0.1-0.4,0.1-0.6,0.3-1.1c0.2,0.1,0.4,0.1,0.6,0.2l-0.4,1.2c-0.3,1-1.5,1.8-2.6,1.8c-1,0-1.6-0.6-2.3-1.2
-	c-0.5-0.4-0.9-0.8-1.4-1.2c-1.2-0.4-2.2-0.8-3.3-1.7c0.8,0.9,1.3,1.5,2.5,1.9c-0.2,1.7-0.7,2.9-1.2,4.5c-0.2,0.7-2,3.6-2.5,3.9
-	c-0.3,0.2-2.5,2-2.9,2.3c-0.3,0.4-0.6,1-1,1.2c-1.4,0.7-2.3-0.7-3-1.9c-0.3-0.5-1.3-2.1-0.5-2.5c0.8-0.4,1.2-0.7,2-1.2
-	c0.1,0.2,0.3,0.4,0.4,0.6l-0.1-0.7c-0.1-0.4-0.1-0.8,0-1.2c0-0.4,0.1-0.8,0.1-1.2c-0.1,0.4-0.4,0.8-0.5,1.3c0,0.2-0.1,0.3-0.1,0.4
-	c-1.8,0.4-3.6,0.4-5.4,0.1c-0.1-0.7-0.3-1.4-0.4-1.9c0,0.6,0,2.1,0,3c0,0.7,0,0.9-0.4,1.5c-0.3,0.5-0.5,0.7-0.9,1.5
-	c0,0.6,0,0.9-0.1,1.5c-0.2,0.9-2.8,0.2-3.4,0c-0.8-0.2-2.5-0.6-2.1-1.6c0.4-1,0.6-2,0.8-3.3c-1.5-2.2-2.9-5.1-3.2-7.7
-	c-0.2-2-0.1-3.3,0.4-4.5c0.7-2,1.7-3.7,3.2-5.1c2.1-1.9,4.1-2.6,7.2-3.1c-0.7,0.8-1.5,1.7-2.3,2.7c-0.8,1-1.3,1.9-1.8,3
-	c-0.7,1.4-0.7,2,0.2,3.3c0.8,1.1,1.3,1.6,1.6,2.7c-0.3,0.6-0.4,1.1-0.5,1.9c1,1.1,1.7,1.8,2.7,2.1c0.9,0.2,1.7,0.2,2.6-0.3
-	c1.9-1,3.6-2.2,5.8-2.3c1-2.4,0.9-4.4,0.4-6.8c-0.3-1.6-0.5-3.1-0.6-4.7c-0.4,1.7-0.5,3.2-0.2,4.8c0.4,2,0.6,4.2-0.4,6
-	c-1.9,0.1-3.6,1.3-5.3,2.2c-0.7,0.4-1.4,0.4-2.2,0.2c-0.7-0.2-1.2-0.7-2-1.6c0-0.9,0.2-1.3,0.6-2.1c0.7-1.3,1.4-2.5,2.2-3.8
-	c-1,1.2-1.9,2.2-2.7,3.4c-0.3-0.8-0.7-1.3-1.4-2.2c-0.7-0.9-0.8-1.3-0.2-2.4c0.5-1.1,0.9-2,1.8-3c1.5-1.6,2.9-3.4,4.5-5
-	c0.9-0.9,1.3-0.8,2.4-1c1.1-0.2,2.1-0.4,3.2-0.6c-1.1,0.1-2.1,0.1-3.1,0.2l0,0c1-1.3,1.6-2,3.2-2.7c4-1.8,6.6-1.9,9.8,0.7
-	c0.8,0.7,1.5,1.4,2.4,2c-0.3,0-0.6,0.1-0.9,0.2c0.4-0.1,0.9,0,1.3,0.1c0.1,0.1,0.2,0.2,0.4,0.2c0.6,0.3,0.9,0.5,1.3,1.1
-	c0.4,0.6,0.8,1.2,1.1,1.8c-0.2-0.1-0.4-0.1-0.5-0.2c-0.3-0.2-0.7-0.1-1.1,0.1l0,0c-0.3,0.2-0.8,0.3-1.2,0.4c0.2,0.1,0.6,0.1,0.7,0
-	c0,0,0,0,0.1,0c-0.1,0.1-0.1,0.3-0.2,0.5c0,0.2,0,0.4,0.1,0.6l0,0c0,0.1,0.1,0.1,0.1,0.2c-0.2,0.1-0.3,0.1-0.5,0.2
-	c0.8-0.1,1.4-0.1,2.2,0c0,0.2,0.1,0.5,0.1,0.7l-0.3,0c0,0,0,0,0,0c-0.3-0.3-0.7-0.2-1.3-0.1c-1.6,0.4-1.2,1.3-2,2.6
-	c0.8-0.9,0.7-1.9,2-2.2c0.3-0.1,0.5-0.2,0.7-0.1c-0.4,0.2-0.7,0.5-0.8,0.8c-0.3,1-0.1,1.8-0.5,2.7c0.5-0.8,0.5-1.6,0.9-2.5
-	c0.2-0.3,0.7-0.8,1.1-0.8l0.3,0c0.1,0.5,0.1,1.1,0.1,1.5c-0.1,0.8-0.3,2-0.4,2.5c0.4-0.5,0.6-1.7,0.8-2.5c0.2-0.8,0.1-1.9,0-2.8
-	c-0.2-1.2,1.1-1,1.8-1.6c0.5-0.4,0.9-1.1,1.4-1.6c0.5-0.5,1.3,0.2,1.5,0.7c0.9,2.1,1.2,5.3,1,7.4c-0.3,2.3-1.4,4.9-3.4,6
-	C40.9,28.4,37.8,27.5,35.2,26.6L35.2,26.6z M31.5,37c-0.1,1-0.4,1-1.3,1c-0.4,0-1.9,0-2.3,0c-0.5,0-0.9-0.1-1-0.2
-	c0.9-0.6,2.3-3.2,2.6-4.1c0.3-0.9,0.6-1.8,0.9-2.7c0.1,0.4,0.2,0.7,0.4,1.1c0.3,0.7,0.4,1.1,0.4,1.7l0.1,2.2
-	C31.5,36.4,31.6,36.5,31.5,37L31.5,37z M5.6,29.7c0.5,1.9,1.5,3.7,2.5,5.3v0c-0.1,0.3-0.1,0.5-0.3,0.7c-0.7,1-2.6-0.5-3.2-1
-	c-0.6-0.6-1-1.3-1.1-2c-0.1-0.5,0-0.5,0.3-0.9l1.4-1.4C5.3,30.5,5.6,29.7,5.6,29.7z M4.6,17.8c-0.1,0.3-0.2,0.5-0.3,0.8
-	c-0.3,1,0.1,1.9-0.8,2.7c0.4,0.9,0.4,1.2,1.4,0.8c0.4-0.2,0.7-0.4,1-0.6c-0.1,0.4-0.3,0.7-0.4,1.1c0,0.1,0,0.1-0.1,0.2
-	c-0.7,0.3-1.7,0.5-2-0.3c-0.2-0.4-0.3-0.7-0.4-1.2C1.8,20,3.6,18.4,4.6,17.8z M5.2,19.1C5,19,4.9,18.9,4.7,18.9c0-0.1,0-0.2,0.1-0.4
-	c0-0.1,0-0.1,0-0.2C5.1,18.5,5.1,18.8,5.2,19.1L5.2,19.1z M40.8,14.5c0,0.1,0.1,0.2,0.1,0.3c0,0-0.1,0.1-0.1,0.1
-	c-0.1-0.1-0.1-0.3-0.2-0.4C40.6,14.5,40.7,14.5,40.8,14.5L40.8,14.5z M6.5,20.1L6.5,20.1L6.5,20.1L6.5,20.1z M15.6,35L15.6,35
-	L15.6,35z M26.3,38.2L26.3,38.2L26.3,38.2z M30.7,29.9L30.7,29.9L30.7,29.9L30.7,29.9z M4.7,21.6L4.7,21.6L4.7,21.6L4.7,21.6
-	L4.7,21.6z M46.5,25L46.5,25L46.5,25z M0.5,21.3c0.2-2.1,0.6-3.1,2.1-4.7C0.7,17.9,0.3,18.6,0.5,21.3"/>
-<path d="M0,19.5c0.2-1,0.4-1.3,1-2.1C0.1,18.1-0.1,18.4,0,19.5 M22.4,6.1c-1.1,0.3-1.4,0.5-1.7,1.6C21.2,6.9,21.5,6.6,22.4,6.1"/>
-<path d="M24.2,5.9c-2.3,0.6-2.9,1-3.7,3.6C21.5,7.6,22.2,6.9,24.2,5.9 M29.1,15.5c0.2-1.1,0.7-2.1,2.3-2.9
-	C29.2,13.2,28.8,14.1,29.1,15.5 M43.1,15.6c1.3-0.5,1.9-1.5,2.2-2.7c-0.5,1-1.3,1.9-2.4,2.4c-0.6,0.3-0.9,0.2-1.6,0.1
-	C42,15.6,42.4,15.8,43.1,15.6 M34.2,16.6c-0.2-0.4-0.5-0.6-0.8-0.8c0.3-0.2,0.6-0.4,0.9-0.6c-0.7,0.3-1.6,0.3-2.2,0.7
-	c-0.5,0.4-1.3,1.5-1.8,2c0.4-0.2,0.8-0.4,1.1-0.7c0,0.5,0.3,1,0.8,1.3c-0.2,0.3-0.4,0.6-0.5,0.9c1-1.2,2.6-2.2,4-2.6
-	c-0.4,0-0.9,0.1-1.4,0.2C34.3,16.9,34.3,16.8,34.2,16.6 M32.7,26c-0.1,0.3-0.1,0.7-0.2,1c0.1-0.4,0.3-0.8,0.5-1.1
-	c0.2-0.4,0.3-0.4,0.6-0.6c0.3-0.1,0.7-0.3,1-0.5c-0.3,0-0.7,0.1-1,0.2C32.9,25.2,32.8,25.4,32.7,26 M20.8,13.6
-	c-0.8,0.8-1.6,3.5-1.8,4.6c0.4-0.9,1.4-3.5,2.1-4.1c0.2-0.2,0.4-0.3,0.5-0.4c-0.5,0.9-0.5,1.1-0.3,2.4c0.2-1.2,0.6-1.7,1.3-2.6
-	c0.8-0.2,1.5-0.4,2.3-0.7c-0.9,0.1-1.8,0.2-2.7,0.3C21.5,13.1,21.3,13.1,20.8,13.6"/>
-<path class="st1" d="M31.8,18.3c-0.1-0.3,0-0.7,0.3-0.8c0.3-0.1,0.7,0,0.8,0.3c0,0,0,0.1,0,0.1c-0.3,0.2-0.6,0.5-0.8,0.8
-	C32,18.5,31.9,18.4,31.8,18.3 M38.7,15.6c0-0.3,0.2-0.4,0.5-0.4c0.3,0,0.4,0.3,0.4,0.5c0,0.1,0,0.1,0,0.2c-0.2,0-0.5,0.1-0.7,0.2
-	C38.8,15.9,38.7,15.7,38.7,15.6"/>
-</svg>

src/images/icons/BackendDevelopment/nestjs.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#DF234F" d="M75.4.3c-.9 0-1.8.2-2.6.5 1.7 1.1 2.6 2.6 3.1 4.3 0 .2.1.4.1.6 0 .2.1.4.1.6.1 2.9-.8 3.3-1.4 5-1 2.2-.7 4.6.5 6.5.1.2.2.5.4.7-1.3-8.4 5.7-9.6 7-12.2.1-2.3-1.8-3.8-3.3-4.9C77.8.5 76.6.3 75.4.3zm10.5 1.8c-.1.8 0 .6-.1 1 0 .3 0 .6-.1.9-.1.3-.1.5-.2.8-.1.3-.2.5-.3.8-.1.2-.2.4-.3.7-.1.1-.2.3-.3.4-.1.1-.1.2-.2.3-.2.2-.3.5-.5.7l-.6.6c-.2.2-.4.4-.6.5-.7.5-1.5.9-2.2 1.4-.2.2-.5.3-.7.5-.2.2-.4.3-.6.5l-.6.6c-.2.2-.4.4-.5.7-.2.2-.3.5-.5.7-.1.3-.2.5-.4.8-.1.3-.2.5-.3.8-.1.3-.2.6-.2.8 0 .1 0 .3-.1.4 0 .1 0 .3-.1.4v1.4c0 .3 0 .5.1.8 0 .3.1.5.2.8.1.3.2.5.3.8.1.2.2.3.2.5l-7.6-2.9c-1.3-.4-2.5-.7-3.8-1-.7-.2-1.4-.3-2.1-.5-2-.4-4-.7-6-.9h-.2c-2-.2-3.9-.3-5.9-.3-1.5 0-2.9.1-4.3.2-2 .1-4 .4-6 .7l-1.5.3c-1 .2-2 .4-3 .7-.5.1-1 .3-1.5.4-.5.2-1 .4-1.4.6-.4.2-.7.3-1.1.5-.1 0-.1 0-.2.1-.3.2-.6.3-.9.5-.1 0-.2.1-.2.1-.4.2-.7.4-1 .5-.2.1-.5.2-.7.3-.1.1-.2.1-.3.2-.3.2-.6.3-.9.5-.3.2-.6.3-.8.5-.2.2-.5.3-.7.5 0 0-.1 0-.1.1-.2.1-.4.3-.6.5l-.1.1c-.2.1-.3.3-.5.4-.1 0-.1.1-.2.1-.2.1-.3.3-.5.4 0 .1-.1.1-.1.1l-.6.6-.1.1-.6.6s0 .1-.1.1l-.5.5c-.1.1-.2.1-.2.2l-.6.6c0 .1-.1.1-.1.2l-.8.8-.1.1c-.5.6-1.1 1.1-1.7 1.6-.6.5-1.2 1-1.9 1.5s-1.3.9-2 1.3-1.4.7-2.1 1c-.7.3-1.4.6-2.1.8-1.4.3-2.8.9-4 1 0-.5-.3-.4-.6-.4-.3.1-.6.1-.8.2-.3.1-.5.2-.8.3-.3.1-.5.2-.8.4-.2.2-.5.3-.7.5-.2.2-.5.4-.7.6-.2.2-.5.4-.7.6-.2.2-.4.4-.6.7-.2.3-.4.5-.5.8-.2.2-.3.5-.5.8-.1.3-.3.6-.4.9l-.3.9c-.1.3-.1.5-.2.8v.1c-.1.3-.1.7-.1.9.1-.1.1.1.1.3v.4c0 .2.1.4.1.6.1.2.1.4.2.6.1.2.2.4.4.6.1.2.3.4.4.6.2.2.4.4.6.5.2.2.4.4.6.5.8.7 1 .9 2 1.5.2.1.3.2.5.3h.1v.2c0 .3.1.5.2.8.1.3.2.6.3.8l.3.6c0 .1.1.1.1.2.1.3.3.5.4.7.2.2.3.5.5.7l.6.6.6.6H8c.2.2.4.3.6.5.2.2.5.3.7.4.2.1.5.3.8.4.2.1.4.2.7.2 0 0 .1 0 .1.1.1 0 .3.1.4.1-.1 1.8-.1 3.5.1 4.1.3.7 1.8-1.4 3.2-3.7-.2 2.3-.3 5 0 5.8.4.8 2.3-1.8 4.1-4.6 23.4-5.4 44.8 10.8 47.1 33.7-.4-3.6-4.8-5.6-6.9-5.1-1 2.4-2.7 5.6-5.4 7.5.2-2.2.1-4.4-.3-6.6-.7 3-2.1 5.9-4.1 8.3-3.1.2-6.3-1.3-7.9-3.6-.1-.1-.2-.3-.3-.4-.1-.2-.2-.5-.3-.7-.1-.2-.2-.5-.2-.7v-.7-.5c0-.2.1-.5.2-.7.1-.2.1-.5.2-.7.1-.2.2-.5.4-.7.6-1.6.6-2.9-.5-3.6l-.6-.3c-.1 0-.3-.1-.4-.1-.1 0-.2-.1-.3-.1-.2-.1-.5-.1-.7-.2-.2-.1-.5-.1-.7-.1-.2 0-.5-.1-.7-.1h-.5c-.3 0-.5 0-.7.1-.2 0-.5.1-.7.1-.2.1-.5.1-.7.2-.2.1-.4.2-.7.3l-.6.3c-7.7 5-3.1 16.8 2.1 20.2-2 .4-4 .8-4.6 1.2l-.1.1c1.4.9 2.9 1.6 4.5 2.2 2.1.7 4.4 1.3 5.4 1.6 2.7.6 5.5.8 8.3.6 14.6-1 26.6-12.2 28.8-26.8.1.3.1.6.2.9.1.6.2 1.2.3 1.9.1.3.1.6.1.9v.1c0 .3.1.6.1.9 0 .4.1.7.1 1.1V91.6c0 .3-.1.5-.1.8v.3c0 .3-.1.6-.1 1-.1.3-.1.6-.2.9v.1c-.1.3-.1.6-.2.9v.1c-.1.3-.1.6-.2.9v.1l-.3.9v.1c-.1.3-.2.7-.3 1-.1.3-.2.6-.4 1-.1.3-.2.7-.4 1-.1.3-.3.6-.4 1-.1.3-.3.6-.4.9 0 .1-.1.2-.1.2s0 .1-.1.1c-2.1 4.3-5.3 8.1-9.3 11.1-.3.2-.5.4-.8.6-.1.1-.2.1-.2.2-.2.2-.5.3-.7.5l.1.2c.5-.1.9-.1 1.4-.2.9-.1 1.7-.3 2.6-.5.2 0 .5-.1.7-.2.2 0 .3-.1.5-.1s.5-.1.7-.1c.2-.1.4-.1.6-.2 3.3-.8 6.5-1.9 9.6-3.2-5.3 7.2-12.3 13-20.5 16.8 3.8-.3 7.6-.9 11.3-2 13.3-3.9 24.5-12.9 31.2-25-1.4 7.6-4.4 14.9-8.9 21.3 3.2-2.1 6.1-4.6 8.8-7.3 7.4-7.7 12.3-17.6 13.9-28.1 1.1 5.2 1.5 10.6 1 15.9 23.9-33.3 2-67.8-7.2-76.9 0-.1-.1-.1-.1-.2v0c0 .4 0 .8-.1 1.2-.1.8-.2 1.5-.3 2.2-.2.7-.4 1.5-.6 2.2-.2.7-.5 1.4-.8 2.1-.3.7-.6 1.4-1 2-.4.6-.8 1.3-1.2 1.9-.4.6-.9 1.2-1.4 1.8-.5.6-1 1.1-1.6 1.7-.3.3-.6.6-1 .8-.3.2-.5.4-.8.7-.6.5-1.2.9-1.9 1.3-.6.4-1.3.8-2 1.1l-2.1.9c-.7.3-1.4.5-2.1.7-.7.2-1.5.4-2.2.5-.8.1-1.5.2-2.2.3-.5 0-1.1.1-1.6.1-.8 0-1.5-.1-2.2-.1-.8-.1-1.5-.2-2.2-.3-.8-.1-1.5-.3-2.2-.6.7-.1 1.5-.1 2.2-.3.8-.1 1.5-.3 2.2-.5.7-.2 1.5-.4 2.1-.7l2.1-.9c.7-.3 1.3-.7 2-1.1.6-.4 1.3-.9 1.9-1.3.6-.5 1.2-1 1.7-1.5.6-.5 1.1-1.1 1.6-1.6.5-.6 1-1.2 1.4-1.8.1-.1.1-.2.2-.3.3-.5.7-1.1 1-1.6.4-.7.7-1.3 1-2 .3-.7.6-1.4.8-2.1l.6-2.1c.1-.8.3-1.5.3-2.2.1-.8.1-1.5.1-2.2 0-.5 0-1.1-.1-1.6-.1-.8-.2-1.5-.3-2.2-.1-.8-.3-1.5-.5-2.2-.2-.7-.5-1.4-.7-2.1-.3-.7-.6-1.4-.9-2-.4-.7-.7-1.3-1.1-2-.4-.6-.9-1.2-1.3-1.8-.5-.6-1-1.1-1.5-1.7-.3-.3-.6-.6-.9-.8-1.5-1.2-3-2.2-4.6-3.2-.2-.1-.4-.2-.7-.3-1.3-1.1-2.3-1.4-3.3-1.8z"/></svg>

src/images/icons/BackendDevelopment/nginx.svg

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#009438;}
-	.st1{fill:#FEFEFE;}
-</style>
-<path class="st0" d="M3,24V12.6c0-0.4,0.2-0.8,0.6-1L23.3,0.2c0.4-0.2,0.8-0.3,1.1,0l19.8,11.5c0.3,0.2,0.6,0.6,0.5,1v22.9
-	c0,0.4-0.2,0.8-0.5,1l-17.1,9.9c-0.9,0.5-1.8,1.1-2.7,1.6c-0.4,0.2-0.8,0.2-1.2,0L3.5,36.4C3.2,36.2,3,35.9,3,35.5V24L3,24z"/>
-<path class="st1" d="M17.2,19.8v13.4c0,1.5-1.2,2.8-2.8,2.8c-1,0-1.7-0.4-2.2-1.3c-0.3-0.4-0.4-0.8-0.4-1.3V14.8
-	c0-1.2,0.8-2.1,1.7-2.5s2-0.3,2.9,0c0.9,0.3,1.6,0.8,2.2,1.6L30.5,28c0,0,0.1,0.1,0.2,0.2V14.7c0-1.4,1-2.5,2.4-2.7
-	c1.7-0.2,2.9,1,3.1,2.3v18.9c0,1.1-0.5,1.8-1.4,2.3c-0.7,0.4-1.4,0.4-2.1,0.4c-1.1-0.1-2.1-0.5-2.9-1.2c-0.4-0.4-0.8-0.9-1.2-1.3
-	L17.2,19.9C17.2,19.9,17.2,19.8,17.2,19.8L17.2,19.8z"/>
-</svg>

src/images/icons/BackendDevelopment/nodejs.svg

@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#539E43;}
-</style>
-<g>
-	<path class="st0" d="M24,47.9c-0.7,0-1.3-0.2-1.8-0.5l-5.9-3.5c-0.9-0.5-0.4-0.7-0.2-0.7c1.2-0.4,1.4-0.5,2.6-1.2
-		c0.1-0.1,0.3,0,0.4,0l4.5,2.7c0.2,0.1,0.4,0.1,0.5,0l17.6-10.2c0.2-0.1,0.3-0.3,0.3-0.5V13.8c0-0.2-0.1-0.4-0.3-0.5L24.2,3.2
-		c-0.2-0.1-0.4-0.1-0.5,0L6.1,13.3c-0.2,0.1-0.3,0.3-0.3,0.5v20.3c0,0.2,0.1,0.4,0.3,0.5l4.8,2.8c2.6,1.3,4.2-0.2,4.2-1.8v-20
-		c0-0.3,0.2-0.5,0.5-0.5h2.2c0.3,0,0.5,0.2,0.5,0.5v20c0,3.5-1.9,5.5-5.2,5.5c-1,0-1.8,0-4-1.1l-4.6-2.6c-1.1-0.7-1.8-1.9-1.8-3.2
-		V13.8c0-1.3,0.7-2.6,1.8-3.2L22.2,0.5c1.1-0.6,2.6-0.6,3.7,0l17.6,10.2c1.1,0.7,1.8,1.9,1.8,3.2v20.3c0,1.3-0.7,2.6-1.8,3.2
-		L25.8,47.5C25.3,47.8,24.6,47.9,24,47.9L24,47.9z M29.4,34c-7.7,0-9.3-3.5-9.3-6.5c0-0.3,0.2-0.5,0.5-0.5h2.3
-		c0.3,0,0.5,0.2,0.5,0.4c0.4,2.3,1.4,3.5,6,3.5c3.7,0,5.3-0.8,5.3-2.8c0-1.1-0.4-2-6.2-2.6c-4.8-0.5-7.8-1.5-7.8-5.4
-		c0-3.6,3-5.7,8-5.7c5.6,0,8.4,1.9,8.8,6.2c0,0.1,0,0.3-0.1,0.4c-0.1,0.1-0.2,0.2-0.4,0.2h-2.3c-0.2,0-0.4-0.2-0.5-0.4
-		c-0.5-2.4-1.9-3.2-5.5-3.2c-4,0-4.5,1.4-4.5,2.5c0,1.3,0.6,1.7,6,2.4c5.4,0.7,8,1.7,8,5.5C38.2,31.8,35,34,29.4,34L29.4,34z"/>
-</g>
-</svg>