make node version 14

fix: nextjs broken logo url

.all-contributorsrc

@@ -0,0 +1,97 @@
+{
+  "files": [
+    "README.md"
+  ],
+  "imageSize": 100,
+  "commit": false,
+  "contributors": [
+    {
+      "login": "sarbikbetal",
+      "name": "Sarbik Betal",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/41508422?v=4",
+      "profile": "https://github.com/sarbikbetal",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "Hardik0307",
+      "name": "Hardik Bagada",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/41434099?v=4",
+      "profile": "https://github.com/Hardik0307",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "antonkomarev",
+      "name": "Anton Komarev",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/1849174?v=4",
+      "profile": "https://komarev.com",
+      "contributions": [
+        "plugin"
+      ]
+    },
+    {
+      "login": "KKVANONYMOUS",
+      "name": "Kunal Kumar Verma",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/58628586?v=4",
+      "profile": "https://kkvanonymous.github.io/",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "jaideepghosh",
+      "name": "Jaideep Ghosh",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/3909648?v=4",
+      "profile": "http://jaideepghosh.blogspot.com",
+      "contributions": [
+        "code"
+      ]
+    }
+    {
+      "login": "YashKandalkar",
+      "name": "yash",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/35102959?v=4",
+      "profile": "http://yashkandalkar.github.io",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "abhijit-hota",
+      "name": "Abhijit Hota",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/8116174?v=4",
+      "profile": "https://github.com/abhijit-hota",
+      "contributions": [
+        "code",
+        "test"
+      ]
+    },
+    {
+      "login": "Maddoxx88",
+      "name": "Sunit Shirke",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/34238672?v=4",
+      "profile": "https://maddoxx88.github.io/",
+      "contributions": [
+        "code"
+      ]
+    }
+    {
+      "login": "g-savitha",
+      "name": "Savitha Gollamudi",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/31612459?v=4",
+      "profile": "https://www.gsavitha.in",
+      "contributions": [
+        "code"
+      ]
+    }
+  ],
+  "contributorsPerLine": 7,
+  "projectName": "github-profile-readme-generator",
+  "projectOwner": "rahuldkjain",
+  "repoType": "github",
+  "repoHost": "https://github.com",
+  "skipCi": true
+}

.github/FUNDING.yml

@@ -2,7 +2,7 @@
 
 github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
 patreon: # Replace with a single Patreon username
-open_collective: # Replace with a single Open Collective username
+open_collective: github-profile-readme-generator
 ko_fi: rahuldkjain
 tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry

.github/ISSUE_TEMPLATE/bug_report.md

@@ -38,3 +38,12 @@ If applicable, add screenshots to help explain your problem.
 
 **Additional context**
 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

@@ -2,7 +2,7 @@
 name: Feature/Enhancement request
 about: Suggest an idea for this project
 title: ""
-labels: enhancement
+labels: enhancement, hacktoberfest
 assignees: ""
 ---
 
@@ -17,3 +17,11 @@ A clear and concise description of any alternative solutions or features you've
 
 **Additional context**
 Add any other context or screenshots about the feature request here.
+
+Join the **Discord Server** for further discussions.
+
+<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

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

.github/config.yml

@@ -0,0 +1,17 @@
+# Configuration for new-issue-welcome - https://github.com/behaviorbot/new-issue-welcome
+
+# Comment to be posted to on first time issues
+newIssueWelcomeComment: >
+  Thanks for opening your first issue here! Your contribution means alot. 🙌 Join Discord Server (https://discord.gg/HHMs7Eg) for discussing issues, pull-requests, new features, etc.
+
+# Configuration for new-pr-welcome - https://github.com/behaviorbot/new-pr-welcome
+
+# Comment to be posted to on PRs from first time contributors in your repository
+newPRWelcomeComment: >
+  Thanks for opening this pull request! Make sure you have assigned an issue to this respective PR 😇
+
+# Configuration for first-pr-merge - https://github.com/behaviorbot/first-pr-merge
+
+# Comment to be posted to on pull requests merged by a first time user
+firstPRMergeComment: >
+  Congrats on merging your first pull request🎉! Thanks alot for your contribution. 🙏

.travis.yml

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

CODE_STYLE_GUIDE.md

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

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 licence" />
+<img src="https://img.shields.io/github/license/rahuldkjain/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator license" />
 </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/U7YU3J" target="blank">
+<a href="https://discord.gg/HHMs7Eg" target="blank">
 <img src="https://img.shields.io/discord/735303195105951764?label=Join%20Community&logo=discord&style=flat-square" alt="join discord community of github profile readme generator"/>
 </a>
 </p>
@@ -76,6 +76,8 @@ 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)
@@ -84,7 +86,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)
 
-- **YouTube Stats** [contribute](https://github.com/rahuldkjain/github-profile-readme-generator/issues/119)
+- **Buy Me A Coffee button**
 
 Click on `Generate README` to get your README in `markdown`.
 You can preview the README too.
@@ -134,12 +136,16 @@ Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDU
 - [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
 
@@ -157,6 +163,7 @@ 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>
 
+
 <hr>
 <p align="center">
 Developed with ❤️ in India 🇮🇳 

__mocks__/file-mock.js

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

__mocks__/gatsby.js

@@ -0,0 +1,27 @@
+const React = require("react")
+const gatsby = jest.requireActual("gatsby")
+
+module.exports = {
+  ...gatsby,
+  graphql: jest.fn(),
+  Link: jest.fn().mockImplementation(
+    // these props are invalid for an `a` tag
+    ({
+      activeClassName,
+      activeStyle,
+      getProps,
+      innerRef,
+      partiallyActive,
+      ref,
+      replace,
+      to,
+      ...rest
+    }) =>
+      React.createElement("a", {
+        ...rest,
+        href: to,
+      })
+  ),
+  StaticQuery: jest.fn(),
+  useStaticQuery: jest.fn(),
+}

jest-preprocess.js

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

jest.config.js

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

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

package.json

@@ -1,35 +1,43 @@
 {
-  "name": "gh-profile-reamde-generator",
+  "name": "github-profile-readme-generator",
   "private": true,
   "description": "A simple react app to generate beautiful github profile readme in md(markdown)",
-  "version": "0.1.0",
+  "version": "1.2.0",
   "author": "Rahul Jain <rahuldkjain@gmail.com>",
   "dependencies": {
     "@primer/octicons-react": "^10.0.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.5",
+    "enzyme-to-json": "^3.6.1",
+    "eslint": "^7.17.0",
     "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.20.0",
+    "prismjs": "^1.25.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",
     "gatsby-plugin-postcss": "^2.3.11",
     "gatsby-plugin-purgecss": "^5.0.0",
     "gatsby-plugin-twitter": "^2.3.10",
     "gatsby-remark-embedder": "^3.0.0",
     "gh-pages": "^3.1.0",
+    "identity-obj-proxy": "3.0.0",
+    "jest": "26.4.2",
     "prettier": "2.0.5",
     "tailwindcss": "^1.7.6"
   },
@@ -44,14 +52,14 @@
     "start": "npm run develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
-    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
+    "test": "jest -i -u --coverage",
     "deploy": "gatsby build --prefix-paths && gh-pages -d public -b master"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/rahuldkjain/gh-profile-readme-generator"
+    "url": "https://github.com/rahuldkjain/github-profile-readme-generator"
   },
   "bugs": {
-    "url": "https://github.com/rahuldkjain/gh-profile-readme-generator/issues"
+    "url": "https://github.com/rahuldkjain/github-profile-readme-generator/issues"
   }
 }

setupTests.js

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

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

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

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

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

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

@@ -0,0 +1,582 @@
+// 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="props.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": "",
+        },
+      }
+    }
+  />
+  <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 />
+  <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=""
+    />
+  </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/\${props.twitter}"
+    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
+    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
+    prefix="💬 Ask me about"
+    project=""
+  />
+  <DisplayWork
+    link=""
+    prefix="👨‍💻 All of my projects are available at"
+  />
+  <DisplayWork
+    link=""
+    prefix="📝 I regularly write articles on"
+  />
+  <DisplayWork
+    link=""
+    prefix="📄 Know about my experiences"
+  />
+  <DisplayWork
+    prefix="📫 How to reach me"
+    project=""
+  />
+  <DisplayWork
+    prefix="⚡ Fun fact"
+    project=""
+  />
+</Fragment>
+`;

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

@@ -0,0 +1,156 @@
+// 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
+            class="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
+            class="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
+            class="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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,9 +1,283 @@
-import React from "react"
+import React, { useState, useEffect } from "react"
 import { withPrefix } from "gatsby"
 import { latestBlogs } from "../utils/workflows"
 import links from "../constants/page-links"
-import { isMediumUsernameValid } from "../utils/validation"
+import {
+  isMediumUsernameValid,
+  isGitHubUsernameValid,
+} from "../utils/validation"
+import { ToolsIcon, XCircleIcon } from "@primer/octicons-react"
+
+const AddonsItem = ({
+  inputId,
+  inputChecked,
+  onInputChange,
+  Options,
+  onIconClick,
+  ...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 class="checkbox-label__control" />
+          <span className="pl-4">{props.children}</span>
+        </label>
+        {Options && (
+          <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}
+    </>
+  )
+}
+
+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>
+)
+
+const CustomizeBadge = ({ githubName, badgeOptions, onBadgeUpdate }) => {
+  return (
+    <>
+      <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>
+    </>
+  )
+}
+
+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 class="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>
+  </>
+)
+
+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>
+  </>
+)
+
 const Addons = props => {
+  const [debounce, setDebounce] = useState(undefined)
+  const [badgeOptions, setBadgeOptions] = useState({
+    badgeStyle: props.data.badgeStyle,
+    badgeColor: props.data.badgeColor,
+    badgeLabel: props.data.badgeLabel,
+  })
+
+  useEffect(() => {
+    setBadgeOptions({
+      badgeStyle: props.data.badgeStyle,
+      badgeColor: props.data.badgeColor,
+      badgeLabel: props.data.badgeLabel,
+    })
+  }, [props.data.badgeStyle, props.data.badgeColor, props.data.badgeLabel])
+
+  const [githubStatsOptions, setGithubStatsOptions] = useState({
+    ...props.data.githubStatsOptions,
+  })
+
+  useEffect(() => {
+    setGithubStatsOptions({
+      ...props.data.githubStatsOptions,
+    })
+  }, [props.data.githubStatsOptions])
+
+  const [topLanguagesOptions, setTopLanguagesOptions] = useState({
+    ...props.data.topLanguagesOptions,
+  })
+
+  useEffect(() => {
+    setTopLanguagesOptions({
+      ...props.data.topLanguagesOptions,
+    })
+  }, [props.data.topLanguagesOptions])
+
+  const [streakStatsOptions, setStreakStatsOptions] = useState({
+    ...props.data.streakStatsOptions,
+  })
+
+  useEffect(() => {
+    setStreakStatsOptions({
+      ...props.data.streakStatsOptions,
+    })
+  }, [props.data.streakStatsOptions])
+
   const blogPostPorkflow = () => {
     let payload = {
       dev: {
@@ -31,78 +305,158 @@ const Addons = props => {
     tempElement.click()
     document.body.removeChild(tempElement)
   }
+
+  const onBadgeUpdate = (option, value) => {
+    const callback = () => {
+      let newVal =
+        option === "badgeLabel" && value === "" ? "Profile views" : value
+      setBadgeOptions({ ...badgeOptions, [option]: newVal })
+      props.handleDataChange(option, { target: { value: newVal } })
+    }
+    clearTimeout(debounce)
+    setDebounce(setTimeout(callback, 300))
+  }
+
+  const onStatsUpdate = (option, value) => {
+    const newStatsOptions = { ...githubStatsOptions, [option]: value }
+    setGithubStatsOptions(newStatsOptions)
+    props.handleDataChange("githubStatsOptions", {
+      target: { value: newStatsOptions },
+    })
+  }
+
+  const onTopLangUpdate = (option, value) => {
+    const newLangOptions = { ...topLanguagesOptions, [option]: value }
+    setTopLanguagesOptions(newLangOptions)
+    props.handleDataChange("topLanguagesOptions", {
+      target: { value: newLangOptions },
+    })
+  }
+
+  const onStreakStatsUpdate = (option, value) => {
+    const newStreakStatsOptions = { ...streakStatsOptions, [option]: value }
+    setStreakStatsOptions(newStreakStatsOptions)
+    props.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>
-      <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")}
+      <AddonsItem
+        inputId="visitors-count"
+        inputChecked={props.data.visitorsBadge}
+        onInputChange={() => props.handleCheckChange("visitorsBadge")}
+        Options={
+          <CustomizeOptions
+            title="Customize Badge"
+            CustomizationOptions={
+              <CustomizeBadge
+                githubName={props.social.github}
+                badgeOptions={badgeOptions}
+                onBadgeUpdate={onBadgeUpdate}
+              />
+            }
           />
-          &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")}
+        }
+      >
+        display visitors count badge
+      </AddonsItem>
+      <AddonsItem
+        inputId="github-profile-trophy"
+        inputChecked={props.data.githubProfileTrophy}
+        onInputChange={() => props.handleCheckChange("githubProfileTrophy")}
+      >
+        display github trophy
+      </AddonsItem>
+      <AddonsItem
+        inputId="github-stats"
+        inputChecked={props.data.githubStats}
+        onInputChange={() => props.handleCheckChange("githubStats")}
+        Options={
+          <CustomizeOptions
+            title="Customize Github Stats Card"
+            CustomizationOptions={
+              <CustomizeGithubStatsBase
+                prefix="stats"
+                options={githubStatsOptions}
+                onUpdate={onStatsUpdate}
+              />
+            }
           />
-          &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")}
+        }
+      >
+        display github profile stats card
+      </AddonsItem>
+      <AddonsItem
+        inputId="top-languages"
+        inputChecked={props.data.topLanguages}
+        onInputChange={() => props.handleCheckChange("topLanguages")}
+        Options={
+          <CustomizeOptions
+            title="Customize Top Skills Card"
+            CustomizationOptions={
+              <CustomizeGithubStatsBase
+                prefix="top-lang"
+                options={topLanguagesOptions}
+                onUpdate={onTopLangUpdate}
+              />
+            }
           />
-          &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")}
+        }
+      >
+        display top skills
+      </AddonsItem>
+      <AddonsItem
+        inputId="streak-stats"
+        inputChecked={props.data.streakStats}
+        onInputChange={() => props.handleCheckChange("streakStats")}
+        Options={
+          <CustomizeOptions
+            title="Customize Streak Stats Card"
+            CustomizationOptions={
+              <CustomizeStreakStats
+                prefix="streak-stats"
+                options={streakStatsOptions}
+                onUpdate={onStreakStatsUpdate}
+              />
+            }
           />
-          &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>
+        }
+      >
+        display github streak stats
+      </AddonsItem>
+      <AddonsItem
+        inputId="twitter-badge"
+        inputChecked={props.data.twitterBadge}
+        onInputChange={() => props.handleCheckChange("twitterBadge")}
+      >
+        display twitter badge
+      </AddonsItem>
+      <AddonsItem
+        inputId="dev-dynamic-blogs"
+        inputChecked={props.data.devDynamicBlogs}
+        onInputChange={() => props.handleCheckChange("devDynamicBlogs")}
+      >
+        display latest dev.to blogs dynamically (GitHub Action)
+      </AddonsItem>
+      <AddonsItem
+        inputId="medium-dynamic-blogs"
+        inputChecked={props.data.mediumDynamicBlogs}
+        onInputChange={() => props.handleCheckChange("mediumDynamicBlogs")}
+      >
+        display latest medium blogs dynamically (GitHub Action)
+      </AddonsItem>
+      <AddonsItem
+        inputId="rss-dynamic-blogs"
+        inputChecked={props.data.rssDynamicBlogs}
+        onInputChange={() => props.handleCheckChange("rssDynamicBlogs")}
+      >
+        display latest blogs from your personal blog dynamically (GitHub Action)
+      </AddonsItem>
 
       {(props.data.devDynamicBlogs && props.social.dev) ||
       (props.data.rssDynamicBlogs && props.social.rssurl) ||
@@ -113,7 +467,9 @@ const Addons = props => {
           <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" }}

src/components/donate.js

@@ -2,7 +2,9 @@ import React from "react"
 const Donate = () => {
   return (
     <>
-      <div className="text-center text-4xl my-2">Support 🙏</div>
+      <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">
@@ -28,12 +30,13 @@ const Donate = () => {
           </div>
         </div>
         <div className="w-full sm:w-1/3 flex flex-col justify-center items-center">
-          Tip💰
+          <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"
@@ -45,21 +48,28 @@ const Donate = () => {
           {/* 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"
+            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-6 h-6 mr-2"
-              src="https://cdn.worldvectorlogo.com/logos/paypal-icon.svg"
+              className="w-32 h-4"
+              src="https://cdn.worldvectorlogo.com/logos/paypal-2.svg"
               alt="Donate rahuldkjain via paypal"
             />
-            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/components/footer.js

@@ -1,27 +1,113 @@
 import React from "react"
 import links from "../constants/page-links"
+import logo from "../images/mdg.png"
+import discord from "../images/Discord-Logo.png"
 import { Link } from "gatsby"
 const Footer = () => {
   return (
     <div className="bg-gray-100 p-4 flex flex-col justify-center items-center shadow-inner mt-2">
-      <div className="w-full flex justify-evenly items-center py-2 text-orange-500">
-        <div>
-          <Link to={links.about} activeStyle={{ color: "#002ead" }}>
-            About
-          </Link>
+      <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>
-          <Link to={links.addons} activeStyle={{ color: "#002ead" }}>
-            Addons
-          </Link>
-        </div>
-        <div>
-          <Link to={links.support} activeStyle={{ color: "#002ead" }}>
-            Support
-          </Link>
+          <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">
+      <div className="py-2 mt-2">
         Developed in India{" "}
         <span role="img" aria-label="india">
           {" "}

src/components/header.js

@@ -5,19 +5,31 @@ import links from "../constants/page-links"
 import gsap from "gsap"
 import axios from "axios"
 import { Link } from "gatsby"
+import { act } from "react-dom/test-utils"
 
 const Header = props => {
+  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 () => {
-    var response = await axios.get(
-      "https://api.github.com/repos/rahuldkjain/github-profile-readme-generator"
-    )
+    if (shouldRequestStats()) {
+      var response = await axios.get(
+        "https://api.github.com/repos/rahuldkjain/github-profile-readme-generator"
+      )
 
-    const { stargazers_count, forks_count } = response.data
+      const { stargazers_count, forks_count } = response.data
 
-    setstats({
-      starsCount: stargazers_count,
-      forksCount: forks_count,
-    })
+      act(() =>
+        setstats({
+          starsCount: stargazers_count,
+          forksCount: forks_count,
+        })
+      )
+    }
   }
 
   const [stats, setstats] = useState({

src/components/markdown.js

@@ -1,186 +1,286 @@
 import React from "react"
 import { isMediumUsernameValid } from "../utils/validation"
-import { icons, skills } 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 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="30" /></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 => {
+import { icons, skills, skillWebsites } from "../constants/skills"
+import {
+  githubStatsLinkGenerator,
+  topLanguagesLinkGenerator,
+  streakStatsLinkGenerator,
+} from "../utils/link-generators"
+const Title = props => {
+  if (props.prefix && props.title) {
     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
+      <>
+        {`<h1 align="center">${props.prefix + " " + props.title}</h1>`}
+        <br />
+      </>
     )
   }
-  const DisplaySkills = props => {
-    const listChosenSkills = []
-    skills.forEach(skill => {
-      if (props.skills[skill]) {
-        listChosenSkills.push(
-          `<img src="${icons[skill]}" alt="${skill}" width="40" height="40"/>`
-        )
-      }
-    })
-    return listChosenSkills.length > 0 ? (
+  return ""
+}
+const SubTitle = props => {
+  if (props.subtitle) {
+    return (
       <>
-        {`<p align="left">${listChosenSkills.join(" ")}</p>`}
+        {`<h3 align="center">${props.subtitle}</h3>`}
         <br />
         <br />
       </>
-    ) : (
-      ""
     )
   }
-  const DisplayDynamicBlogs = props => {
-    if (props.show) {
+  return ""
+}
+const SectionTitle = props => {
+  if (props.label) {
+    return (
+      <>
+        {`<h3 align="left">${props.label}</h3>`}
+        <br />
+      </>
+    )
+  }
+  return ""
+}
+const DisplayWork = props => {
+  if (props.prefix && props.project) {
+    if (props.link) {
       return (
         <>
-          {`### Blogs posts`}
+          {`- ${props.prefix} [${props.project}](${props.link})`}
           <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 />
-          </>
-        )
-      }
+    } else {
       return (
         <>
-          {`<p><img align="left" src="${link}" alt="${props.github}" /></p>`}
+          {`- ${props.prefix} **${props.project}**`}
           <br />
           <br />
         </>
       )
     }
-    return ""
   }
+  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 +
+    `&label=${props.badgeOptions.badgeLabel}` +
+    `&color=${props.badgeOptions.badgeColor}` +
+    `&style=${props.badgeOptions.badgeStyle}`
+  if (props.show) {
+    return (
+      <>
+        {`<p align="left"> <img src="${link}" alt="${props.github}" /> </p>`}
+        <br />
+        <br />
+      </>
+    )
+  }
+  return ""
+}
+const TwitterBadge = props => {
+  let link =
+    "https://img.shields.io/twitter/follow/" +
+    props.twitter +
+    "?logo=twitter&style=for-the-badge"
+  if (props.show) {
+    return (
+      <>
+        {`<p align="left"> <a href="${props.base}/${props.twitter}" target="blank"><img src="${link}" alt="${props.twitter}" /></a> </p>`}
+        <br />
+        <br />
+      </>
+    )
+  }
+  return ""
+}
+const GithubProfileTrophy = props => {
+  let link =
+    "https://github-profile-trophy.vercel.app/?username=" + props.github
+  if (props.show) {
+    return (
+      <>
+        {`<p align="left"> <a href="https://github.com/ryo-ma/github-profile-trophy"><img src="${link}" alt="${props.github}" /></a> </p>`}
+        <br />
+        <br />
+      </>
+    )
+  }
+  return ""
+}
+const GitHubStats = ({ show, github, options }) => {
+  if (show) {
+    return (
+      <>
+        {`<p>&nbsp;<img align="center" src="${githubStatsLinkGenerator({
+          github: github,
+          options,
+        })}" alt="${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.discord ||
+    social.rssurl
+  )
+}
+const DisplaySkills = props => {
+  const listChosenSkills = []
+  skills.forEach(skill => {
+    if (props.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 />
+    </>
+  ) : (
+    ""
+  )
+}
+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 => {
+  if (props.show) {
+    if (!props.showStats) {
+      return (
+        <>
+          {`<p><img align="center" src="${topLanguagesLinkGenerator({
+            github: props.github,
+            options: props.options,
+          })}" alt="${props.github}" /></p>`}
+          <br />
+          <br />
+        </>
+      )
+    }
+    return (
+      <>
+        {`<p><img align="left" src="${topLanguagesLinkGenerator({
+          github: props.github,
+          options: props.options,
+        })}" alt="${props.github}" /></p>`}
+        <br />
+        <br />
+      </>
+    )
+  }
+  return ""
+}
+const DisplayStreakStats = props => {
+  if (props.show) {
+    return (
+      <>
+        {`<p><img align="center" src="${streakStatsLinkGenerator({
+          github: props.github,
+          options: props.options,
+        })}" alt="${props.github}" /></p>`}
+        <br />
+        <br />
+      </>
+    )
+  }
+  return ""
+}
+const DisplaySupport = props => {
+  let viewSupport = false
+  Object.keys(props.support).forEach(key => {
+    if (props.support[key]) {
+      viewSupport = true
+    }
+  })
+  return viewSupport ? (
+    <div>
+      <SectionTitle label="Support:" />
+      {`<p>`}
+      {props.support.buyMeACoffee &&
+        `<a href="https://www.buymeacoffee.com/${props.support.buyMeACoffee}">
+      <img align="left" src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" height="50" width="210" alt="${props.support.buyMeACoffee}" /></a>`}
+      {props.support.buyMeAKofi &&
+        `<a href="https://ko-fi.com/${props.support.buyMeAKofi}">
+      <img align="left" src="https://cdn.ko-fi.com/cdn/kofi3.png?v=3" height="50" width="210" alt="${props.support.buyMeAKofi}" /></a>`}
+      {`</p><br><br>`}
+      <br />
+      <br />
+    </div>
+  ) : (
+    ""
+  )
+}
+const Markdown = props => {
+  const icon_base_url =
+    "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/"
+
   return (
     <div id="markdown-content" className="break-words">
       <>
@@ -193,6 +293,22 @@ const Markdown = props => {
         <VisitorsBadge
           show={props.data.visitorsBadge}
           github={props.social.github}
+          badgeOptions={{
+            badgeLabel: encodeURI(props.data.badgeLabel),
+            badgeColor: props.data.badgeColor,
+            badgeStyle: props.data.badgeStyle,
+          }}
+        />
+      </>
+      <>
+        <GithubProfileTrophy
+          show={props.data.githubProfileTrophy}
+          github={props.social.github}
+        />
+        <TwitterBadge
+          base="https://twitter.com"
+          show={props.data.twitterBadge}
+          twitter={props.social.twitter}
         />
       </>
       <>
@@ -240,6 +356,9 @@ const Markdown = props => {
           project={props.data.contact}
         />
       </>
+      <>
+        <DisplayWork prefix={props.prefix.resume} link={props.link.resume} />
+      </>
       <>
         <DisplayWork
           prefix={props.prefix.funFact}
@@ -257,111 +376,103 @@ const Markdown = props => {
           }
         />
       </>
-      <>
-        <DisplaySkills skills={props.skills} />
-      </>
-      <>
-        <DisplayTopLanguages
-          show={props.data.topLanguages}
-          showStats={props.data.githubStats}
-          github={props.social.github}
-        />
-      </>
-      <>
-        <GitHubStats
-          show={props.data.githubStats}
-          github={props.social.github}
-        />
-      </>
-      {isSocial(props.social) ? `<p align="center">` : ""} <br />
+      {isSocial(props.social) ? (
+        <>
+          <SectionTitle label="Connect with me:" />
+          {`<p align="left">`}
+        </>
+      ) : (
+        ""
+      )}
+      <br />
       <>
         <DisplaySocial
           base="https://codepen.io"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
+          icon={icon_base_url + "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"
+          icon={icon_base_url + "devto.svg"}
           username={props.social.dev}
         />
       </>
       <>
         <DisplaySocial
           base="https://twitter.com"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg"
+          icon={icon_base_url + "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"
+          icon={icon_base_url + "linked-in-alt.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"
+          icon={icon_base_url + "stack-overflow.svg"}
           username={props.social.stackoverflow}
         />
       </>
       <>
         <DisplaySocial
           base="https://codesandbox.com"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
+          icon={icon_base_url + "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"
+          icon={icon_base_url + "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"
+          icon={icon_base_url + "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"
+          icon={icon_base_url + "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"
+          icon={icon_base_url + "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"
+          icon={icon_base_url + "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"
+          icon={icon_base_url + "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"
+          icon={icon_base_url + "youtube.svg"}
           username={props.social.youtube}
         />
       </>
@@ -375,55 +486,97 @@ const Markdown = props => {
       <>
         <DisplaySocial
           base="https://www.hackerrank.com"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerrank.svg"
+          icon={icon_base_url + "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"
+          icon={icon_base_url + "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"
+          icon={icon_base_url + "leet-code.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"
+          icon={icon_base_url + "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"
+          icon={icon_base_url + "geeks-for-geeks.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"
+          icon={icon_base_url + "topcoder.svg"}
           username={props.social.topcoder}
         />
       </>
+      <>
+        <DisplaySocial
+          base="https://discord.gg"
+          icon={icon_base_url + "discord.svg"}
+          username={props.social.discord}
+        />
+      </>
       <>
         <DisplaySocial
           base=""
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/rss.svg"
+          icon={icon_base_url + "rss.svg"}
           username={props.social.rssurl}
         />
       </>
-      {isSocial(props.social) ? `</p>` : ""}
+      {isSocial(props.social) ? (
+        <>
+          {`</p>`}
+          <br />
+          <br />
+        </>
+      ) : (
+        ""
+      )}
+      <>
+        <DisplaySkills skills={props.skills} />
+      </>
+      <>
+        <DisplaySupport support={props.support} />
+      </>
+      <>
+        <DisplayTopLanguages
+          show={props.data.topLanguages}
+          showStats={props.data.githubStats}
+          github={props.social.github}
+          options={props.data.topLanguagesOptions}
+        />
+      </>
+      <>
+        <GitHubStats
+          show={props.data.githubStats}
+          github={props.social.github}
+          options={props.data.githubStatsOptions}
+        />
+      </>
+      <>
+        <DisplayStreakStats
+          show={props.data.streakStats}
+          github={props.social.github}
+          options={props.data.streakStatsOptions}
+        />
+      </>
     </div>
   )
 }
-
 export default Markdown

src/components/markdownPreview.js

@@ -1,48 +1,40 @@
 import React from "react"
-import { icons, skills } from "../constants/skills"
+import { icons, skills, skillWebsites } from "../constants/skills"
+import {
+  githubStatsLinkGenerator,
+  topLanguagesLinkGenerator,
+  streakStatsLinkGenerator,
+} from "../utils/link-generators"
 
-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
+export const TitlePreview = props => {
+  if (props.prefix && props.title) {
+    return (
+      <h1 className="text-center text-xl font-bold">
+        {props.prefix + " " + props.title}
+      </h1>
+    )
   }
-  const SubTitlePreview = props => {
-    if (props.subtitle) {
-      return <h3 className="text-center font-medium">{props.subtitle}</h3>
-    }
-    return null
+  return null
+}
+
+export const SubTitlePreview = props => {
+  if (props.subtitle) {
+    return <h3 className="text-center font-medium">{props.subtitle}</h3>
   }
-  const DisplayWork = props => {
-    if (props.prefix && props.project) {
-      if (props.link) {
-        return (
-          <div className="my-2">
-            {props.prefix + " "}
-            <a
-              href={props.link}
-              className="no-underline text-blue-700"
-              target="blank"
-            >
-              {props.project}
-            </a>
-          </div>
-        )
-      } else {
-        return (
-          <div className="my-2">
-            {props.prefix + " "}
-            <b>{props.project}</b>
-          </div>
-        )
-      }
-    }
-    if (props.prefix && props.link) {
+  return null
+}
+
+export const SectionTitle = props => {
+  if (!props.visible) return null
+  else if (props.label) {
+    return <h3 className="w-full text-lg sm:text-xl">{props.label}</h3>
+  }
+  return null
+}
+
+export const DisplayWork = props => {
+  if (props.prefix && props.project) {
+    if (props.link) {
       return (
         <div className="my-2">
           {props.prefix + " "}
@@ -51,231 +43,416 @@ const MarkdownPreview = props => {
             className="no-underline text-blue-700"
             target="blank"
           >
-            {props.link}
+            {props.project}
           </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) {
+    } else {
       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>
+        <div className="my-2">
+          {props.prefix + " "}
+          <b>{props.project}</b>
+        </div>
       )
     }
-    return null
   }
-  const SocialPreview = props => {
+  if (props.prefix && props.link) {
     return (
-      <div className="flex justify-center items-end">
+      <div className="my-2">
+        {props.prefix + " "}
+        <a
+          href={props.link}
+          className="no-underline text-blue-700"
+          target="blank"
+        >
+          {props.link}
+        </a>
+      </div>
+    )
+  }
+  return null
+}
+
+export const WorkPreview = props => {
+  const prefix = props.work.prefix
+  const data = props.work.data
+  const link = props.work.link
+  return (
+    <>
+      <DisplayWork
+        prefix={prefix.currentWork}
+        project={data.currentWork}
+        link={link.currentWork}
+      />
+      <DisplayWork prefix={prefix.currentLearn} project={data.currentLearn} />
+      <DisplayWork
+        prefix={prefix.helpWith}
+        project={data.helpWith}
+        link={link.helpWith}
+      />
+      <DisplayWork
+        prefix={prefix.collaborateOn}
+        project={data.collaborateOn}
+        link={link.collaborateOn}
+      />
+      <DisplayWork prefix={prefix.ama} project={data.ama} />
+      <DisplayWork prefix={prefix.portfolio} link={link.portfolio} />
+      <DisplayWork prefix={prefix.blog} link={link.blog} />
+      <DisplayWork prefix={prefix.resume} link={link.resume} />
+      <DisplayWork prefix={prefix.contact} project={data.contact} />
+      <DisplayWork prefix={prefix.funFact} project={data.funFact} />
+    </>
+  )
+}
+
+export 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
+}
+
+export const SocialPreview = props => {
+  let viewSocial = false
+  const icon_base_url =
+    "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/"
+  Object.keys(props.social).forEach(key => {
+    if (props.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="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
+          icon={icon_base_url + "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"
+          icon={icon_base_url + "devto.svg"}
           username={props.social.dev}
         />
+      </>
+      <>
         <DisplaySocial
           base="https://twitter.com"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg"
+          icon={icon_base_url + "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"
+          icon={icon_base_url + "linked-in-alt.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"
+          icon={icon_base_url + "stack-overflow.svg"}
           username={props.social.stackoverflow}
         />
+      </>
+      <>
         <DisplaySocial
           base="https://codesandbox.com"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
+          icon={icon_base_url + "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"
+          icon={icon_base_url + "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"
+          icon={icon_base_url + "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"
+          icon={icon_base_url + "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"
+          icon={icon_base_url + "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"
+          icon={icon_base_url + "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"
+          icon={icon_base_url + "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"
+          icon={icon_base_url + "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"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/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"
+          icon={icon_base_url + "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}
+          base="https://codeforces.com/profile"
+          icon={icon_base_url + "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"
+          icon={icon_base_url + "leet-code.svg"}
           username={props.social.leetcode}
         />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.hackerearth.com"
+          icon={icon_base_url + "hackerearth.svg"}
+          username={props.social.hackerearth}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://auth.geeksforgeeks.org/user"
+          icon={icon_base_url + "geeks-for-geeks.svg"}
+          username={props.social.geeks_for_geeks}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.topcoder.com/members"
+          icon={icon_base_url + "topcoder.svg"}
+          username={props.social.topcoder}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://discord.gg"
+          icon={icon_base_url + "discord.svg"}
+          username={props.social.discord}
+        />
+      </>
+      <>
         <DisplaySocial
           base=""
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/rss.svg"
+          icon={icon_base_url + "rss.svg"}
           username={props.social.rssurl}
         />
+      </>
+    </div>
+  )
+}
+
+export const VisitorsBadgePreview = props => {
+  let link =
+    "https://komarev.com/ghpvc/?username=" +
+    props.github +
+    `&label=${props.badgeOptions.badgeLabel}` +
+    `&color=${props.badgeOptions.badgeColor}` +
+    `&style=${props.badgeOptions.badgeStyle}`
+  if (props.show) {
+    return (
+      <div className="text-left my-2">
+        {" "}
+        <img className="h-4 sm:h-6" src={link} alt={props.github} />{" "}
+      </div>
+    )
+  }
+  return null
+}
+
+export const TwitterBadgePreview = props => {
+  let link =
+    "https://img.shields.io/twitter/follow/" +
+    props.twitter +
+    "?logo=twitter&style=for-the-badge"
+  if (props.show) {
+    return (
+      <div className="text-left my-2">
+        {" "}
+        <a
+          href="https://twitter.com/${props.twitter}"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <img className="h-4 sm:h-6" src={link} alt={props.twitter} />
+        </a>{" "}
+      </div>
+    )
+  }
+  return null
+}
+
+export const GithubProfileTrophyPreview = props => {
+  let link =
+    "https://github-profile-trophy.vercel.app/?username=" + props.github
+  if (props.show) {
+    return (
+      <div className="text-left my-2">
+        {" "}
+        <a href="https://github.com/ryo-ma/github-profile-trophy">
+          <img src={link} alt={props.github} />
+        </a>{" "}
+      </div>
+    )
+  }
+  return null
+}
+
+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
+}
+
+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>
     )
   }
-  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
+  return <div className="text-center mx-4 mb-4"> &nbsp;</div>
+}
+
+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>
+    )
   }
-  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(
+  return null
+}
+
+export const SkillsPreview = props => {
+  var listSkills = []
+  skills.forEach(skill => {
+    if (props.skills[skill]) {
+      listSkills.push(
+        <a
+          href={skillWebsites[skill]}
+          key={skill}
+          target="_blank"
+          rel="noreferrer"
+        >
           <img
-            className="my-4 mx-4 h-6 w-6 sm:h-10 sm:w-10"
-            key={skill}
+            className="mb-4 mr-4 h-6 w-6 sm:h-10 sm:w-10"
             src={icons[skill]}
             alt={skill}
           />
-        )
-      }
-    })
-    return listSkills.length > 0 ? (
-      <div className="flex flex-wrap justify-start items-center">
-        {listSkills}
-      </div>
-    ) : (
-      ""
-    )
-  }
+        </a>
+      )
+    }
+  })
+  return listSkills.length > 0 ? (
+    <div className="flex flex-wrap justify-start items-center">
+      <SectionTitle label="Languages and Tools:" visible={true} />
+      {listSkills}
+    </div>
+  ) : (
+    ""
+  )
+}
+
+export const SupportPreview = props => {
+  let viewSupport = false
+  Object.keys(props.support).forEach(key => {
+    if (props.support[key]) {
+      viewSupport = true
+    }
+  })
+  return props.support.buyMeACoffee || props.support.buyMeAKofi ? (
+    <div className="flex flex-wrap justify-start items-center">
+      <SectionTitle label="Support:" visible={viewSupport} />
+      {props.support.buyMeACoffee && (
+        <a
+          href={`https://www.buymeacoffee.com/` + props.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>
+      )}
+      {props.support.buyMeAKofi && (
+        <a
+          href={`https://ko-fi.com/` + props.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>
+  ) : (
+    ""
+  )
+}
+
+const MarkdownPreview = props => {
   return (
     <div id="markdown-preview">
       <TitlePreview prefix={props.prefix.title} title={props.data.title} />
@@ -283,20 +460,41 @@ const MarkdownPreview = props => {
       <VisitorsBadgePreview
         show={props.data.visitorsBadge}
         github={props.social.github}
+        badgeOptions={{
+          badgeLabel: encodeURI(props.data.badgeLabel),
+          badgeColor: props.data.badgeColor,
+          badgeStyle: props.data.badgeStyle,
+        }}
+      />
+      <GithubProfileTrophyPreview
+        show={props.data.githubProfileTrophy}
+        github={props.social.github}
+      />
+      <TwitterBadgePreview
+        show={props.data.twitterBadge}
+        twitter={props.social.twitter}
       />
       <WorkPreview work={props} />
+      <SocialPreview social={props.social} />
       <SkillsPreview skills={props.skills} />
+      <SupportPreview support={props.support} />
       <div className="block sm:flex sm:justify-center sm:items-start">
         <TopLanguagesPreview
           show={props.data.topLanguages}
           github={props.social.github}
+          options={props.data.topLanguagesOptions}
         />
         <GitHubStatsPreview
           show={props.data.githubStats}
           github={props.social.github}
+          options={props.data.githubStatsOptions}
+        />
+        <StreakStatsPreview
+          show={props.data.streakStats}
+          github={props.social.github}
+          options={props.data.streakStatsOptions}
         />
       </div>
-      <SocialPreview social={props.social} />
     </div>
   )
 }

src/components/skills.js

@@ -1,20 +1,27 @@
-import React from "react"
+import React, {useState} from "react"
 import { icons, categorizedSkills } from "../constants/skills"
+import { SearchIcon, XIcon } from "@primer/octicons-react";
+
 
 const Skills = props => {
+  const [search, setSearch] = useState('')
+  const [debounce, setDebounce] = useState(undefined);
+  const inputRef = React.createRef()
   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"
+          className="checkbox-label flex items-center justify-start"
         >
           <input
             id={skill}
             type="checkbox"
+            className="checkbox-label__input"
             checked={props.skills[skill]}
             onChange={event => props.handleSkillsChange(skill)}
           />
+          <span class="checkbox-label__control" />
           <img
             className="ml-4 w-8 h-8 sm:w-10 sm:h-10"
             src={icons[skill]}
@@ -22,28 +29,78 @@ const Skills = props => {
           />
           <span className="tooltiptext">{skill}</span>
         </label>
-      </div>
+      </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>
+  const onSearchChange = (value) => {
+    const callback = () => {
+      setSearch(value)
+    }
+    clearTimeout(debounce)
+    setDebounce(setTimeout(callback, 50))
+  }
 
-      {Object.keys(categorizedSkills).map(key => (
-        <div key={key}>
-          <h4 className="text-sm sm:text-xl text-gray-900 text-center">
-            {categorizedSkills[key].title}
-          </h4>
+  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 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 => {
+        let filtered = categorizedSkills[key].skills.filter(skill => {
+          return 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.map(skill => createSkill(skill))}
+            {categorizedSkills[key].skills   
+            .filter(skill => {
+              return skill.includes(search.toLowerCase())
+            })
+            .map(skill => createSkill(skill))}
           </div>
         </div>
       ))}
+      <span className="flex justify-center text-gray-900">
+        {(Object.keys(categorizedSkills)
+        .filter(key => {
+          let filtered = categorizedSkills[key].skills.filter(skill => {
+            return skill.includes(search.toLowerCase())
+          })
+            return filtered.length !== 0
+        })
+        .length === 0)?"No Results Found":""}
+      </span>
     </div>
-  )
+  ) 
 }
 
-export default Skills
+export default Skills

src/components/social.js

@@ -303,6 +303,20 @@ const Social = props => {
             }
           />
         </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={props.social.discord}
+            onChange={event => props.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"

src/components/support.js

@@ -0,0 +1,43 @@
+import React from "react"
+
+const Support = 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={props.support.buyMeACoffee || ""}
+            onChange={event => props.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={props.support.buyMeAKofi || ""}
+            onChange={event => props.handleSupportChange("buyMeAKofi", event)}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Support

src/components/work.js

@@ -151,6 +151,22 @@ const Work = props => {
           onChange={event => props.handleLinkChange("blog", event)}
         />
       </div>
+      <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
+        <input
+          id="resume-prefix"
+          className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          value={props.prefix.resume}
+          onChange={event => props.handlePrefixChange("resume", event)}
+        />
+        <input
+          id="resume"
+          placeholder="resume link"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          value={props.link.resume}
+          onChange={event => props.handleLinkChange("resume", event)}
+        />
+      </div>
+      
       <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
         <input
           id="funFact-prefix"
@@ -160,7 +176,7 @@ const Work = props => {
         />
         <input
           id="funFact"
-          placeholder="Chai over Coffee"
+          placeholder="I think I am funny"
           className="outline-none placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.data.funFact}
           onChange={event => props.handleDataChange("funFact", event)}

src/constants/defaults.js

@@ -0,0 +1,97 @@
+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/skills.js

@@ -1,4 +1,3 @@
-//const baseURL = 'https://devicons.github.io/devicon/devicon.git/icons/';
 const categorizedSkills = {
   language: {
     title: "Programming Languages",
@@ -11,6 +10,7 @@ const categorizedSkills = {
       "javascript",
       "typescript",
       "php",
+      "perl",
       "ruby",
       "scala",
       "python",
@@ -19,6 +19,10 @@ const categorizedSkills = {
       "clojure",
       "rust",
       "haskell",
+      "coffeescript",
+      "elixir",
+      "erlang",
+      "nim",
     ],
   },
 
@@ -29,6 +33,7 @@ const categorizedSkills = {
       "react",
       "svelte",
       "angularjs",
+      "angular",
       "backbonejs",
       "bootstrap",
       "vuetify",
@@ -56,11 +61,14 @@ const categorizedSkills = {
       "nodejs",
       "spring",
       "express",
+      "graphql",
       "kafka",
       "solr",
       "rabbitMQ",
       "hadoop",
       "nginx",
+      "openresty",
+      "nestjs",
     ],
   },
 
@@ -75,12 +83,20 @@ const categorizedSkills = {
       "xamarin",
       "reactnative",
       "ionic",
+      "apachecordova",
     ],
   },
 
   ai: {
     title: "AI/ML",
-    skills: ["tensorflow", "pytorch", "opencv", "scikit_learn"],
+    skills: [
+      "tensorflow",
+      "pytorch",
+      "pandas",
+      "seaborn",
+      "opencv",
+      "scikit_learn",
+    ],
   },
 
   database: {
@@ -96,12 +112,16 @@ const categorizedSkills = {
       "hive",
       "realm",
       "mariadb",
+      "cockroachdb",
+      "elasticsearch",
+      "sqlite",
+      "mssql",
     ],
   },
 
   data_visualization: {
     title: "Data Visualization",
-    skills: ["d3js", "chartjs", "canvasjs"],
+    skills: ["d3js", "chartjs", "canvasjs", "kibana", "grafana"],
   },
 
   devops: {
@@ -115,12 +135,14 @@ const categorizedSkills = {
       "bash",
       "azure",
       "vagrant",
+      "circleci",
+      "travisci",
     ],
   },
 
   baas: {
     title: "Backend as a Service(BaaS)",
-    skills: ["firebase", "amplify"],
+    skills: ["firebase", "appwrite", "amplify", "heroku"],
   },
 
   framework: {
@@ -134,6 +156,7 @@ const categorizedSkills = {
       "codeigniter",
       "rails",
       "flask",
+      "quasar",
     ],
   },
 
@@ -155,121 +178,159 @@ const categorizedSkills = {
     skills: [
       "illustrator",
       "photoshop",
+      "xd",
       "figma",
       "blender",
       "sketch",
       "invision",
       "framer",
+      "matlab",
+      "postman",
     ],
   },
 
   static_site_generator: {
     title: "Static Site Generators",
-    skills: ["gatsby", "gridsome", "hugo", "jekyll", "nextjs", "nuxtjs"],
+    skills: [
+      "gatsby",
+      "gridsome",
+      "hugo",
+      "jekyll",
+      "nextjs",
+      "nuxtjs",
+      "11ty",
+      "scully",
+      "sculpin",
+      "sapper",
+      "vuepress",
+      "hexo",
+      "middleman",
+    ],
+  },
+
+  game_engines: {
+    title: "Game Engines",
+    skills: ["unity", "unreal"],
+  },
+
+  automation: {
+    title: "Automation",
+    skills: ["zapier", "ifttt"],
   },
 
   other: {
     title: "Other",
-    skills: ["linux", "git"],
+    skills: ["linux", "git", "arduino"],
   },
 }
 
 const icons = {
   vuejs:
-    "https://devicons.github.io/devicon/devicon.git/icons/vuejs/vuejs-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/vuejs/vuejs-original-wordmark.svg",
   react:
-    "https://devicons.github.io/devicon/devicon.git/icons/react/react-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original-wordmark.svg",
   angularjs:
-    "https://devicons.github.io/devicon/devicon.git/icons/angularjs/angularjs-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/angularjs/angularjs-original-wordmark.svg",
+  angular: "https://angular.io/assets/images/logos/angular/angular.svg",
   aws:
-    "https://devicons.github.io/devicon/devicon.git/icons/amazonwebservices/amazonwebservices-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/amazonwebservices/amazonwebservices-original-wordmark.svg",
   android:
-    "https://devicons.github.io/devicon/devicon.git/icons/android/android-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/android/android-original-wordmark.svg",
+  arduino: "https://cdn.worldvectorlogo.com/logos/arduino-1.svg",
   backbonejs:
-    "https://devicons.github.io/devicon/devicon.git/icons/backbonejs/backbonejs-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/backbonejs/backbonejs-original-wordmark.svg",
   bootstrap:
-    "https://devicons.github.io/devicon/devicon.git/icons/bootstrap/bootstrap-plain.svg",
-  c: "https://devicons.github.io/devicon/devicon.git/icons/c/c-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/bootstrap/bootstrap-plain-wordmark.svg",
+  c:
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/c/c-original.svg",
   canvasjs:
     "https://raw.githubusercontent.com/Hardik0307/Hardik0307/master/assets/canvasjs-charts.svg",
   coffeescript:
-    "https://devicons.github.io/devicon/devicon.git/icons/coffeescript/coffeescript-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/coffeescript/coffeescript-original-wordmark.svg",
   codeigniter: "https://cdn.worldvectorlogo.com/logos/codeigniter.svg",
   cplusplus:
-    "https://devicons.github.io/devicon/devicon.git/icons/cplusplus/cplusplus-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/cplusplus/cplusplus-original.svg",
   css3:
-    "https://devicons.github.io/devicon/devicon.git/icons/css3/css3-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg",
   csharp:
-    "https://devicons.github.io/devicon/devicon.git/icons/csharp/csharp-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/csharp/csharp-original.svg",
   d3js:
-    "https://devicons.github.io/devicon/devicon.git/icons/d3js/d3js-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/d3js/d3js-original.svg",
   django:
-    "https://devicons.github.io/devicon/devicon.git/icons/django/django-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/django/django-original.svg",
   docker:
-    "https://devicons.github.io/devicon/devicon.git/icons/docker/docker-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/docker/docker-original-wordmark.svg",
   dotnet:
-    "https://devicons.github.io/devicon/devicon.git/icons/dot-net/dot-net-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/dot-net/dot-net-original-wordmark.svg",
   electron:
-    "https://devicons.github.io/devicon/devicon.git/icons/electron/electron-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/electron/electron-original.svg",
   express:
-    "https://devicons.github.io/devicon/devicon.git/icons/express/express-original-wordmark.svg",
-  go: "https://devicons.github.io/devicon/devicon.git/icons/go/go-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/express/express-original-wordmark.svg",
+  go:
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/go/go-original.svg",
+  graphql: "https://www.vectorlogo.zone/logos/graphql/graphql-icon.svg",
   gulp:
-    "https://devicons.github.io/devicon/devicon.git/icons/gulp/gulp-plain.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/gulp/gulp-plain.svg",
   html5:
-    "https://devicons.github.io/devicon/devicon.git/icons/html5/html5-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg",
   hugo: "https://api.iconify.design/logos-hugo.svg",
   java:
-    "https://devicons.github.io/devicon/devicon.git/icons/java/java-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/java/java-original.svg",
   javascript:
-    "https://devicons.github.io/devicon/devicon.git/icons/javascript/javascript-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg",
   ionic: "https://upload.wikimedia.org/wikipedia/commons/d/d1/Ionic_Logo.svg",
   laravel:
-    "https://devicons.github.io/devicon/devicon.git/icons/laravel/laravel-plain-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/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",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/mongodb/mongodb-original-wordmark.svg",
   mysql:
-    "https://devicons.github.io/devicon/devicon.git/icons/mysql/mysql-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/mysql/mysql-original-wordmark.svg",
+  nestjs:
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/nestjs/nestjs-plain.svg",
   nginx:
-    "https://devicons.github.io/devicon/devicon.git/icons/nginx/nginx-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/nginx/nginx-original.svg",
   nodejs:
-    "https://devicons.github.io/devicon/devicon.git/icons/nodejs/nodejs-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original-wordmark.svg",
+  openresty: "https://openresty.org/images/logo.png",
   oracle:
-    "https://devicons.github.io/devicon/devicon.git/icons/oracle/oracle-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/oracle/oracle-original.svg",
   photoshop:
-    "https://devicons.github.io/devicon/devicon.git/icons/photoshop/photoshop-plain.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/photoshop/photoshop-line.svg",
+  xd: "https://cdn.worldvectorlogo.com/logos/adobe-xd.svg",
   php:
-    "https://devicons.github.io/devicon/devicon.git/icons/php/php-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/php/php-original.svg",
+  perl: "https://api.iconify.design/logos-perl.svg",
   postgresql:
-    "https://devicons.github.io/devicon/devicon.git/icons/postgresql/postgresql-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/postgresql/postgresql-original-wordmark.svg",
   python:
-    "https://devicons.github.io/devicon/devicon.git/icons/python/python-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/python/python-original.svg",
   rails:
-    "https://devicons.github.io/devicon/devicon.git/icons/rails/rails-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/rails/rails-original-wordmark.svg",
   redis:
-    "https://devicons.github.io/devicon/devicon.git/icons/redis/redis-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/redis/redis-original-wordmark.svg",
   ruby:
-    "https://devicons.github.io/devicon/devicon.git/icons/ruby/ruby-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/ruby/ruby-original.svg",
   rust:
-    "https://devicons.github.io/devicon/devicon.git/icons/rust/rust-plain.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/rust/rust-plain.svg",
   sass:
-    "https://devicons.github.io/devicon/devicon.git/icons/sass/sass-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/sass/sass-original.svg",
   scala:
-    "https://devicons.github.io/devicon/devicon.git/icons/scala/scala-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/scala/scala-original.svg",
+  solidworks: "https://cdn.worldvectorlogo.com/logos/solidworks.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",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/swift/swift-original.svg",
   typescript:
-    "https://devicons.github.io/devicon/devicon.git/icons/typescript/typescript-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/typescript/typescript-original.svg",
   linux:
-    "https://devicons.github.io/devicon/devicon.git/icons/linux/linux-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/linux/linux-original.svg",
   redux:
-    "https://devicons.github.io/devicon/devicon.git/icons/redux/redux-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/redux/redux-original.svg",
   webpack:
-    "https://devicons.github.io/devicon/devicon.git/icons/webpack/webpack-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/d00d0969292a6569d45b06d3f350f463a0107b0d/icons/webpack/webpack-original-wordmark.svg",
   flutter: "https://www.vectorlogo.zone/logos/flutterio/flutterio-icon.svg",
   dart: "https://www.vectorlogo.zone/logos/dartlang/dartlang-icon.svg",
   kotlin: "https://www.vectorlogo.zone/logos/kotlinlang/kotlinlang-icon.svg",
@@ -292,6 +353,9 @@ const icons = {
     "https://www.vectorlogo.zone/logos/apache_hadoop/apache_hadoop-icon.svg",
   bash: "https://www.vectorlogo.zone/logos/gnu_bash/gnu_bash-icon.svg",
   pytorch: "https://www.vectorlogo.zone/logos/pytorch/pytorch-icon.svg",
+  pandas:
+    "https://raw.githubusercontent.com/devicons/devicon/2ae2a900d2f041da66e950e4d48052658d850630/icons/pandas/pandas-original.svg",
+  seaborn: "https://seaborn.pydata.org/_images/logo-mark-lightbg.svg",
   opencv: "https://www.vectorlogo.zone/logos/opencv/opencv-icon.svg",
   illustrator:
     "https://www.vectorlogo.zone/logos/adobe_illustrator/adobe_illustrator-icon.svg",
@@ -326,9 +390,10 @@ const icons = {
   gridsome: "https://www.vectorlogo.zone/logos/gridsome/gridsome-icon.svg",
   nuxtjs: "https://www.vectorlogo.zone/logos/nuxtjs/nuxtjs-icon.svg",
   jekyll: "https://www.vectorlogo.zone/logos/jekyllrb/jekyllrb-icon.svg",
-  nextjs: "https://cdn.worldvectorlogo.com/logos/nextjs-3.svg",
+  nextjs: "https://cdn.worldvectorlogo.com/logos/nextjs-2.svg",
   reactnative: "https://reactnative.dev/img/header_logo.svg",
   mariadb: "https://www.vectorlogo.zone/logos/mariadb/mariadb-icon.svg",
+  cockroachdb: "https://cdn.worldvectorlogo.com/logos/cockroachdb.svg",
   objectivec:
     "https://www.vectorlogo.zone/logos/apple_objectivec/apple_objectivec-icon.svg",
   clojure:
@@ -353,9 +418,200 @@ const icons = {
   wx_widgets:
     "https://upload.wikimedia.org/wikipedia/commons/b/bb/WxWidgets.svg",
   ember:
-    "https://devicons.github.io/devicon/devicon.git/icons/ember/ember-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/ember/ember-original-wordmark.svg",
   scikit_learn:
     "https://upload.wikimedia.org/wikipedia/commons/0/05/Scikit_learn_logo_small.svg",
+  quasar: "https://cdn.quasar.dev/logo/svg/quasar-logo.svg",
+  kibana:
+    "https://www.vectorlogo.zone/logos/elasticco_kibana/elasticco_kibana-icon.svg",
+  grafana: "https://www.vectorlogo.zone/logos/grafana/grafana-icon.svg",
+  elasticsearch: "https://www.vectorlogo.zone/logos/elastic/elastic-icon.svg",
+  circleci: "https://www.vectorlogo.zone/logos/circleci/circleci-icon.svg",
+  scully:
+    "https://raw.githubusercontent.com/scullyio/scully/main/assets/logos/SVG/scullyio-icon.svg",
+  "11ty":
+    "https://gist.githubusercontent.com/vivek32ta/c7f7bf583c1fb1c58d89301ea40f37fd/raw/f4c85cce5790758286b8f155ef9a177710b995df/11ty.svg",
+  sculpin:
+    "https://gist.githubusercontent.com/vivek32ta/c7f7bf583c1fb1c58d89301ea40f37fd/raw/1782aef8672484698c0dd407f900c4a329ed5bc4/sculpin.svg",
+  sapper:
+    "https://raw.githubusercontent.com/bestofjs/bestofjs-webui/master/public/logos/sapper.svg",
+  vuepress:
+    "https://raw.githubusercontent.com/AliasIO/wappalyzer/master/src/drivers/webextension/images/icons/VuePress.svg",
+  unity: "https://www.vectorlogo.zone/logos/unity3d/unity3d-icon.svg",
+  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/",
+  solidworks: "https://www.solidworks.com/",
+  vuejs: "https://vuejs.org/",
+  react: "https://reactjs.org/",
+  angularjs: "https://angular.io",
+  angular: "https://angular.io",
+  aws: "https://aws.amazon.com",
+  android: "https://developer.android.com",
+  backbonejs: "https://backbonejs.org",
+  bootstrap: "https://getbootstrap.com",
+  c: "https://www.cprogramming.com/",
+  canvasjs: "https://canvasjs.com",
+  coffeescript: "https://offeescript.org",
+  codeigniter: "https://codeigniter.com",
+  cplusplus: "https://www.w3schools.com/cpp/",
+  css3: "https://www.w3schools.com/css/",
+  csharp: "https://www.w3schools.com/cs/",
+  d3js: "https://d3js.org/",
+  django: "https://www.djangoproject.com/",
+  docker: "https://www.docker.com/",
+  dotnet: "https://dotnet.microsoft.com/",
+  electron: "https://www.electronjs.org",
+  express: "https://expressjs.com",
+  go: "https://golang.org",
+  graphql: "https://graphql.org",
+  gulp: "https://gulpjs.com",
+  html5: "https://www.w3.org/html/",
+  hugo: "https://gohugo.io/",
+  java: "https://www.java.com",
+  javascript: "https://developer.mozilla.org/en-US/docs/Web/JavaScript",
+  ionic: "https://ionicframework.com",
+  laravel: "https://laravel.com/",
+  matlab: "https://www.mathworks.com/",
+  meteor: "https://www.meteor.com/",
+  mongodb: "https://www.mongodb.com/",
+  mysql: "https://www.mysql.com/",
+  nestjs: "https://nestjs.com/",
+  nginx: "https://www.nginx.com",
+  nodejs: "https://nodejs.org",
+  openresty: "https://openresty.org/",
+  oracle: "https://www.oracle.com/",
+  photoshop: "https://www.photoshop.com/en",
+  xd: "https://www.adobe.com/products/xd.html",
+  php: "https://www.php.net",
+  perl: "https://www.perl.org/",
+  postgresql: "https://www.postgresql.org",
+  python: "https://www.python.org",
+  rails: "https://rubyonrails.org",
+  redis: "https://redis.io",
+  ruby: "https://www.ruby-lang.org/en/",
+  rust: "https://www.rust-lang.org",
+  sass: "https://sass-lang.com",
+  scala: "https://www.scala-lang.org",
+  symfony: "https://symfony.com",
+  spring: "https://spring.io/",
+  swift: "https://developer.apple.com/swift/",
+  typescript: "https://www.typescriptlang.org/",
+  linux: "https://www.linux.org/",
+  redux: "https://redux.js.org",
+  webpack: "https://webpack.js.org",
+  flutter: "https://flutter.dev",
+  dart: "https://dart.dev",
+  kotlin: "https://kotlinlang.org",
+  tensorflow: "https://www.tensorflow.org",
+  chartjs: "https://www.chartjs.org",
+  jenkins: "https://www.jenkins.io",
+  gcp: "https://cloud.google.com",
+  kubernetes: "https://kubernetes.io",
+  azure: "https://azure.microsoft.com/en-in/",
+  git: "https://git-scm.com/",
+  kafka: "https://kafka.apache.org/",
+  solr: "https://lucene.apache.org/solr/",
+  cassandra: "https://cassandra.apache.org/",
+  rabbitMQ: "https://www.rabbitmq.com",
+  hadoop: "https://hadoop.apache.org/",
+  bash: "https://www.gnu.org/software/bash/",
+  pytorch: "https://pytorch.org/",
+  pandas: "https://pandas.pydata.org/",
+  seaborn: "https://seaborn.pydata.org/",
+  opencv: "https://opencv.org/",
+  illustrator: "https://www.adobe.com/in/products/illustrator.html",
+  figma: "https://www.figma.com/",
+  blender: "https://www.blender.org/",
+  babel: "https://babeljs.io/",
+  sketch: "https://www.sketch.com/",
+  flask: "https://flask.palletsprojects.com/",
+  nativescript: "https://nativescript.org/",
+  xamarin: "https://dotnet.microsoft.com/apps/xamarin",
+  vagrant: "https://www.vagrantup.com/",
+  tailwind: "https://tailwindcss.com/",
+  materialize: "https://materializecss.com/",
+  invision: "https://www.invisionapp.com/",
+  framer: "https://www.framer.com/",
+  bulma: "https://bulma.io/",
+  couchdb: "https://couchdb.apache.org/",
+  firebase: "https://firebase.google.com/",
+  amplify: "https://aws.amazon.com/amplify/",
+  hive: "https://hive.apache.org/",
+  realm: "https://realm.io/",
+  gatsby: "https://www.gatsbyjs.com/",
+  gridsome: "https://gridsome.org/",
+  nuxtjs: "https://nuxtjs.org/",
+  jekyll: "https://jekyllrb.com/",
+  nextjs: "https://nextjs.org/",
+  reactnative: "https://reactnative.dev/",
+  mariadb: "https://mariadb.org/",
+  cockroachdb: "https://www.cockroachlabs.com/product/cockroachdb/",
+  objectivec:
+    "https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html",
+  clojure: "https://clojure.org/",
+  haskell: "https://www.haskell.org/",
+  svelte: "https://svelte.dev",
+  vuetify: "https://vuetifyjs.com/en/",
+  pug: "https://pugjs.org",
+  mocha: "https://mochajs.org",
+  jest: "https://jestjs.io",
+  cypress: "https://www.cypress.io",
+  selenium: "https://www.selenium.dev",
+  puppeteer: "https://github.com/puppeteer/puppeteer",
+  karma: "https://karma-runner.github.io/latest/index.html",
+  jasmine: "https://jasmine.github.io/",
+  gtk: "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 = {}
@@ -371,4 +627,11 @@ skills.forEach(skill => {
 
 const categories = Object.keys(categorizedSkills)
 
-export { initialSkillState, icons, skills, categorizedSkills, categories }
+export {
+  initialSkillState,
+  icons,
+  skills,
+  skillWebsites,
+  categorizedSkills,
+  categories,
+}

src/images/icons/AIML/opencv.svg

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/images/icons/BackendDevelopment/openresty.svg

@@ -0,0 +1,33 @@
+<?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-rule:evenodd;clip-rule:evenodd;fill:#B1DB9E;stroke:#B1DB9E;stroke-width:0.5;stroke-linecap:round;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#85CB65;stroke:#85CB65;stroke-width:0.5;stroke-linecap:round;}
+	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#75B35B;stroke:#75B35B;stroke-width:0.5;stroke-linecap:round;}
+	.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#6FB950;stroke:#6FB950;stroke-width:0.5;stroke-linecap:round;}
+	.st4{fill-rule:evenodd;clip-rule:evenodd;fill:#6FB850;stroke:#6FB850;stroke-width:0.5;stroke-linecap:round;}
+	.st5{fill-rule:evenodd;clip-rule:evenodd;fill:#77C656;stroke:#77C656;stroke-width:0.5;stroke-linecap:round;}
+	.st6{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+</style>
+<symbol  id="A" viewBox="-45.2 -46.2 90.5 92.5">
+	<g>
+		<path class="st0" d="M-40.4-0.6c12.6,0.3,17,0.9,26.3,1.8C-9,11.6-9.2,9.4-7,21.7c-8.3-9.5-20.9-19.5-33.8-22.3"/>
+		<path class="st1" d="M-39-46c11.1,5.7,38.8,24.2,46.4,27.9c4-1,9.8-3.6,17.8-0.5C16.3-17.6,8.7-7.7-0.2-0.9
+			c-8-20.3-21.4-32-27.2-38.3"/>
+		<path class="st2" d="M-44.8-19.4c15.4,3.1,20.6,4.9,31.7,8C-6,3.5-8,10.5-9.5,19.9C-16.7,2.7-29.8-13.2-45-19.4"/>
+		<path class="st3" d="M-38.8-45.9c8.9,5.2,20.7,21,25.6,34c1.8,5.2,4.5,17.7,3.6,31.8C-8,28.7,3.4,54.3,28.8,43.3
+			c-12.9,0-19.2-4.9-25.9-15.9C2.5,27.2-3.8,8.9-0.2-0.9C-8.7-29.1-32.1-42.9-39-46"/>
+		<path class="st0" d="M24.3,36.6c10.3,0,18.5-7,20.5-18.2c0.1-0.7,1.6,8.3-8.2,19.3c-0.7,0.7-6.7,1.6-12.1-1"/>
+	</g>
+	<g>
+		<path class="st4" d="M31.5-3c2.2,1.6,3.6,2.9,4.9,4.4c1.3,1-0.9-3.6-1.3-4.2c0.7-3.4-1.4-8.5-1.7-8.6c-1.6-1.6-30,9.4-20.2,35.4
+			C12.3,2.2,22.5-2,31.5-3L31.5-3z"/>
+		<path class="st5" d="M28.8,43.3c3.1-1.3,5.1-3.6,7.8-5.7c0.1-0.1-18.1,2.5-23.4-13.7c-1.8-2.9-8.3-26.7,20.1-35.5
+			c-1.3-2.9-6.7-6.6-8.1-7.1c-8.9,1-19,6.1-25.2,17.2C-5,7.5-2.4,45.1,28.8,43.3L28.8,43.3z"/>
+	</g>
+	<ellipse class="st6" cx="31" cy="-8.8" rx="1.3" ry="1.6"/>
+</symbol>
+<use xlink:href="#A"  width="90.5" height="92.5" x="-45.2" y="-46.2" transform="matrix(0.5162 0 0 0.5162 24.004 24.0041)" style="overflow:visible;"/>
+</svg>

src/images/icons/BackendDevelopment/rabbitmq.svg

@@ -0,0 +1,12 @@
+<?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:#FF6600;}
+</style>
+<path class="st0" d="M44.8,19.2H29.7c-0.8,0-1.4-0.6-1.4-1.4l0,0V2.1c0-1.2-0.9-2.1-2.1-2.1h-5.4c-1.2,0-2.1,0.9-2.1,2.1v15.6
+	c0,0.8-0.7,1.5-1.5,1.5l-4.9,0c-0.8,0-1.5-0.7-1.5-1.5l0-15.6C10.9,0.9,10,0,8.8,0H3.4C2.2,0,1.3,0.9,1.3,2.1v44
+	c0,1,0.8,1.9,1.9,1.9h41.6c1,0,1.9-0.8,1.9-1.9v-25C46.7,20,45.9,19.2,44.8,19.2C44.8,19.2,44.8,19.2,44.8,19.2L44.8,19.2z
+	 M37.7,35.7c0,1.3-1.1,2.4-2.4,2.4H31c-1.3,0-2.4-1.1-2.4-2.4v-4.3c0-1.3,1.1-2.4,2.4-2.4h4.3c1.3,0,2.4,1.1,2.4,2.4L37.7,35.7z"/>
+</svg>

src/images/icons/BackendDevelopment/solr.svg

@@ -0,0 +1,13 @@
+<?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:#C7402B;}
+</style>
+<path class="st0" d="M41.5,7.6L17.8,33.1l29.7-13.7C46.7,15,44.6,10.9,41.5,7.6L41.5,7.6z M23.9,0c-3.2,0-6.3,0.6-9.2,1.8l-3.2,26.7
+	L27.4,0.3C26.3,0.1,25.1,0,23.9,0L23.9,0z M47.8,20.9L19.6,36.7L46,33.5c1.3-3,2-6.2,1.9-9.5C48,23,47.9,22,47.8,20.9L47.8,20.9z
+	 M37.4,44c3.2-2.1,5.8-5,7.6-8.3l-24.8,4.9L37.4,44z M28.8,0.5L15.1,30.4L40.6,6.7C37.4,3.6,33.3,1.4,28.8,0.5L28.8,0.5z M26,48
+	c2.6-0.2,5.1-0.9,7.5-1.9l-13.9-1.6L26,48L26,48z M2,14.2c-1.1,2.4-1.8,5.1-2,7.7l3.7,6.6L2,14.2z M12.6,2.8
+	c-3.4,1.8-6.3,4.4-8.5,7.6l3.5,17.5L12.6,2.8z"/>
+</svg>

src/images/icons/BackendDevelopment/spring.svg

@@ -0,0 +1,18 @@
+<?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:#6DB33F;}
+</style>
+<g id="Layer_2_1_">
+	<g id="logos">
+		<path class="st0" d="M43.7,2.8c-0.7,1.6-1.5,3.1-2.6,4.5C31.9-2.2,16.8-2.5,7.3,6.7s-9.8,24.4-0.6,33.9c0.3,0.3,0.6,0.6,1,1
+			l0.9,0.8c10.1,8.5,25.2,7.2,33.7-2.9c3.3-3.9,5.2-8.7,5.6-13.7C48.5,19.7,46.7,12,43.7,2.8z M11.1,41.7c-0.7,0.9-2,1-2.9,0.3
+			c-0.9-0.7-1-2-0.3-2.9c0.7-0.9,2-1,2.9-0.3C11.7,39.6,11.8,40.9,11.1,41.7z M43.6,34.6C37.7,42.4,25,39.8,17,40.2
+			c0,0-1.4,0.1-2.9,0.3c0,0,0.5-0.2,1.2-0.5c5.7-2,8.4-2.4,11.8-4.2c6.5-3.3,13-10.6,14.2-18.1c-2.5,7.2-10,13.4-16.8,16
+			c-4.7,1.7-13.1,3.4-13.1,3.4l-0.3-0.2c-5.7-2.8-5.9-15.3,4.5-19.3c4.6-1.8,8.9-0.8,13.9-2c5.3-1.2,11.4-5.2,13.9-10.4
+			C46.2,13.6,49.6,26.6,43.6,34.6z"/>
+	</g>
+</g>
+</svg>

src/images/icons/DataVisualization/canvasjs.svg

@@ -0,0 +1,97 @@
+<?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:#FFFFFF;}
+	.st1{fill:#221F1F;}
+	.st2{fill:#5077B6;}
+	.st3{fill:#DE4032;}
+	.st4{fill:#30A14E;}
+	.st5{fill:#ECB215;}
+</style>
+<rect y="14.1" class="st0" width="48" height="19.8"/>
+<g>
+	<g>
+		<g>
+			<path class="st1" d="M15,25.6c-0.2,0.3-0.5,0.5-0.8,0.6c-0.3,0.1-0.7,0.2-1,0.2c-0.3,0-0.7-0.1-1-0.2c-0.3-0.1-0.6-0.3-0.8-0.5
+				S11,25.3,10.9,25c-0.1-0.3-0.2-0.6-0.2-1c0-0.3,0.1-0.7,0.2-1c0.1-0.3,0.3-0.6,0.5-0.8c0.2-0.2,0.5-0.4,0.8-0.5
+				c0.3-0.1,0.6-0.2,1-0.2c0.4,0,0.7,0.1,1,0.2c0.3,0.1,0.6,0.3,0.8,0.6l-0.8,0.8c-0.1-0.2-0.3-0.3-0.4-0.4
+				c-0.2-0.1-0.4-0.2-0.6-0.2c-0.2,0-0.3,0-0.5,0.1s-0.3,0.2-0.4,0.3c-0.1,0.1-0.2,0.3-0.3,0.4c-0.1,0.2-0.1,0.4-0.1,0.5
+				c0,0.2,0,0.4,0.1,0.5c0.1,0.2,0.2,0.3,0.3,0.4c0.1,0.1,0.3,0.2,0.4,0.3c0.2,0.1,0.3,0.1,0.5,0.1c0.2,0,0.4-0.1,0.6-0.2
+				c0.2-0.1,0.3-0.2,0.4-0.4L15,25.6z"/>
+			<path class="st1" d="M19.4,26.3h-1.2v-0.2c-0.2,0.1-0.4,0.2-0.6,0.3c-0.2,0.1-0.5,0.1-0.7,0.1c-0.2,0-0.4,0-0.6-0.1
+				c-0.2-0.1-0.3-0.2-0.5-0.3s-0.2-0.3-0.3-0.4s-0.1-0.4-0.1-0.6c0-0.3,0.1-0.5,0.2-0.7c0.1-0.2,0.3-0.4,0.5-0.5
+				c0.2-0.1,0.4-0.2,0.7-0.3c0.3-0.1,0.5-0.1,0.9-0.1h0.7c0-0.3-0.1-0.5-0.3-0.6c-0.2-0.2-0.4-0.2-0.8-0.2c-0.2,0-0.3,0-0.5,0.1
+				c-0.2,0.1-0.3,0.2-0.5,0.3l-0.7-0.7c0.2-0.2,0.5-0.4,0.9-0.5c0.3-0.1,0.7-0.2,1-0.2c0.3,0,0.6,0.1,0.9,0.2
+				c0.3,0.1,0.5,0.2,0.6,0.4c0.2,0.2,0.3,0.4,0.4,0.7c0.1,0.3,0.1,0.6,0.1,1L19.4,26.3L19.4,26.3z M18.2,25.1v-0.9h-0.5
+				c-0.2,0-0.3,0-0.5,0c-0.1,0-0.3,0.1-0.4,0.1c-0.1,0.1-0.2,0.1-0.2,0.2c-0.1,0.1-0.1,0.2-0.1,0.3c0,0.2,0.1,0.3,0.2,0.4
+				c0.1,0.1,0.3,0.2,0.5,0.2c0.2,0,0.3,0,0.5-0.1C17.9,25.3,18,25.2,18.2,25.1z"/>
+			<path class="st1" d="M24.5,26.3h-1.2v-2.8c0-0.2,0-0.3-0.1-0.4c-0.1-0.1-0.1-0.2-0.2-0.3c-0.1-0.1-0.2-0.1-0.3-0.2
+				c-0.1,0-0.2-0.1-0.3-0.1c-0.2,0-0.4,0-0.5,0.1s-0.3,0.2-0.5,0.3v3.4h-1.2v-4.6h1.2l0,0.3c0.1-0.1,0.2-0.1,0.3-0.2
+				c0.1-0.1,0.2-0.1,0.3-0.1c0.1,0,0.2-0.1,0.3-0.1c0.1,0,0.2,0,0.3,0c0.2,0,0.5,0,0.7,0.1c0.2,0.1,0.4,0.2,0.6,0.3
+				c0.2,0.2,0.3,0.4,0.4,0.6c0.1,0.2,0.2,0.5,0.2,0.9L24.5,26.3L24.5,26.3z"/>
+			<path class="st1" d="M29.6,21.7l-1.7,4.6h-1.1L25,21.7h1.3l1,3.1l1-3.1H29.6z"/>
+			<path class="st1" d="M33.9,26.3h-1.2v-0.2c-0.2,0.1-0.4,0.2-0.6,0.3c-0.2,0.1-0.5,0.1-0.7,0.1c-0.2,0-0.4,0-0.6-0.1
+				c-0.2-0.1-0.3-0.2-0.5-0.3c-0.1-0.1-0.2-0.3-0.3-0.4s-0.1-0.4-0.1-0.6c0-0.3,0.1-0.5,0.2-0.7c0.1-0.2,0.3-0.4,0.5-0.5
+				c0.2-0.1,0.4-0.2,0.7-0.3c0.3-0.1,0.5-0.1,0.9-0.1h0.7c0-0.3-0.1-0.5-0.3-0.6c-0.2-0.2-0.4-0.2-0.8-0.2c-0.2,0-0.3,0-0.5,0.1
+				c-0.2,0.1-0.3,0.2-0.5,0.3L30,22.3c0.2-0.2,0.5-0.4,0.9-0.5c0.3-0.1,0.7-0.2,1-0.2c0.3,0,0.6,0.1,0.9,0.2
+				c0.2,0.1,0.5,0.2,0.6,0.4c0.2,0.2,0.3,0.4,0.4,0.7c0.1,0.3,0.1,0.6,0.1,1L33.9,26.3L33.9,26.3z M32.8,25.1v-0.9h-0.5
+				c-0.2,0-0.3,0-0.5,0c-0.1,0-0.3,0.1-0.4,0.1c-0.1,0.1-0.2,0.1-0.2,0.2c-0.1,0.1-0.1,0.2-0.1,0.3c0,0.2,0.1,0.3,0.2,0.4
+				c0.1,0.1,0.3,0.2,0.5,0.2c0.2,0,0.3,0,0.5-0.1C32.4,25.3,32.6,25.2,32.8,25.1z"/>
+			<path class="st1" d="M38.2,25c0,0.2-0.1,0.4-0.2,0.6c-0.1,0.2-0.2,0.3-0.4,0.4c-0.2,0.1-0.4,0.2-0.6,0.3
+				c-0.2,0.1-0.4,0.1-0.6,0.1c-0.4,0-0.7-0.1-1-0.2c-0.3-0.1-0.6-0.3-0.8-0.6l0.7-0.7c0.1,0.2,0.3,0.3,0.5,0.4
+				c0.2,0.1,0.4,0.1,0.6,0.1c0.2,0,0.3,0,0.5-0.1c0.1-0.1,0.2-0.2,0.2-0.3c0-0.1-0.1-0.3-0.3-0.3c-0.2-0.1-0.4-0.2-0.7-0.3
+				c-0.2-0.1-0.4-0.1-0.5-0.2c-0.2-0.1-0.3-0.2-0.5-0.3c-0.1-0.1-0.2-0.3-0.3-0.4c-0.1-0.2-0.1-0.3-0.1-0.5c0-0.2,0.1-0.4,0.2-0.6
+				c0.1-0.2,0.2-0.3,0.4-0.4c0.2-0.1,0.4-0.2,0.6-0.3c0.2-0.1,0.4-0.1,0.7-0.1c0.7,0,1.3,0.3,1.7,0.8L37.5,23
+				c-0.1-0.2-0.3-0.3-0.5-0.4c-0.2-0.1-0.4-0.1-0.6-0.1c-0.1,0-0.1,0-0.2,0c-0.1,0-0.1,0-0.2,0.1c-0.1,0-0.1,0.1-0.2,0.1
+				c0,0.1-0.1,0.1-0.1,0.2c0,0.1,0.1,0.2,0.2,0.3c0.2,0.1,0.4,0.2,0.7,0.3c0.2,0.1,0.4,0.1,0.6,0.2c0.2,0.1,0.3,0.2,0.5,0.3
+				c0.1,0.1,0.2,0.3,0.3,0.4C38.2,24.6,38.2,24.8,38.2,25z"/>
+			<path class="st1" d="M42.6,24.2c0,0.4-0.1,0.8-0.2,1.1c-0.2,0.3-0.3,0.5-0.6,0.7c-0.2,0.2-0.5,0.3-0.7,0.4
+				c-0.2,0.1-0.5,0.1-0.7,0.1c-0.4,0-0.7-0.1-1-0.3c-0.3-0.2-0.6-0.4-0.8-0.7l0.8-0.8c0.1,0.2,0.2,0.3,0.4,0.4
+				c0.2,0.1,0.3,0.1,0.5,0.1c0.1,0,0.2,0,0.4-0.1c0.1,0,0.2-0.1,0.3-0.2c0.1-0.1,0.2-0.2,0.2-0.3c0.1-0.1,0.1-0.3,0.1-0.4v-4.3h1.3
+				L42.6,24.2L42.6,24.2z"/>
+			<path class="st1" d="M48,24.6c0,0.2-0.1,0.5-0.2,0.7c-0.1,0.2-0.2,0.4-0.4,0.6c-0.2,0.2-0.4,0.3-0.7,0.4
+				c-0.3,0.1-0.5,0.1-0.8,0.1c-0.3,0-0.5,0-0.7,0c-0.2,0-0.4-0.1-0.6-0.2c-0.2-0.1-0.4-0.2-0.6-0.3c-0.2-0.1-0.4-0.2-0.6-0.4
+				l0.9-0.9c0.3,0.2,0.5,0.4,0.8,0.5c0.2,0.1,0.5,0.1,0.8,0.1c0.1,0,0.2,0,0.3-0.1c0.1,0,0.2-0.1,0.3-0.1c0.1-0.1,0.1-0.1,0.2-0.2
+				c0-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.2-0.1-0.3c0-0.1-0.1-0.2-0.2-0.2c-0.1-0.1-0.2-0.2-0.4-0.2c-0.2-0.1-0.4-0.2-0.7-0.3
+				c-0.2-0.1-0.5-0.2-0.7-0.3c-0.2-0.1-0.4-0.2-0.6-0.4c-0.2-0.2-0.3-0.3-0.4-0.5c-0.1-0.2-0.1-0.5-0.1-0.7c0-0.3,0.1-0.5,0.2-0.8
+				c0.1-0.2,0.3-0.4,0.4-0.6c0.2-0.2,0.4-0.3,0.7-0.4c0.3-0.1,0.5-0.1,0.8-0.1c0.5,0,0.9,0.1,1.2,0.2c0.3,0.1,0.6,0.3,0.9,0.6
+				L47,21.4c-0.2-0.2-0.3-0.3-0.5-0.4c-0.2-0.1-0.4-0.1-0.7-0.1c-0.1,0-0.2,0-0.3,0.1c-0.1,0-0.2,0.1-0.3,0.1
+				c-0.1,0.1-0.1,0.1-0.2,0.2c0,0.1-0.1,0.2-0.1,0.3c0,0.1,0,0.2,0.1,0.3s0.1,0.2,0.2,0.2c0.1,0.1,0.2,0.2,0.4,0.2
+				c0.2,0.1,0.4,0.2,0.6,0.3c0.3,0.1,0.6,0.2,0.8,0.4c0.2,0.1,0.4,0.3,0.6,0.4c0.1,0.2,0.3,0.3,0.3,0.5C48,24.1,48,24.4,48,24.6z"/>
+		</g>
+	</g>
+	<g>
+		<path class="st2" d="M10.8,16.1c0,0-0.3,0.1-0.5,0.2c-0.1,0-0.3,0.1-0.3,0.1c-0.1,0-0.2,0.1-0.2,0.1l1.6,3.6
+			c0.2-0.1,0.3-0.1,0.5-0.2L10.8,16.1z"/>
+		<path class="st2" d="M13,17.5c0,0-0.1,0-0.1,0c-0.1,0-0.2,0-0.3,0c-0.2,0-0.4,0.1-0.4,0.1l0.4,2.2c0.2,0,0.4,0,0.6-0.1L13,17.5z"
+			/>
+		<path class="st2" d="M15.4,14.3c0,0-0.1,0-0.2,0c-0.1,0-0.3,0-0.4-0.1c-0.2,0-0.3,0-0.4-0.1c-0.1,0-0.2,0-0.2,0l-0.5,5.6
+			c0.2,0,0.4,0,0.6,0.1L15.4,14.3z"/>
+		<path class="st2" d="M16.9,16.7c0,0-0.2-0.1-0.5-0.2c-0.1-0.1-0.2-0.1-0.3-0.1c-0.1,0-0.2-0.1-0.2-0.1l-1.3,3.6
+			c0.2,0.1,0.3,0.1,0.5,0.2L16.9,16.7z"/>
+		<path class="st3" d="M14.7,28l1.2,3.2c0,0,0.1,0,0.2-0.1c0.1,0,0.2-0.1,0.3-0.1c0.1-0.1,0.2-0.1,0.3-0.1c0.1,0,0.1-0.1,0.1-0.1
+			l-1.6-3C15.1,27.9,14.9,28,14.7,28z"/>
+		<path class="st3" d="M14,32.5c0,0,0.3,0,0.6-0.1c0.1,0,0.3-0.1,0.4-0.1c0.1,0,0.2,0,0.2,0l-1-4.1c-0.2,0-0.4,0.1-0.6,0.1L14,32.5z
+			"/>
+		<path class="st3" d="M12.2,29.9c0,0,0,0,0.1,0c0.1,0,0.2,0,0.3,0c0.2,0,0.4,0,0.4,0l0-1.6c-0.2,0-0.4,0-0.6-0.1L12.2,29.9z"/>
+		<path class="st3" d="M9,33.4c0,0,0.1,0,0.2,0.1c0.1,0,0.3,0.1,0.4,0.2c0.2,0.1,0.3,0.1,0.4,0.2c0.1,0,0.2,0.1,0.2,0.1l1.6-5.7
+			c-0.2-0.1-0.4-0.1-0.5-0.2L9,33.4z"/>
+		<path class="st4" d="M6.1,32.9c0,0,0.3,0.2,0.6,0.5c0.1,0.1,0.3,0.2,0.4,0.3c0.1,0.1,0.2,0.1,0.2,0.1l3.6-6.1
+			c-0.2-0.1-0.3-0.2-0.5-0.3L6.1,32.9z"/>
+		<path class="st4" d="M7.1,28.5c0,0,0.7,0.8,0.7,0.8l2.3-2.3c-0.1-0.1-0.3-0.3-0.4-0.4L7.1,28.5z"/>
+		<path class="st4" d="M4.7,27.4c0,0,0.1,0.3,0.2,0.5c0.1,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.1,0.2,0.1,0.2l4.1-2.4
+			c-0.1-0.2-0.2-0.3-0.2-0.5L4.7,27.4z"/>
+		<path class="st4" d="M2.1,25.4c0,0,0,0.1,0,0.2c0,0.1,0,0.3,0.1,0.5c0.1,0.4,0.2,0.7,0.2,0.7L9,25.1c0-0.2-0.1-0.4-0.1-0.6
+			L2.1,25.4z"/>
+		<path class="st5" d="M0.1,22.3c0,0,0,0.1,0,0.3c0,0.2,0,0.4,0,0.6c0,0.2,0,0.4,0,0.6C0,23.9,0,24,0,24L8.9,24c0-0.2,0-0.4,0-0.6
+			L0.1,22.3z"/>
+		<path class="st5" d="M6.2,21.2c0,0-0.1,0.2-0.2,0.5C6,21.7,6,21.9,6,21.9c0,0.1,0,0.1,0,0.1L9,22.9c0-0.2,0.1-0.4,0.2-0.5
+			L6.2,21.2z"/>
+		<path class="st5" d="M4.8,17.7c0,0-0.1,0.1-0.1,0.2c-0.1,0.1-0.2,0.2-0.3,0.4C4.2,18.6,4,18.9,4,18.9l5.4,3
+			c0.1-0.2,0.2-0.3,0.3-0.5L4.8,17.7z"/>
+		<path class="st5" d="M6.5,14.5c0,0-0.3,0.2-0.6,0.5c-0.3,0.2-0.6,0.5-0.6,0.5l5,5.4c0.1-0.1,0.3-0.3,0.5-0.4L6.5,14.5z"/>
+	</g>
+</g>
+</svg>

src/images/icons/DataVisualization/chartjs.svg

@@ -0,0 +1,18 @@
+<?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:#36A2EB;}
+	.st1{fill:#FFCE56;}
+	.st2{opacity:0.8;fill:#FE6184;enable-background:new    ;}
+	.st3{fill:#E7E9ED;}
+</style>
+<path class="st0" d="M43.6,24.2c-6.7,0.1-5.3,4.4-10,5.5c-4.8,1.1-5.6-11.7-10.4-11.7c-4.8,0-5.9,12.5-11.9,21l-0.2,0.2L24,46.6
+	l19.6-11.3V24.2z"/>
+<path class="st1" d="M43.6,23.8c-2.2-2.9-3.8-6.2-7-6.2c-5.8,0-4.3,9.5-10.7,9.5c-6.4,0-7.1-10.2-14.3-0.6c-2.3,3-4.2,6.4-5.6,9.7
+	L24,46.6l19.6-11.3V23.8z"/>
+<path class="st2" d="M4.4,27.7c2.2-6.1,3.2-11,7.4-11c6.4,0,7.9,18,13.4,16.2c5.5-1.8,4.9-11.6,13.4-11.6c1.6,0,3.3,1,4.9,2.6v11.4
+	L24,46.6L4.4,35.3L4.4,27.7L4.4,27.7z"/>
+<path class="st3" d="M24,48L3.2,36V12L24,0l20.8,12v24L24,48z M5.7,34.6L24,45.2l18.3-10.6V13.4L24,2.8L5.7,13.4V34.6z"/>
+</svg>

src/images/icons/DataVisualization/d3js.svg

@@ -0,0 +1,42 @@
+<?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{clip-path:url(#SVGID_2_);}
+	.st1{fill:url(#SVGID_3_);}
+	.st2{fill:url(#SVGID_4_);}
+	.st3{fill:none;stroke:url(#SVGID_5_);stroke-width:16.5517;stroke-miterlimit:1.6552;}
+</style>
+<g>
+	<defs>
+		<path id="SVGID_1_" d="M0,1.3h3.9c12.6,0,22.7,10.2,22.7,22.7S16.4,46.7,3.9,46.7H0v-10h3.9c7,0,12.7-5.7,12.7-12.7
+			S10.9,11.3,3.9,11.3H0V1.3z M18.1,1.3h16C41.8,1.3,48,7.5,48,15.1c0,3.2-1.1,6.4-3.2,8.9c4.9,5.9,4.1,14.6-1.8,19.5
+			c-2.5,2.1-5.6,3.2-8.9,3.2h-16c3.9-2.5,7.2-5.9,9.4-10h6.6c2.1,0,3.9-1.7,3.9-3.9S36.3,29,34.1,29h-3.9c0.6-3.3,0.6-6.7,0-10h3.9
+			c2.1,0,3.9-1.7,3.9-3.9s-1.7-3.9-3.9-3.9h-6.6C25.3,7.2,22.1,3.7,18.1,1.3z"/>
+	</defs>
+	<clipPath id="SVGID_2_">
+		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+	</clipPath>
+	<g class="st0">
+		
+			<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="337.4835" y1="-678.44" x2="389.4399" y2="-730.3964" gradientTransform="matrix(0.4138 0 0 -0.4138 -165.8965 -217.7353)">
+			<stop  offset="0" style="stop-color:#F9A03C"/>
+			<stop  offset="1" style="stop-color:#F7974E"/>
+		</linearGradient>
+		<path class="st1" d="M-64-49.7v150H86L-64-49.7z"/>
+		
+			<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="530.8096" y1="-441.6156" x2="606.9317" y2="-517.7377" gradientTransform="matrix(0.4138 0 0 -0.4138 -165.8965 -217.7353)">
+			<stop  offset="0" style="stop-color:#B84E51"/>
+			<stop  offset="1" style="stop-color:#F68E48"/>
+		</linearGradient>
+		<path class="st2" d="M-36-49.7h150v150L-36-49.7z"/>
+		
+			<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="402.4705" y1="-527.6592" x2="505.1709" y2="-631.5679" gradientTransform="matrix(0.4138 0 0 -0.4138 -165.8965 -217.7353)">
+			<stop  offset="0" style="stop-color:#F26D58"/>
+			<stop  offset="1" style="stop-color:#F9A03C"/>
+		</linearGradient>
+		<path class="st3" d="M-50-49.7l150,150"/>
+	</g>
+</g>
+</svg>

src/images/icons/DataVisualization/grafana.svg

@@ -0,0 +1,59 @@
+<?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{clip-path:url(#SVGID_2_);fill:url(#SVGID_3_);}
+</style>
+<g>
+	<defs>
+		<path id="SVGID_1_" d="M21.6,5.5c0,0,0,0.1,0,0.2c-0.2,0.1-0.4,0.1-0.6,0.2c-0.3,0.1-0.5,0.2-0.8,0.3c-0.3,0.1-0.5,0.2-0.8,0.3
+			c-0.5,0.2-1.1,0.5-1.6,0.8c-0.5,0.3-1,0.6-1.5,0.9c-0.1,0-0.1-0.1-0.1-0.1c-5-1.9-9.4,0.4-9.4,0.4c-0.4,5.3,2,8.7,2.5,9.3
+			c-0.1,0.3-0.2,0.7-0.3,1C8.4,20,8.1,21.2,8,22.5c0,0.2,0,0.4-0.1,0.6c-4.6,2.3-6,7-6,7c3.9,4.4,8.3,4.7,8.3,4.7c0,0,0,0,0,0
+			c0.6,1,1.2,2,2,2.9c0.3,0.4,0.6,0.7,1,1.1c-1.4,4,0.2,7.4,0.2,7.4c4.3,0.2,7.1-1.9,7.7-2.3c0.4,0.1,0.9,0.3,1.3,0.4
+			c1.3,0.3,2.7,0.5,4,0.6c0.3,0,0.7,0,1,0h0.2l0.1,0l0.2,0l0.2,0l0,0c2,2.9,5.6,3.3,5.6,3.3c2.5-2.7,2.7-5.3,2.7-5.9c0-0.6,0,0,0,0
+			c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1c0.5-0.4,1-0.8,1.5-1.2c1-0.9,1.9-2,2.6-3.1c0.1-0.1,0.1-0.2,0.2-0.3c2.9,0.2,4.9-1.8,4.9-1.8
+			c-0.5-3-2.2-4.4-2.5-4.7s0,0,0,0c0,0,0,0,0,0c0,0,0,0-0.1,0c0-0.2,0-0.4,0-0.5c0-0.3,0-0.6,0-1l0-0.2l0-0.1v-0.1
+			c0-0.1,0-0.1,0-0.1l0-0.2l0-0.3c0-0.1,0-0.2,0-0.3c0-0.1,0-0.2,0-0.2l0-0.2l0-0.2c0-0.3-0.1-0.7-0.2-1c-0.3-1.3-0.8-2.5-1.5-3.6
+			c-0.7-1.1-1.5-2.1-2.4-2.9c-0.9-0.8-2-1.5-3.1-2c-1.1-0.5-2.2-0.8-3.4-1c-0.6-0.1-1.1-0.1-1.7-0.1l-0.2,0l-0.1,0c0,0-0.1,0-0.1,0
+			l-0.1,0l-0.2,0c-0.1,0-0.2,0-0.2,0c-0.3,0-0.6,0.1-0.9,0.1c-1.1,0.2-2.2,0.6-3.1,1.2c-0.9,0.6-1.8,1.3-2.4,2.1
+			c-0.7,0.8-1.2,1.7-1.5,2.6c-0.4,0.9-0.6,1.9-0.6,2.8c0,0.2,0,0.5,0,0.7c0,0.1,0,0.1,0,0.2l0,0.2c0,0.1,0,0.2,0,0.3
+			c0,0.5,0.1,0.9,0.3,1.3c0.2,0.9,0.6,1.6,1.1,2.3c0.5,0.7,1.1,1.2,1.7,1.6c0.6,0.4,1.3,0.7,2,0.9c0.7,0.2,1.3,0.3,1.9,0.3
+			c0.1,0,0.2,0,0.2,0c0,0,0.1,0,0.1,0l0.1,0c0.1,0,0.1,0,0.2,0c0,0,0,0,0.1,0l0.1,0c0,0,0.1,0,0.1,0c0.1,0,0.2,0,0.2,0
+			c0.1,0,0.1,0,0.2,0c0.1,0,0.3-0.1,0.4-0.1c0.3-0.1,0.5-0.2,0.8-0.3c0.2-0.1,0.5-0.3,0.7-0.4c0.1,0,0.1-0.1,0.2-0.1
+			c0.2-0.2,0.3-0.5,0.1-0.7c-0.2-0.2-0.4-0.2-0.6-0.1c-0.1,0-0.1,0.1-0.2,0.1c-0.2,0.1-0.4,0.2-0.6,0.2c-0.2,0.1-0.4,0.1-0.6,0.2
+			c-0.1,0-0.2,0-0.3,0c-0.1,0-0.1,0-0.2,0c-0.1,0-0.1,0-0.2,0c-0.1,0-0.1,0-0.2,0c-0.1,0-0.1,0-0.2,0c0,0,0,0,0,0l0,0l0,0
+			c0,0-0.1,0-0.1,0c-0.1,0-0.1,0-0.2,0c-0.5-0.1-1-0.2-1.4-0.4c-0.5-0.2-0.9-0.5-1.3-0.9c-0.4-0.4-0.8-0.8-1-1.3
+			c-0.3-0.5-0.5-1.1-0.6-1.6c0-0.3-0.1-0.6-0.1-0.9c0-0.1,0-0.2,0-0.2c0,0,0,0,0,0l0,0l0-0.1c0,0,0-0.1,0-0.1c0-0.2,0-0.3,0.1-0.5
+			c0.2-1.3,0.9-2.5,1.8-3.5c0.2-0.2,0.5-0.5,0.8-0.6c0.3-0.2,0.6-0.4,0.9-0.5s0.6-0.3,1-0.4c0.3-0.1,0.7-0.1,1-0.2
+			c0.2,0,0.3,0,0.5,0c0,0,0.1,0,0.1,0l0.1,0l0.1,0c0,0,0,0,0,0l0,0l0.1,0c0.4,0,0.8,0.1,1.1,0.2c0.7,0.2,1.5,0.4,2.1,0.8
+			c1.3,0.7,2.5,1.9,3.2,3.3c0.4,0.7,0.6,1.5,0.7,2.2c0,0.2,0.1,0.4,0.1,0.6l0,0.1l0,0.1c0,0.1,0,0.1,0,0.1c0,0,0,0.1,0,0.1v0.1
+			l0,0.1c0,0.1,0,0.3,0,0.3c0,0.2,0,0.4-0.1,0.6c0,0.2-0.1,0.4-0.1,0.6c0,0.2-0.1,0.4-0.1,0.6c-0.1,0.4-0.2,0.8-0.4,1.2
+			c-0.3,0.8-0.7,1.6-1.2,2.3c-1,1.4-2.4,2.5-4,3.3c-0.8,0.4-1.6,0.6-2.5,0.8c-0.4,0.1-0.9,0.1-1.3,0.1l-0.1,0H28l-0.1,0h-0.2h-0.1
+			c0.1,0,0,0,0,0l0,0c-0.2,0-0.5,0-0.7,0c-0.9-0.1-1.8-0.2-2.7-0.5c-0.9-0.3-1.8-0.6-2.6-1c-1.6-0.9-3.1-2.1-4.2-3.5
+			c-0.6-0.7-1.1-1.5-1.5-2.3c-0.4-0.8-0.7-1.7-1-2.5c-0.2-0.9-0.4-1.8-0.4-2.7l0-0.2l0,0v0l0-0.1l0-0.1l0,0v-0.1v-0.1l0-0.2v0
+			c0,0,0,0,0,0V25c0-0.1,0-0.2,0-0.3c0-0.4,0.1-0.9,0.1-1.4c0.1-0.5,0.1-0.9,0.2-1.4c0.1-0.5,0.2-0.9,0.3-1.3
+			c0.3-0.9,0.6-1.7,0.9-2.6c0.7-1.6,1.7-3.1,2.9-4.2c0.3-0.3,0.6-0.6,0.9-0.8c0.3-0.3,0.6-0.5,1-0.7c0.3-0.2,0.7-0.4,1-0.6
+			c0.2-0.1,0.4-0.2,0.5-0.3c0.1,0,0.2-0.1,0.3-0.1s0.2-0.1,0.3-0.1c0.4-0.2,0.8-0.3,1.1-0.4c0.1,0,0.2-0.1,0.3-0.1
+			c0.1,0,0.2-0.1,0.3-0.1c0.2-0.1,0.4-0.1,0.6-0.2c0.1,0,0.2,0,0.3-0.1c0.1,0,0.2,0,0.3-0.1c0.1,0,0.2,0,0.3-0.1l0.2,0l0.2,0
+			c0.1,0,0.2,0,0.3,0c0.1,0,0.2,0,0.3,0c0.1,0,0.2,0,0.3,0c0.1,0,0.1,0,0.2,0l0.1,0l0.1,0l0.1,0c0.1,0,0.2,0,0.3,0l0.2,0
+			c0,0,0.1,0,0,0l0,0l0.1,0c0.1,0,0.2,0,0.3,0c0.4,0,0.8,0,1.2,0c0.8,0,1.5,0.1,2.3,0.3c1.5,0.3,2.8,0.7,4.1,1.4
+			c1.3,0.6,2.4,1.4,3.3,2.2c0.1,0.1,0.1,0.1,0.2,0.2c0.1,0.1,0.1,0.1,0.2,0.2c0.1,0.1,0.2,0.2,0.3,0.3c0.1,0.1,0.2,0.2,0.3,0.3
+			c0.1,0.1,0.2,0.2,0.3,0.3c0.4,0.4,0.8,0.9,1.1,1.3c0.7,0.9,1.2,1.8,1.7,2.6c0,0.1,0.1,0.1,0.1,0.2s0.1,0.1,0.1,0.2
+			c0.1,0.1,0.1,0.2,0.1,0.3c0,0.1,0.1,0.2,0.1,0.3c0,0.1,0.1,0.2,0.1,0.3c0.2,0.4,0.3,0.8,0.4,1.1c0.2,0.6,0.3,1.1,0.5,1.5
+			c0,0.2,0.2,0.3,0.4,0.3c0.2,0,0.3-0.2,0.3-0.4c0-0.5,0-1.1-0.1-1.7c-0.1-0.8-0.2-1.7-0.5-2.8c-0.3-1-0.7-2.1-1.2-3.3
+			c-0.6-1.2-1.3-2.4-2.3-3.5c-0.4-0.5-0.8-0.9-1.3-1.4c0.7-2.7-0.8-5-0.8-5C37.3,5,35.7,6,35.1,6.4c-0.1,0-0.2-0.1-0.3-0.1
+			c-0.4-0.2-0.9-0.3-1.4-0.5S32.5,5.5,32,5.4c-0.5-0.1-1-0.2-1.5-0.3c-0.1,0-0.2,0-0.3,0C29.1,1.5,25.9,0,25.9,0
+			C22.3,2.3,21.6,5.5,21.6,5.5"/>
+	</defs>
+	<clipPath id="SVGID_2_">
+		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+	</clipPath>
+	
+		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-1157.1758" y1="-7712.5269" x2="-1150.0594" y2="-7712.5269" gradientTransform="matrix(0 -6.1635 6.1635 0 47560.4922 -7073.5063)">
+		<stop  offset="0" style="stop-color:#FFF200"/>
+		<stop  offset="1" style="stop-color:#F15A29"/>
+	</linearGradient>
+	<path class="st0" d="M1.9,0h44.2v48H1.9L1.9,0z"/>
+</g>
+</svg>

src/images/icons/DataVisualization/kibana.svg

@@ -0,0 +1,15 @@
+<?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:#E9478B;}
+	.st1{fill:#3EBEB0;}
+	.st2{fill:#37A595;}
+	.st3{fill:#353535;}
+</style>
+<path class="st0" d="M6.2,18c6.4,0,12.4,1.7,17.6,4.5L42.5,0h-37v44.5V18C5.5,18,6.2,18,6.2,18z"/>
+<path class="st1" d="M23.8,22.4L5.5,44.5V48h36.9C40.3,37,33.3,27.7,23.8,22.4z"/>
+<path class="st2" d="M23.8,22.4L5.5,44.5V48H12l17.8-21.5c0,0-1.2-1-2.9-2.2C25.7,23.5,23.8,22.4,23.8,22.4z"/>
+<path class="st3" d="M6.2,18H5.5v26.5l18.3-22.1C18.6,19.6,12.6,18,6.2,18z"/>
+</svg>

src/images/icons/Database/cockroachdb.svg

@@ -0,0 +1,22 @@
+<?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:#151F34;}
+	.st1{fill:#348540;}
+	.st2{fill:#7DBC42;}
+</style>
+<g>
+	<path class="st0" d="M29.3,13.8c-1.7,0.4-3.5,0.6-5.3,0.6c-1.8,0-3.5-0.2-5.3-0.6c1.4-2.2,3.2-4.2,5.3-5.9
+		C26.1,9.5,27.9,11.5,29.3,13.8z M45.1,0.9C43,0.3,40.8,0,38.5,0C33.4,0,28.3,1.5,24,4.4C19.7,1.5,14.7,0,9.5,0C7.2,0,5,0.3,2.8,0.9
+		C1.9,1.1,1,1.4,0.1,1.7c0,0,0,0.1,0,0.1c0.4,0.8,0.8,1.6,1.2,2.4c0,0,0.1,0,0.1,0c0.9-0.3,1.8-0.6,2.7-0.8C10.2,2,16.4,3,21.6,6.2
+		c-2.3,1.9-4.2,4.2-5.7,6.7c-0.3,0.5-0.6,1-0.8,1.5s-0.3,0.7-0.5,1c-0.2,0.4-0.5,1.1-0.7,1.6c-3.6,9.8-1.1,20.8,6.4,28.1
+		c0.4,0.4,0.8,0.7,1.2,1.1c0.4,0.4,0.7,0.6,1,0.8s0.9,0.7,1.3,1c0,0,0.1,0,0.1,0c0.4-0.3,0.9-0.6,1.3-1c0.4-0.3,0.7-0.5,1-0.8
+		c0.3-0.3,0.8-0.7,1.2-1.1c5.2-4.9,8.1-11.8,8.1-18.9c0-3.1-0.5-6.2-1.6-9.1c-0.2-0.6-0.4-1.1-0.7-1.6c-0.2-0.5-0.3-0.7-0.5-1
+		s-0.5-1-0.8-1.5c-1.5-2.5-3.4-4.8-5.7-6.7C31.6,3,37.9,2,43.8,3.4c0.9,0.2,1.8,0.5,2.7,0.8c0,0,0.1,0,0.1,0
+		c0.4-0.8,0.8-1.5,1.2-2.3c0,0,0-0.1,0-0.1C47,1.4,46.1,1.1,45.1,0.9z"/>
+	<path class="st1" d="M32.9,26.2c0,6-2.3,11.7-6.4,16c-0.7-2.3-1.1-4.6-1.1-7c0-6,2.3-11.7,6.4-16C32.5,21.5,32.9,23.8,32.9,26.2"/>
+	<path class="st2" d="M22.6,35.2c0,2.4-0.4,4.7-1.1,7c-5.8-6.2-7.9-15-5.3-23.1C20.4,23.5,22.7,29.3,22.6,35.2"/>
+</g>
+</svg>

src/images/icons/Database/couchdb.svg

@@ -0,0 +1,13 @@
+<?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:#E42528;}
+</style>
+<path class="st0" d="M39,29.3c0,2-1.1,3-3,3.1H12c-2,0-3-1-3-3.1c0-2,1.1-3,3-3.1H36C38,26.3,39,27.3,39,29.3z M36,33.9H12
+	c-2,0-3,1-3,3.1c0,2,1.1,3,3,3.1H36c2,0,3-1,3-3.1C39,34.8,38,33.9,36,33.9z M43.5,17L43.5,17c-2,0-3,1-3,3v16.8c0,2,1.1,3,3,3.1
+	l0,0c3-0.1,4.5-3.1,4.5-9.2v-7.6C48,19.1,46.4,17.1,43.5,17z M4.5,17L4.5,17c-3,0.1-4.5,2.1-4.5,6.2v7.6c0,6.1,1.6,9.1,4.5,9.2l0,0
+	c2,0,3-1,3-3.1V20.1C7.5,18.1,6.5,17.1,4.5,17z M43.5,15.5c0-5.1-2.6-7.5-7.4-7.6H12C7.1,8,4.5,10.6,4.5,15.5l0,0
+	c3,0,4.5,1.6,4.5,4.6s1.6,4.6,4.5,4.6h21c2.9,0,4.5-1.6,4.5-4.6C39,17,40.6,15.6,43.5,15.5z"/>
+</svg>

src/images/icons/Database/elasticsearch.svg

@@ -0,0 +1,33 @@
+<?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:#00A9E5;}
+	.st1{fill:#353535;}
+	.st2{fill:#00BFB3;}
+	.st3{fill:#019B8F;}
+	.st4{fill:#F9B110;}
+	.st5{fill:#FED10A;}
+</style>
+<g id="Elasticsearch_1_">
+	<g>
+		<path class="st0" d="M35,16.8H22.5c0.1,0.3,0.2,0.6,0.2,0.8c0.4,1.4,0.7,2.9,0.8,4.5c0.1,0.6,0.1,1.3,0.1,1.9c0,0.6,0,1.3-0.1,1.9
+			c-0.1,1.6-0.4,3.1-0.8,4.5c-0.1,0.3-0.2,0.6-0.2,0.8H35c4,0,7.1-3.2,7.1-7.2S39,16.8,35,16.8z"/>
+		<path class="st1" d="M23.5,25.9c0.1-0.6,0.1-1.3,0.1-1.9c0-0.6,0-1.3-0.1-1.9c-0.1-1.6-0.4-3.1-0.8-4.5c-0.1-0.3-0.2-0.6-0.2-0.8
+			H3.1C2.4,19.1,2,21.5,2,24c0,2.5,0.4,4.9,1.1,7.2h19.4c0.1-0.3,0.2-0.6,0.2-0.8C23.2,28.9,23.4,27.4,23.5,25.9z"/>
+	</g>
+	<g>
+		<path class="st2" d="M37.2,33.6H21.6c-0.5,1.1-1,2.1-1.6,3.1c-0.9,1.5-2,2.8-3.2,4.1c-0.4,0.4-0.8,0.8-1.3,1.2
+			c-0.8,0.8-1.8,1.4-2.8,2.1c3.8,2.5,8.3,4,13.2,4c8.3,0,15.7-4.3,20-10.7C43.7,35,40.6,33.6,37.2,33.6z"/>
+		<path class="st3" d="M20,36.7c0.6-1,1.1-2,1.6-3.1H4c1.9,4.3,4.9,7.9,8.8,10.4c1-0.7,1.9-1.3,2.8-2.1c0.4-0.4,0.8-0.8,1.3-1.2
+			C18,39.5,19.1,38.2,20,36.7z"/>
+	</g>
+	<g>
+		<path class="st4" d="M16.8,7.3c-0.4-0.4-0.8-0.8-1.3-1.2c-0.8-0.8-1.8-1.4-2.8-2.1C8.9,6.5,5.9,10.1,4,14.4h17.6
+			c-0.5-1.1-1-2.1-1.6-3.1C19.1,9.8,18,8.5,16.8,7.3z"/>
+		<path class="st5" d="M26,0c-4.9,0-9.4,1.4-13.2,4c1,0.7,1.9,1.3,2.8,2.1c0.4,0.4,0.8,0.8,1.3,1.2c1.2,1.3,2.3,2.6,3.2,4.1
+			c0.6,1,1.1,2,1.6,3.1h15.6c3.4,0,6.5-1.4,8.8-3.7C41.6,4.3,34.3,0,26,0z"/>
+	</g>
+</g>
+</svg>

src/images/icons/Database/hive.svg

@@ -0,0 +1,95 @@
+<?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-rule:evenodd;clip-rule:evenodd;fill:#FDEE21;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#C8C037;}
+	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FCF6A0;}
+	.st3{fill-rule:evenodd;clip-rule:evenodd;}
+	.st4{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+	.st5{fill-rule:evenodd;clip-rule:evenodd;stroke:#000000;stroke-width:8.298515e-03;stroke-miterlimit:10;}
+</style>
+<g transform="matrix(.072794 0 0 .072794 -.000407 .634153)">
+	<path class="st0" d="M377.3,87.6C371.6,71.8,172.6-5.6,170.1,2.9c-36.5,9.5-51.4,51.6-76.5,78.3L37.8,78
+		c-24.6,31.6-37.5,63.9-28.7,97.5c31.5,42.7,68.1,79,90.9,132.6c1.8,25.3,109.4,2.6,132.4-2.4c-31.5,22.5-58.9,57.5-47.1,158.1
+		c10.8,47.3,18.1,100,113.6,153.5c12.6,7,38.6,15.2,54.6,21.1c15.4,7.1,33.3,9.9,84.1-5.6c29.3-12.6,61-20.3,89.7-32.9l-34.5,1.6
+		c-47.5,1-84.2,4.6-95.5-8.7l-43.7-75.5l25.5-49.5c35.3,3.6,47,32.2,78.1,43.1l36.7-27.2c106.5,62.9,148.9-39.8,161-119.8
+		c-1.3-32.5-70.5,10.2-66.3-5c1.6-35-26.9-80.8-45.3-116.4l21.3-82.5c9.7-8.6-44.8-100.4-89.3-111.8
+		C436.2,38.2,377.3,87.6,377.3,87.6L377.3,87.6z"/>
+	<g>
+		<path class="st1" d="M552.3,263c0.4,8.9,0.3,19.6,1.2,26.4c-0.1,5.1-4,5.3-7.2,6.4l20.7,7.6c4.1,6.9,7.4,13.8,10.8,20.8
+			c3.9,17,1,17.5-1.6,18.8c-7.5,0.1-15,0.1-22-1.4c3.1,1.7,3.8,2.9,4.2,5c0.6,3.9-1.9,9.2-6.1,14.4c6.1,3.4,17.3,6.7,25.6,9.9
+			l9.5-21.1C583.1,318.7,570.1,290.2,552.3,263L552.3,263z M591,366.8c11.5,4.8,27.4,3.4,49.4-8c3.3-2.3,6.3-0.9,0.5,2.9
+			C611.9,387.6,598.1,374.7,591,366.8L591,366.8z"/>
+		<path class="st1" d="M642.6,355.4c3.4,6.5,1.3,11.9,0.2,17.4c-3.6,28.1-12.3,50.3-29.5,73.5c-55.9,89.8-112.3,33.6-157.2-3
+			L437.4,490c-1,4.1-5.1,7.3,24,20.1l29.6-20.9C603.8,575,683.8,368.9,642.6,355.4L642.6,355.4z M469.7,435.7
+			c-7.6,0.5-30.3,8.2-31.3,12.7l10.4-15.5L469.7,435.7z M454.9,340.5c1.4,0,8.1,1.8,7.4,1.4c-1-0.6-0.1,9.4,2,14.6l-8.2,17.8
+			c15.6-18,40.4-16.8,63.4-19.2l-11-6.8c1.9-6.3-0.3-11.4-1.4-16.8L454.9,340.5z M493.3,286.9c-16.8,5.1-32.9,13.6-43.7,31.5
+			c8.2-29.5,9.9-28.4,12.6-29.9C473.7,283.4,483.2,286.6,493.3,286.9z"/>
+	</g>
+	<path class="st2" d="M403.6,633.3c-20.3,22.4-65.6-1.7-103.2-14c-95.6-60.8-114.3-118-115.6-174.2c-4.9-80.4,19.8-127.1,51-138.2
+		c-20.7,39.9-30.3,111.4-20.7,164.6c7.7,29.6,7.9,79.5,57.4,106.2c24.2,13.7,17.7,24.3,34.1,37.1
+		C324.6,628.8,374.7,642.1,403.6,633.3L403.6,633.3z M434,261.6c-34.4-48.8-82.7-67-137.2-69c10.9-3.6,21.9-5.4,32.8-10.7
+		c2.7-2.8,1.8-7.8,0.8-12.8c-52.5-13.7-85.6-30.6-127.5-46.3L316,149.9C392.4,152.8,385.8,171.7,434,261.6L434,261.6z M470.8,238.1
+		c-25.4-36.3-50-80.3-83.5-108.3c-80.7-36.4-160.6-63.5-254.2-88.1L163,3.3C262.3,26,355.6,63.9,439.1,126.5
+		C453.3,162.2,462.7,198,470.8,238.1L470.8,238.1z M522,174c0,0-14.2-32-21.2-44.2c-16.1-17.8-24.2-51-57.2-66.7
+		c10.4,2.8,17.6-0.5,38.8,18.7l33.5,63.6L522,174z M539.7,229.4c3.3-27.7,9.5-72.1,2.4-89.6l-60-80c-3.3-3.1-5.7-7.3-8.3-10.6
+		c28.2,7.3,57.6,26.9,97.4,104.4L539.7,229.4z"/>
+	<path class="st3" d="M421.1,232.6c-11.2-8.9-21.2-40.1-38.3-46.6c-15.8-1.3-21.5-6.3-42.3-2.1c7.5-3.8,14.6-8.6,22.6-11.2
+		c5.4-1.3,10.5,0.1,15.7,0.8c1.3-0.6,2.1-1.4,1.8-2.5c-20.9-12.9-63.7-13.1-92.5-20.4c33.5,1.1,70.6-0.7,95.8,7.4
+		C404.2,176.1,410.7,209.9,421.1,232.6L421.1,232.6z M482.5,81.8c4.7,0.4,29.7,40,30.9,46.6c2.1,14.4,7.2,30.5,8.6,45.6
+		c-4.1-14.5-8.6-28.9-14.2-43.4c-1.7-4-5.8-13-17.3-25.7C485.1,96,483.9,89,482.5,81.8L482.5,81.8z M567.4,297.5h-10.7l11.8,3.1
+		L567.4,297.5z M494.3,286.8c-10.8-1.3-21.8-1.5-32.6,0.9c-4.4,5.9-4.7,11.9-6.6,17.4C468.2,290.7,473.4,289.8,494.3,286.8
+		L494.3,286.8z M641.2,361.2c-6,4.8-6.6,9.3-24.3,14.7c-12.9,3.1-20.2-2.1-26.3-9.1c9.2,2.6,10.7,9.6,35.4,1.8L641.2,361.2z
+		 M587.5,364.2c-4.3,11.9-9,23.9-13.7,35c-11.2,13.1-6.4,5.6-23.1,26c5.3-8.2,12.3-16.2,15.9-24.8c2.6-5.7,5.7-11.7,7.1-16.7
+		c-4.4-2.2-13.5-2.4-14.7-1.6c-14.9,8.8-17.5,18-26.3,27.1c6.3-10.1,11.8-21.2,19.1-30.4c0.8-1.2,6.3-1.4,9.6-2.1
+		c-5.2-0.9-14.8-2.8-15.6-2.7c-9.7,2.3-15.1,10.8-22.3,16.4c5.2-7.6,10.1-15.5,16.7-22c0.7-0.8,18.7,0.8,28,4.5l0.2,3.7l5.3,2.1
+		l4-10L587.5,364.2z M469.9,435.7c-2.4-0.8-23.5-3.5-23.5-2.9c-8.1,5.8-9.3,11.3-9.2,16.1C450.7,435.7,450.2,435.6,469.9,435.7
+		L469.9,435.7z M453.8,340.3c0,0,15.2-2.2,14.9-0.8c-1.1,5.3,1.9,18.2,2.2,16.4l-8.6,7c17.9-9,36.8-7.2,56-8.6
+		c0,0-16.1-4.5-15.1-4.6c3.6-0.5-1-16.8-2.2-17.2c3.1-1,6.1-1.8,9.2-2.6C487.2,323.8,473.8,327.4,453.8,340.3L453.8,340.3z"/>
+	<path class="st3" d="M585.8,351.7l-3.4,1.7c-0.5-9.9-11.1-9.2-20.1-9.3l-7.4-1.8c2.3,2.1,9.2,1.9,6.4,6.4
+		c-2.4,1.3-3.4,6.7-4.8,11.2l-4,0.2l21.3,8.4l4.6,0.7l11-5.9L585.8,351.7z"/>
+	<path class="st4" d="M484.7,345c-1.7-3.4-10.3-2.9-12.2-0.7c-1.5,1.8-0.1,13.2,1.8,11.3c2.8-2.5,6.5-3.5,10.9-3.3
+		C485.8,350.1,485.6,347.9,484.7,345L484.7,345z M567.5,362c0.8-0.6,2.5-6.3,2-8.1c-1.1-4.1-9.2-3.2-9.2-3.2c-2,1.2-3.7,7.5-3,9.6
+		C557.7,362.1,566.2,362.7,567.5,362L567.5,362z"/>
+	<path class="st3" d="M224.3,560.1l5.1,0.5c30.1,14.8,79.5,36.6,151.2,24.9l11.2,17.7c-31.6,15.3-65.5,11.8-97.3,12.9L224.3,560.1z
+		 M181.2,443.4l15.1,63.2c40.3,25.2,109.2,54.1,166.6,51.7l-12.7-29.1C230.3,503.8,220.2,471.6,181.2,443.4L181.2,443.4z
+		 M218.6,313.9c7.4,49,17.2,86.1,59.8,117.2c26.1,18.8,52,37.5,83.5,52.9c0,0-2.8,14.4-5.1,14.1c-93.8-10.4-162.5-88.2-170.8-123.7
+		C194.1,347.2,205.7,330.2,218.6,313.9L218.6,313.9z M263.7,286.2c12.5,54.3,42.3,109.3,71.9,159.1c10.9,13.8,13.7,19.9,30.4,28.2
+		c22.6,7.2,38.6,5.3,55,4.3c-4.5-8.3-8.5-17-13.7-24.9c-36.8-29.1-19.8-55.5-10-72.3c-20.4-5.2-47.5-16.1-51.3-30.6
+		c-6-46.7-3-61.5,3.1-85.5C321.5,270.4,293.5,276.2,263.7,286.2L263.7,286.2z"/>
+	<path class="st5" d="M162.2-2.2c-9.1,5.9-17.9,14.4-27.3,24.1c-15.6,16.2-26,32-41.9,43.7c-3.2,2.7-12.1,7.2-23.3,7.8
+		c-5.3,0.3-8.7,1.1-18.5-0.1c-8.6-4.6-16.7-1.6-24.7,7.9c-8.7,12.5-19.8,36.3-24.3,51.3c-9.5,38.2,14.7,69.7,37.8,93.9
+		c20.6,20.1,32.4,32.7,40.9,51.1c6.4,12,11.1,28.4,16.3,39.9c1.8,3.6,1.5,3.6,6.5,4.7c10.8,2.3,25.7,2.3,38.9,3.5
+		c5.7,0.1,13.6-0.1,21.1-0.9c10.3-1.9,22.4-3.9,32.5-7.4c9.9-2.4,18.7-5.8,26.7-8.9c-1,3.5-8.6,6.8-11.5,11.3
+		c-27,38.6-34.4,73-29.7,127.2c2.7,24,8.2,44,16.5,66.8c3.8,10.4,11.9,27,19.7,37.9c23.1,32.6,74.8,74.5,146.7,90.7
+		c12.5,1.7,26.8,0.8,40.2-2.8c35.5-10.8,107.8-36.2,107.8-36.2s-64.2,5.3-93.6,2.4c-6.8-1.1-14.3-1.4-19.1-6.1
+		c-0.8-1-3.7-6.8-1.8-6.9c2.5-0.1,9.9-3.1,21.2-4.1c-24.1-2.6-23.8-2.6-25.5-7c-2.7-6.8-6.9-16.1-11.2-24.3c10.6,0.9,34,2.2,42-6
+		c0,0-13.9,1.6-26.1,0.2c-4.1-0.5-11.2-3-13.3-3.8c-5.5-2.1-10-2.8-11.1-4.2c-1.9-4.9-3.2-6.5-5.5-13c-3.1-8.6-3.4-18.3-4-27.1
+		c8,9.9,18.2,18.2,31.8,22.5c0.2-0.4,17.6,7.6,30.2,3.5l2.6-0.8c0,0.2-8.4,0.7-11.4-0.8c-25.7-10.9-29.5-20.5-33.7-25.2l-11.1-16.6
+		c3.4-6.7,5.3-7,9.8-7c13.5,1.5,19.4,2.7,27.6,0.7c5.6,11.4,7.1,22.9,19.7,31.2c42.1,12.5,51.3-3.7,61.5-18
+		c30.3,22.2,79.7,29.1,113.9,0.4c43.6-50.4,57.4-129.9,53.5-134.4c-5.4-9.2-12.6-18.8-18.7-17.4c-21.8,6-29.9,17-51.6,14.5
+		c2.6-0.1,6.9-0.2,6.9-0.5c1.7-18.3-0.1-27.2-0.9-28.7c-6.6-14.5-15.2-29.7-21.2-41.2c-1.6-2.4-6.1-20.4-13.7-27.5
+		c-3.3-2.8-11.3-10.2-11.3-10.2l-0.7,7.8c0,0,3.1,0.5,4.3,5.3c4.5,18.4,27.5,61.9,29.2,64c8.2,13.2,0.8,29.6,7,38.7
+		c0.6,1.2,12.6-0.1,22,0.5c15.4-3.3,14.7-10.1,28-11.1c8.9-0.7,9.8,16.1,9.7,17.4c-1.7,18.5-7.3,40.1-15.9,59.7
+		c-17.9,34.6-38,65.6-66.5,69.9c-34.7,6.1-52.8-9.1-71.6-18.8l-7.2,6.1c-24.5,24.4-53.6,22.2-65.4-9.6
+		c-5.9-12.4-13.6-19.9-20.2-30.5l-35,25.2c-2.9,6-6.5,15.4-10.9,25.9c-3,7.3-5.6,19.9-5.4,30.3c-4.5,7.6,15.5,38.7,28.2,57.5
+		l11,15.9c2.5,6.5,8,12.3,8.3,13c23.5,30.7-29.6,23.6-40.6,21.8c-21.7-3.5-42.8-12.5-62.8-24.6l-3.5-2.1c-23.7-14.9-45.4-34-64-52.8
+		c-11-12.5-21.6-38.1-29.3-56.3c-11.6-43.7-28.3-119.4,16.9-176.7c2.9-3.3,6-8.7,8.6-9.8c13.4-9.1,28-15.3,43.7-18.7l-1.6-10.2
+		c-7.8,1.8-34.2,11.4-41.7,15.5c-17,4.9-31,10.1-52.7,15.5c-7,0.9-13.9,0.9-20.7,0c-15.6-2.1-42.1-0.2-43.8-1.8
+		c-10.5-14.7-13.4-41-23-55.1l-0.1-0.1l-0.1-0.1c-5.6-7.5-12.1-13.7-18.6-20.1c-23-22.9-42.8-45-48.3-68.5c-1.4-6.9-5-14.1-3.1-34.6
+		l0-0.1l0-0.1c5.5-19.1,14.6-34.7,29.9-50.4c15.9,0.3,31.7,0.6,44,3c5.6,0.9,17.3,2.5,29.4,7c30.6,11.4,71.1,30.2,71.1,30.2
+		c-30.4-16.7-64.3-38.3-85.8-42.7c-3.2-0.5-5.2-1.9-6.1-4.4c32.3-18.9,38.2-41.3,59.4-61.3c9.7-4.2,13.5-6.4,21.7-7.3
+		c76.2,12,124.1,42.4,162.1,62.7c15.4,8.4,29.4,14.7,42.8,22.3c11.7,3.9,47.1,30.6,57.4,44.9c10.5,22.2,18.2,46.2,25.2,69.3
+		c5,23.5,9.4,33.1,9.4,33.1s-4.3-19.7-3.6-23.2c4.4,1.7,14.9,4.9,19.2,4.4c0,0-19.4-10-21.9-18.9c-8.1-28.4-16.3-72.6-18.5-74.9
+		c-6.2-7.8-32.1-27.6-48-36.8c-6-3.5-9.3-5.6-9.5-7.1c5.1-5.1,11.3-11.9,16.9-16.2c5.4-4.1,10.3-8.8,17.8-11.6
+		c33-14.9,51.8,5.7,56.3,1.5c0,0-7.1-8.1-3.9-6.8c3.2,1.7,13.7,3.8,14.9,4.9c12,9.4,43.4,43.8,62.4,80c4.5,8.9,6.4,14.7,4.3,25.4
+		c-2.1,10.7-3.8,16.6-6.1,23.7c-2.1,4.8-13.9,37.5-13.8,41.9c-2.4,18,7.7,40.4,7.7,40.4c0.1-6.1-0.4-9.4,0.2-13.7l0.7-7.8
+		c0,0-0.4-2.1-0.4-2.9c0.5-5.4,1.8-9.9,2.2-13c3.8-23.4,10.4-40.3,17.8-60.9c2.2-5.2,5.1-8.1,5-12c0.1-7-6.2-16.4-10.7-25.6
+		c-4.6-9.3-10.1-19.7-17.2-30.6c-16.4-23.5-30.3-41.9-55.9-53.5c-7.1-3.1-35.3-6.2-45-4.4c-11.8,2.5-21.9,4.9-30,10
+		c-12.7,8.1-22.7,20.7-34.4,28.2c-25.9-13-38.4-22.7-40.8-24c-15.4-8.3-33.9-17.8-53.8-26.9C275.7,23.3,216.4,2,162.2-2.2L162.2-2.2
+		z M493.7,481.3c-16-12.5-29.4-25.4-38.3-38.6c-2.9,15.6-13.4,26.7-21.5,37.6c-1.6,2.6-2.8,6,5.2,17.2c2.1,3,9.9,3.5,15.1,3.2
+		c-5.3-4-13.4-8.3-14.7-12c9.4,6.4,18.1,8.2,25.9,7.2c1.8-0.2,4-2.1,5.7-5c3.5-7.5,6.2-9.3,9-11.3l6.4,8L493.7,481.3z"/>
+</g>
+</svg>

src/images/icons/Database/mariadb.svg

@@ -0,0 +1,30 @@
+<?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{clip-path:url(#SVGID_2_);fill:#444B5E;}
+</style>
+<g>
+	<defs>
+		<rect id="SVGID_1_" y="8.1" width="106.1" height="31.8"/>
+	</defs>
+	<clipPath id="SVGID_2_">
+		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+	</clipPath>
+	<path class="st0" d="M41.7,11.1c-1,0-1.7,0.5-1.9,1.3c0.3,0.2,0.6,0.3,1,0.3c0.8,0,1.6-0.6,1.3-1.6C42,11.1,41.8,11.1,41.7,11.1
+		 M47,8.1L47,8.1c-0.8,0-0.9,0.4-2.5,0.8c-1.6,0.4-3.2,0-4.9,0.7c-5.2,2.2-6.3,9.7-11,12.4c-3.5,2-6.9,2.9-10.1,3.9
+		c-2.1,0.7-4.2,1.4-6.1,3.1c-1.5,1.3-1.9,2.3-3.4,3.9c-1.6,1.6-6.4-1.3-8.8,0.9c-0.2,0.2-0.2,0.5,0,0.7c0,0,0,0,0,0
+		c0.5,0.4,1.5,1.5,2.4,1.8c-0.3,0.6-1.9,2.2-1.6,3c0.4,0.9,4.5,0.3,8.3-2c1.8-1.1,3.2-2.6,5.9-3c3.6-0.5,7.7,0.3,11.8,0.9
+		c-0.6,1.8-1.8,3-2.8,4.5c-0.3,0.3,0.6,0.4,1.7,0.2c1.9-0.5,3.2-0.8,4.7-1.7c1.7-1,2-3.6,4.1-4.2c1,1.6,3.6,2.1,5.6,1.3
+		c0.1,0,0.2-0.1,0.3-0.2c0.2-0.2,0.1-0.5,0-0.6c-0.1-0.1-0.1-0.1-0.2-0.2c-1.1-1.2-1.4-4-0.9-5.4c0.6-1.6,1.1-4.1,1.7-6.1
+		c0.6-2.2,0.8-5,1.6-6.2c1.1-1.7,2.3-2.3,3.4-3.2c1.1-1,2-1.9,2-4.1C48,8.5,47.7,8.1,47,8.1 M47.2,10.4c-0.2,1.5-1.2,2.3-2.3,3.2
+		c-1,0.7-2.1,1.4-2.8,2.5c-0.7,1.1-1.2,5-2.3,8.8c-0.9,3.2-2.3,6.3-4.7,7.8c-0.2,0.1-0.4,0-0.4-0.2c-0.2-0.9-0.1-2.5-0.4-2
+		c-0.3,1-0.7,1.9-1.2,2.8c-1.4,2.7-3.4,4.7-6.7,5.5c-0.2,0-0.3-0.1-0.4-0.2c0-0.1,0-0.2,0-0.2c1.5-2.1,2.9-4.3,3-7.8
+		c0-0.3-0.4-0.4-0.5-0.2c-0.7,0.9-0.9,3-1.9,3.6c-0.8,0.1-1.6,0.1-2.5,0c-3.4-0.2-6.9-1.2-10.1-0.2c-2.2,0.7-4.5,2.7-6.3,3.5
+		c-2.2,0.9-3.2,1.8-5.9,1.8c-0.3-0.4,1.1-2,1.6-2.7c0.2-0.2-0.2-0.5-0.5-0.6c-0.7-0.3-1.5-1.3-2.3-1.6c0.1-0.2,0.5-0.4,0.7-0.5
+		c1.8-1,6.6,1.2,7.8-0.1c0.8-0.8,1.3-1.5,1.9-2.2c0.5-0.8,1.3-1.6,2.1-2.2c0.3-0.3,0.7-0.5,1.1-0.8c1.4-1,2.2-1,4-1.7
+		c2.3-0.9,5.2-1.6,7.6-2.6c1.5-0.6,3.2-1.3,4.5-2.3c0.3-0.2,0.6-0.5,0.9-0.8c3.9-3.8,4.6-10.4,10.6-11c0.7-0.1,1.2-0.1,1.8-0.1
+		c0.6,0,1.2-0.2,1.8-0.5c0.2-0.1,1.3-0.7,1.7-0.4C47.3,9.1,47.2,10.3,47.2,10.4"/>
+</g>
+</svg>

src/images/icons/Database/mongodb.svg

@@ -0,0 +1,60 @@
+<?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-rule:evenodd;clip-rule:evenodd;fill:#439934;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#45A538;}
+	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#46A037;}
+	.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#409433;}
+	.st4{fill-rule:evenodd;clip-rule:evenodd;fill:#4FAA41;}
+	.st5{fill-rule:evenodd;clip-rule:evenodd;fill:#4AA73C;}
+	.st6{fill-rule:evenodd;clip-rule:evenodd;fill:#57AE47;}
+	.st7{fill-rule:evenodd;clip-rule:evenodd;fill:#60B24F;}
+	.st8{fill-rule:evenodd;clip-rule:evenodd;fill:#A9AA88;}
+	.st9{fill-rule:evenodd;clip-rule:evenodd;fill:#B6B598;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;fill:#C2C1A7;}
+	.st11{fill-rule:evenodd;clip-rule:evenodd;fill:#CECDB7;}
+	.st12{fill-rule:evenodd;clip-rule:evenodd;fill:#DBDAC7;}
+	.st13{fill-rule:evenodd;clip-rule:evenodd;fill:#EBE9DC;}
+</style>
+<path class="st0" d="M33.5,15.7c0.6,1.8,1.1,3.7,1.2,5.6c0.2,2.4,0.1,4.8-0.4,7.1c0,0.1,0,0.1-0.1,0.2c-0.2,0-0.3,0-0.5,0
+	c-1.3,0.2-2.6,0.4-3.9,0.6c-1.4,0.2-2.7,0.4-4.1,0.7c-0.5,0.1-1.1,0-1.3,0.6c0,0-0.1,0-0.1,0l0.1-4c0-3.2,0-6.4-0.1-9.5L25,17
+	c1-0.2,2.1-0.3,3.1-0.5c1.2-0.2,2.5-0.4,3.7-0.6C32.4,15.8,32.9,15.7,33.5,15.7z"/>
+<path class="st1" d="M23.1,42.1c-0.7-0.6-1.4-1.1-2-1.7c-3.4-3.2-5.9-7-7.2-11.6c-0.3-1.3-0.6-2.5-0.6-3.9c-0.1-0.9-0.1-1.8-0.1-2.7
+	c0.2-2.4,0.5-4.8,1.2-7.1l0-0.1c0.1,0.1,0.2,0.2,0.2,0.3c0.7,2,1.4,4.1,2.1,6.1c2.1,6.4,4.3,12.8,6.4,19.2c0,0.1,0.2,0.2,0.2,0.3
+	C23.4,41,23.1,42.1,23.1,42.1z"/>
+<path class="st2" d="M33.5,15.7c-0.5,0.1-1.1,0.2-1.6,0.2c-1.2,0.2-2.5,0.4-3.7,0.6c-1,0.2-2.1,0.3-3.1,0.5l-0.6,0.1l0-0.4
+	c0-0.3-0.1-0.7-0.1-1c0-2.2,0-4.3-0.1-6.5c0-1.3,0-2.7-0.1-4c0-0.8,0-1.7-0.1-2.5c0-0.4-0.1-0.9-0.1-1.3c0-0.3,0-0.5,0-0.8
+	c0.3,0.6,0.6,1.3,1,1.9c0.5,1,1.4,1.7,2.1,2.5C30,8,32.1,11.6,33.5,15.7z"/>
+<path class="st3" d="M24.4,30.6C24.4,30.6,24.5,30.6,24.4,30.6c0.3-0.7,0.9-0.6,1.4-0.7c1.4-0.2,2.7-0.4,4.1-0.7
+	c1.3-0.2,2.6-0.4,3.9-0.6c0.2,0,0.3,0,0.5,0c-0.2,0.9-0.4,1.8-0.7,2.6c-0.4,1-0.8,1.9-1.2,2.8c-0.7,1.4-1.5,2.7-2.5,3.8
+	c-0.8,0.9-1.6,1.7-2.4,2.6c-0.5,0.5-1,0.8-1.5,1.2l-0.1-0.1l-0.5-0.4l-0.5-1.1c-0.3-1.3-0.5-2.6-0.5-3.9l0-0.2l0.1-1
+	c0-0.3,0.1-0.7,0.1-1C24.3,32.9,24.4,31.8,24.4,30.6z"/>
+<path class="st4" d="M24.4,30.6c0,1.2-0.1,2.3-0.1,3.5c0,0.3,0,0.7-0.1,1l-0.3,0.1c-0.7-2-1.3-3.9-2-5.9c-1.1-3.2-2.2-6.5-3.2-9.7
+	c-0.9-2.6-1.8-5.2-2.6-7.8c0-0.1-0.2-0.2-0.2-0.3L17.7,8c0.1,0.1,0.2,0.2,0.2,0.3c0.9,2.6,1.8,5.3,2.7,7.9c1.1,3.4,2.3,6.9,3.4,10.3
+	c0,0.1,0.1,0.3,0.2,0.4l0.3-0.3C24.5,28,24.4,29.3,24.4,30.6z"/>
+<path class="st5" d="M15.8,11.5c0.1,0.1,0.2,0.2,0.2,0.3c0.9,2.6,1.8,5.2,2.6,7.8c1.1,3.2,2.1,6.5,3.2,9.7c0.7,2,1.3,3.9,2,5.9
+	l0.3-0.1l-0.1,1l-0.1,0.2c-0.1,1-0.2,2.1-0.3,3.1c-0.1,0.5-0.2,1-0.3,1.6c-0.1-0.1-0.2-0.2-0.2-0.3c-2.2-6.4-4.3-12.8-6.4-19.2
+	c-0.7-2-1.4-4.1-2.1-6.1c0-0.1-0.1-0.2-0.2-0.3C14.9,13.8,15.4,12.7,15.8,11.5z"/>
+<path class="st6" d="M24.5,26.6l-0.3,0.3c-0.1-0.2-0.1-0.3-0.2-0.4c-1.1-3.4-2.3-6.9-3.4-10.3c-0.9-2.6-1.8-5.3-2.7-7.9
+	c0-0.1-0.1-0.2-0.2-0.3l2.4-3.1c0.1,0.1,0.2,0.2,0.2,0.3c0.7,1.9,1.3,3.9,2,5.8c0.6,1.8,1.2,3.6,1.8,5.4c0,0.1,0.2,0.2,0.3,0.3
+	l0,0.4C24.4,20.3,24.5,23.5,24.5,26.6z"/>
+<path class="st7" d="M24.4,16.7c-0.1-0.1-0.2-0.2-0.3-0.3c-0.6-1.8-1.2-3.6-1.8-5.4c-0.7-1.9-1.3-3.9-2-5.8c0-0.1-0.1-0.2-0.2-0.3
+	c0.8-0.8,1.5-1.5,2.3-2.3c0.7-0.6,1.3-1.3,1.3-2.3c0,0,0-0.1,0.1-0.2L24,0.5c0,0.3,0,0.5,0,0.8c0,0.4,0.1,0.9,0.1,1.3
+	c0,0.8,0.1,1.7,0.1,2.5c0,1.3,0.1,2.7,0.1,4c0,2.2,0,4.3,0.1,6.5C24.3,16,24.4,16.3,24.4,16.7z"/>
+<path class="st8" d="M23.4,41c0.1-0.5,0.2-1,0.3-1.6c0.1-1,0.2-2.1,0.3-3.1l0,0l0,0c0,1.3,0.2,2.6,0.5,3.9c-0.1,0.1-0.2,0.2-0.2,0.3
+	c-0.3,0.8-0.6,1.6-0.8,2.4c0,0.1-0.1,0.2-0.2,0.3l-0.3-1C23.1,42.1,23.4,41,23.4,41z"/>
+<path class="st9" d="M23.4,43.1c0.1-0.1,0.2-0.2,0.2-0.3c0.3-0.8,0.6-1.6,0.8-2.4c0-0.1,0.1-0.2,0.2-0.3l0.5,1.1
+	c-0.1,0.1-0.2,0.3-0.3,0.4l-0.9,2.8c0,0.1-0.2,0.2-0.3,0.3C23.7,44.7,23.4,43.1,23.4,43.1z"/>
+<path class="st10" d="M23.7,44.7c0.1-0.1,0.2-0.2,0.3-0.3l0.9-2.8c0.1-0.2,0.2-0.3,0.3-0.4l0.5,0.4c-0.2,0.2-0.4,0.5-0.3,0.8
+	l-0.1,0.5c-0.1,0.1-0.2,0.2-0.2,0.2c-0.3,0.9-0.6,1.9-1,2.8c0,0.1-0.2,0.2-0.2,0.3C23.8,45.8,23.7,45.2,23.7,44.7z"/>
+<path class="st11" d="M23.8,46.3c0.1-0.1,0.2-0.2,0.2-0.3c0.3-0.9,0.6-1.9,1-2.8c0-0.1,0.1-0.2,0.2-0.2L25,45.1
+	c-0.1,0.1-0.1,0.1-0.2,0.2c-0.2,0.6-0.4,1.3-0.7,1.9c0,0.1-0.1,0.2-0.2,0.4c-0.1-0.1-0.2-0.2-0.2-0.2C23.8,47,23.8,46.7,23.8,46.3z"
+	/>
+<path class="st12" d="M24,47.6c0.1-0.1,0.2-0.2,0.2-0.4c0.2-0.6,0.4-1.3,0.7-1.9c0-0.1,0.1-0.1,0.2-0.2l0,1.4l-0.5,1.2
+	C24.5,47.8,24,47.6,24,47.6z"/>
+<path class="st13" d="M24.5,47.8l0.5-1.2l0.1,1.5L24.5,47.8z"/>
+<path class="st11" d="M25.4,42.5c-0.1-0.3,0.1-0.6,0.3-0.8l0.1,0.1L25.4,42.5z"/>
+<path class="st4" d="M24.1,36.3L24.1,36.3L24.1,36.3l0-0.2C24.1,36,24.1,36.3,24.1,36.3z"/>
+</svg>

src/images/icons/Database/mysql.svg

@@ -0,0 +1,27 @@
+<?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:#00546B;}
+</style>
+<g>
+	<path class="st0" d="M44.2,36.9c-2.6-0.1-4.6,0.2-6.3,0.9c-0.5,0.2-1.3,0.2-1.3,0.8c0.3,0.3,0.3,0.7,0.5,1c0.4,0.7,1.1,1.5,1.7,2
+		c0.7,0.5,1.4,1,2.1,1.5c1.3,0.8,2.7,1.2,3.9,2c0.7,0.5,1.4,1,2.2,1.5c0.4,0.3,0.6,0.7,1,0.8v-0.1c-0.2-0.3-0.3-0.7-0.5-1
+		c-0.3-0.3-0.7-0.6-1-0.9c-0.9-1.3-2.1-2.4-3.4-3.3c-1-0.7-3.3-1.7-3.8-2.9c0,0,0,0-0.1-0.1c0.7-0.1,1.6-0.3,2.3-0.5
+		c1.1-0.3,2.1-0.2,3.3-0.5c0.5-0.1,1-0.3,1.6-0.5v-0.3c-0.6-0.6-1-1.4-1.6-1.9c-1.7-1.4-3.5-2.8-5.4-4c-1-0.7-2.3-1.1-3.4-1.6
+		c-0.4-0.2-1-0.3-1.3-0.6c-0.6-0.7-0.9-1.7-1.3-2.5c-0.9-1.8-1.9-3.8-2.7-5.7c-0.6-1.3-0.9-2.5-1.7-3.7c-3.4-5.5-7-8.9-12.6-12.2
+		c-1.2-0.7-2.6-1-4.2-1.3c-0.8,0-1.6-0.1-2.4-0.1c-0.5-0.2-1-0.8-1.5-1.1c-1.9-1.2-6.7-3.7-8-0.4c-0.9,2.1,1.3,4.2,2.1,5.3
+		C2.8,8.2,3.5,9,3.9,9.9c0.2,0.6,0.3,1.1,0.5,1.7c0.5,1.4,1,3,1.7,4.4c0.4,0.7,0.8,1.4,1.2,2c0.3,0.4,0.7,0.5,0.8,1.1
+		c-0.5,0.7-0.5,1.6-0.8,2.4c-1.2,3.7-0.7,8.3,0.9,11c0.5,0.8,1.8,2.6,3.4,1.9c1.5-0.6,1.1-2.4,1.6-4.1c0.1-0.4,0-0.7,0.2-0.9v0.1
+		c0.5,0.9,0.9,1.8,1.3,2.7c1,1.6,2.8,3.3,4.2,4.4c0.8,0.6,1.4,1.6,2.4,2v-0.1h-0.1c-0.2-0.3-0.5-0.4-0.8-0.7c-0.6-0.6-1.2-1.3-1.7-2
+		c-1.4-1.8-2.6-3.8-3.7-5.9c-0.5-1-1-2.1-1.4-3.1c-0.2-0.4-0.2-1-0.5-1.2c-0.5,0.7-1.2,1.3-1.6,2.2c-0.6,1.4-0.7,3.1-0.9,4.9
+		c-0.1,0-0.1,0-0.1,0.1c-1-0.3-1.4-1.3-1.8-2.3c-1-2.3-1.1-6-0.3-8.7C9,21.2,10,19,9.6,18.3c-0.2-0.6-0.8-1-1.2-1.5
+		c-0.4-0.6-0.9-1.4-1.2-2.1C6.4,13,6,10.9,5.2,9.1C4.8,8.3,4.1,7.4,3.5,6.6C2.9,5.7,2.2,5.1,1.7,4.1C1.6,3.7,1.4,3.1,1.6,2.7
+		c0.1-0.3,0.2-0.4,0.5-0.4c0.4-0.4,1.6,0.1,2.1,0.3c1.2,0.5,2.2,0.9,3.2,1.6c0.5,0.3,0.9,0.9,1.5,1.1h0.7c1,0.2,2.2,0.1,3.2,0.4
+		c1.7,0.6,3.3,1.4,4.7,2.3c4.3,2.7,7.8,6.6,10.2,11.2c0.4,0.8,0.6,1.4,0.9,2.2c0.7,1.6,1.5,3.2,2.2,4.8c0.7,1.5,1.3,3.1,2.3,4.4
+		c0.5,0.7,2.4,1,3.3,1.4c0.7,0.3,1.7,0.6,2.3,0.9c1.1,0.7,2.2,1.5,3.3,2.2C42.5,35.4,44.1,36.2,44.2,36.9z"/>
+	<path class="st0" d="M10.9,8.5c-0.6,0-0.9,0.1-1.3,0.2v0.1h0.1c0.3,0.5,0.7,0.9,1,1.3c0.3,0.5,0.5,1,0.8,1.6c0,0,0.1-0.1,0.1-0.1
+		c0.5-0.3,0.7-0.8,0.7-1.6C12,9.7,12,9.5,11.8,9.3C11.6,8.9,11.2,8.8,10.9,8.5z"/>
+</g>
+</svg>

src/images/icons/Database/oracle.svg

@@ -0,0 +1,12 @@
+<?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:#C74634;}
+</style>
+<g>
+	<path class="st0" d="M15.1,39.1C6.7,39.1,0,32.4,0,24S6.7,8.9,15.1,8.9h17.7C41.3,8.9,48,15.6,48,24s-6.7,15.1-15.1,15.1H15.1
+		 M32.4,33.8c5.5,0,9.8-4.4,9.8-9.8c0-5.5-4.4-9.8-9.8-9.8H15.6c-5.5,0-9.8,4.4-9.8,9.8s4.4,9.8,9.8,9.8H32.4"/>
+</g>
+</svg>

src/images/icons/Database/postgresql.svg

@@ -0,0 +1,49 @@
+<?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:#336791;}
+	.st1{fill:#FFFFFF;}
+</style>
+<path d="M46.4,28.7c-0.3-0.8-1-1.4-2-1.6c-0.4-0.1-1,0-1.6,0.1c-1.1,0.2-1.8,0.3-2.4,0.3c2.2-3.6,3.9-7.8,4.9-11.7
+	c1.6-6.3,0.8-9.2-0.3-10.5C42.4,2,38.5,0.1,33.7,0.1c-2.5,0-4.7,0.5-5.9,0.8c-1.1-0.2-2.2-0.3-3.5-0.3c-2.3,0-4.3,0.5-6,1.5
+	c-1-0.3-2.5-0.8-4.2-1.1C10,0.3,6.6,0.8,4.2,2.6c-3,2.1-4.3,5.7-4.1,10.8c0.1,1.6,1,6.5,2.4,11.2c0.8,2.7,1.7,4.9,2.6,6.6
+	c1.3,2.4,2.6,3.8,4.2,4.4c0.9,0.3,2.4,0.5,4.1-0.9c0.2,0.3,0.5,0.5,0.9,0.7c0.5,0.3,1,0.5,1.6,0.7c2.1,0.5,4,0.4,5.6-0.3
+	c0,0.3,0,0.6,0,0.8c0,0.4,0,0.8,0,1.1c0.1,2.4,0.3,4.3,0.8,5.6c0,0.1,0.1,0.2,0.1,0.3c0.2,0.7,0.7,2,1.7,3c1.1,1,2.4,1.3,3.6,1.3
+	c0.6,0,1.2-0.1,1.7-0.2c1.8-0.4,3.8-1,5.3-3.1c1.4-2,2.1-4.9,2.2-9.6c0-0.1,0-0.3,0-0.4l0-0.2l0.3,0l0.1,0c1.8,0.1,4-0.3,5.4-0.9
+	C43.7,33,47.2,31.2,46.4,28.7"/>
+<path class="st0" d="M43.3,29.2c-5.4,1.1-5.8-0.7-5.8-0.7c5.7-8.5,8.1-19.2,6-21.9C37.9-0.5,28.2,2.9,28,3L28,3
+	c-1.1-0.2-2.3-0.4-3.6-0.4c-2.4,0-4.3,0.6-5.7,1.7c0,0-17.4-7.1-16.5,9c0.2,3.4,4.9,26,10.6,19.2c2.1-2.5,4.1-4.6,4.1-4.6
+	c1,0.7,2.2,1,3.4,0.9l0.1-0.1c0,0.3,0,0.6,0,1c-1.5,1.6-1,1.9-3.9,2.5c-3,0.6-1.2,1.7-0.1,2c1.4,0.3,4.5,0.8,6.7-2.2l-0.1,0.3
+	c0.6,0.5,1,3,0.9,5.3c-0.1,2.3-0.1,3.9,0.3,5.1c0.5,1.2,0.9,4,4.7,3.2c3.2-0.7,4.9-2.5,5.1-5.4c0.2-2.1,0.5-1.8,0.6-3.7l0.3-0.9
+	c0.3-2.9,0.1-3.8,2-3.4l0.5,0c1.5,0.1,3.4-0.2,4.5-0.8C44.2,30.6,45.6,28.7,43.3,29.2L43.3,29.2"/>
+<path class="st1" d="M19.7,14.8c-0.5-0.1-0.9,0-1.2,0.2c-0.1,0.1-0.2,0.2-0.2,0.3c0,0.2,0.1,0.4,0.2,0.5c0.2,0.3,0.6,0.5,1,0.6
+	c0.1,0,0.1,0,0.2,0c0.6,0,1.1-0.5,1.2-0.8C20.9,15.2,20.2,14.9,19.7,14.8 M35.8,14.8c0-0.3-0.6-0.4-1.2-0.3
+	c-0.6,0.1-1.1,0.3-1.1,0.7c0,0.3,0.5,0.7,1.1,0.7c0,0,0.1,0,0.1,0c0.4-0.1,0.6-0.3,0.8-0.4C35.7,15.2,35.8,15,35.8,14.8"/>
+<path class="st1" d="M45.1,29.1c-0.2-0.6-0.9-0.8-2-0.6c-3.3,0.7-4.4,0.2-4.8-0.1c2.5-3.9,4.6-8.6,5.8-12.9c0.5-2.1,0.8-4,0.9-5.6
+	c0-1.7-0.3-3-0.9-3.8c-2.4-3.1-6-4.8-10.3-4.8c-3,0-5.5,0.7-6,0.9c-1-0.3-2.1-0.4-3.4-0.4c-2.2,0-4.2,0.5-5.8,1.6
+	c-0.7-0.3-2.5-0.9-4.7-1.2c-3.8-0.6-6.8-0.1-9,1.4c-2.6,1.8-3.8,5.1-3.5,9.7c0.1,1.5,1,6.3,2.3,10.9c1.8,6,3.8,9.4,5.9,10.1
+	c0.2,0.1,0.5,0.1,0.8,0.1c0.8,0,1.7-0.3,2.7-1.5c1.2-1.4,2.4-2.8,3.7-4.2c0.8,0.4,1.7,0.7,2.7,0.7c0,0,0,0,0,0.1
+	c-0.2,0.2-0.3,0.4-0.5,0.6c-0.6,0.8-0.8,1-2.8,1.4C15.6,31.5,14,31.9,14,33c0,1.2,1.8,1.7,2.1,1.7c0.7,0.2,1.5,0.3,2.1,0.3
+	c1.7,0,3.1-0.5,4.3-1.6c0,4.3,0.1,8.4,0.7,9.7c0.4,1,1.4,3.6,4.7,3.6c0.5,0,1-0.1,1.6-0.2c3.4-0.7,4.8-2.2,5.4-5.5
+	c0.3-1.8,0.8-5.9,1.1-8.2c0.5,0.2,1.2,0.2,1.9,0.2c1.5,0,3.2-0.3,4.3-0.8C43.3,31.7,45.5,30.3,45.1,29.1z M37,13.9
+	c0,0.7-0.1,1.3-0.2,1.9c-0.1,0.7-0.2,1.4-0.2,2.2c0,0.8,0.1,1.7,0.2,2.5c0.2,1.7,0.4,3.4-0.4,5.1c-0.1-0.2-0.3-0.5-0.4-0.7
+	c-0.1-0.2-0.3-0.6-0.6-1.2c-1.2-2.1-3.9-7-2.5-9C33.3,14.2,34.4,13.6,37,13.9z M33.8,2.7c3.9,0.1,6.9,1.5,9.1,4.3
+	c1.7,2.1-0.2,11.8-5.5,20.2c-0.1-0.1-0.1-0.1-0.2-0.2l-0.1-0.1c1.4-2.3,1.1-4.5,0.9-6.5c-0.1-0.8-0.2-1.6-0.2-2.3
+	c0-0.8,0.1-1.4,0.2-2.1c0.1-0.8,0.2-1.6,0.2-2.6c0-0.1,0-0.2,0-0.4c-0.1-0.9-1.1-3.7-3.3-6.1C34,5.6,32.3,4.1,29.9,3
+	C30.9,2.8,32.3,2.6,33.8,2.7z M12.1,32c-1.1,1.3-1.8,1-2.1,1C8.5,32.4,6.6,29,5,23.7c-1.4-4.6-2.2-9.2-2.3-10.5
+	c-0.2-4.1,0.8-7,3-8.5c3.5-2.5,9.3-1,11.7-0.2c0,0-0.1,0.1-0.1,0.1c-3.8,3.9-3.7,10.5-3.7,10.9c0,0.2,0,0.4,0,0.7
+	c0.1,1.1,0.2,3.2-0.1,5.5c-0.3,2.2,0.4,4.3,1.8,5.8c0.2,0.2,0.3,0.3,0.5,0.4C15.1,28.6,13.6,30.1,12.1,32z M16.2,26.5
+	c-1.2-1.2-1.7-3-1.5-4.7c0.3-2.5,0.2-4.6,0.1-5.8c0-0.2,0-0.3,0-0.4c0.6-0.5,3.1-1.9,5-1.5c0.8,0.2,1.4,0.8,1.6,1.8
+	c1.1,5.1,0.1,7.2-0.6,9c-0.2,0.4-0.3,0.7-0.4,1l-0.1,0.3c-0.3,0.7-0.5,1.3-0.6,1.9C18.4,28,17.1,27.5,16.2,26.5L16.2,26.5z
+	 M16.4,33.4c-0.4-0.1-0.7-0.3-0.9-0.4c0.2-0.1,0.5-0.2,1-0.3c2.4-0.5,2.8-0.9,3.6-1.9c0.2-0.2,0.4-0.5,0.7-0.8l0,0
+	c0.4-0.5,0.6-0.4,1-0.3c0.3,0.1,0.6,0.5,0.7,0.9c0.1,0.2,0.1,0.6-0.1,0.8C20.7,33.9,18.2,33.8,16.4,33.4z M29.1,45.2
+	c-3,0.6-4-0.9-4.7-2.6c-0.4-1.1-0.7-6.2-0.5-11.7c0-0.1,0-0.1,0-0.2c0-0.1,0-0.3-0.1-0.4c-0.2-0.8-0.8-1.5-1.5-1.8
+	c-0.3-0.1-0.8-0.3-1.4-0.2c0.1-0.5,0.3-1.1,0.6-1.7l0.1-0.3c0.1-0.3,0.3-0.6,0.4-0.9c0.8-1.8,1.9-4.2,0.7-9.8
+	c-0.4-2.1-1.9-3.1-4.2-2.9c-1.4,0.1-2.6,0.7-3.2,1c-0.1,0.1-0.3,0.1-0.4,0.2c0.2-2.1,0.8-6,3.3-8.5c1.5-1.6,3.6-2.3,6.1-2.3
+	c4.9,0.1,8.1,2.6,9.9,4.7c1.5,1.8,2.4,3.7,2.7,4.6c-2.5-0.3-4.2,0.2-5.1,1.5c-1.9,2.7,1,7.9,2.4,10.4c0.3,0.5,0.5,0.9,0.5,1
+	c0.5,1.1,1,1.8,1.5,2.4c0.1,0.2,0.3,0.3,0.4,0.5c-0.8,0.2-2.1,0.7-2,3.2c-0.1,1.3-0.8,7.2-1.2,9.3C33,43.6,32,44.6,29.1,45.2
+	L29.1,45.2z M41.5,31c-0.8,0.4-2.1,0.6-3.3,0.7c-1.4,0.1-2.1-0.2-2.2-0.3c-0.1-1.6,0.5-1.7,1.1-1.9c0.1,0,0.2-0.1,0.3-0.1
+	c0.1,0,0.1,0.1,0.2,0.1c1.1,0.7,3,0.8,5.8,0.2l0,0C43,30.2,42.4,30.6,41.5,31z"/>
+</svg>

src/images/icons/Database/realm.svg

@@ -0,0 +1,53 @@
+<?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:#FFFFFF;}
+	.st1{filter:url(#Adobe_OpacityMaskFilter);}
+	.st2{mask:url(#mask-2_1_);}
+	.st3{fill:#FCC397;}
+	.st4{fill:#FC9F95;}
+	.st5{fill:#F77C88;}
+	.st6{fill:#F25192;}
+	.st7{fill:#D34CA3;}
+	.st8{fill:#9A50A5;}
+	.st9{fill:#59569E;}
+	.st10{fill:#39477F;}
+</style>
+<g>
+	<g>
+		<circle id="path-1_1_" class="st0" cx="24" cy="24" r="24"/>
+	</g>
+	<defs>
+		<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="-0.4" y="-0.2" width="48.6" height="48.4">
+			<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
+		</filter>
+	</defs>
+	<mask maskUnits="userSpaceOnUse" x="-0.4" y="-0.2" width="48.6" height="48.4" id="mask-2_1_">
+		<g class="st1">
+			<circle id="path-1_2_" class="st0" cx="24" cy="24" r="24"/>
+		</g>
+	</mask>
+	<g class="st2">
+		<g transform="translate(-2.000000, -1.000000)">
+			<path class="st3" d="M36.4,3.2C33.3,1.7,29.7,0.8,26,0.8c-6.5,0-12.4,2.6-16.8,6.7C4.6,12,44.6,7.1,36.4,3.2z"/>
+			<path class="st4" d="M45,9.9c0,0-2,2.7-8,3.5C24.8,15,3.9,15.1,3.9,15.1C5.2,12.2,7,9.7,9.3,7.5c2.6,0.8,5.5,1,8.2,0.5
+				c4.5-0.8,8.4-3.4,12.9-4.5c2-0.5,4.1-0.6,6.1-0.4C39.8,4.8,42.7,7.1,45,9.9z"/>
+			<path class="st5" d="M50,21.3c0,0.1-27.5,2.7-40.9,1.9c-4.4-0.2-6.9-2.9-6.9-3c0.4-1.8,0.9-3.5,1.7-5.1c3.9-2.1,8.4-3.3,12.8-3.3
+				c5.5,0.1,11,1.9,16.5,1.8c4.1-0.1,8.3-1.4,11.8-3.6C47.5,13.2,49.3,17.1,50,21.3z"/>
+			<path class="st6" d="M50.2,25c0,0.1,0,0.4,0,0.4s-7.6,1.9-17.5,1.8C19,27,1.6,24.8,1.6,24.8c0-1.6,0.2-3.2,0.5-4.7
+				c3.3,2,7.3,3,11.2,2.6c3.1-0.3,6-1.5,8.8-2.7s5.7-2.5,8.7-3.2c4.4-1,9.1-0.7,13.3,1c2,0.8,4.1,2,5.8,3.4
+				C50.1,22.4,50.2,23.7,50.2,25z"/>
+			<path class="st7" d="M22.7,32.9c-7.3,1.3-19.8-0.2-19.8-0.3C2,30.2,1.6,27.6,1.6,25c0-0.1,0-0.1,0-0.2c1.1-0.9,2.4-1.7,3.7-2.3
+				c3.1-1.5,6.7-2.1,10.1-1.8c3.4,0.3,6.7,1.6,9.8,3c2.7,1.1,5.3,2.4,8.1,3.2C33.5,27,30.7,31.4,22.7,32.9z"/>
+			<path class="st8" d="M49.4,31.5c-0.5,0.9-5.3,3.8-11.9,4.3c-8.7,0.7-19-2-15.5-3.3c5.4-2.1,10-5.9,15.5-7.5
+				c4.1-1.2,8.7-1,12.8,0.4C50.2,27.6,49.9,29.6,49.4,31.5z"/>
+			<path class="st9" d="M47.1,37.1c-4.2,7.3-34.6,9.1-39.1,4.2c-2.3-2.5-4-5.5-5.1-8.7c3.7-2.1,8.1-3,12.3-2.5
+				c5.4,0.7,10.3,3.8,15.7,5c4.3,1,8.9,0.7,13.1-0.9c1.9-0.7,3.8-1.6,5.4-2.7C48.9,33.5,48.1,35.4,47.1,37.1z"/>
+			<path class="st10" d="M47,37c-4.2,7.3-12.1,12.2-21.1,12.2c-7.1,0-13.6-3.1-18-8c0.7,0.3,1.6,0.5,2.3,0.7c4.2,1.2,8.8,1.1,13-0.1
+				c2.7-0.8,5.2-2.1,7.9-3C36.1,37.1,41.7,36.4,47,37z"/>
+		</g>
+	</g>
+</g>
+</svg>

src/images/icons/Database/redis.svg

@@ -0,0 +1,30 @@
+<?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:#A41E11;}
+	.st1{fill:#D82C20;}
+	.st2{fill:#FFFFFF;}
+	.st3{fill:#7A0C00;}
+	.st4{fill:#AD2115;}
+</style>
+<path class="st0" d="M46.1,35.1c-2.6,1.3-15.8,6.8-18.7,8.3c-2.8,1.5-4.4,1.5-6.6,0.4c-2.2-1.1-16.3-6.7-18.9-8
+	C0.7,35.2,0,34.7,0,34.2v-4.9c0,0,18.4-4,21.3-5.1c3-1.1,4-1.1,6.5-0.2s17.6,3.6,20.1,4.6v4.8C48,33.9,47.4,34.5,46.1,35.1z"/>
+<path class="st1" d="M46.1,30.3c-2.6,1.3-15.8,6.8-18.7,8.3S23,40,20.8,39S4.5,32.2,1.9,31c-2.5-1.2-2.6-2.1-0.1-3
+	c2.5-1,16.5-6.5,19.5-7.5c3-1.1,4-1.1,6.5-0.2c2.5,0.9,15.7,6.2,18.2,7.1C48.6,28.2,48.7,29,46.1,30.3z"/>
+<path class="st0" d="M46.1,27.3c-2.6,1.3-15.8,6.8-18.7,8.3C24.6,37,23,37,20.8,35.9c-2.2-1.1-16.3-6.8-18.9-8
+	C0.7,27.3,0,26.8,0,26.3v-4.9c0,0,18.4-4,21.3-5.1c3-1.1,4-1.1,6.5-0.2c2.5,0.9,17.6,3.6,20.1,4.6v4.8C48,26,47.4,26.6,46.1,27.3z"
+	/>
+<path class="st1" d="M46.1,22.4c-2.6,1.3-15.8,6.8-18.7,8.3c-2.8,1.5-4.4,1.5-6.6,0.4C18.6,30,4.5,24.3,1.9,23
+	c-2.6-1.2-2.6-2.1-0.1-3c2.5-1,16.5-6.5,19.5-7.5c3-1.1,4-1.1,6.5-0.2c2.5,0.9,15.7,6.2,18.2,7.1C48.6,20.3,48.7,21.1,46.1,22.4z"/>
+<path class="st0" d="M46.1,19c-2.6,1.3-15.8,6.8-18.7,8.3c-2.8,1.5-4.4,1.5-6.6,0.4c-2.2-1-16.3-6.7-18.9-8c-1.3-0.6-2-1.1-2-1.6
+	v-4.9c0,0,18.4-4,21.3-5.1c3-1.1,4-1.1,6.5-0.2c2.5,0.9,17.6,3.6,20.1,4.6v4.8C48,17.8,47.4,18.3,46.1,19z"/>
+<path class="st1" d="M46.1,14.2c-2.6,1.3-15.8,6.8-18.7,8.3c-2.8,1.5-4.4,1.5-6.6,0.4c-2.2-1.1-16.3-6.7-18.9-8s-2.6-2.1-0.1-3
+	c2.5-1,16.5-6.5,19.5-7.5c3-1.1,4-1.1,6.5-0.2s15.7,6.2,18.2,7.1C48.6,12.1,48.7,12.9,46.1,14.2z"/>
+<path class="st2" d="M30.3,9.5L26.1,10l-1,2.2l-1.5-2.5l-4.8-0.4L22.5,8l-1.1-2l3.4,1.3l3.1-1l-0.8,2.1L30.3,9.5z M25,20.4l-7.8-3.2
+	l11.1-1.7L25,20.4z"/>
+<ellipse class="st2" cx="14.2" cy="13.1" rx="5.9" ry="2.3"/>
+<path class="st3" d="M35.2,10.1l6.6,2.6l-6.6,2.6V10.1z"/>
+<path class="st4" d="M27.9,13l7.3-2.9v5.2l-0.7,0.3L27.9,13z"/>
+</svg>

src/images/icons/Database/sqlite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6.554 6.555" preserveAspectRatio="xMidYMid"><defs><linearGradient x1="2.983" y1=".53" x2="2.983" y2="4.744" id="A" gradientUnits="userSpaceOnUse"><stop stop-color="#97d9f6" offset="0%"/><stop stop-color="#0f80cc" offset="92.024%"/><stop stop-color="#0f80cc" offset="100%"/></linearGradient></defs><path d="M4.96.29H.847c-.276 0-.5.226-.5.5v4.536c0 .276.226.5.5.5h2.71c-.03-1.348.43-3.964 1.404-5.54z" fill="#0f80cc"/><path d="M4.81.437H.847c-.196 0-.355.16-.355.355v4.205c.898-.345 2.245-.642 3.177-.628A28.93 28.93 0 0 1 4.811.437z" fill="url(#A)"/><path d="M5.92.142c-.282-.25-.623-.15-.96.148l-.15.146c-.576.61-1.1 1.742-1.276 2.607a2.38 2.38 0 0 1 .148.426l.022.1.022.102s-.005-.02-.026-.08l-.014-.04a.461.461 0 0 0-.009-.022c-.038-.087-.14-.272-.187-.352a8.789 8.789 0 0 0-.103.321c.132.242.212.656.212.656s-.007-.027-.04-.12c-.03-.083-.176-.34-.21-.4-.06.22-.083.368-.062.404.04.07.08.2.115.324a7.52 7.52 0 0 1 .132.666l.005.062a6.11 6.11 0 0 0 .015.75c.026.313.075.582.137.726l.042-.023c-.09-.284-.128-.655-.112-1.084.025-.655.175-1.445.454-2.268C4.548 1.938 5.2.94 5.798.464c-.545.492-1.282 2.084-1.502 2.673-.247.66-.422 1.28-.528 1.873.182-.556.77-.796.77-.796s.29-.356.626-.865l-.645.172-.208.092s.53-.323.987-.47c.627-.987 1.31-2.39.622-3.002" fill="#003b57"/></svg>

src/images/icons/Devops/aws.svg

@@ -0,0 +1,39 @@
+<?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:#252F3E;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FF9900;}
+</style>
+<g>
+	<path class="st0" d="M13.5,20.1c0,0.6,0.1,1.1,0.2,1.4c0.1,0.4,0.3,0.7,0.5,1.1c0.1,0.1,0.1,0.3,0.1,0.4c0,0.2-0.1,0.3-0.3,0.5
+		l-1,0.7c-0.1,0.1-0.3,0.1-0.4,0.1c-0.2,0-0.3-0.1-0.5-0.2c-0.2-0.2-0.4-0.5-0.6-0.8c-0.2-0.3-0.3-0.6-0.5-0.9
+		c-1.2,1.5-2.8,2.2-4.7,2.2c-1.3,0-2.4-0.4-3.2-1.1C2.4,22.7,2,21.7,2,20.4c0-1.4,0.5-2.5,1.5-3.3c1-0.8,2.3-1.2,3.9-1.2
+		c0.5,0,1.1,0,1.7,0.1c0.6,0.1,1.2,0.2,1.8,0.4v-1.2c0-1.2-0.3-2.1-0.8-2.6c-0.5-0.5-1.4-0.7-2.6-0.7c-0.6,0-1.1,0.1-1.7,0.2
+		c-0.6,0.1-1.2,0.3-1.7,0.5c-0.3,0.1-0.4,0.2-0.6,0.2c-0.1,0-0.2,0-0.3,0c-0.2,0-0.3-0.2-0.3-0.5v-0.8c0-0.3,0-0.4,0.1-0.6
+		c0.1-0.1,0.2-0.2,0.4-0.3c0.6-0.3,1.2-0.5,2-0.7C6.3,9.8,7.1,9.7,8,9.7c1.9,0,3.3,0.4,4.2,1.3c0.9,0.9,1.3,2.2,1.3,3.9L13.5,20.1
+		L13.5,20.1z M7,22.5c0.5,0,1.1-0.1,1.6-0.3c0.6-0.2,1.1-0.5,1.5-1c0.3-0.3,0.4-0.6,0.5-1c0.1-0.4,0.2-0.8,0.2-1.4v-0.7
+		c-0.5-0.1-1-0.2-1.5-0.3c-0.5-0.1-1-0.1-1.5-0.1c-1.1,0-1.9,0.2-2.4,0.6s-0.8,1-0.8,1.8c0,0.8,0.2,1.3,0.6,1.7
+		C5.8,22.3,6.3,22.5,7,22.5z M19.9,24.2c-0.3,0-0.5,0-0.6-0.2c-0.1-0.1-0.2-0.3-0.3-0.6l-3.8-12.3c-0.1-0.3-0.1-0.5-0.1-0.6
+		c0-0.3,0.1-0.4,0.4-0.4H17c0.3,0,0.5,0,0.6,0.2c0.1,0.1,0.2,0.3,0.3,0.6l2.7,10.6l2.5-10.6c0.1-0.3,0.2-0.5,0.3-0.6
+		c0.1-0.1,0.4-0.2,0.6-0.2h1.3c0.3,0,0.5,0,0.6,0.2c0.1,0.1,0.2,0.3,0.3,0.6l2.5,10.7l2.8-10.7c0.1-0.3,0.2-0.5,0.3-0.6
+		c0.1-0.1,0.3-0.2,0.6-0.2H34c0.3,0,0.4,0.1,0.4,0.4c0,0.1,0,0.2,0,0.3s0,0.2-0.1,0.4l-3.8,12.3c-0.1,0.3-0.2,0.5-0.3,0.6
+		s-0.3,0.2-0.6,0.2h-1.4c-0.3,0-0.5,0-0.6-0.2s-0.2-0.3-0.3-0.6l-2.5-10.3l-2.5,10.3c-0.1,0.3-0.2,0.5-0.3,0.6
+		c-0.1,0.1-0.4,0.2-0.6,0.2H19.9z M40.4,24.7c-0.8,0-1.7-0.1-2.5-0.3c-0.8-0.2-1.4-0.4-1.8-0.6c-0.3-0.1-0.4-0.3-0.5-0.4
+		c-0.1-0.1-0.1-0.3-0.1-0.4V22c0-0.3,0.1-0.5,0.4-0.5c0.1,0,0.2,0,0.3,0c0.1,0,0.2,0.1,0.4,0.2c0.5,0.2,1.1,0.4,1.8,0.6
+		c0.6,0.1,1.3,0.2,1.9,0.2c1,0,1.8-0.2,2.3-0.5c0.5-0.4,0.8-0.9,0.8-1.5c0-0.4-0.1-0.8-0.4-1.1c-0.3-0.3-0.8-0.6-1.6-0.8L39,17.8
+		c-1.2-0.4-2-0.9-2.6-1.6c-0.5-0.7-0.8-1.5-0.8-2.3c0-0.7,0.1-1.3,0.4-1.8c0.3-0.5,0.7-1,1.1-1.3c0.5-0.4,1-0.6,1.7-0.8
+		c0.6-0.2,1.3-0.3,2-0.3c0.4,0,0.7,0,1.1,0.1c0.4,0,0.7,0.1,1,0.2c0.3,0.1,0.6,0.2,0.9,0.3c0.3,0.1,0.5,0.2,0.7,0.3
+		c0.2,0.1,0.4,0.3,0.5,0.4c0.1,0.1,0.1,0.3,0.1,0.5v0.8c0,0.3-0.1,0.5-0.4,0.5c-0.1,0-0.3-0.1-0.6-0.2c-0.9-0.4-1.9-0.6-3.1-0.6
+		c-0.9,0-1.6,0.1-2.1,0.4c-0.5,0.3-0.8,0.8-0.8,1.4c0,0.4,0.2,0.8,0.5,1.1c0.3,0.3,0.9,0.6,1.8,0.9l2.3,0.7c1.1,0.4,2,0.9,2.5,1.5
+		c0.5,0.7,0.7,1.4,0.7,2.2c0,0.7-0.1,1.3-0.4,1.9c-0.3,0.5-0.7,1-1.2,1.4c-0.5,0.4-1.1,0.7-1.8,0.9C41.9,24.5,41.2,24.7,40.4,24.7z"
+		/>
+	<g>
+		<path class="st1" d="M43.4,32.4c-5.3,3.9-12.9,5.9-19.4,5.9c-9.2,0-17.5-3.4-23.7-9.1c-0.5-0.4,0-1.1,0.5-0.7
+			c6.8,3.9,15.1,6.3,23.8,6.3c5.8,0,12.2-1.2,18.1-3.7C43.5,30.8,44.3,31.8,43.4,32.4z"/>
+		<path class="st1" d="M45.6,29.9c-0.7-0.9-4.4-0.4-6.1-0.2c-0.5,0.1-0.6-0.4-0.1-0.7c3-2.1,7.9-1.5,8.5-0.8c0.6,0.7-0.2,5.7-3,8
+			c-0.4,0.4-0.8,0.2-0.7-0.3C44.8,34.3,46.3,30.8,45.6,29.9z"/>
+	</g>
+</g>
+</svg>

src/images/icons/Devops/azure.svg

@@ -0,0 +1,11 @@
+<?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-rule:evenodd;clip-rule:evenodd;fill:#035BDA;}
+</style>
+<g>
+	<path class="st0" d="M29.8,10.9l-7.1,14.3l12.5,14.5L12,42.3l36,0.4L29.8,10.9z M28.4,5.3L12.1,18.9L0,39.3l10.3-1L28.4,5.3z"/>
+</g>
+</svg>

src/images/icons/Devops/bash.svg

@@ -0,0 +1,21 @@
+<?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-rule:evenodd;clip-rule:evenodd;fill:#1B1B1F;}
+</style>
+<g>
+	<path class="st0" d="M42.1,9.8l-15.2-9c-1.8-1.1-4-1.1-5.8,0L6,9.8C4.1,10.9,3,12.9,3,15v18c0,2.1,1.1,4.1,2.9,5.2l15.2,9
+		c1.8,1.1,4,1.1,5.8,0l15.2-9c1.8-1.1,2.9-3.1,2.9-5.2V15C45,12.9,43.9,10.9,42.1,9.8L42.1,9.8z M30.4,37.9v1.3
+		c0,0.2-0.1,0.3-0.2,0.4L29.4,40c-0.1,0.1-0.2,0-0.2-0.2v-1.3c-0.5,0.3-1.2,0.3-1.7,0.2c-0.1-0.1-0.1-0.2-0.1-0.3l0.3-1.2
+		c0-0.1,0.1-0.2,0.2-0.3c0,0,0,0,0.1-0.1c0,0,0.1,0,0.1,0c0.5,0.1,1.1,0.1,1.6-0.2c0.7-0.3,1.2-1,1.2-1.8c0-0.7-0.4-0.9-1.2-0.9
+		c-1.1,0-2.1-0.2-2.1-1.8c0-1.4,0.7-2.7,1.8-3.6v-1.3c0-0.2,0.1-0.3,0.2-0.4l0.7-0.5c0.1-0.1,0.2,0,0.2,0.2v1.3
+		c0.5-0.2,1-0.3,1.5-0.2c0.1,0.1,0.1,0.2,0.1,0.3l-0.3,1.2c0,0.1-0.1,0.2-0.1,0.2c0,0,0,0-0.1,0.1c0,0-0.1,0-0.1,0
+		c-0.5-0.1-1,0-1.4,0.2c-0.6,0.3-1,0.9-1.1,1.6c0,0.6,0.3,0.8,1.4,0.8c1.4,0,2,0.6,2,2C32.2,35.6,31.5,36.9,30.4,37.9L30.4,37.9z
+		 M38.3,35.7c0,0.1,0,0.2-0.1,0.3l-3.8,2.3c0,0-0.1,0-0.1,0c0,0-0.1-0.1,0-0.1v-1c0-0.1,0.1-0.2,0.2-0.2l3.8-2.3c0,0,0.1,0,0.1,0
+		c0,0,0.1,0.1,0,0.1L38.3,35.7L38.3,35.7z M40.9,13.6l-14.3,8.9c-1.8,1.1-3.1,2.2-3.1,4.4v17.7c0,1.3,0.5,2.1,1.3,2.4
+		c-0.3,0-0.5,0.1-0.8,0.1c-0.8,0-1.7-0.2-2.4-0.7l-15.2-9C5,36.4,4.1,34.7,4.1,33V15c0-1.8,0.9-3.4,2.4-4.3l15.2-9
+		c1.5-0.9,3.3-0.9,4.8,0l15.2,9c1.2,0.8,2.1,2,2.3,3.4C43.4,13.1,42.3,12.8,40.9,13.6L40.9,13.6L40.9,13.6z"/>
+</g>
+</svg>