[fix]: issue #278

[fix]: infinite requests if page is not visible

.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,11 +2,12 @@
 
 github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
 patreon: # Replace with a single Patreon username
-open_collective: # Replace with a single Open Collective username
+open_collective: github-profile-readme-generator
 ko_fi: rahuldkjain
 tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 liberapay: # Replace with a single Liberapay username
 issuehunt: # Replace with a single IssueHunt username
 otechie: # Replace with a single Otechie username
-custom: ['https://paypal.me/rahuldkjain']
+custom:
+  ["https://paypal.me/rahuldkjain", "https://www.buymeacoffee.com/rahuldkjain"]

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,10 +1,9 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: ''
+title: ""
 labels: bug
-assignees: ''
-
+assignees: ""
 ---
 
 **Describe the bug**
@@ -12,6 +11,7 @@ A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,15 +24,20 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.
+
+Join the **Discord Server** for further discussions.
+Server Link: https://discord.gg/HHMs7Eg

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

@@ -1,10 +1,9 @@
 ---
 name: Feature/Enhancement request
 about: Suggest an idea for this project
-title: ''
+title: ""
 labels: enhancement
-assignees: ''
-
+assignees: ""
 ---
 
 **Is your feature request related to a problem? Please describe.**
@@ -18,3 +17,7 @@ A clear and concise description of any alternative solutions or features you've
 
 **Additional context**
 Add any other context or screenshots about the feature request here.
+
+Join the **Discord Server** for further discussions.
+
+Server Link: https://discord.gg/HHMs7Eg

.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. 🙏

CODE_OF_CONDUCT.md

@@ -0,0 +1,76 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+ advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at rahuldkjain@gmail.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq

CONTRIBUTING.md

@@ -0,0 +1,21 @@
+# Contributing
+
+When contributing to this repository, please first discuss the change you wish to make via issue,
+email, or any other method with the owners of this repository before making a change.
+
+<a href="https://discord.gg/HHMs7Eg" target="blank">
+<img src="https://img.shields.io/discord/735303195105951764?color=%23677BC4&label=Join%20Community&style=flat-square" alt="join discord community of github profile readme generator"/>
+</a>
+
+Please note we have a code of conduct, please follow it in all your interactions with the project.
+
+## Pull Request Process
+
+1. Ensure any install or build dependencies are removed before the end of the layer when doing a
+   build.
+2. Update the README.md with details of changes to the interface, this includes new environment
+   variables, exposed ports, useful file locations and container parameters.
+3. Increase the version numbers in any examples files and the README.md to the new version that this
+   Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/).
+4. You may merge the Pull Request once you have the sign-off of two other developers, or if you
+   do not have permission to do that, you may request the second reviewer merge it for you.

README.md

@@ -4,7 +4,7 @@
   </a>
 </p>
 <h1 align="center">
-  GitHub Profile Readme Generator
+  GitHub Profile README Generator
 </h1>
 
 <p align="center">
@@ -23,6 +23,9 @@
 <a href="https://github.com/rahuldkjain/github-profile-readme-generator/pulls" target="blank">
 <img src="https://img.shields.io/github/issues-pr/rahuldkjain/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator pull-requests"/>
 </a>
+<a href="https://discord.gg/HHMs7Eg" target="blank">
+<img src="https://img.shields.io/discord/735303195105951764?label=Join%20Community&logo=discord&style=flat-square" alt="join discord community of github profile readme generator"/>
+</a>
 </p>
 
 <p align="center"><img src="./src/images/github-profile-readme-generator.gif" alt="github-profile-readme-generator gif" /></p>
@@ -36,55 +39,110 @@
 </p>
 
 <p align="center">
-<i>Loved the tool? Please consider <a href="https://paypal.me/rahuldkjain">donating</a>  💸 to help it improve!</i>
+<i>Loved the tool? Please consider <a href="https://paypal.me/rahuldkjain/10">donating</a>  💸 to help it improve!</i>
+</p>
+
+<p align="center">
+<a href="https://www.paypal.me/rahuldkjain"><img src="https://img.shields.io/badge/support-PayPal-blue?logo=PayPal&style=flat-square&label=Donate" alt="sponsor github profile readme generator"/>
+</a>
+<a href='https://ko-fi.com/A0A81XXSX' target='_blank'><img height='23' width="100" src='https://cdn.ko-fi.com/cdn/kofi3.png?v=2' alt='Buy Coffee for rahuldkjain' />
+</a>
+<a href="https://www.buymeacoffee.com/rahuldkjain" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="23" width="100" style="border-radius:1px" />
 </p>
 
 #### Tired of editing GitHub Profile README with new features?
-This tool provides an easy way to create github profile readme with latest addons like `visitors count`, `github stats` etc. 
 
-#### 🚀 Try it out: [Live demo](https://rahuldkjain.github.io/gh-profile-readme-generator)
+This tool provides an easy way to create a GitHub profile readme with the latest add-ons such as `visitors count`, `github stats`, etc.
+
+
+## 🚀 Demo 
+<a href="https://rahuldkjain.github.io/gh-profile-readme-generator" target="blank">
+<img src="https://img.shields.io/website?url=https%3A%2F%2Frahuldkjain.github.io%2Fgh-profile-readme-generator&logo=github&style=flat-square" />
+</a>
+
+Try the tool: [GitHub Profile README Generator](https://rahuldkjain.github.io/gh-profile-readme-generator)
 
 ## 🧐 Features
-Just fill the details like `Name`, `Tagline`, `Dev Platforms Username`, `Current Work`, `Portfolio`, `Blog` etc. with a minimal UI.
+
+Just fill in the details such as `Name`, `Tagline`, `Dev Platforms Username`, `Current Work`, `Portfolio`, `Blog`, etc. with a minimal UI.
+
+- **Uniform Dev Icons**
+
+- **Uniform Social Icons**
+
+- **Visitors Counter Badge**
+
+- **GitHub Profile Stats Card**
+
+- **GitHub Top Skills**
+
+- **Dynamic Dev(.)to Blogs** (GitHub Action)
+
+- **Dynamic Medium Blogs** (GitHub Action)
+
+- **Dynamic Personal Blogs from RSS Feed** (GitHub Action)
+
+- **Wakatime Stats** [contribute](https://github.com/rahuldkjain/github-profile-readme-generator/issues/115)
 
 Click on `Generate README` to get your README in `markdown`.
 You can preview the README too.
 
-You can add latest addons like `visitors count`, `shields`, `dev icons`, `github stats` etc to your README in just one click.
+## 🛠️ Installation Steps
 
-## Installation Steps
 1. Clone the repository
+
 ```bash
 git clone https://github.com/rahuldkjain/github-profile-readme-generator.git
 ```
+
 2. Change the working directory
+
 ```bash
 cd github-profile-readme-generator
 ```
+
 3. Install dependencies
+
 ```bash
 npm install
 ```
+
 4. Run the app
+
 ```bash
 npm start
 ```
+
 🌟 You are all set!
 
+## 🍰 Contributing
+
+Please contribute using [GitHub Flow](https://guides.github.com/introduction/flow). Create a branch, add commits, and [open a pull request](https://github.com/rahuldkjain/github-profile-readme-generator/compare).
+
+Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDUCT`](CODE_OF_CONDUCT.md), and the process for submitting pull requests to us.
+
+## 💻 Built with
+- [Gatsby](https://www.gatsbyjs.com/)
+- [Tailwind CSS](https://tailwindcss.com/): for styling
+- [GSAP](https://greensock.com/gsap/): for small SVG Animations
+
+
+## 🙇 Special Thanks
 
-## Special Thanks 🙇
 - [Anurag Hazra](https://github.com/anuraghazra) for amazing [github-readme-stats](https://github.com/anuraghazra/github-readme-stats)
 - [Anton Komarev](https://github.com/antonkomarev) for super cool [github-profile-views-counter](https://github.com/antonkomarev/github-profile-views-counter)
 - [Gautam Krishna R](https://github.com/gautamkrishnar) for the awesome [blog post workflow](https://github.com/gautamkrishnar/blog-post-workflow)
 - [Julien Monty](https://github.com/konpa) for super useful [devicon](https://github.com/konpa/devicon)
 
-## Sponsors 🙇
-- [Scott C Wilson](https://github.com/scottcwilson) donated the first ever grant to this tool. A big thanks to him.
-- [Max Schmitt](https://github.com/mxschmitt) loved the tool and showed the support with his donation. Thanks a lot.
+## 🙇 Sponsors
+
+- [Scott C Wilson](https://github.com/scottcwilson) donated the first-ever grant to this tool. A big thanks to him.
+- [Max Schmitt](https://github.com/mxschmitt) loved the tool and showed support with his donation. Thanks a lot.
+
+## 🙏 Support
 
-## Support 🙏
 <p align="left">
-<a href="https://www.paypal.me/rahuldkjain"><img src="https://ionicabizau.github.io/badges/paypal.svg" alt="sponsor github profile readme generator"/>
+<a href="https://www.paypal.me/rahuldkjain/10"><img src="https://ionicabizau.github.io/badges/paypal.svg" alt="sponsor github profile readme generator"/>
 </a>
 <a href="https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator">
 <img src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator" alt="tweet github profile readme generator"/>
@@ -97,6 +155,33 @@ npm start
   <a href="https://www.buymeacoffee.com/rahuldkjain" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="23" width="100" style="border-radius:2px" />
 </p>
 
+## Contributors ✨
+<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+[![All Contributors](https://img.shields.io/badge/all_contributors-9-orange.svg?style=flat-square)](#contributors-)
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tr>
+    <td align="center"><a href="https://github.com/sarbikbetal"><img src="https://avatars2.githubusercontent.com/u/41508422?v=4" width="100px;" alt=""/><br /><sub><b>Sarbik Betal</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=sarbikbetal" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/Hardik0307"><img src="https://avatars3.githubusercontent.com/u/41434099?v=4" width="100px;" alt=""/><br /><sub><b>Hardik Bagada</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=Hardik0307" title="Code">💻</a></td>
+    <td align="center"><a href="https://komarev.com"><img src="https://avatars0.githubusercontent.com/u/1849174?v=4" width="100px;" alt=""/><br /><sub><b>Anton Komarev</b></sub></a><br /><a href="#plugin-antonkomarev" title="Plugin/utility libraries">🔌</a></td>
+    <td align="center"><a href="https://kkvanonymous.github.io/"><img src="https://avatars3.githubusercontent.com/u/58628586?v=4" width="100px;" alt=""/><br /><sub><b>Kunal Kumar Verma</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=KKVANONYMOUS" title="Code">💻</a></td>
+    <td align="center"><a href="http://jaideepghosh.blogspot.com"><img src="https://avatars2.githubusercontent.com/u/3909648?v=4" width="100px;" alt=""/><br /><sub><b>Jaideep Ghosh</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=jaideepghosh" title="Code">💻</a></td>
+    <td align="center"><a href="http://yashkandalkar.github.io"><img src="https://avatars0.githubusercontent.com/u/35102959?v=4" width="100px;" alt=""/><br /><sub><b>yash</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=YashKandalkar" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/abhijit-hota"><img src="https://avatars0.githubusercontent.com/u/8116174?v=4" width="100px;" alt=""/><br /><sub><b>Abhijit Hota</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=abhijit-hota" title="Code">💻</a> <a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=abhijit-hota" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://maddoxx88.github.io/"><img src="https://avatars1.githubusercontent.com/u/34238672?v=4" width="100px;" alt=""/><br /><sub><b>Sunit Shirke</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=Maddoxx88" title="Code">💻</a></td>
+    <td align="center"><a href="https://www.gsavitha.in"><img src="https://avatars0.githubusercontent.com/u/31612459?v=4" width="100px;" alt=""/><br /><sub><b>Savitha Gollamudi</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=g-savitha" title="Code">💻</a></td>
+  </tr>
+</table>
+
+<!-- markdownlint-enable -->
+<!-- prettier-ignore-end -->
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
 <hr>
 <p align="center">
 Developed with ❤️ in India 🇮🇳 

__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(),
+}

gatsby-browser.js

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

gatsby-config.js

@@ -24,10 +24,8 @@ module.exports = {
     {
       resolve: `gatsby-transformer-remark`,
       options: {
-        plugins: [
-          `gatsby-remark-prismjs`,
-        ]
-      }
+        plugins: [`gatsby-remark-prismjs`],
+      },
     },
     `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
@@ -56,7 +54,7 @@ module.exports = {
       resolve: `gatsby-plugin-postcss`,
       options: {
         postCssPlugins: [require("tailwindcss")],
-      }
+      },
     },
     {
       resolve: `gatsby-plugin-purgecss`,
@@ -64,9 +62,9 @@ module.exports = {
         printRejected: false,
         develop: false,
         tailwind: true,
-      }
+      },
     },
-    `gatsby-plugin-twitter`
+    `gatsby-plugin-twitter`,
   ],
   // this (optional) plugin enables Progressive Web App + Offline functionality
   // To learn more, visit: https://gatsby.dev/offline

gatsby-node.js

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

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,15 @@
+module.exports = {
+  transform: {
+    "^.+\\.jsx?$": `<rootDir>/jest-preprocess.js`,
+  },
+  moduleNameMapper: {
+    ".+\\.(css|styl|less|sass|scss)$": `identity-obj-proxy`,
+    ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": `<rootDir>/__mocks__/file-mock.js`,
+  },
+  testPathIgnorePatterns: [`node_modules`, `\\.cache`, `<rootDir>.*/public`],
+  transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],
+  globals: {
+    __PATH_PREFIX__: ``,
+  },
+  setupFiles: [`<rootDir>/loadershim.js`],
+}

loadershim.js

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

package.json

@@ -12,7 +12,7 @@
     "gatsby-plugin-manifest": "^2.4.14",
     "gatsby-plugin-offline": "^3.2.13",
     "gatsby-plugin-react-helmet": "^3.3.6",
-    "gatsby-plugin-sharp": "^2.6.14",
+    "gatsby-plugin-sharp": "2.6.14",
     "gatsby-remark-prismjs": "^3.5.10",
     "gatsby-source-filesystem": "^2.3.23",
     "gatsby-transformer-remark": "^2.8.27",
@@ -25,12 +25,17 @@
     "react-helmet": "^6.1.0"
   },
   "devDependencies": {
+    "babel-jest": "26.3.0",
+    "babel-preset-gatsby": "0.5.11",
     "gatsby-plugin-postcss": "^2.3.11",
     "gatsby-plugin-purgecss": "^5.0.0",
     "gatsby-plugin-twitter": "^2.3.10",
     "gatsby-remark-embedder": "^3.0.0",
     "gh-pages": "^3.1.0",
+    "identity-obj-proxy": "3.0.0",
+    "jest": "26.4.2",
     "prettier": "2.0.5",
+    "react-test-renderer": "16.13.1",
     "tailwindcss": "^1.7.6"
   },
   "keywords": [
@@ -44,7 +49,7 @@
     "start": "npm run develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
-    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
+    "test": "jest",
     "deploy": "gatsby build --prefix-paths && gh-pages -d public -b master"
   },
   "repository": {

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

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Title renders correctly 1`] = `
+<div
+  className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10"
+>
+  <div
+    className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2"
+  >
+    Title
+  </div>
+  <div
+    className="flex justify-start items-center w-full text-regular text-xs sm:text-lg"
+  >
+    <input
+      className="outline-none w-24 sm:w-40 mr-10 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700 prefix"
+      id="title-prefix"
+      onChange={[Function]}
+      value="Hi 👋, I'm"
+    />
+    <input
+      className="outline-none placeholder-gray-700 w-1/2 sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="title-name"
+      onChange={[Function]}
+      placeholder="name"
+      value=""
+    />
+  </div>
+</div>
+`;

src/components/__tests__/title.test.js

@@ -0,0 +1,13 @@
+import React from "react"
+import renderer from "react-test-renderer"
+
+import Title from "../title"
+
+describe("Title", () => {
+  it("renders correctly", () => {
+    const tree = renderer
+      .create(<Title prefix={{ title: "Hi 👋, I'm" }} data={{ title: "" }} />)
+      .toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

src/components/addons.js

@@ -1,73 +1,401 @@
-import React from "react"
-import { withPrefix } from 'gatsby'
+import React, { useState, useEffect } from "react"
+import { withPrefix } from "gatsby"
 import { latestBlogs } from "../utils/workflows"
 import links from "../constants/page-links"
-import { isMediumUsernameValid } from "../utils/validation"
-const Addons = (props) => {
-    const blogPostPorkflow = () => {
-        let payload = {
-            dev: {
-                show: props.data.devDynamicBlogs,
-                username: props.social.dev,
-            },
-            medium: {
-                show: props.data.mediumDynamicBlogs,
-                username: props.social.medium,
-            }
-        }
-        var actionContent = latestBlogs(payload);
-        var tempElement = document.createElement('a');
-        tempElement.setAttribute('href', 'data:text/yaml;charset=utf-8,' + encodeURIComponent(actionContent));
-        tempElement.setAttribute('download', 'blog-post-workflow.yml');
-        tempElement.style.display = 'none';
-        document.body.appendChild(tempElement);
-        tempElement.click();
-        document.body.removeChild(tempElement);
-    }
-    return (
-        <div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10">
-            <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Add-ons</div>
-            <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
-                <label htmlFor="visitors-count" className="cursor-pointer">
-                    <input type="checkbox" id="visitors-count" checked={props.data.visitorsBadge}
-                        onChange={event => props.handleCheckChange('visitorsBadge')} />&nbsp; display visitors count badge
-                </label>
-            </div>
-            <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
-                <label htmlFor="github-stats" className="cursor-pointer">
-                    <input id="github-stats" type="checkbox" checked={props.data.githubStats}
-                        onChange={event => props.handleCheckChange('githubStats')} />&nbsp; display github profile stats card
-                </label>
-            </div>
-            <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
-                <label htmlFor="top-languages" className="cursor-pointer">
-                    <input id="top-languages" type="checkbox" checked={props.data.topLanguages}
-                        onChange={event => props.handleCheckChange('topLanguages')} />&nbsp; display top skills
-                </label>
-            </div>
-            <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
-                <label htmlFor="dev-dynamic-blogs" className="cursor-pointer">
-                    <input id="dev-dynamic-blogs" type="checkbox" checked={props.data.devDynamicBlogs}
-                        onChange={event => props.handleCheckChange('devDynamicBlogs')} />&nbsp; display latest dev.to blogs dynamically (GitHub Action)
-                </label>
-            </div>
-            <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
-                <label htmlFor="medium-dynamic-blogs" className="cursor-pointer">
-                    <input id="medium-dynamic-blogs" type="checkbox" checked={props.data.mediumDynamicBlogs}
-                        onChange={event => props.handleCheckChange('mediumDynamicBlogs')} />&nbsp; display latest medium blogs dynamically (GitHub Action)
-                </label>
-            </div>
+import { isMediumUsernameValid, isGitHubUsernameValid } from "../utils/validation"
+import { ToolsIcon, XCircleIcon } from "@primer/octicons-react";
 
-            {(props.data.devDynamicBlogs && props.social.dev) || (props.data.mediumDynamicBlogs && props.social.medium && isMediumUsernameValid(props.social.medium)) ?
-                <div className="workflow">
-                    <div>
-                        download
-                        <span onClick={blogPostPorkflow} role="button" tabIndex="0" style={{ cursor: 'pointer', color: '#002ead' }}> blog-post-workflow.yml</span> file(learn
-                        <a href={withPrefix(links.addons)} target="blank" style={{ color: '#002ead' }}> how to setup</a>)
-                    </div>
-                </div> : ''}
-        </div>
-    )
+const AddonsItem = ({ inputId, inputChecked, onInputChange, 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="cursor-pointer flex items-center">
+          <input
+            type="checkbox"
+            id={inputId}
+            checked={inputChecked}
+            onChange={onInputChange}
+          />
+          <span className="pl-4">{props.children}</span>
+        </label>
+        {Options && (
+          <button
+            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}`
+                    }
+              />
+            : <span className="text-xxs md:text-sm text-red-600">Invalid GitHub username</span>
+          }
+          
+        </span>
+    </>
+  )
 }
 
-export default Addons;
+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`}>Hide border:&nbsp;
+        <input
+          id={`${prefix}-hide-border`}
+          type="checkbox"
+          checked={options.hideBorder}
+          onChange={(e) => onUpdate('hideBorder', e.target.checked)}
+        />
+      </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 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 blogPostPorkflow = () => {
+    let payload = {
+      dev: {
+        show: props.data.devDynamicBlogs,
+        username: props.social.dev,
+      },
+      medium: {
+        show: props.data.mediumDynamicBlogs,
+        username: props.social.medium,
+      },
+      rssurl: {
+        show: props.data.rssDynamicBlogs,
+        username: props.social.rssurl,
+      },
+    }
+    var actionContent = latestBlogs(payload)
+    var tempElement = document.createElement("a")
+    tempElement.setAttribute(
+      "href",
+      "data:text/yaml;charset=utf-8," + encodeURIComponent(actionContent)
+    )
+    tempElement.setAttribute("download", "blog-post-workflow.yml")
+    tempElement.style.display = "none"
+    document.body.appendChild(tempElement)
+    tempElement.click()
+    document.body.removeChild(tempElement)
+  }
+
+  const 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}})
+  }
+
+  return (
+    <div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10">
+      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">
+        Add-ons
+      </div>
+      <AddonsItem
+        inputId="visitors-count"
+        inputChecked={props.data.visitorsBadge}
+        onInputChange={() => props.handleCheckChange("visitorsBadge")}
+        Options={
+          <CustomizeOptions
+            title="Customize Badge"
+            CustomizationOptions={
+              <CustomizeBadge
+                githubName={props.social.github} 
+                badgeOptions={badgeOptions}
+                onBadgeUpdate={onBadgeUpdate}
+              />
+            }
+          />
+        }
+      >
+        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}/>
+            }
+          />
+        }
+      >
+        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}/>
+            }
+          />
+        }
+      >
+        display top skills
+      </AddonsItem>
+      <AddonsItem
+        inputId="twitter-badge"
+        inputChecked={props.data.twitterBadge}
+        onInputChange={() => props.handleCheckChange("twitterBadge")}
+      >
+        display twitter badge
+      </AddonsItem>
+      <AddonsItem
+        inputId="dev-dynamic-blogs"
+        inputChecked={props.data.devDynamicBlogs}
+        onInputChange={() => props.handleCheckChange("devDynamicBlogs")}
+      >
+        display latest dev.to blogs dynamically (GitHub Action)
+      </AddonsItem>
+      <AddonsItem
+        inputId="medium-dynamic-blogs"
+        inputChecked={props.data.mediumDynamicBlogs}
+        onInputChange={() => props.handleCheckChange("mediumDynamicBlogs")}
+      >
+        display latest medium blogs dynamically (GitHub Action)
+      </AddonsItem>
+      <AddonsItem
+        inputId="rss-dynamic-blogs"
+        inputChecked={props.data.rssDynamicBlogs}
+        onInputChange={() => props.handleCheckChange("rssDynamicBlogs")}
+      >
+        display latest blogs from your personal blog dynamically (GitHub Action)
+      </AddonsItem>
+
+      {(props.data.devDynamicBlogs && props.social.dev) ||
+      (props.data.rssDynamicBlogs && props.social.rssurl) ||
+      (props.data.mediumDynamicBlogs &&
+        props.social.medium &&
+        isMediumUsernameValid(props.social.medium)) ? (
+        <div className="workflow">
+          <div>
+            download
+            <span
+              onClick={blogPostPorkflow}
+              onKeyDown={(e) => e.keyCode === 13 && blogPostPorkflow()}
+              role="button"
+              tabIndex="0"
+              style={{ cursor: "pointer", color: "#002ead" }}
+            >
+              {" "}
+              blog-post-workflow.yml
+            </span>{" "}
+            file(learn
+            <a
+              href={withPrefix(links.addons)}
+              target="blank"
+              style={{ color: "#002ead" }}
+            >
+              {" "}
+              how to setup
+            </a>
+            )
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+    </div>
+  )
+}
+
+export default Addons

src/components/donate.js

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

src/components/footer.js

@@ -1,30 +1,120 @@
-import React from 'react';
-import links from '../constants/page-links'
-import { Link } from 'gatsby'
+import React from "react"
+import links from "../constants/page-links"
+import logo from "../images/mdg.png"
+import discord from "../images/Discord-Logo.png"
+import { Link } from "gatsby"
 const Footer = () => {
-    return (
-        <div className="bg-gray-100 p-4 flex flex-col justify-center items-center shadow-inner mt-2">
-            <div className="w-full flex justify-evenly items-center py-2 text-orange-500">
-                <div>
-                    <Link to={links.about} activeStyle={{ color: "#002ead" }}>
-                        About
-                    </Link>
-                </div>
-                <div>
-                    <Link to={links.addons} activeStyle={{ color: "#002ead" }}>
-                        Addons
-                    </Link>
-                </div>
-                <div>
-                    <Link to={links.support} activeStyle={{ color: "#002ead" }}>
-                        Support
-                    </Link>
-                </div>
-            </div>
-            <div className="py-2">
-                Developed in India <span role="img" aria-label="india"> 🇮🇳</span>
+  return (
+    <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="ml-2 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>
+            <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>
+            <a
+              href="https://github.com/rahuldkjain/github-profile-readme-generator/pulls"
+              aria-label="Pull Requests in rahuldkjain/github-profile-readme-generator"
+              target="blank"
+            >
+              Pull Requests
+            </a>
+          </div>
+        </div>
+        <div>
+          <div className="font-title font-bold text-xl sm:text-base my-4 sm:my-0 sm:mb-2">
+            <strong>Join Community</strong>
+          </div>
+          <div>
+            <a
+              href="https://discord.gg/HHMs7Eg"
+              aria-label="Discord of the community"
+              target="blank"
+            >
+              <img
+                src={discord}
+                className="h-12"
+                alt="Discord of the community"
+              />
+            </a>
+          </div>
+        </div>
+      </div>
+      <div className="py-2 mt-2">
+        Developed in India{" "}
+        <span role="img" aria-label="india">
+          {" "}
+          🇮🇳
+        </span>
+      </div>
+    </div>
+  )
 }
-export default Footer;
+export default Footer

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({
@@ -61,8 +73,11 @@ const Header = props => {
           className="mr-2"
         >
           <div className="text-xxs sm:text-sm border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1 px-2">
-            <StarIcon size={16} id="star-icon" className="px-1 w-6 star" />Star this repo
-            <span className="github-count px-1 sm:px-2">{stats.starsCount}</span>
+            <StarIcon size={16} id="star-icon" className="px-1 w-6 star" />
+            Star this repo
+            <span className="github-count px-1 sm:px-2">
+              {stats.starsCount}
+            </span>
           </div>
         </a>
         <a
@@ -71,8 +86,15 @@ const Header = props => {
           target="blank"
         >
           <div className="text-xxs sm:text-sm border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1 px-2">
-            <RepoForkedIcon size={16} id="fork-icon" className="px-1 w-6 fork" />Fork on GitHub
-            <span className="github-count px-1 sm:px-2">{stats.forksCount}</span>
+            <RepoForkedIcon
+              size={16}
+              id="fork-icon"
+              className="px-1 w-6 fork"
+            />
+            Fork on GitHub
+            <span className="github-count px-1 sm:px-2">
+              {stats.forksCount}
+            </span>
           </div>
         </a>
       </div>

src/components/layout.js

@@ -1,21 +1,18 @@
-import React from "react";
-import Header from "./header";
-import Footer from "./footer";
+import React from "react"
+import Header from "./header"
+import Footer from "./footer"
 
-
-const Layout = ({children}) => {
-    return (
-        <div className="flex flex-col min-h-screen">
-            <header>
-                <Header heading="GitHub Profile README Generator" />
-            </header>
-            <main className="flex-grow">
-                {children}
-            </main>
-            <footer>
-                <Footer />
-            </footer>
-        </div>
-    )
-};
-export default Layout;
+const Layout = ({ children }) => {
+  return (
+    <div className="flex flex-col min-h-screen">
+      <header>
+        <Header heading="GitHub Profile README Generator" />
+      </header>
+      <main className="flex-grow">{children}</main>
+      <footer>
+        <Footer />
+      </footer>
+    </div>
+  )
+}
+export default Layout

src/components/loader.js

@@ -1,40 +1,49 @@
-import React, { useRef, useEffect } from 'react';
-import gsap from 'gsap';
+import React, { useRef, useEffect } from "react"
+import gsap from "gsap"
 const Loader = () => {
-    let arrow = useRef([]);
-    useEffect(() => {
-        var tl = new gsap.timeline({repeat: -1});
-        tl.fromTo(arrow.current, {
-            y: 0,
-            color: '#3b3b4f',
-        }, {
-            y: -50,
-            color: '#d0d0d5',
-            stagger: 0.1,
-            duration: 0.5,
-            ease: 'Linear.easeNone'
-        });
-        tl.add('cp')
-        tl.fromTo(arrow.current, {
-            y: -50,
-            color: '#d0d0d5',
-        }, {
-            y: 0,
-            color: '#3b3b4f',
-            stagger: 0.1,
-            duration: 0.5,
-            ease: 'Linear.easeNone'
-        }, 'cp-=0.3');
-    });
-    return (
-        <div className="loader">
-            <span ref={el => (arrow.current[0] = el)}>↓</span>
-            <span ref={el => (arrow.current[1] = el)}>↓</span>
-            <span ref={el => (arrow.current[2] = el)}>↓</span>
-            <span ref={el => (arrow.current[3] = el)}>↓</span>
-            <span ref={el => (arrow.current[4] = el)}>↓</span>
-        </div>
+  let arrow = useRef([])
+  useEffect(() => {
+    var tl = new gsap.timeline({ repeat: -1 })
+    tl.fromTo(
+      arrow.current,
+      {
+        y: 0,
+        color: "#3b3b4f",
+      },
+      {
+        y: -50,
+        color: "#d0d0d5",
+        stagger: 0.1,
+        duration: 0.5,
+        ease: "Linear.easeNone",
+      }
     )
+    tl.add("cp")
+    tl.fromTo(
+      arrow.current,
+      {
+        y: -50,
+        color: "#d0d0d5",
+      },
+      {
+        y: 0,
+        color: "#3b3b4f",
+        stagger: 0.1,
+        duration: 0.5,
+        ease: "Linear.easeNone",
+      },
+      "cp-=0.3"
+    )
+  })
+  return (
+    <div className="loader">
+      <span ref={el => (arrow.current[0] = el)}>↓</span>
+      <span ref={el => (arrow.current[1] = el)}>↓</span>
+      <span ref={el => (arrow.current[2] = el)}>↓</span>
+      <span ref={el => (arrow.current[3] = el)}>↓</span>
+      <span ref={el => (arrow.current[4] = el)}>↓</span>
+    </div>
+  )
 }
 
-export default Loader;
+export default Loader

src/components/markdown.js

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

src/components/markdownPreview.js

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

src/components/skills.js

@@ -1,40 +1,104 @@
-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">
+        <label
+          htmlFor={skill}
+          className="skillCheckboxLabel cursor-pointer flex items-center justify-start"
+        >
           <input
             id={skill}
             type="checkbox"
             checked={props.skills[skill]}
-            onChange={(event) => props.handleSkillsChange(skill)}
+            onChange={event => props.handleSkillsChange(skill)}
+          />
+          <img
+            className="ml-4 w-8 h-8 sm:w-10 sm:h-10"
+            src={icons[skill]}
+            alt={skill}
           />
-          <img className="ml-4 w-8 h-8 sm:w-10 sm:h-10" src={icons[skill]} alt={skill} />
           <span className="tooltiptext">{skill}</span>
         </label>
-      </div>
+      </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

src/components/social.js

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

src/components/subtitle.js

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

src/components/title.js

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

src/components/work.js

@@ -10,21 +10,21 @@ const Work = props => {
         <input
           id="currentWork-prefix"
           placeholder="Hi, I'm "
-          className="placeholder-gray-700 mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.prefix.currentWork}
           onChange={event => props.handlePrefixChange("currentWork", event)}
         />
         <input
           id="currentWork"
           placeholder="project name"
-          className="placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.data.currentWork}
           onChange={event => props.handleDataChange("currentWork", event)}
         />
         <input
           id="currentWork-link"
           placeholder="project link"
-          className="placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.link.currentWork}
           onChange={event => props.handleLinkChange("currentWork", event)}
         />
@@ -32,21 +32,21 @@ const Work = props => {
       <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
         <input
           id="collaborateOn-prefix"
-          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.prefix.collaborateOn}
           onChange={event => props.handlePrefixChange("collaborateOn", event)}
         />
         <input
           id="collaborateOn"
           placeholder="project name"
-          className="placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.data.collaborateOn}
           onChange={event => props.handleDataChange("collaborateOn", event)}
         />
         <input
           id="collaborateOn-link"
           placeholder="project link"
-          className="placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.link.collaborateOn}
           onChange={event => props.handleLinkChange("collaborateOn", event)}
         />
@@ -54,21 +54,21 @@ const Work = props => {
       <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
         <input
           id="helpWith-prefix"
-          className="placeholder-gray-700 mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.prefix.helpWith}
           onChange={event => props.handlePrefixChange("helpWith", event)}
         />
         <input
           id="helpWith"
           placeholder="project name"
-          className="placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.data.helpWith}
           onChange={event => props.handleDataChange("helpWith", event)}
         />
         <input
           id="helpWith-link"
           placeholder="project link"
-          className="placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.link.helpWith}
           onChange={event => props.handleLinkChange("helpWith", event)}
         />
@@ -77,14 +77,14 @@ const Work = props => {
       <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
         <input
           id="currentLearn-prefix"
-          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.prefix.currentLearn}
           onChange={event => props.handlePrefixChange("currentLearn", event)}
         />
         <input
           id="currentLearn"
           placeholder="Frameworks, courses etc."
-          className="placeholder-gray-700 w-full sm:w-1/3  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 w-full sm:w-1/3  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.data.currentLearn}
           onChange={event => props.handleDataChange("currentLearn", event)}
         />
@@ -92,14 +92,14 @@ const Work = props => {
       <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
         <input
           id="ama-prefix"
-          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.prefix.ama}
           onChange={event => props.handlePrefixChange("ama", event)}
         />
         <input
           id="ama"
           placeholder="react, vue and gsap"
-          className="placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.data.ama}
           onChange={event => props.handleDataChange("ama", event)}
         />
@@ -108,14 +108,14 @@ const Work = props => {
       <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
         <input
           id="contact-prefix"
-          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.prefix.contact}
           onChange={event => props.handlePrefixChange("contact", event)}
         />
         <input
           id="contact"
           placeholder="example@gmail.com"
-          className="placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.data.contact}
           onChange={event => props.handleDataChange("contact", event)}
         />
@@ -124,14 +124,14 @@ const Work = props => {
       <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
         <input
           id="portfolio-prefix"
-          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.prefix.portfolio}
           onChange={event => props.handlePrefixChange("portfolio", event)}
         />
         <input
           id="portfolio"
           placeholder="portfolio link"
-          className="placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.link.portfolio}
           onChange={event => props.handleLinkChange("portfolio", event)}
         />
@@ -139,29 +139,45 @@ const Work = props => {
       <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
         <input
           id="blog-prefix"
-          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.prefix.blog}
           onChange={event => props.handlePrefixChange("blog", event)}
         />
         <input
           id="blog"
           placeholder="blog link"
-          className="placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.link.blog}
           onChange={event => props.handleLinkChange("blog", event)}
         />
       </div>
+      <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
+        <input
+          id="resume-prefix"
+          className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          value={props.prefix.resume}
+          onChange={event => props.handlePrefixChange("resume", event)}
+        />
+        <input
+          id="resume"
+          placeholder="resume link"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          value={props.link.resume}
+          onChange={event => props.handleLinkChange("resume", event)}
+        />
+      </div>
+      
       <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
         <input
           id="funFact-prefix"
-          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.prefix.funFact}
           onChange={event => props.handlePrefixChange("funFact", event)}
         />
         <input
           id="funFact"
-          placeholder="Chai over Coffee"
-          className="placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          placeholder="I think I am funny"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.data.funFact}
           onChange={event => props.handleDataChange("funFact", event)}
         />

src/constants/page-links.js

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

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,9 @@ const categorizedSkills = {
       "clojure",
       "rust",
       "haskell",
+      "coffeescript",
+      "elixir",
+      "erlang",
     ],
   },
 
@@ -43,6 +46,10 @@ const categorizedSkills = {
       "tailwind",
       "materialize",
       "bulma",
+      "gtk",
+      "qt",
+      "wx_widgets",
+      "ember",
     ],
   },
 
@@ -52,11 +59,13 @@ const categorizedSkills = {
       "nodejs",
       "spring",
       "express",
+      "graphql",
       "kafka",
       "solr",
       "rabbitMQ",
       "hadoop",
       "nginx",
+      "openresty",
     ],
   },
 
@@ -71,12 +80,13 @@ const categorizedSkills = {
       "xamarin",
       "reactnative",
       "ionic",
+      "apachecordova",
     ],
   },
 
   ai: {
     title: "AI/ML",
-    skills: ["tensorflow", "pytorch", "opencv"],
+    skills: ["tensorflow", "pytorch", "opencv", "scikit_learn"],
   },
 
   database: {
@@ -92,12 +102,15 @@ const categorizedSkills = {
       "hive",
       "realm",
       "mariadb",
+      "cockroachdb",
+      "elasticsearch",
+      "sqlite",
     ],
   },
 
   data_visualization: {
     title: "Data Visualization",
-    skills: ["d3js", "chartjs", "canvasjs"],
+    skills: ["d3js", "chartjs", "canvasjs", "kibana", "grafana"],
   },
 
   devops: {
@@ -111,12 +124,14 @@ const categorizedSkills = {
       "bash",
       "azure",
       "vagrant",
+      "circleci",
+      "travisci",
     ],
   },
 
   baas: {
     title: "Backend as a Service(BaaS)",
-    skills: ["firebase", "amplify"],
+    skills: ["firebase", "amplify", "heroku"],
   },
 
   framework: {
@@ -130,6 +145,7 @@ const categorizedSkills = {
       "codeigniter",
       "rails",
       "flask",
+      "quasar",
     ],
   },
 
@@ -151,22 +167,49 @@ 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"],
   },
 
   other: {
     title: "Other",
-    skills: ["linux", "git"],
+    skills: ["linux", "git", "arduino"],
   },
 }
 
@@ -181,6 +224,7 @@ const icons = {
     "https://devicons.github.io/devicon/devicon.git/icons/amazonwebservices/amazonwebservices-original-wordmark.svg",
   android:
     "https://devicons.github.io/devicon/devicon.git/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",
   bootstrap:
@@ -210,6 +254,7 @@ const icons = {
   express:
     "https://devicons.github.io/devicon/devicon.git/icons/express/express-original-wordmark.svg",
   go: "https://devicons.github.io/devicon/devicon.git/icons/go/go-original.svg",
+  graphql: "https://www.vectorlogo.zone/logos/graphql/graphql-icon.svg",
   gulp:
     "https://devicons.github.io/devicon/devicon.git/icons/gulp/gulp-plain.svg",
   html5:
@@ -232,12 +277,16 @@ const icons = {
     "https://devicons.github.io/devicon/devicon.git/icons/nginx/nginx-original.svg",
   nodejs:
     "https://devicons.github.io/devicon/devicon.git/icons/nodejs/nodejs-original-wordmark.svg",
+  openresty:
+    "https://symbols-electrical.getvecta.com/stencil_25/66_openresty.403a21ca72.svg",
   oracle:
     "https://devicons.github.io/devicon/devicon.git/icons/oracle/oracle-original.svg",
   photoshop:
     "https://devicons.github.io/devicon/devicon.git/icons/photoshop/photoshop-plain.svg",
+  xd: "https://cdn.worldvectorlogo.com/logos/adobe-xd.svg",
   php:
     "https://devicons.github.io/devicon/devicon.git/icons/php/php-original.svg",
+  perl: "https://api.iconify.design/logos-perl.svg",
   postgresql:
     "https://devicons.github.io/devicon/devicon.git/icons/postgresql/postgresql-original-wordmark.svg",
   python:
@@ -254,6 +303,7 @@ const icons = {
     "https://devicons.github.io/devicon/devicon.git/icons/sass/sass-original.svg",
   scala:
     "https://devicons.github.io/devicon/devicon.git/icons/scala/scala-original-wordmark.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:
@@ -325,32 +375,223 @@ const icons = {
   nextjs: "https://cdn.worldvectorlogo.com/logos/nextjs-3.svg",
   reactnative: "https://reactnative.dev/img/header_logo.svg",
   mariadb: "https://www.vectorlogo.zone/logos/mariadb/mariadb-icon.svg",
+  cockroachdb: "https://cdn.worldvectorlogo.com/logos/cockroachdb.svg",
   objectivec:
     "https://www.vectorlogo.zone/logos/apple_objectivec/apple_objectivec-icon.svg",
   clojure:
     "https://upload.wikimedia.org/wikipedia/commons/5/5d/Clojure_logo.svg",
   haskell:
     "https://upload.wikimedia.org/wikipedia/commons/1/1c/Haskell-Logo.svg",
-  svelte:
-    "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Svelte_Logo.svg/498px-Svelte_Logo.svg.png",
-  vuetify:
-    "https://seeklogo.com/images/V/vuetify-logo-3BCF73C928-seeklogo.com.png",
+  svelte: "https://upload.wikimedia.org/wikipedia/commons/1/1b/Svelte_Logo.svg",
+  vuetify: "https://bestofjs.org/logos/vuetify.svg",
   pug: "https://cdn.worldvectorlogo.com/logos/pug.svg",
-  mocha: "https://i.ibb.co/0MCw42Q/mocha.png",
-  jest: "https://i.ibb.co/Yj6p14L/jest.png",
-  cypress: "https://i.ibb.co/CWQq8gw/cypress.webp",
-  selenium: "https://i.ibb.co/9T29DD0/selenium.png",
-  puppeteer: "https://i.ibb.co/Qk299CX/puppeteer.png",
-  karma: "https://i.ibb.co/dbgh2DH/jasmine.png",
-  jasmine: "https://i.ibb.co/55txF2S/karma.png",
+  mocha: "https://www.vectorlogo.zone/logos/mochajs/mochajs-icon.svg",
+  jest: "https://www.vectorlogo.zone/logos/jestjsio/jestjsio-icon.svg",
+  cypress:
+    "https://raw.githubusercontent.com/simple-icons/simple-icons/6e46ec1fc23b60c8fd0d2f2ff46db82e16dbd75f/icons/cypress.svg",
+  selenium:
+    "https://raw.githubusercontent.com/detain/svg-logos/780f25886640cef088af994181646db2f6b1a3f8/svg/selenium-logo.svg",
+  puppeteer: "https://www.vectorlogo.zone/logos/pptrdev/pptrdev-official.svg",
+  karma:
+    "https://raw.githubusercontent.com/detain/svg-logos/780f25886640cef088af994181646db2f6b1a3f8/svg/karma.svg",
+  jasmine: "https://www.vectorlogo.zone/logos/jasmine/jasmine-icon.svg",
+  gtk: "https://upload.wikimedia.org/wikipedia/commons/7/71/GTK_logo.svg",
+  qt: "https://upload.wikimedia.org/wikipedia/commons/0/0b/Qt_logo_2016.svg",
+  wx_widgets:
+    "https://upload.wikimedia.org/wikipedia/commons/b/bb/WxWidgets.svg",
+  ember:
+    "https://devicons.github.io/devicon/devicon.git/icons/ember/ember-original-wordmark.svg",
+  scikit_learn:
+    "https://upload.wikimedia.org/wikipedia/commons/0/05/Scikit_learn_logo_small.svg",
+  quasar: "https://cdn.quasar.dev/logo/svg/quasar-logo.svg",
+  kibana:
+    "https://www.vectorlogo.zone/logos/elasticco_kibana/elasticco_kibana-icon.svg",
+  grafana: "https://www.vectorlogo.zone/logos/grafana/grafana-icon.svg",
+  elasticsearch: "https://www.vectorlogo.zone/logos/elastic/elastic-icon.svg",
+  circleci: "https://www.vectorlogo.zone/logos/circleci/circleci-icon.svg",
+  scully:
+    "https://raw.githubusercontent.com/scullyio/scully/main/assets/logos/SVG/scullyio-icon.svg",
+  "11ty":
+    "https://gist.githubusercontent.com/vivek32ta/c7f7bf583c1fb1c58d89301ea40f37fd/raw/f4c85cce5790758286b8f155ef9a177710b995df/11ty.svg",
+  sculpin:
+    "https://gist.githubusercontent.com/vivek32ta/c7f7bf583c1fb1c58d89301ea40f37fd/raw/1782aef8672484698c0dd407f900c4a329ed5bc4/sculpin.svg",
+  sapper:
+    "https://raw.githubusercontent.com/bestofjs/bestofjs-webui/master/public/logos/sapper.svg",
+  vuepress:
+    "https://raw.githubusercontent.com/AliasIO/wappalyzer/master/src/drivers/webextension/images/icons/VuePress.svg",
+  unity: "https://www.vectorlogo.zone/logos/unity3d/unity3d-icon.svg",
+  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",
+  coffeescript:
+    "https://www.vectorlogo.zone/logos/coffeescript/coffeescript-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",
+  postman: "https://www.vectorlogo.zone/logos/getpostman/getpostman-icon.svg",
+  erlang: "https://www.vectorlogo.zone/logos/erlang/erlang-official.svg",
+  sqlite: "https://www.vectorlogo.zone/logos/sqlite/sqlite-icon.svg",
+  middleman:
+    "https://raw.githubusercontent.com/leungwensen/svg-icon/b84b3f3a3da329b7c1d02346865f8e98beb05413/dist/svg/logos/middleman.svg",
+}
+
+const skillWebsites = {
+  arduino: "https://www.arduino.cc/",
+  solidworks: "https://www.solidworks.com/",
+  vuejs: "https://vuejs.org/",
+  react: "https://reactjs.org/",
+  angularjs: "https://angular.io",
+  aws: "https://aws.amazon.com",
+  android: "https://developer.android.com",
+  backbonejs: "https://backbonejs.org",
+  bootstrap: "https://getbootstrap.com",
+  c: "https://www.cprogramming.com/",
+  canvasjs: "https://canvasjs.com",
+  coffeescript: "https://offeescript.org",
+  codeigniter: "https://codeigniter.com",
+  cplusplus: "https://www.w3schools.com/cpp/",
+  css3: "https://www.w3schools.com/css/",
+  csharp: "https://www.w3schools.com/cs/",
+  d3js: "https://d3js.org/",
+  django: "https://www.djangoproject.com/",
+  docker: "https://www.docker.com/",
+  dotnet: "https://dotnet.microsoft.com/",
+  electron: "https://www.electronjs.org",
+  express: "https://expressjs.com",
+  go: "https://golang.org",
+  graphql: "https://graphql.org",
+  gulp: "https://gulpjs.com",
+  html5: "https://www.w3.org/html/",
+  hugo: "https://gohugo.io/",
+  java: "https://www.java.com",
+  javascript: "https://developer.mozilla.org/en-US/docs/Web/JavaScript",
+  ionic: "https://ionicframework.com",
+  laravel: "https://laravel.com/",
+  matlab: "https://www.mathworks.com/",
+  meteor: "https://www.meteor.com/",
+  mongodb: "https://www.mongodb.com/",
+  mysql: "https://www.mysql.com/",
+  nginx: "https://www.nginx.com",
+  nodejs: "https://nodejs.org",
+  openresty: "https://openresty.org/",
+  oracle: "https://www.oracle.com/",
+  photoshop: "https://www.photoshop.com/en",
+  xd: "https://www.adobe.com/products/xd.html",
+  php: "https://www.php.net",
+  perl: "https://www.perl.org/",
+  postgresql: "https://www.postgresql.org",
+  python: "https://www.python.org",
+  rails: "https://rubyonrails.org",
+  redis: "https://redis.io",
+  ruby: "https://www.ruby-lang.org/en/",
+  rust: "https://www.rust-lang.org",
+  sass: "https://sass-lang.com",
+  scala: "https://www.scala-lang.org",
+  symfony: "https://symfony.com",
+  spring: "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/",
+  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",
+  zapier: "https://zapier.com",
+  elixir: "https://elixir-lang.org",
+  travisci: "https://travis-ci.org",
+  apachecordova: "https://cordova.apache.org/",
+  coffeescript: "https://coffeescript.org/",
+  sqlite: "https://www.sqlite.org/",
+  postman: "https://postman.com",
+  erlang: "https://www.erlang.org/",
+  middleman: "https://middlemanapp.com/",
 }
 
 const initialSkillState = {}
 
-const skills = Object.keys(categorizedSkills)
-  .map(key => categorizedSkills[key].skills)
-  .flat()
-  .sort()
+const skillsArray = Object.keys(categorizedSkills).map(
+  key => categorizedSkills[key].skills
+)
+const skills = [].concat.apply([], skillsArray).sort()
 
 skills.forEach(skill => {
   initialSkillState[skill] = false
@@ -358,4 +599,11 @@ skills.forEach(skill => {
 
 const categories = Object.keys(categorizedSkills)
 
-export { initialSkillState, icons, skills, categorizedSkills, categories }
+export {
+  initialSkillState,
+  icons,
+  skills,
+  skillWebsites,
+  categorizedSkills,
+  categories,
+}

src/html.js

@@ -12,7 +12,17 @@ export default function HTML(props) {
           content="width=device-width, initial-scale=1, shrink-to-fit=no"
         />
         {props.headComponents}
-        <script data-name="BMC-Widget" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="rahuldkjain" data-description="Support me on Buy me a coffee!" data-message="Thank you for visiting. You can now buy me a coffee!" data-color="#FF813F" data-position="" data-x_margin="18" data-y_margin="18"></script>
+        <script
+          data-name="BMC-Widget"
+          src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
+          data-id="rahuldkjain"
+          data-description="Support me on Buy me a coffee!"
+          data-message="Loved the tool🚀. Buy me a coffee to support the work!"
+          data-color="#FF813F"
+          data-position=""
+          data-x_margin="18"
+          data-y_margin="18"
+        ></script>
       </head>
       <body {...props.bodyAttributes}>
         {props.preBodyComponents}

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/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/kafka.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">
+<path d="M32.5,26.6c-1.9,0-3.5,0.8-4.7,2.1l-2.9-2.1c0.3-0.9,0.5-1.8,0.5-2.7c0-0.9-0.2-1.9-0.5-2.7l2.9-2.1
+	c1.1,1.3,2.8,2.1,4.7,2.1c3.4,0,6.3-2.8,6.3-6.3S36,8.7,32.5,8.7s-6.3,2.8-6.3,6.3c0,0.6,0.1,1.2,0.3,1.8l-2.9,2.1
+	c-1.2-1.5-3-2.6-5-2.9v-3.5c2.8-0.6,5-3.1,5-6.1c0-3.4-2.8-6.3-6.3-6.3s-6.3,2.8-6.3,6.3c0,3,2.1,5.5,4.9,6.1v3.6
+	c-3.8,0.7-6.7,4-6.7,7.9c0,4,2.9,7.3,6.7,8v3.8c-2.8,0.6-4.9,3.1-4.9,6.1c0,3.4,2.8,6.3,6.3,6.3s6.3-2.8,6.3-6.3
+	c0-3-2.1-5.5-4.9-6.1v-3.8c1.9-0.3,3.7-1.3,4.9-2.9l3,2.1c-0.2,0.6-0.3,1.1-0.3,1.8c0,3.4,2.8,6.3,6.3,6.3s6.3-2.8,6.3-6.3
+	S36,26.6,32.5,26.6z M32.5,12c1.7,0,3,1.4,3,3s-1.4,3-3,3s-3-1.4-3-3S30.8,12,32.5,12z M14.3,6.3c0-1.7,1.4-3,3-3s3,1.4,3,3
+	s-1.4,3-3,3S14.3,7.9,14.3,6.3z M20.3,41.7c0,1.7-1.4,3-3,3s-3-1.4-3-3s1.4-3,3-3S20.3,40.1,20.3,41.7z M17.3,28.1
+	c-2.3,0-4.2-1.9-4.2-4.2c0-2.3,1.9-4.2,4.2-4.2c2.3,0,4.2,1.9,4.2,4.2C21.5,26.2,19.6,28.1,17.3,28.1z M32.5,35.9c-1.7,0-3-1.4-3-3
+	s1.4-3,3-3c1.7,0,3,1.4,3,3S34.2,35.9,32.5,35.9z"/>
+</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>

src/images/icons/Devops/circleci.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:#161616;}
+</style>
+<g transform="matrix(2.791226 0 0 2.791226 71.368826 91.588681)">
+	<circle class="st0" cx="-17.1" cy="-24.2" r="2"/>
+	<path class="st0" d="M-17.1-32.8c-4,0-7.4,2.7-8.3,6.4c0,0,0,0.1,0,0.1c0,0.2,0.2,0.4,0.4,0.4h3.5c0.2,0,0.3-0.1,0.4-0.2
+		c0,0,0,0,0,0c0.7-1.5,2.3-2.6,4.1-2.6c2.5,0,4.5,2,4.5,4.5s-2,4.5-4.5,4.5c-1.8,0-3.4-1.1-4.1-2.6c0,0,0,0,0,0
+		c-0.1-0.1-0.2-0.2-0.4-0.2H-25c-0.2,0-0.4,0.2-0.4,0.4c0,0,0,0.1,0,0.1c1,3.7,4.3,6.4,8.3,6.4c4.7,0,8.6-3.8,8.6-8.6
+		S-12.3-32.8-17.1-32.8L-17.1-32.8z"/>
+</g>
+</svg>

src/images/icons/Devops/docker.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:#03A9F4;}
+	.st1{fill:#0288D1;}
+	.st2{fill:#81D4FA;}
+	.st3{fill:#FFFFFF;}
+	.st4{fill:#37474F;}
+	.st5{fill:#01579B;}
+</style>
+<path class="st0" d="M41.5,19.6c0.4-1.9-0.1-4.1-2.7-6.5c-4.3,3.9-3,7.9-1.6,9.8c0,0-0.2,1.1-4.4,1.1S0,24,0,24s-2,17.5,17.5,17.5
+	c17,0,21.8-13.1,22.7-16.4C40.6,25,41,25,41.5,25c2.3,0,5.4-1.3,6.5-6C44.9,18,42.9,18.5,41.5,19.6z"/>
+<path class="st1" d="M0.2,28.3C1,33.5,4.3,41.4,17.5,41.4c13.3,0,19.1-8,21.5-13.1H0.2z"/>
+<path class="st2" d="M19.4,41.3c-1-0.4-5.5-1.2-6.3-7.6c-4.6,2-8.7,1.5-10.4,1.1c2.4,3.5,6.7,6.5,14.8,6.5
+	C18.1,41.4,18.8,41.4,19.4,41.3z"/>
+<path class="st3" d="M17.5,30.5c-1.2,0-2.2,1-2.2,2.2c0,1.2,1,2.2,2.2,2.2s2.2-1,2.2-2.2C19.6,31.5,18.7,30.5,17.5,30.5z"/>
+<path class="st4" d="M14.1,34.4c0.2,0.6,0,1.3-0.6,1.4c-3.6,1.1-6.7,1.2-9.1,1.2c-0.7-0.7-1.3-1.4-1.8-2.1c2.8,0,7.3-0.1,10-1.1
+	C13.2,33.7,13.8,33.9,14.1,34.4z M0,27.2c0,0,2,0.1,3.3-1.1c2,1.8,6.5,1.2,7.6,0c1.2,1.8,7.6,1.5,8.7,0c1.4,1.6,7.2,1.9,8.7,0
+	c0.5,1.6,7.4,2,8.7,0c1.2,1.2,5.5,2.1,8,0c0.6,1.3,2.9,1.1,2.9,1.1v1.1H0 M16.4,32.7c0,0.6,0.5,1.1,1.1,1.1s1.1-0.5,1.1-1.1
+	c0-0.6-0.5-1.1-1.1-1.1S16.4,32.1,16.4,32.7z"/>
+<path class="st5" d="M9.8,24H4.4v-5.5h5.5V24z M20.7,18.5h-5.5V24h5.5V18.5z M31.6,18.5h-5.5V24h5.5V18.5z M15.3,13H9.8v5.5h5.5V13z
+	 M26.2,13h-5.5v5.5h5.5V13z"/>
+<path class="st1" d="M15.3,24H9.8v-5.5h5.5V24z M26.2,18.5h-5.5V24h5.5V18.5z M26.2,7.6h-5.5V13h5.5V7.6z M20.7,13h-5.5v5.5h5.5V13z
+	"/>
+</svg>

src/images/icons/Devops/gcp.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:#EA4335;}
+	.st1{fill:#4285F4;}
+	.st2{fill:#34A853;}
+	.st3{fill:#FBBC05;}
+</style>
+<g>
+	<path class="st0" d="M30.5,15.4l1.5,0l4.2-4.2l0.2-1.8c-3.3-3-7.7-4.8-12.5-4.8c-8.7,0-16,5.9-18.1,13.9c0.5-0.3,1.4-0.1,1.4-0.1
+		l8.4-1.4c0,0,0.4-0.7,0.6-0.7c2-2.2,4.8-3.4,7.7-3.4C26.5,13,28.8,13.9,30.5,15.4L30.5,15.4z"/>
+	<path class="st1" d="M42.1,18.6c-1-3.6-3-6.7-5.7-9.1l-5.9,5.9c2.4,1.9,3.9,4.8,3.9,8.1v1c2.9,0,5.2,2.3,5.2,5.2
+		c0,2.9-2.3,5.2-5.2,5.2H24L23,36v6.3l1,1h10.4c7.5,0,13.6-6.1,13.6-13.6C48,25.1,45.7,21,42.1,18.6L42.1,18.6z"/>
+	<path class="st2" d="M13.6,43.3H24V35H13.6c-0.7,0-1.5-0.2-2.1-0.5l-1.5,0.5l-4.2,4.2l-0.4,1.4C7.7,42.3,10.6,43.3,13.6,43.3
+		L13.6,43.3z"/>
+	<path class="st3" d="M13.6,16.2C6.1,16.2,0,22.3,0,29.7c0,4.4,2.1,8.3,5.4,10.8l6-6c-1.9-0.8-3.1-2.7-3.1-4.8
+		c0-2.9,2.3-5.2,5.2-5.2c2.1,0,3.9,1.3,4.8,3.1l6-6C21.9,18.3,18,16.2,13.6,16.2L13.6,16.2z"/>
+</g>
+</svg>

src/images/icons/Devops/jenkins.svg

@@ -0,0 +1,144 @@
+<?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:#D33833;}
+	.st1{fill:#EF3D3A;}
+	.st2{fill:#231F20;}
+	.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#F0D6B7;}
+	.st4{fill-rule:evenodd;clip-rule:evenodd;fill:#335061;}
+	.st5{fill-rule:evenodd;clip-rule:evenodd;fill:#6D6B6D;}
+	.st6{fill-rule:evenodd;clip-rule:evenodd;fill:#DCD9D8;}
+	.st7{fill-rule:evenodd;clip-rule:evenodd;fill:#F7E4CD;}
+	.st8{fill:#F7E4CD;}
+	.st9{fill-rule:evenodd;clip-rule:evenodd;fill:#49728B;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+	.st11{fill:#FFFFFF;}
+	.st12{fill:none;stroke:#D33833;stroke-width:0.3855;stroke-miterlimit:6;}
+	.st13{fill-rule:evenodd;clip-rule:evenodd;fill:#EF3D3A;}
+	.st14{fill-rule:evenodd;clip-rule:evenodd;fill:#231F20;}
+	.st15{fill-rule:evenodd;clip-rule:evenodd;fill:#81B0C4;}
+	.st16{fill-rule:evenodd;clip-rule:evenodd;fill:#1D1919;}
+</style>
+<g>
+	<path class="st0" d="M40.8,23.1c0,9.5-7.5,17.2-16.8,17.2S7.2,32.6,7.2,23.1S14.7,5.9,24,5.9S40.8,13.6,40.8,23.1"/>
+	<path class="st1" d="M7.9,27.4c0,0-1.2-18,15.3-18.5L22,7l-9,3l-2.5,3l-2.2,4.3l-1.3,5l0.4,3.3"/>
+	<path class="st2" d="M12.5,11.4c-3,3-4.8,7.2-4.8,11.8S9.5,32,12.5,35s7,4.9,11.5,4.9S32.6,38,35.5,35s4.8-7.2,4.8-11.8
+		s-1.8-8.8-4.8-11.8s-7-4.9-11.5-4.9S15.4,8.4,12.5,11.4z M11.7,35.7c-3.1-3.2-5.1-7.6-5.1-12.5s1.9-9.3,5.1-12.5S19.2,5.5,24,5.5
+		c4.8,0,9.1,2,12.3,5.2c3.1,3.2,5.1,7.6,5.1,12.5s-1.9,9.3-5.1,12.5s-7.5,5.2-12.3,5.2S14.9,38.9,11.7,35.7"/>
+	<g>
+		<path class="st3" d="M31.1,23.2l-2.6,0.4L25.1,24l-2.2,0.1L20.6,24L19,23.5l-1.5-1.6l-1.2-3.3l-0.3-0.7l-1.5-0.5l-0.9-1.5L13,13.8
+			l0.7-1.9l1.7-0.6l1.3,0.6l0.6,1.4l0.8-0.1l0.3-0.3l-0.3-1.5l-0.1-1.9l0.4-2.6l0-1.5l1.2-1.9l2.1-1.5l3.6-1.6l4,0.6l3.5,2.5
+			l1.6,2.5l1,1.9l0.3,4.6l-0.8,4l-1.4,3.5L32,22.2"/>
+		<path class="st4" d="M28.9,34.3l-9.2,0.4v1.5l0.8,5.4l-0.4,0.5l-6.4-2.2l-0.5-0.8l-0.6-7.2l-1.5-4.4l-0.3-1l5.1-3.5l1.6-0.6
+			l1.4,1.7l1.2,1.1l1.4,0.4l0.6,0.2l0.8,3.3l0.6,0.7l1.5-0.5l-1,2l5.6,2.6L28.9,34.3"/>
+		<path class="st5" d="M13.7,11.9l1.7-0.6l1.3,0.6l0.6,1.4l0.8-0.1l0.2-0.8L17.9,11l0.4-3.5L18,5.6l1.2-1.3l2.5-2l-0.7-1L17.4,3
+			L16,4.2L15.1,6l-1.3,1.7l-0.4,2.1L13.7,11.9"/>
+		<path class="st6" d="M16.3,5.9c0,0,1-2.4,4.8-3.5s0.2-0.8,0.2-0.8l-4.2,1.6l-1.6,1.6L14.9,6L16.3,5.9 M14.4,11.5
+			c0,0-1.3-4.5,3.8-5.1L18,5.6l-3.5,0.8l-1,3.3l0.3,2.2L14.4,11.5"/>
+		<path class="st7" d="M16.5,17.5l0.8-0.8c0,0.2,0.2,0.4,0.4,0.5c0.1,0.5,0.3,4.5,3,6.7c0.3,0.2-2.1-0.3-2.1-0.3l-2.1-3.2
+			 M28.2,16.2c0,0,0.1-1.9,0.7-1.8c0.5,0.1,0.5,0.7,0.5,0.7S28.2,15.9,28.2,16.2"/>
+	</g>
+	<path class="st8" d="M33.6,9.1c0,0-1.1,0.2-1.2,1.2c-0.1,0.9,1.2,0.2,1.3,0.1 M25.8,9.2c0,0-1.4,0.2-1.4,1.1c0,0.9,1.6,0.8,2.1,0.4
+		"/>
+	<g>
+		<path class="st7" d="M17.1,13.4c0,0-2.4-1.5-2.7-0.1s-0.8,2.4,0.4,3.9L14,16.9l-0.8-2L12.9,13l1.5-1.5l1.7,0.1l1,0.8L17.1,13.4
+			 M18.3,9.3c0,0,1.1-5.6,6.6-6.8c4.5-0.9,6.9,0.2,7.8,1.2c0,0-4-4.8-7.9-3.3s-6.7,4.2-6.6,5.9L18.3,9.3 M33.1,4.4
+			c0,0-1.9-0.1-1.9,1.6c0,0.2,0.1,0.4,0.1,0.5c0,0,1.5-1.7,2.4-0.8 M25,6.7c0,0-0.3-2.6-2.5-1.1c-1.4,1-1.3,2.3-1,2.6
+			c0.3,0.2,0.2,0.8,0.4,0.4C22,8.3,22,7.1,22.7,6.8S24.5,6.1,25,6.7"/>
+		<path class="st9" d="M19,24.1l-6,2.7c0,0,2.5,9.9,1.2,13l-0.9-0.3l-0.1-3.8l-1.7-7.2l-0.7-2l6.3-4.2L19,24.1 M19.6,29.6l0.9,1v3.8
+			h-1l-0.1-3c0-0.3,0.1-1.5,0.1-1.5 M19.6,35l-2.9,0.1l0.8,0.6l2.1,0.3"/>
+		<g>
+			<path class="st4" d="M29.5,34.4l2.4-0.1l0.6,5.9L30,40.5L29.5,34.4"/>
+			<path class="st4" d="M30.1,34.4l3.6-0.2l1.5-3.9c0-0.2,1.3-5.4,1.3-5.4l-2.9-3L33,21.4l-1.5,1.5v6L30.1,34.4"/>
+		</g>
+		<path class="st9" d="M31.7,33.9l-2.2,0.5l0.3,1.8c0.8,0.4,2.2-0.6,2.2-0.6 M31.8,22.7l4.5,3.3l0.1-1.5L33,21.4L31.8,22.7"/>
+		<path class="st10" d="M21.8,47l-1.3-5.4l-0.7-4l-0.1-3l6-0.3h3.7l-0.3,6.8l0.6,5.2l-0.1,1l-4.9,0.4L21.8,47"/>
+		<path class="st6" d="M28.6,34.3c0,0-0.3,6.7,0.6,11.4c0,0-1.9,1.2-4.7,1.5l5.4-0.2l0.6-0.4l-0.8-10.5l-0.2-2.2"/>
+		<path class="st10" d="M32.5,39.7L35,39l4.7-0.3l0.7-2.2l-1.3-3.8l-1.5-0.2l-2.1,0.6l-2,1l-1-0.2l-0.8,0.3"/>
+		<path class="st6" d="M32.5,38.4c0,0,1.7-0.8,1.9-0.7l-0.7-3.5l0.8-0.3l0.6,3.7l3.9,0.2c0,0,0.8-1.5,0.6-3l0.7,2.1l0.1,1.2l-1,1.5
+			l-1.2,0.3l-1.9-0.1l-0.6-0.8l-2.2,0.3l-0.7,0.3"/>
+	</g>
+	<path class="st11" d="M30,33.9l-1.4-3.6l-1.5-2.1c0,0,0.3-0.9,0.8-0.9h1.5l1.4,0.5l-0.1,2.4L30,33.9"/>
+	<path class="st6" d="M30.3,32.7c0,0-1.8-3.5-1.8-4c0,0,0.3-0.8,0.8-0.6c0.4,0.2,1.4,0.7,1.4,0.7v-1.2l-2.2-0.4L27,27.3l2.5,5.9
+		l0.5,0.1"/>
+	<path class="st11" d="M22.4,24.2L20.6,24L19,23.5v0.6l0.8,0.9l2.5,1.2"/>
+	<g>
+		<path class="st6" d="M19.5,24.4c0,0,2,0.8,2.6,0.6l0.1,0.8l-1.8-0.4l-1.1-0.8L19.5,24.4"/>
+		<path class="st0" d="M32.5,27.5c-1.1,0-2.1-0.2-2.9-0.4c0.1-0.4-0.1-0.7,0-1c0.2-0.2,0.6-0.2,1-0.2c-0.3-0.2-0.8-0.2-1.1-0.1
+			c0-0.2-0.1-0.4-0.2-0.6c0.6-0.2,2.1-1.7,2.9-1.2c0.4,0.2,0.6,1.5,0.6,2.1C32.8,26.7,32.7,27.2,32.5,27.5"/>
+	</g>
+	<path class="st12" d="M32.5,27.5c-1.1,0-2.1-0.2-2.9-0.4c0.1-0.4-0.1-0.7,0-1c0.2-0.2,0.6-0.2,1-0.2c-0.3-0.2-0.8-0.2-1.1-0.1
+		c0-0.2-0.1-0.4-0.2-0.6c0.6-0.2,2.1-1.7,2.9-1.2c0.4,0.2,0.6,1.5,0.6,2.1C32.8,26.7,32.7,27.2,32.5,27.5z"/>
+	<path class="st0" d="M27.3,25.7l0,0.2c-0.3,0.2-0.9,0.2-1.3,0.4c0.5,0,1,0.2,1.4,0.3l0,0.6c-0.6,0.4-1.2,1.1-1.9,1.5
+		c-0.3,0.2-1.6,0.7-1.9,0.6c-0.2,0-0.2-0.3-0.3-0.6c-0.2-0.5-0.6-1.4-0.6-2.1c0-1-0.1-2.7,0.9-2.5c0.9,0.2,1.7,0.5,2.5,0.9
+		C26.5,25.4,26.7,25.7,27.3,25.7"/>
+	<path class="st12" d="M27.3,25.7l0,0.2c-0.3,0.2-0.9,0.2-1.3,0.4c0.5,0,1,0.2,1.4,0.3l0,0.6c-0.6,0.4-1.2,1.1-1.9,1.5
+		c-0.3,0.2-1.6,0.7-1.9,0.6c-0.2,0-0.2-0.3-0.3-0.6c-0.2-0.5-0.6-1.4-0.6-2.1c0-1-0.1-2.7,0.9-2.5c0.9,0.2,1.7,0.5,2.5,0.9
+		C26.5,25.4,26.7,25.7,27.3,25.7L27.3,25.7z"/>
+	<path class="st0" d="M27.9,26.9c-0.1-0.5-0.2-0.7-0.2-1.2C29.2,24.8,29.5,27.4,27.9,26.9"/>
+	<path class="st12" d="M27.9,26.9c-0.1-0.5-0.2-0.7-0.2-1.2C29.2,24.8,29.5,27.4,27.9,26.9z"/>
+	<path class="st13" d="M30,27.3c0,0-0.4-0.6-0.1-0.8c0.3-0.2,0.6,0,0.8-0.3c0.2-0.3,0-0.5,0.1-0.9s0.4-0.4,0.7-0.5
+		c0.3-0.1,1.2-0.2,1.3,0.1l-0.4-1.2l-0.8-0.3l-2.4,1.4l-0.1,0.7V27 M23.3,29.4l-0.2-3c-0.1-1.5,0.4-1.2,1.7-1.2
+		c0.2,0,1.2,0.2,1.3,0.4c0.3,0.7-0.6,0.6,0.4,1.1c0.8,0.5,2.3-0.3,2-1.3c-0.2-0.2-1-0.1-1.3-0.2l-1.5-0.8c-0.6-0.3-2.1-0.8-2.8-0.4
+		c-1.7,1.2,0.1,4.1,0.7,5.3"/>
+	<path class="st14" d="M25,6.7c-1.7-0.4-2.6,0.7-3.1,1.9c-0.5-0.1-0.3-0.8-0.1-1.1c0.3-0.9,1.6-2,2.6-1.9C24.7,5.8,25.3,6.2,25,6.7
+		 M33.5,8.7L33.5,8.7c0.5,0.8,0.8,1.7,1.3,2.4c-0.3,0.8-2.5,1.5-2.5,0.1c0.5-0.2,1.3,0,1.7-0.3C33.8,10.2,33.5,9.6,33.5,8.7
+		 M25.9,8.7c0.4,0.7,0.5,1.4,1,1.9c0.2,0.2,0.7,0.5,0.5,1.2c-0.2,0.3-0.4,0.4-0.7,0.6c-0.8,0.2-2.8,0.1-2.1-1c0.7,0,1.6,0.4,2.1-0.1
+		C26.4,10.7,25.6,9.5,25.9,8.7 M33.2,15.7c-1.3,0.8-2.7,1.7-4.7,1.5c-0.4-0.4-0.6-1.2-0.2-1.8c0.2,0.4,0.1,1.1,0.7,1.2
+		c1.2,0.2,2.5-0.7,3.4-1c0.5-0.9,0-1.2-0.5-1.8c-1-1.2-2.2-2.6-2.2-4.3c0.4-0.3,0.4,0.4,0.5,0.6c0.5,1.2,1.8,2.7,2.7,3.7
+		c0.2,0.2,0.6,0.5,0.6,0.6C33.6,14.8,33.2,15.4,33.2,15.7 M16.7,14.9c-0.4-0.2-0.5-1.2-0.9-1.2c-0.7,0-0.5,1.3-0.5,2.1
+		c-0.5-0.4-0.5-1.7-0.2-2.3c-0.4-0.2-0.6,0.2-0.8,0.3C14.5,11.7,17.1,12.8,16.7,14.9 M34,16.5c-0.6,1.1-1.4,2.3-3.1,2.4
+		c0-0.4-0.1-0.9,0-1.1C32.2,17.6,33,17,34,16.5 M25.8,17.2c1.1,0.6,3.1,0.6,4.6,0.6c0.1,0.3,0.1,0.7,0.1,1.1
+		C28.5,19.1,26.3,18.6,25.8,17.2 M25.6,18.3c0.8,1.9,3.4,1.7,5.5,1.6c-0.1,0.2-0.3,0.5-0.6,0.6c-0.7,0.3-2.6,0.5-3.6,0
+		c-0.6-0.3-1-1.1-1.4-1.5C25.5,18.9,24.6,18.3,25.6,18.3"/>
+	<path class="st15" d="M33.1,28.8l-2.8,4.4c0.4-1.3,0.6-3.5,0.7-5.1C31.9,27.7,32.7,28.2,33.1,28.8"/>
+	<path class="st14" d="M37.9,34.3c-1,0.2-1.7,1.2-2.7,1.1C35.8,34.6,36.7,34.3,37.9,34.3 M38.3,35.8c-0.8,0.1-1.8,0.2-2.6,0.1
+		C36.1,35.4,37.6,35.6,38.3,35.8 M38.6,37.1c-0.9,0-2,0-2.9-0.1C36.2,36.5,38,36.9,38.6,37.1"/>
+	<path class="st6" d="M31.4,40.8c0.1,1.1,0.6,2.3,0.5,3.5c-0.5,0.2-0.8,0.3-1.5,0.3L30.3,41C30.6,41,31.1,40.7,31.4,40.8"/>
+	<path class="st3" d="M29.9,24c-0.5,0.3-0.8,0.7-1.3,1c-1,0-1.5-0.1-2.2-0.6c0,0,0.1,0,0.1-0.1C27.6,24.7,28.9,24.1,29.9,24"/>
+	<path class="st15" d="M24.5,31.1c0.3-1.2,1.4-1.9,2.4-2.6c1.1,1.3,1.7,3,2.4,4.7C27.6,32.7,25.9,31.9,24.5,31.1"/>
+	<path class="st14" d="M30.3,41c0,1,0.1,2.6,0.1,3.7c0.7,0,1-0.1,1.5-0.3c0.1-1.3-0.4-2.4-0.5-3.5C31.1,40.7,30.6,41,30.3,41
+		L30.3,41z M19.8,35.2c0.4,4.1,1.1,7.5,2.3,11.1c2.6,0.8,5.8,0.9,8.1,0.1c-0.4-2-0.2-4.5-0.5-6.7l-0.3-5
+		C26.5,34.2,22.6,34.7,19.8,35.2L19.8,35.2z M30,34.9c0,1.8,0.1,3.5,0.2,5.2l1.8-0.3c-0.2-1.7-0.2-3.6-0.6-5.1
+		C30.9,34.7,30.5,34.7,30,34.9L30,34.9z M33.4,34.6c-0.3-0.1-0.7,0-1,0l0.6,4.5c0.5,0,0.7-0.2,1.1-0.3
+		C34.2,37.5,34.1,35.7,33.4,34.6L33.4,34.6z M38.6,39.3c1-0.2,1.6-1.5,1.3-2.7c-0.2-0.8-0.5-2.4-0.9-3c-0.3-0.4-1-0.9-1.6-0.6
+		c-0.9,0.6-2.6,0.8-3.3,1.5c0.3,1.1,0.4,2.7,0.6,4.1c1.2,0.1,2.6-0.3,3.6,0.1c-0.7,0.2-1.6,0.2-2.1,0.5
+		C36.8,39.5,37.9,39.5,38.6,39.3L38.6,39.3z M29.3,33.2c-0.7-1.7-1.3-3.4-2.4-4.7c-1,0.7-2.1,1.3-2.4,2.6
+		C25.9,31.9,27.6,32.7,29.3,33.2L29.3,33.2z M31,28.1c-0.1,1.7-0.3,3.8-0.7,5.1c1.1-1.3,1.9-2.9,2.8-4.4C32.7,28.2,32,27.7,31,28.1
+		L31,28.1z M29.1,27.4c-0.4,0-0.7,0.5-1.3,0.2L27.5,28c1.1,1.4,1.7,3.3,2.6,5c0.5-1.6,0.4-3.3,0.5-5C29.9,28.1,29.5,27.4,29.1,27.4
+		L29.1,27.4z M27.8,25.7c0,0.5,0.1,0.6,0.2,1.2C29.5,27.4,29.3,24.8,27.8,25.7z M26.1,25.2c-0.8-0.4-1.7-0.7-2.5-0.9
+		c-1.1-0.2-1,1.5-0.9,2.5c0,0.8,0.4,1.6,0.6,2.1c0.1,0.2,0.1,0.5,0.3,0.6c0.4,0.1,1.6-0.4,1.9-0.6c0.7-0.4,1.3-1.1,1.9-1.5l0-0.6
+		c-0.4-0.2-0.8-0.3-1.4-0.3c0.4-0.2,0.9-0.2,1.3-0.4l0-0.2C26.7,25.7,26.5,25.4,26.1,25.2L26.1,25.2z M19.7,24
+		c-0.6,0.6,1.6,1.3,2.2,1.4c0-0.4,0.2-0.7,0.2-0.9C21.3,24.3,20.2,24.4,19.7,24L19.7,24z M26.5,24.3C26.5,24.3,26.5,24.3,26.5,24.3
+		c0.6,0.6,1.2,0.8,2.1,0.7l1.3-1C28.9,24.1,27.6,24.7,26.5,24.3z M32.8,26.2c0-0.6-0.2-1.9-0.6-2.1c-0.8-0.5-2.3,1-2.9,1.2
+		c0.1,0.2,0.2,0.3,0.2,0.6c0.4-0.1,0.8,0,1.1,0.1c-0.4,0-0.8,0-1,0.2c-0.1,0.3,0,0.6,0,1c0.9,0.2,1.8,0.4,2.9,0.4
+		C32.8,27.2,32.9,26.7,32.8,26.2z M18.8,24.5c-0.2-0.1-1.4-1.7-1.5-1.6c-2.1,0.8-4.1,2.3-5.9,3.7c1.7,3.6,2.4,8.1,2.5,12.4
+		c2,0.9,3.7,2.2,6.3,2.4l-0.8-6.1c-0.7-0.3-1.6,0-2.2-0.1c0-0.8,0.9-0.3,1-0.8c0.1-0.4-0.5-0.4-0.3-1c0.5,0.2,0.7,0.6,1.3,0.7
+		c0.5-1,0-2.9,0.1-3.8c0-0.2,0.1-0.9,0.4-0.8c0.3,0.1,0,2,0,2.8c0,0.8-0.1,1.5,0.2,2c2.6-0.3,5.1-0.6,7.9-0.6
+		c-0.6-0.3-1.3-0.5-2.1-1c-0.4-0.2-1.8-0.7-1.9-1.2c-0.2-0.6,0.5-1,0.6-1.6c-1.3,0.7-1.5-0.7-1.8-1.7c-0.3-0.9-0.4-1.5-0.5-2.1
+		C20.9,25.7,19.7,25.2,18.8,24.5L18.8,24.5z M31.7,23.1c1.8-0.9,2.1,3.2,1.4,4.5c0.1,0.4,0.5,0.5,0.6,0.9l-3.1,5.2
+		c0.8-0.5,1.8-0.1,2.7-0.4c0.3-0.1,0.6-0.9,0.8-1.5c0.7-1.6,1.4-3.7,1.7-5.2c0.1-0.4,0.3-1.1,0.2-1.4c-0.1-0.6-0.8-1-1.2-1.4
+		L32.9,22C32.6,22.4,31.9,22.7,31.7,23.1L31.7,23.1z M14.7,7.4c-0.8,0.9-0.7,2.7-0.6,3.9c1.5-1,3.6,0.1,3.5,1.7
+		c0.7,0,0.3-0.9,0.1-1.5c-0.4-1.9,0.7-3.9,0.1-5.6C16.5,6,15.5,6.5,14.7,7.4L14.7,7.4z M20.7,2c-1.9,0.5-4.4,1.9-5.2,3.7
+		c0.6-0.1,1-0.4,1.6-0.4c0.2,0,0.5,0.1,0.8,0c0.5-0.1,1-1.3,1.4-1.7c0.4-0.4,0.8-0.6,1.2-1C20.7,2.4,21,2.4,21,2.1
+		C20.9,2,20.8,1.9,20.7,2L20.7,2z M30.7,2.5c-2-1.1-5.4-2-7.5-0.9c-1.7,0.9-4,2.3-4.8,4.1c0.7,1.7-0.2,3.3-0.3,5.1
+		c0,0.9,0.4,1.7,0.5,2.8c-0.3,0.4-1,0.5-1.6,0.4c-0.2-0.9-0.5-1.9-1.4-2c-1.3-0.1-2.3,0.9-2.3,2.1c-0.1,1.3,1,3.5,2.6,3.4
+		c0.6-0.1,0.7-0.7,1.4-0.7c0.4,0.7-0.5,0.9-0.6,1.4c0,0.1,0.1,0.6,0.1,0.9c0.3,1.2,0.9,2.7,1.5,3.5c0.8,1.1,2.3,1.3,4,1.4
+		c0.3-0.6,1.4-0.6,2.1-0.4c-0.8-0.3-1.6-1.2-2.3-1.9c-0.8-0.8-1.5-1.7-1.6-2.8c1.4,2,2.6,3.7,5.2,4.6c2,0.7,4.2-0.3,5.7-1.4
+		c0.6-0.4,1-1.1,1.4-1.8c1.7-2.4,2.4-5.8,2.3-9.1c-0.1-1.4-0.1-2.7-0.5-3.6c-0.5-1-2.1-1.8-3-0.9c-0.2-0.9,0.8-1.5,1.9-1.2
+		C32.7,4.4,31.9,3.1,30.7,2.5L30.7,2.5z M34.4,33.2c1.6-0.8,4.5-2.1,5.4,0c0.4,0.8,0.8,2.1,1,2.9c0.3,1.1-0.3,3.5-1.4,3.8
+		c-1,0.3-2.2,0.3-3.4,0.1c-0.1-0.1-0.3-0.3-0.4-0.5c-0.9,0-1.7,0-2.4,0.4c0.1,0.6-0.4,0.8-0.8,0.9c-0.3,1.2,0.6,2.8,0.4,3.9
+		c-0.2,0.8-1.1,0.9-1.8,1.1c0,0.4,0,0.8,0.1,1.2c-0.2,0.6-0.9,0.9-1.6,1c-2.3,0.3-5.7,0.4-7.9-0.4c-0.6-1.5-1.1-3.3-1.6-5
+		c-2.1,0.2-3.8-0.9-5.5-1.7c-0.6-0.3-1.3-0.4-1.5-0.8c-0.2-0.4-0.1-1.3-0.2-2c-0.1-2-0.2-3.9-0.8-6c-0.2-0.9-0.6-1.7-0.9-2.6
+		c-0.3-0.8-0.7-1.8-0.9-2.6c-0.2-1.2,1-1.3,1.7-1.8c1.1-0.8,2-1.3,3.2-2c0.4-0.2,1.5-0.8,1.6-1c0.2-0.5-0.4-1.2-0.6-1.6
+		c-0.3-0.6-0.4-1.1-0.5-1.8c-1-0.2-1.8-0.8-2.3-1.5c-0.8-1.1-1.3-3.2-0.6-4.8c0.1-0.1,0.3-0.4,0.4-0.6c0.1-0.4-0.1-0.9-0.2-1.3
+		c-0.1-2.1,0.4-3.9,1.8-4.5c0.6-2.2,2.6-3,4.5-4.1c0.7-0.4,1.5-0.7,2.3-1c2.9-1.1,7.4-0.9,9.8,1c1,0.8,2.7,2.4,3.3,3.6
+		c1.6,3.1,1.4,8.4,0.4,12.2c-0.1,0.5-0.4,1.3-0.7,1.9c-0.2,0.4-0.8,1.3-0.8,1.7c0.1,0.4,1.5,1.4,1.8,1.7c0.5,0.5,1.5,1.2,1.6,1.8
+		c0.1,0.7-0.3,1.6-0.5,2.3L34.4,33.2"/>
+	<path class="st7" d="M24.1,17.7c0.1-0.1,0.5-0.3,1.2,0c0,0-0.8,0.1-0.7,1.4l-0.3-0.1C24.2,19.1,23.9,18,24.1,17.7"/>
+	<path class="st16" d="M29.7,28.8c0,0.2-0.2,0.4-0.4,0.4S29,29,29,28.8s0.2-0.4,0.4-0.4S29.7,28.6,29.7,28.8 M30,30.4
+		c0,0.2-0.2,0.4-0.4,0.4s-0.4-0.2-0.4-0.4s0.2-0.4,0.4-0.4S30,30.2,30,30.4"/>
+</g>
+</svg>

src/images/icons/Devops/kubernetes.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:#326CE5;}
+	.st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:8.250000e-02;stroke-miterlimit:6;}
+</style>
+<g>
+	<path class="st0" d="M23.8,0.7c-0.4,0-0.8,0.1-1.2,0.3L5.9,9C5,9.4,4.4,10.2,4.2,11.2L0.1,29.1c-0.2,0.8,0,1.7,0.5,2.4
+		c0.1,0.1,0.1,0.2,0.2,0.3l11.6,14.4c0.6,0.8,1.5,1.2,2.5,1.2h18.5c1,0,1.9-0.4,2.5-1.2l11.5-14.4c0.6-0.8,0.8-1.7,0.6-2.7
+		l-4.1-17.9c-0.2-0.9-0.9-1.7-1.7-2.1L25.4,1C24.9,0.8,24.4,0.7,23.8,0.7L23.8,0.7z"/>
+	<path class="st1" d="M24,6.8c-0.6,0-1,0.5-1,1.1v0.3c0,0.3,0.1,0.6,0.1,0.9c0.1,0.6,0.1,1.2,0.1,1.8c-0.1,0.2-0.2,0.4-0.3,0.5
+		l0,0.4c-0.6,0.1-1.2,0.1-1.8,0.3c-2.5,0.6-4.8,1.9-6.5,3.7l-0.4-0.3c-0.2,0.1-0.4,0-0.6-0.1c-0.5-0.4-0.9-0.8-1.3-1.2
+		c-0.2-0.2-0.4-0.5-0.7-0.7l-0.2-0.2c-0.2-0.2-0.4-0.3-0.7-0.3c-0.3,0-0.6,0.1-0.8,0.4c-0.3,0.5-0.2,1.1,0.2,1.5l0.2,0.2
+		c0.3,0.2,0.5,0.3,0.8,0.5c0.5,0.3,1,0.6,1.5,1c0.1,0.2,0.2,0.4,0.2,0.6l0.3,0.3c-1.8,2.6-2.5,5.9-2,9l-0.4,0.1
+		c-0.1,0.2-0.3,0.3-0.4,0.4c-0.6,0.2-1.2,0.3-1.8,0.3c-0.3,0-0.6,0-1,0.1l-0.3,0.1h0c-0.5,0.1-0.9,0.6-0.9,1.1
+		c0,0.2,0.1,0.4,0.3,0.6c0.3,0.3,0.7,0.4,1,0.2h0l0.3,0c0.3-0.1,0.6-0.2,0.9-0.3c0.6-0.2,1.1-0.4,1.7-0.5c0.2,0,0.4,0.1,0.6,0.2
+		l0.5-0.1c1,3,3,5.6,5.8,7.2l-0.2,0.4c0.1,0.2,0.1,0.4,0.1,0.6c-0.2,0.6-0.6,1.1-0.9,1.6c-0.2,0.3-0.4,0.5-0.5,0.8l-0.1,0.3
+		c-0.3,0.5-0.1,1.1,0.4,1.4c0.2,0.1,0.4,0.2,0.6,0.1c0.4,0,0.7-0.3,0.8-0.6l0.1-0.3c0.1-0.3,0.2-0.6,0.3-0.9
+		c0.3-0.7,0.4-1.4,0.8-1.8c0.1-0.1,0.3-0.2,0.4-0.2l0.2-0.4c3,1.1,6.2,1.1,9.2,0l0.2,0.4c0.2,0,0.4,0.1,0.5,0.3
+		c0.3,0.5,0.5,1.1,0.7,1.7c0.1,0.3,0.2,0.6,0.3,0.9l0.1,0.3c0.2,0.5,0.8,0.8,1.3,0.6c0.2-0.1,0.4-0.2,0.5-0.4c0.2-0.3,0.2-0.7,0-1.1
+		l-0.1-0.3c-0.2-0.3-0.3-0.5-0.5-0.8c-0.3-0.5-0.6-1-0.9-1.6c0-0.2,0-0.4,0.1-0.6c-0.1-0.1-0.1-0.3-0.2-0.4c2.7-1.6,4.8-4.2,5.7-7.2
+		l0.4,0.1c0.2-0.1,0.4-0.2,0.6-0.2c0.6,0.1,1.2,0.3,1.7,0.5c0.3,0.1,0.6,0.2,0.9,0.3c0.1,0,0.2,0,0.3,0.1h0c0.5,0.2,1.1-0.1,1.3-0.6
+		c0.1-0.2,0.1-0.4,0-0.6c-0.1-0.4-0.4-0.6-0.8-0.7l-0.3-0.1c-0.3,0-0.6-0.1-1-0.1c-0.6,0-1.2-0.1-1.8-0.3c-0.2-0.1-0.3-0.3-0.4-0.4
+		l-0.4-0.1c0.4-3.2-0.3-6.3-2.1-9l0.4-0.3c0-0.2,0.1-0.4,0.2-0.6c0.5-0.4,1-0.7,1.5-1c0.3-0.1,0.6-0.3,0.8-0.5l0.2-0.2
+		c0.5-0.3,0.6-0.9,0.3-1.4c-0.1-0.2-0.3-0.3-0.5-0.4c-0.4-0.1-0.8,0-1,0.2l-0.2,0.2c-0.2,0.2-0.5,0.5-0.7,0.7
+		c-0.4,0.5-0.8,0.9-1.3,1.2c-0.2,0.1-0.4,0.1-0.6,0.1l-0.4,0.3c-2.2-2.3-5.1-3.7-8.3-4c0-0.1,0-0.4,0-0.4c-0.2-0.1-0.3-0.3-0.3-0.5
+		c0-0.6,0-1.2,0.1-1.8C24.9,8.9,25,8.5,25,8.2V7.9C25,7.4,24.6,6.9,24,6.8L24,6.8z M22.7,14.6l-0.3,5.2h0c0,0.3-0.2,0.6-0.5,0.8
+		s-0.6,0.1-0.9-0.1l-4.3-3c1.4-1.3,3.1-2.3,5-2.7C22,14.7,22.4,14.6,22.7,14.6L22.7,14.6z M25.2,14.6c2.3,0.3,4.4,1.3,6,2.9l-4.3,3
+		c-0.3,0.2-0.6,0.3-0.9,0.1s-0.5-0.4-0.5-0.8L25.2,14.6z M15.2,19.4l3.9,3.5v0c0.2,0.2,0.4,0.5,0.3,0.9c-0.1,0.3-0.3,0.6-0.6,0.7v0
+		l-5,1.5C13.5,23.6,14,21.3,15.2,19.4L15.2,19.4z M32.8,19.4c1.2,1.9,1.7,4.2,1.5,6.5l-5.1-1.5v0c-0.3-0.1-0.6-0.3-0.6-0.7
+		c-0.1-0.3,0-0.6,0.3-0.9L32.8,19.4L32.8,19.4z M23.2,23.2h1.6l1,1.2L25.4,26L24,26.7L22.5,26l-0.3-1.6L23.2,23.2z M28.3,27.4
+		c0.1,0,0.1,0,0.2,0l5.2,0.9c-0.8,2.2-2.2,4-4.2,5.2l-2-4.9c-0.2-0.5,0-1,0.5-1.2C28.1,27.5,28.2,27.5,28.3,27.4L28.3,27.4z
+		 M19.6,27.5c0.3,0,0.6,0.2,0.7,0.4c0.2,0.2,0.2,0.6,0.1,0.8v0l-2,4.8c-1.9-1.2-3.4-3-4.1-5.2l5.2-0.9
+		C19.5,27.5,19.5,27.5,19.6,27.5L19.6,27.5z M24,29.6c0.3,0,0.6,0.2,0.8,0.5h0l2.5,4.6l-1,0.3c-1.9,0.4-3.8,0.3-5.6-0.3l2.6-4.6
+		C23.4,29.8,23.7,29.6,24,29.6L24,29.6z"/>
+</g>
+</svg>

src/images/icons/Devops/vagrant.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:#1159CC;}
+	.st1{fill:#127EFF;}
+</style>
+<g>
+	<path class="st0" d="M28.2,31.8L24,34.7V48l9-5.2L47.2,8.1V3.7L36.7,9.8v3.7L28.2,31.8z M11.3,9.8v3.7l8.4,19l4.2-2.1v-5.3
+		l-6.3-14.8V6.2l0,0L11.3,9.8z"/>
+	<path class="st1" d="M30.3,6.2v4.2L24,25.2v4.9l-4.2,2.4l-8.4-19V9.8l6.3-3.6L7.1,0L0.8,3.7v4.5L15,42.8l9,5.2V35l4.2-2.4l0,0
+		l8.5-19V9.8l10.6-6.1L40.9,0L30.3,6.2L30.3,6.2z"/>
+</g>
+</svg>

src/images/icons/Framework/codeigniter.svg

@@ -0,0 +1,16 @@
+<?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:#EE4323;}
+</style>
+<g>
+	<path class="st0" d="M16.9,48c-2.9-1.2-5.6-4.4-5.6-7.6c0-3.5,2.2-6.5,5-8.5c-0.3,1.3-0.5,2.4,0.3,3.6c0.8,1.1,2.1,1.6,3.4,1.3
+		c3-0.7,3.1-3.9,1.3-5.8c-1.7-1.9-3.4-4-2.8-6.8c0.3-1.4,1.2-2.7,2.2-3.6c-0.8,2.2,1.5,4.3,3,5.3c2.7,1.8,5.6,3.2,8,5.4
+		c2.6,2.3,4.5,5.3,4.1,8.9c-0.4,3.8-3.5,6.5-6.9,7.9c7.2-1.6,14.7-7.2,14.9-15.2c0.1-6.6-4.4-11.7-10-14.6L33.7,18
+		c0.2,0.4,0.2,0.7,0.2,1c0-0.2,0.1-0.4,0.1-0.7c0,0.3,0,0.5-0.1,0.8l0-0.1c-0.1,0.4-0.2,0.7-0.4,1l0.1-0.1c-1.1,1.9-4.2,2.3-5.6,0.3
+		c-2.4-3.1,0-6.4,0.4-9.7c0.4-4.1-2.1-8.1-5.3-10.5c1.8,2.8-0.6,6.6-2.4,8.7c-1.8,2-4,3.7-6,5.6c-2.1,2-4.2,4.1-5.9,6.4
+		C5.1,25.4,3,31.3,4.5,37.1C6.1,43,11.2,46.7,16.9,48L16.9,48z"/>
+</g>
+</svg>

src/images/icons/Framework/django.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:#092E20;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M5.7,15.6h2.6v12.2c-1.3,0.3-2.3,0.4-3.4,0.4c-3.2,0-4.9-1.4-4.9-4.2c0-2.7,1.8-4.4,4.5-4.4
+			c0.4,0,0.7,0,1.1,0.1C5.7,19.6,5.7,15.6,5.7,15.6z M5.7,21.7c-0.3-0.1-0.6-0.1-0.9-0.1c-1.3,0-2.1,0.8-2.1,2.2
+			c0,1.4,0.7,2.2,2.1,2.2c0.3,0,0.5,0,0.9-0.1V21.7z"/>
+		<path class="st0" d="M12.5,19.7v6.1c0,2.1-0.2,3.1-0.6,4c-0.4,0.8-1,1.4-2.1,1.9l-2.4-1.2c1.2-0.5,1.7-1,2.1-1.8
+			c0.4-0.7,0.5-1.6,0.5-3.9v-5.2H12.5z M9.8,15.6h2.6v2.7H9.8V15.6z"/>
+		<path class="st0" d="M14,20.3c1.2-0.5,2.3-0.8,3.5-0.8c1.3,0,2.2,0.4,2.6,1.1c0.2,0.4,0.3,0.9,0.3,2v5.3c-1.2,0.2-2.7,0.3-3.8,0.3
+			c-2.2,0-3.2-0.8-3.2-2.5c0-1.8,1.3-2.7,4.5-3v-0.6c0-0.5-0.2-0.6-0.9-0.6c-1,0-2.1,0.3-3.1,0.8L14,20.3L14,20.3z M18.2,24.4
+			c-1.7,0.2-2.3,0.4-2.3,1.1c0,0.5,0.3,0.7,1,0.7c0.4,0,0.7,0,1.3-0.1C18.2,26.2,18.2,24.4,18.2,24.4z"/>
+		<path class="st0" d="M21.7,20.1c1.6-0.4,2.8-0.6,4.1-0.6c1.3,0,2.3,0.3,2.9,0.9c0.5,0.6,0.7,1.2,0.7,2.5V28h-2.6v-5
+			c0-1-0.3-1.4-1.3-1.4c-0.4,0-0.7,0-1.2,0.2V28h-2.6V20.1z"/>
+		<path class="st0" d="M30.5,29.5c0.9,0.5,1.8,0.7,2.8,0.7c1.7,0,2.5-0.7,2.5-2.4c0,0,0,0,0-0.1c-0.5,0.3-1,0.4-1.7,0.4
+			c-2.3,0-3.8-1.5-3.8-3.9c0-3,2.2-4.7,6-4.7c1.1,0,2.2,0.1,3.4,0.4l-0.9,1.9c-0.7-0.1-0.1,0-0.6-0.1V22l0,1.1l0,1.4
+			c0,0.4,0,0.7,0,1.1c0,0.3,0,0.5,0,0.7c0,2.3-0.2,3.3-0.7,4.2c-0.8,1.3-2.2,1.9-4.2,1.9c-1,0-1.9-0.2-2.8-0.5L30.5,29.5L30.5,29.5z
+			 M35.7,21.6C35.7,21.6,35.6,21.6,35.7,21.6h-0.3c-0.5,0-1.1,0.1-1.5,0.4c-0.6,0.4-1,1-1,1.9c0,1.3,0.6,2.1,1.8,2.1
+			c0.4,0,0.6-0.1,1-0.2v-0.2v-0.7c0-0.3,0-0.6,0-1l0-1.2l0-0.9L35.7,21.6L35.7,21.6z"/>
+		<path class="st0" d="M43.8,19.4c2.6,0,4.2,1.7,4.2,4.3c0,2.7-1.7,4.5-4.3,4.5c-2.6,0-4.2-1.7-4.2-4.3
+			C39.4,21.2,41.1,19.4,43.8,19.4z M43.7,26.1c1,0,1.6-0.8,1.6-2.3c0-1.4-0.6-2.3-1.6-2.3c-1,0-1.6,0.8-1.6,2.3
+			C42.1,25.3,42.7,26.1,43.7,26.1z"/>
+	</g>
+</g>
+</svg>

src/images/icons/Framework/dotnet.svg

@@ -0,0 +1,55 @@
+<?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:#672A7A;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g id="XMLID_1_">
+	<rect id="XMLID_5_" class="st0" width="48" height="48"/>
+	<g id="XMLID_3_">
+		<path id="XMLID_4_" class="st1" d="M30.9,18.3c0.2-0.2,0.4-0.5,0.4-0.8c0-0.3-0.1-0.5-0.3-0.7c-0.1-0.2-0.4-0.3-0.7-0.4
+			c-0.3-0.1-0.5-0.2-0.6-0.3c-0.1-0.1-0.2-0.2-0.2-0.4c0-0.2,0.1-0.3,0.2-0.4c0.1-0.1,0.3-0.2,0.5-0.2c0.3,0,0.6,0.1,0.9,0.3v-0.6
+			c-0.2-0.1-0.5-0.2-0.9-0.2c-0.4,0-0.7,0.1-1,0.3c-0.3,0.2-0.4,0.5-0.4,0.8c0,0.3,0.1,0.5,0.2,0.7c0.1,0.2,0.4,0.3,0.7,0.5
+			c0.3,0.1,0.6,0.3,0.7,0.4c0.1,0.1,0.2,0.2,0.2,0.4c0,0.4-0.2,0.6-0.8,0.6c-0.4,0-0.7-0.1-1-0.4v0.7c0.3,0.2,0.6,0.2,1,0.2
+			C30.2,18.7,30.6,18.6,30.9,18.3z"/>
+		<path id="XMLID_29_" class="st1" d="M36.9,18.6h0.6v-3.5h0.9v-0.5h-0.9V14c0-0.6,0.2-0.9,0.7-0.9c0.2,0,0.3,0,0.4,0.1v-0.6
+			c-0.1-0.1-0.3-0.1-0.5-0.1c-0.3,0-0.6,0.1-0.9,0.3c-0.3,0.2-0.4,0.6-0.4,1v0.7h-0.7v0.5h0.7V18.6z"/>
+		<path id="XMLID_30_" class="st1" d="M16.4,13.6c0.1,0,0.2,0,0.3-0.1c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.2-0.1-0.3
+			c-0.1-0.1-0.2-0.1-0.3-0.1c-0.1,0-0.2,0-0.3,0.1C16.1,12.9,16,13,16,13.1c0,0.1,0,0.2,0.1,0.3C16.2,13.5,16.3,13.6,16.4,13.6z"/>
+		<path id="XMLID_31_" class="st1" d="M19.7,18.7c0.4,0,0.8-0.1,1.1-0.3v-0.6c-0.3,0.2-0.6,0.3-1,0.3c-0.4,0-0.7-0.1-1-0.4
+			c-0.2-0.3-0.4-0.6-0.4-1.1c0-0.5,0.1-0.9,0.4-1.2c0.3-0.3,0.6-0.4,1-0.4c0.3,0,0.7,0.1,1,0.3v-0.7c-0.3-0.1-0.6-0.2-0.9-0.2
+			c-0.6,0-1.1,0.2-1.5,0.6c-0.4,0.4-0.6,0.9-0.6,1.6c0,0.6,0.2,1.1,0.5,1.4C18.6,18.5,19.1,18.7,19.7,18.7z"/>
+		<path id="XMLID_34_" class="st1" d="M42.5,14.9h0.1c0.1,0,0.2,0.1,0.2,0.2l0.1,0.3h0.2l-0.2-0.4c-0.1-0.1-0.1-0.2-0.2-0.2l0,0
+			c0.1,0,0.2-0.1,0.2-0.1c0.1-0.1,0.1-0.1,0.1-0.2c0-0.1,0-0.2-0.1-0.3c-0.1-0.1-0.2-0.1-0.4-0.1h-0.4v1.4h0.2L42.5,14.9L42.5,14.9z
+			 M42.5,14.3h0.2c0.1,0,0.2,0,0.2,0.1c0,0,0.1,0.1,0.1,0.2c0,0.2-0.1,0.2-0.3,0.2h-0.2C42.5,14.8,42.5,14.3,42.5,14.3z"/>
+		<path id="XMLID_35_" class="st1" d="M39.6,17.5c0,0.8,0.4,1.2,1.1,1.2c0.2,0,0.4,0,0.6-0.1V18c-0.1,0.1-0.2,0.1-0.4,0.1
+			c-0.2,0-0.4-0.1-0.5-0.2c-0.1-0.1-0.1-0.3-0.1-0.6v-2.3h1v-0.5h-1v-1.2c-0.2,0.1-0.4,0.1-0.6,0.2v1h-0.7v0.5h0.7V17.5z"/>
+		<path id="XMLID_40_" class="st1" d="M42.7,15.9c0.3,0,0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8s-0.1-0.6-0.3-0.8
+			c-0.2-0.2-0.5-0.3-0.7-0.3c-0.3,0-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.7c0,0.3,0.1,0.6,0.3,0.8C42.2,15.8,42.4,15.9,42.7,15.9
+			z M42.1,14.1c0.2-0.2,0.4-0.3,0.7-0.3c0.3,0,0.5,0.1,0.7,0.3c0.2,0.2,0.3,0.4,0.3,0.7s-0.1,0.5-0.3,0.7c-0.2,0.2-0.4,0.3-0.7,0.3
+			c-0.3,0-0.5-0.1-0.7-0.3c-0.2-0.2-0.3-0.4-0.3-0.7C41.8,14.5,41.9,14.3,42.1,14.1z"/>
+		<rect id="XMLID_41_" x="16.1" y="14.6" class="st1" width="0.6" height="4"/>
+		<path id="XMLID_44_" class="st1" d="M26.1,18.7c0.6,0,1.1-0.2,1.5-0.6c0.4-0.4,0.5-0.9,0.5-1.5c0-0.6-0.2-1.2-0.5-1.5
+			c-0.3-0.4-0.8-0.6-1.4-0.6s-1.1,0.2-1.5,0.5c-0.4,0.4-0.6,0.9-0.6,1.6c0,0.6,0.2,1.1,0.5,1.5C25,18.5,25.5,18.7,26.1,18.7z
+			 M25.2,15.4c0.2-0.3,0.6-0.4,1-0.4c0.4,0,0.7,0.1,0.9,0.4c0.2,0.3,0.3,0.7,0.3,1.2c0,0.5-0.1,0.9-0.3,1.1c-0.2,0.3-0.5,0.4-1,0.4
+			c-0.4,0-0.7-0.1-1-0.4c-0.2-0.3-0.4-0.6-0.4-1.1C24.8,16.1,24.9,15.7,25.2,15.4z"/>
+		<path id="XMLID_47_" class="st1" d="M35.3,18.1c0.4-0.4,0.5-0.9,0.5-1.5s-0.2-1.2-0.5-1.5c-0.3-0.4-0.8-0.6-1.4-0.6
+			c-0.6,0-1.1,0.2-1.5,0.5c-0.4,0.4-0.6,0.9-0.6,1.6c0,0.6,0.2,1.1,0.5,1.5c0.4,0.4,0.8,0.6,1.4,0.6C34.5,18.7,34.9,18.5,35.3,18.1z
+			 M32.5,16.6c0-0.5,0.1-0.9,0.4-1.2c0.2-0.3,0.6-0.4,1-0.4c0.4,0,0.7,0.1,0.9,0.4c0.2,0.3,0.4,0.7,0.4,1.2c0,0.5-0.1,0.9-0.3,1.1
+			c-0.2,0.3-0.5,0.4-1,0.4c-0.4,0-0.7-0.1-1-0.4C32.7,17.5,32.5,17.1,32.5,16.6z"/>
+		<polygon id="XMLID_48_" class="st1" points="25.9,28.5 31.2,28.5 31.2,26.9 25.9,26.9 25.9,22 31.6,22 31.6,20.4 24.1,20.4 
+			24.1,35.2 31.9,35.2 31.9,33.6 25.9,33.6 		"/>
+		<polygon id="XMLID_49_" class="st1" points="33.6,22 37.8,22 37.8,35.2 39.5,35.2 39.5,22 43.8,22 43.8,20.4 33.6,20.4 		"/>
+		<path id="XMLID_50_" class="st1" d="M5.3,33.1c-0.3,0-0.6,0.1-0.8,0.3S4.2,34,4.2,34.3c0,0.3,0.1,0.6,0.3,0.8
+			c0.2,0.2,0.5,0.3,0.8,0.3c0.3,0,0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8c0-0.3-0.1-0.6-0.3-0.8C5.9,33.2,5.6,33.1,5.3,33.1z"/>
+		<path id="XMLID_51_" class="st1" d="M22.8,14.7c-0.2,0.2-0.3,0.4-0.4,0.7h0v-0.8h-0.6v4h0.6v-2.1c0-0.5,0.1-0.8,0.3-1.1
+			c0.2-0.2,0.4-0.4,0.7-0.4c0.2,0,0.4,0,0.5,0.1v-0.7c-0.1,0-0.2-0.1-0.4-0.1C23.2,14.5,23,14.6,22.8,14.7z"/>
+		<polygon id="XMLID_52_" class="st1" points="9.6,13.7 9.6,13.7 11.7,18.6 12,18.6 14.1,13.7 14.1,13.7 14.1,18.6 14.7,18.6 
+			14.7,13 13.9,13 11.9,17.6 11.8,17.6 9.9,13 9,13 9,18.6 9.6,18.6 		"/>
+		<polygon id="XMLID_53_" class="st1" points="19.1,32.9 11.2,20.4 9,20.4 9,35.2 10.7,35.2 10.7,22.6 18.8,35.2 20.9,35.2 
+			20.9,20.4 19.1,20.4 		"/>
+	</g>
+</g>
+</svg>

src/images/icons/Framework/electron.svg

@@ -0,0 +1,35 @@
+<?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:#2B2E3A;}
+	.st1{fill:#9FEAF9;}
+</style>
+<g>
+	<circle class="st0" cx="24" cy="24" r="24"/>
+	<g>
+		<path class="st1" d="M18.8,13.4c-4.9-0.9-8.7,0-10.3,2.7c-1.1,2-0.8,4.6,0.8,7.4c0.1,0.2,0.4,0.3,0.7,0.2c0.2-0.1,0.3-0.4,0.2-0.7
+			c0,0,0,0,0,0c-1.5-2.5-1.7-4.8-0.8-6.4c1.3-2.2,4.7-3,9.2-2.2c0.3,0,0.5-0.1,0.6-0.4C19.3,13.7,19.1,13.5,18.8,13.4z M11.9,27
+			c2,2.2,4.5,4.2,7.5,5.9c7.1,4.1,14.6,5.2,18.3,2.6c0.2-0.2,0.3-0.5,0.1-0.7c-0.2-0.2-0.5-0.3-0.7-0.1c0,0,0,0,0,0
+			C33.8,37,26.6,35.9,19.9,32c-2.8-1.6-5.3-3.6-7.2-5.7c-0.2-0.2-0.5-0.2-0.7,0C11.7,26.5,11.7,26.8,11.9,27
+			C11.9,27,11.9,27,11.9,27z"/>
+		<path class="st1" d="M36.5,26.4c3.2-3.8,4.3-7.6,2.8-10.2c-1.1-2-3.5-3-6.7-3c-0.3,0-0.5,0.2-0.5,0.5c0,0.3,0.2,0.5,0.5,0.5
+			c2.9,0,4.9,0.9,5.8,2.5c1.3,2.2,0.3,5.6-2.7,9.1c-0.2,0.2-0.2,0.5,0.1,0.7C36,26.6,36.3,26.6,36.5,26.4
+			C36.5,26.4,36.5,26.4,36.5,26.4z M28.3,13.6c-2.9,0.6-6,1.8-8.9,3.5C12.1,21.4,7.3,27.6,8,32.1c0,0.3,0.3,0.5,0.6,0.4
+			c0.3,0,0.5-0.3,0.4-0.6c0,0,0,0,0,0c-0.6-4,3.9-9.9,10.9-13.9c2.9-1.7,5.8-2.8,8.6-3.4c0.3-0.1,0.4-0.3,0.4-0.6
+			C28.8,13.7,28.6,13.6,28.3,13.6C28.3,13.6,28.3,13.6,28.3,13.6L28.3,13.6z"/>
+		<path class="st1" d="M16.5,35.2c1.7,4.7,4.4,7.5,7.5,7.5c2.2,0,4.3-1.5,5.9-4.2c0.1-0.2,0.1-0.5-0.2-0.7c-0.2-0.1-0.5-0.1-0.7,0.2
+			c0,0,0,0,0,0c-1.5,2.4-3.2,3.7-5.1,3.7c-2.6,0-5-2.6-6.5-6.9c-0.1-0.3-0.4-0.4-0.6-0.3C16.5,34.6,16.4,34.9,16.5,35.2
+			C16.5,35.2,16.5,35.2,16.5,35.2L16.5,35.2z M31.7,34.3c0.9-2.8,1.3-5.9,1.3-9.3c0-8.3-2.9-15.4-7-17.3c-0.3-0.1-0.5,0-0.7,0.3
+			c-0.1,0.2,0,0.5,0.2,0.6C29.3,10.3,32,17.1,32,25c0,3.2-0.4,6.3-1.3,9c-0.1,0.3,0.1,0.5,0.3,0.6C31.3,34.7,31.6,34.6,31.7,34.3
+			C31.7,34.3,31.7,34.3,31.7,34.3L31.7,34.3z M41.1,33.8c0-1.3-1.1-2.4-2.4-2.4s-2.4,1.1-2.4,2.4c0,1.3,1.1,2.4,2.4,2.4
+			S41.1,35.1,41.1,33.8z M40.1,33.8c0,0.8-0.6,1.4-1.4,1.4c-0.8,0-1.4-0.6-1.4-1.4s0.6-1.4,1.4-1.4C39.5,32.4,40.1,33,40.1,33.8z
+			 M9.1,36.2c1.3,0,2.4-1.1,2.4-2.4c0-1.3-1.1-2.4-2.4-2.4c-1.3,0-2.4,1.1-2.4,2.4C6.7,35.1,7.8,36.2,9.1,36.2z M9.1,35.2
+			c-0.8,0-1.4-0.6-1.4-1.4c0-0.8,0.6-1.4,1.4-1.4c0.8,0,1.4,0.6,1.4,1.4C10.5,34.6,9.9,35.2,9.1,35.2z"/>
+		<path class="st1" d="M23.9,10.2c1.3,0,2.4-1.1,2.4-2.4s-1.1-2.4-2.4-2.4c-1.3,0-2.4,1.1-2.4,2.4S22.6,10.2,23.9,10.2z M23.9,9.2
+			c-0.8,0-1.4-0.6-1.4-1.4s0.6-1.4,1.4-1.4s1.4,0.6,1.4,1.4S24.7,9.2,23.9,9.2z M24.3,26.7c-0.9,0.2-1.9-0.4-2.1-1.3
+			c-0.2-0.9,0.4-1.9,1.3-2.1c0.9-0.2,1.9,0.4,2.1,1.3C25.8,25.6,25.2,26.5,24.3,26.7z"/>
+	</g>
+</g>
+</svg>

src/images/icons/Framework/flask.svg

@@ -0,0 +1,84 @@
+<?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="M14.3,40.7c-1.8-1.4-3.8-2.8-5.1-4.8c-2.8-3.4-5-7.4-6.4-11.6c-0.9-2.7-1.2-5.6-2.3-8.2c-1.2-1.9,0.2-4,2.3-4.6
+	c0.9-0.2,2.5-1.1,0.6-0.4C1.6,12.5,1.4,10,3.2,9.9c1.2-0.2,1.7-1.2,1.3-2.1C3.1,6.9,7.6,6,5.4,4.7C3,2.2,8.7,1.7,7.3,4.6
+	c-0.3,2.2,4-0.4,3,2.2c1,1.2,3.8,0.3,3.7,2c1.5,0.1,2,1.3,3.4,1.4c1.4,0.6,4,1.2,4.5,2.8c-1.4,1.1-4.7-2.3-4.9,0.8
+	c0.4,4.6,0.3,9.4,2,13.8c0.8,2.7,2.7,4.8,4.5,6.8c1.7,2,3.9,3.5,6.3,4.7c2,1,4.2,1.6,6.4,2c0.9-0.7,2.5-3.2,3.9-2.2
+	c0.1,1.2-2.8,2.5-0.1,2.4c1.6-0.5,2.6,1.2,3.9-0.3c1.2,1.4,4.9-0.9,4.1,2c-1.1,0.7-2.8,0.3-3.9,1.3c-1.9-0.9-3.4,0.8-5.4,0.6
+	c-2.3,0.4-4.6,0.6-7,0.6c-3.8-0.3-7.7-0.4-11.4-1.8C18.1,43.1,16.1,41.9,14.3,40.7L14.3,40.7z M17.6,42.1c2,0.9,4,1.8,6.1,2.1
+	c3.5,0.5,7.1,1.2,10.6,0.5c-1.6-0.7-3.2,0.3-4.8-0.5c-1.9,0.4-3.9-0.1-5.9-0.4c-2.2-1-4.5-1.6-6.6-2.9c-2.6-0.9,1.3,1.2,2,1.4
+	c1.6,0.9-1.8-0.4-2.2-0.8c-1.3-0.8-1.5-0.6-0.1,0.2L17.6,42.1L17.6,42.1z M13.8,39.4c1.9,0.7,0-1.4-0.9-1.2
+	c-0.4-0.7-1.5-1.1-0.7-1.5c-1.4,0.5-1.5-1.9-2.1-1.5C8.5,34.7,9.4,33,7.7,32c-0.2-1.1-1.8-2-2.3-3.6c-0.2-0.8-1.8-3.2-0.8-1
+	c0.8,2.1,2.3,4,3.5,5.8c0.9,1.7,2.1,3.6,3.8,4.7C12.4,38.4,13,39.3,13.8,39.4L13.8,39.4z M8.2,33.3C8.2,33,8.5,33.9,8.2,33.3z
+	 M16.1,40.3C16.5,40.1,15.5,40,16.1,40.3z M17.1,40.7C17,40.1,16.7,41,17.1,40.7z M18.5,41.2C19.1,40.6,17.5,40.8,18.5,41.2z
+	 M20.7,42.5C21.1,41.9,19.5,42.3,20.7,42.5z M16.4,39.5C17.4,38.8,15.1,39.4,16.4,39.5z M17.4,40C17.3,39.6,17,40.1,17.4,40z
+	 M22.3,43c0.8,0.5,4.6,1.1,2.2,0.2C24.1,43.3,20.1,42.1,22.3,43z M14.5,36.9C14.4,36.6,13.2,36.6,14.5,36.9z M16.8,38.3
+	C17.4,37.8,15.5,37.9,16.8,38.3z M18.7,39.5C19.6,39.1,17.3,39.1,18.7,39.5z M13.5,35.9c0.9,0.7,3.8,0.1,1.4-0.4
+	c-1.1-0.6-3.4-1-1.8,0.3L13.5,35.9L13.5,35.9z M20,39.9C20.4,39.2,18.4,39.5,20,39.9z M18,38.3c2.3,0.6-1.9-1.4-0.6-0.2l0.3,0.1
+	L18,38.3L18,38.3z M22,40.6C24.2,40.6,20,40.3,22,40.6z M12.7,34.7C12.6,34.3,12.2,34.7,12.7,34.7z M25.6,42.6
+	C25.7,41.9,24.9,43.2,25.6,42.6z M16.4,36.9C16.3,36.5,15.7,36.9,16.4,36.9z M12.9,34.4C14.1,34.3,11.2,33.9,12.9,34.4z M8.8,31.7
+	C8.6,31.2,7.4,30.7,8.8,31.7z M19.6,38.6C19.4,38.4,19.5,38.7,19.6,38.6z M26.3,42.7C26.3,42.3,26,42.9,26.3,42.7z M19,38
+	C19.1,37.5,18,37.8,19,38z M14,34.8C14.9,34.7,12.5,34.2,14,34.8z M22.5,40.1C23.9,39.5,21.1,39.8,22.5,40.1z M18.1,37.1
+	c1.7,0.2-2-1.1-0.4-0.1L18.1,37.1z M23.8,40.6c1.5-0.9,1,2.2,2.6,0.3c1.6-1.1-1.4,1.4,0.6,0.2c1.4-0.9,3.5,0.4,4.8,0.9
+	c0.9,0,1.8,0.8,2.8,0.3c1.8-0.5-3.6-0.7-2.2-1.6c-1.7,0.5-2.9-0.6-3.8-1.7c-1.9-0.4-4.1-1.4-5-3.1c-0.4-0.6,0.6,0.1-0.3-0.9
+	c-1.1-1-1.7-2.2-2.5-3.4c-0.9-0.5-1-1.9-1.1,0c0-1.2-1.1-2-1.4-1.7c0-1.1,1.2-0.6,0.4-1.4c-0.2-1.2-0.8-2.4-1-3.8
+	c-0.3-0.6,0-2-0.9-0.6c-0.3,1.5-0.1-1.9,0.4-0.8c0.7-1.2-0.2-1-0.3-0.9c0.4-1,0.3-2.4-0.1-1.8c0.2-1,0.4-3.8-0.3-3.3
+	c0.4-1.1,0.8-4.9-1.1-3.5c-0.8,0-2.1,0.3-2.7,0.6c2,1.1-0.2,0.4-1,0.2c-0.1,1-0.9,0.6-1.9,0.6c1.6,0.2-0.8,1.6-1.7,1.1
+	c-1.2,0.6,1,2,0,2.4c0.1,0.7-1.8-0.2-1.7,1.3c-1.1-0.5-0.2,1.8,0.4,1c1.9,0.5,1.4,1.7,1.4,2.9c-0.3,0.7-1.6-1.6-0.3-1.5
+	c-1-1.7-1.1-0.6-2,0.2c-0.2,0.1,2.2,1.1,0.7,1.6C8,24.5,8,25.6,8.3,26.3c0.8,0.8,0.6-0.9,1.6,0.1c-0.6-0.9-3.1-2.5-1.1-1.9
+	c0-0.9-0.4-1.6,0.3-1.6c0.6-1.1-0.7,2.8,0.8,1.3c0.4-0.2,0.5-1.1,1.2,0.1c1,1,0.4,1.7-1.1,0.8c0.3,0.9,1.9,1.2,1.6,2.5
+	c0.3,1.2,0.8,0.8,1.2,0.7c0.3,1.2,0.5,0.3,0.5-0.2c1.4,0.3,1.1,1.2,1.6,1.8c1,0.4-1.4-3,0.3-1.1c1.8,1.6,0.7,2.3-0.9,2
+	c1-0.1,1.3,1.4,2.6,1.3c1.2,0.6,2,2.7-0.1,1.8c-0.7-0.6-3.2-1.4-1.1-0.2c1.9,0.9,3.3,1.4,5.1,2.5c1.3,0.9,1.8,2,2.3,2.2
+	c-1.1,0.5-3.2-0.4-1.7-0.7c-1-0.2-2.1-0.7-1.2,0.6c0.8,0.7,2.9,0.6,3.3,0.7c-0.3,0.7-0.9,0.8,0,0.8C22.4,40.2,23.7,40.3,23.8,40.6
+	L23.8,40.6z M21.8,35c-0.6-0.6-0.7-1.8-0.1-0.8C22.1,34.4,22.8,36.1,21.8,35z M28.3,39.1C28.7,39.1,28.3,39.4,28.3,39.1z M20.9,33.5
+	C20.9,32.5,21.1,34.2,20.9,33.5z M20.3,32.6C19.5,31.2,21.2,33,20.3,32.6z M12.5,27.2C12.9,27.1,12.7,28,12.5,27.2z M18.7,30.6
+	C18.9,29.6,19,31.4,18.7,30.6z M14.3,27.5C14,27,14.9,28,14.3,27.5z M18,28.7c-0.7-1.6,0.5-0.9,0.2,0.3L18,28.7z M11.5,24.4
+	c-0.3-0.5-0.8-2-0.7-2.5c0.1,0.8,1.6,3.3,0.7,1c-1-1.9,1.2,0.6,1.4,1.1c0.1,0.5-0.6-0.1-0.1,1C12,23.7,12.3,25.7,11.5,24.4
+	L11.5,24.4z M9.5,23C9.6,21.8,10,23.8,9.5,23z M10.4,23.3C10.9,22.4,11.2,24.6,10.4,23.3z M8.3,21.7c-0.7-0.7-1.3-1.4,0-0.5
+	c0.5,0-1.1-1.6,0.1-0.5C9.7,21,9.1,22.9,8.3,21.7L8.3,21.7z M9.4,21.7C9.8,21.2,9.6,22.1,9.4,21.7z M10.1,21.9
+	C9.4,20.6,10.9,22.4,10.1,21.9z M8.7,20.5c-2.2-1.9,2.7,1,0.4,0.4L8.7,20.5z M14.9,24.2c-0.9-0.6-0.3-4,0.1-1.6
+	c0.9-0.3-0.1,1.2,0.6,1.2C15.5,24.7,15.2,25,14.9,24.2L14.9,24.2z M17.2,25.5C17.3,24.5,17.4,26.2,17.2,25.5z M16.8,25.1
+	C16.9,24.7,16.8,25.6,16.8,25.1z M9.1,19.9c-1.4-1.9,4.1,1.9,0.9,0.5C9.7,20.3,9.3,20.3,9.1,19.9z M13.6,22.3
+	C13.4,20.6,13.9,22.5,13.6,22.3z M16.9,24.4C17.2,23.5,17,25,16.9,24.4z M9.4,19.2c0.8-0.2,3.4,1.5,1,0.5
+	C10.1,19.3,9.6,19.5,9.4,19.2z M16.5,22.7c0.1-1.7,0.5-1,0,0.2L16.5,22.7z M10,18.6c0.3-0.5-0.9-2.2,0.2-0.6
+	c0.5,0.4,1.3,0.6,0.6,0.8C11.9,19.8,10.4,19,10,18.6L10,18.6z M16.1,22.2C16.4,20.3,16.3,23.3,16.1,22.2z M9.3,16.9
+	C9.5,16.7,9.4,17.2,9.3,16.9z M10.9,17.8C11.3,16.9,11.6,18.8,10.9,17.8z M15.4,20.3C15.4,20,15.5,20.8,15.4,20.3z M15.1,19.7
+	C14.5,18.2,15.7,20.6,15.1,19.7z M14.7,18.7C14.6,18.1,15.1,19.5,14.7,18.7z M15.4,17.7C14.9,17,15.9,14.4,16,16
+	c-0.5,1.3-0.1,2,0.2,0.3C16.8,14.9,16.1,18.8,15.4,17.7L15.4,17.7z M16,13.9C16.2,13.6,16.1,14.1,16,13.9z M14.9,35.1
+	C14.7,34.9,15,35.2,14.9,35.1z M17.2,36.2c1.2,0.3,1.2-0.2,0.1-0.3c-0.6-0.6-2.5-1.2-0.8-0.1C16.6,36.1,16.9,36.1,17.2,36.2
+	L17.2,36.2z M12.8,33.3c0.7,0.5,2.6,1.4,1,0.2c0.5-0.6-1-1-0.5-1.4c-1.3-0.8-1-0.8-0.1-0.7c-1.6-0.7,0.2-0.7,0.1-1
+	c-0.6-0.1-3-1.1-1.6,0.1c-1.5-0.7-0.3,0.3-0.8,0.2c-1.5-0.4,1.3,1.1-0.2,0.8c0.9,0.7,2.3,1.7,0.4,0.7C10.7,32.5,12.4,33,12.8,33.3
+	L12.8,33.3z M15.1,34.6C17.9,35.5,13.7,33.5,15.1,34.6z M27,41.8C27,41.3,26.6,42.3,27,41.8z M28.2,42.3c0.7-0.6,0,1,1.1-0.2
+	c0-0.8,0-1.3-1.2-0.3C27.8,42.1,27.6,42.8,28.2,42.3L28.2,42.3z M8.8,30.2C8.6,29.4,7.4,29.4,8.8,30.2z M10.1,31
+	C9.6,30.2,8.4,30.3,10.1,31z M17.5,35.5c0.7,0.6,3.3,0.5,0.9,0.1C18.1,35,16.1,35.2,17.5,35.5z M27.7,41.8
+	C28.9,40.9,26.7,42.2,27.7,41.8z M30.1,43.4C30.1,43.1,29.6,43.5,30.1,43.4z M30.1,43C31.3,41.7,28.9,43,30.1,43z M5.6,27.5
+	C4.6,26,5,25.3,3.9,24.1c-0.2-0.9-1.7-3.1-0.8-0.8C4,24.6,4.3,26.6,5.6,27.5L5.6,27.5z M29.7,42.6C31.9,41.1,28.7,41.9,29.7,42.6z
+	 M31.4,43.2C32.5,42.3,30.7,43,31.4,43.2z M8.4,28.5C8.8,28,7.6,28.4,8.4,28.5z M31,42.8c1.1-0.7-0.3-0.6-0.2,0.1L31,42.8z
+	 M16.1,33.3C16.1,32.9,15.5,33.4,16.1,33.3z M17,33.9C16.7,33.3,16.6,34,17,33.9z M32.8,43.2c1.4-1-0.9-0.2-0.3,0.2L32.8,43.2z
+	 M32.3,43C33.4,42,31.1,43.4,32.3,43z M35,44.8C35.8,44.3,34.1,44.7,35,44.8z M9.1,28.2c1,0.2,4.1,2.5,2.3,0.2
+	c-0.9-0.3-0.4-2.6-1.3-2.2c0.6,1.1,0.5,1.5-0.8,0.9c-1.7-0.8-0.9,0.4-0.6,0.8C8.2,27.9,9.3,28.2,9.1,28.2L9.1,28.2z M4.4,24.4
+	c0.2-0.8-1.7-4.2-0.9-1.7C3.8,23.2,3.8,24.2,4.4,24.4z M13.1,29.8C12.5,29.3,13.1,29.7,13.1,29.8z M14.4,30.1
+	C14.4,29.3,12.9,29.7,14.4,30.1z M25.8,37.2C25.5,36.7,24.9,37.2,25.8,37.2z M26.3,37.6C26.2,37.3,26,37.7,26.3,37.6z M30.8,40.5
+	C31.2,40.2,30.3,40.4,30.8,40.5z M6.8,25C8,24.6,5.5,24.7,6.8,25z M24.8,36.4C24.7,35.6,24,36.6,24.8,36.4z M6.3,23.9
+	C7.1,23.6,5.6,23.7,6.3,23.9z M8.6,25C8.6,24.8,8.4,25.1,8.6,25z M36.8,42.3c1-0.2,3.4,0.5,3.7-0.3c-1.2,0-4.3-0.9-4.4,0.2l0.3,0
+	L36.8,42.3L36.8,42.3z M9.3,25.2C9.4,24.4,8.7,25.2,9.3,25.2z M3.3,21C3,19.4,2.2,20.8,3.3,21z M4.7,21.4
+	C4.7,20.9,3.4,20.9,4.7,21.4z M5.5,21.8C5.3,21.6,5.4,22,5.5,21.8z M10.7,25.1C11,24.9,10.2,24.9,10.7,25.1z M5,20.8
+	C4.8,19.7,3.3,20.7,5,20.8z M2,18.9C2,18.4,1.7,19.1,2,18.9z M2.5,18.6C2.4,17.9,2.1,18.7,2.5,18.6z M4.9,20c1-0.4-1.9-0.8-0.2-0.1
+	L4.9,20z M37.6,40.2C38.2,39.6,36.7,40,37.6,40.2z M41.5,42.3C41.8,41.5,40.8,42.4,41.5,42.3z M5.1,18.8C5.3,18,4.3,18.9,5.1,18.8z
+	 M1.7,16.4c-0.2-1.1-0.2-2.9,1.6-2.3c-2.4,0.5,1.6,3,1.1,1c1,0,2-0.6,1.4,0.4c2-0.2,3.3-1.9,5.2-1.7c1.5-0.2,3.1-0.3,4.7-0.9
+	c1.3-0.1,2.6-1.5,1.9-2.4C15.9,10.4,14,10.6,12,11c-2.2,0.5-4.2,1.3-6.4,1.7c-2.2,0.3,0.4,0.8-0.2,0.9c-1.1,0.4,1.3,0.7-0.1,1.1
+	c-0.9-0.2-1.9-0.5-1.5-1.5c-2.1,0.3-3.9,1.1-2.3,3.2L1.7,16.4L1.7,16.4z M6.7,13.9c0.5-1.8,2.6,1.5,0.8,0.2
+	C7.2,14,6.9,13.9,6.7,13.9z M6.8,13C7.5,12.5,7.1,13.3,6.8,13z M7.7,13.1c0.1-0.8,2,0.4,0.3,0.3L7.7,13.1z M8.9,12.6
+	C9.3,12,9,13,8.9,12.6z M9.2,12.4c0.7-0.9,4.2-0.6,1.6-0.1C10.2,11.8,9.6,12.6,9.2,12.4z M13.7,11.7C13.6,9.2,15.9,12.5,13.7,11.7z
+	 M15,11.7c0.5-1.2,1.8-0.5,0.2-0.2C15.2,11.5,15.1,12,15,11.7z M4.6,18.1C6,17.3,3.2,17.4,4.6,18.1z M5.7,18.4
+	C6.2,17.9,4.6,18.2,5.7,18.4z M2.6,16.3C3.4,15.6,1.7,16,2.6,16.3z M43.8,42C43.9,41.3,43.2,42.4,43.8,42z M39.7,39.2
+	C39.8,38.4,39.1,39.3,39.7,39.2z M45,42.3c1.1,0,3.4-0.3,1-0.3C45.6,42,43.7,42,45,42.3z M6.6,17.9c0.9-0.1,1.4-1-0.2-0.9
+	c-2.5-0.3,2.2,0.8-0.3,0.5C5.8,17.7,6.6,18,6.6,17.9L6.6,17.9z M7.4,18.3C7.3,17.7,7.1,18.6,7.4,18.3z M8.3,15.8
+	C8.7,15.3,7.8,15.7,8.3,15.8z M5.3,10.8c1.6-0.5,3.8-1.2,4.6,0.3c-0.8-0.9-0.3-1.8,0.4-0.5c1,1.4,1.6-0.6,0.9-1.1
+	c0.8,1,1.6,1.4,0.5,0.1c1.2-1.5-2.4,0.2-3.3,0.2C8,9.9,4.3,10.7,5.3,10.8L5.3,10.8z M6.3,9C7.2,8.3,9.5,9.4,8,8.3
+	C7.9,8.2,4.8,9.1,6.3,9z M9.6,9.1c1.1,0-0.5-1.4,0.8-0.8c-0.2-0.7-1.5-0.8-2.1-1.1C8,7.9,9,9.1,9.6,9.1L9.6,9.1z M6.9,6.1
+	C7.2,5.6,6.2,6.3,6.9,6.1z M8.2,6.4c1.7-0.2-0.4-0.7-0.3,0L8.2,6.4z M5.7,4.4C4.4,2.8,8,4.7,6.7,3C5.7,2.2,4.7,4,5.7,4.4z
+	 M21.3,12.8c0.6-1-2.3-1.3-0.4-0.4C21.1,12.6,21.1,12.9,21.3,12.8z"/>
+</svg>

src/images/icons/Framework/laravel.svg

@@ -0,0 +1,23 @@
+<?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:#FF2D20;}
+</style>
+<g>
+	<path class="st0" d="M47.3,10.9c0,0.1,0,0.1,0,0.2v10.3c0,0.3-0.1,0.5-0.4,0.7l-8.6,5v9.9c0,0.3-0.1,0.5-0.4,0.7L19.9,47.9
+		c0,0-0.1,0-0.1,0.1c0,0,0,0-0.1,0c-0.1,0-0.3,0-0.4,0c0,0,0,0-0.1,0c0,0-0.1,0-0.1-0.1l-18-10.4c-0.2-0.1-0.4-0.4-0.4-0.7V5.9
+		c0-0.1,0-0.1,0-0.2c0,0,0,0,0-0.1c0,0,0-0.1,0-0.1c0,0,0,0,0.1-0.1c0,0,0-0.1,0.1-0.1c0,0,0,0,0.1-0.1c0,0,0.1,0,0.1-0.1h0l9-5.2
+		c0.2-0.1,0.5-0.1,0.8,0l9,5.2h0c0,0,0.1,0,0.1,0.1c0,0,0.1,0,0.1,0.1c0,0,0,0.1,0.1,0.1c0,0,0,0,0.1,0.1c0,0,0,0.1,0,0.1
+		c0,0,0,0,0,0.1c0,0.1,0,0.1,0,0.2v19.3l7.5-4.3v-9.9c0-0.1,0-0.1,0-0.2c0,0,0,0,0-0.1c0,0,0-0.1,0-0.1c0,0,0,0,0.1-0.1
+		c0,0,0-0.1,0.1-0.1c0,0,0,0,0.1-0.1c0,0,0.1,0,0.1-0.1h0l9-5.2c0.2-0.1,0.5-0.1,0.8,0l9,5.2c0,0,0.1,0,0.1,0.1c0,0,0.1,0,0.1,0.1
+		c0,0,0,0.1,0.1,0.1c0,0,0,0,0.1,0.1C47.2,10.7,47.2,10.8,47.3,10.9C47.3,10.8,47.3,10.8,47.3,10.9z M45.8,20.9v-8.6l-3.2,1.8
+		l-4.4,2.5v8.6L45.8,20.9L45.8,20.9z M36.8,36.4v-8.6l-4.3,2.5l-12.3,7v8.7C20.2,45.9,36.8,36.4,36.8,36.4z M2.2,7.2v29.2l16.5,9.5
+		v-8.7l-8.6-4.9l0,0l0,0c0,0-0.1,0-0.1-0.1c0,0-0.1,0-0.1-0.1l0,0c0,0,0-0.1-0.1-0.1c0,0,0,0-0.1-0.1l0,0c0,0,0-0.1,0-0.1
+		c0,0,0-0.1,0-0.1v0c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1v0V11.6L5.3,9.1L2.2,7.2L2.2,7.2z M10.5,1.6L2.9,5.9l7.5,4.3L18,5.9L10.5,1.6
+		L10.5,1.6z M14.4,28.6l4.4-2.5V7.2l-3.2,1.8l-4.4,2.5v18.9C11.2,30.4,14.4,28.6,14.4,28.6z M37.5,6.7L30,11.1l7.5,4.3l7.5-4.3
+		C45.1,11.1,37.5,6.7,37.5,6.7z M36.8,16.7l-4.4-2.5l-3.2-1.8v8.6l4.4,2.5l3.2,1.8C36.8,25.3,36.8,16.7,36.8,16.7z M19.5,36l11-6.3
+		l5.5-3.1l-7.5-4.3l-8.6,5L12,31.7C12,31.7,19.5,36,19.5,36z"/>
+</g>
+</svg>

src/images/icons/Framework/quasar.svg

@@ -0,0 +1,36 @@
+<?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="svg2" xmlns:svg="http://www.w3.org/2000/svg"
+	 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:#263238;}
+	.st1{fill:#42A5F5;}
+	.st2{fill:#FFFFFF;}
+	.st3{fill:#1976D2;}
+</style>
+<g id="g4" transform="matrix(0.01712,0,0,0.01712,-116.963,48.724999)">
+	<path id="path8" class="st0" d="M8463.7-1444.3"/>
+	<path id="path10" class="st1" d="M9252.1-2032.1"/>
+	<g id="g8856-6" transform="matrix(1.0887031,0,0,1.0887031,-870.07715,252.64209)">
+		<circle id="circle8858-1" class="st2" cx="8362.1" cy="-1558.6" r="1287.3"/>
+		<path id="path8860-5" class="st0" d="M8572.8-1558.6c0,116.4-94.2,210.6-210.6,210.6l0,0c-116.3,0-210.6-94.3-210.6-210.6l0,0
+			c0-116.4,94.3-210.6,210.6-210.6S8572.8-1675,8572.8-1558.6z"/>
+		<path id="path8862-5" class="st3" d="M9297-2098.4c-45.8-78.7-101.4-151.4-165.5-216.2l-243.4,140.6
+			c-75.9-64.8-162.1-114.5-254.2-147.3c-83.2,84.3-149.2,178.4-196.8,280.7c271-18.5,550.9,79.6,810.7,282.7l153.2-88.5
+			C9377.2-1934.5,9342.3-2019.1,9297-2098.4L9297-2098.4z"/>
+		<path id="path8864-4" class="st1" d="M9297-1018.9c45.3-79.1,80.5-163.6,104.6-251.4l-243.4-140.6c18.2-98.1,18-197.6,0.4-293.8
+			c-114.5-29.9-229-40-341.5-30c151.5,225.5,206.5,516.9,160.6,843.4l153.2,88.5C9195.3-867.6,9251.1-940.1,9297-1018.9z"/>
+		<path id="path8866-7" class="st3" d="M8362.3-479.2c91.1-0.2,181.8-12.1,270-35.2v-281.1c94.1-33.3,180.2-83.2,254.7-146.4
+			c-31.4-114.1-79.9-218.3-144.8-310.8c-119.6,243.9-344.4,437.3-650.1,560.8v177C8180.2-491.5,8271-479.6,8362.3-479.2z"/>
+		<path id="path8868-6" class="st1" d="M7427.4-1018.8c45.8,78.7,101.4,151.4,165.5,216.2l243.4-140.6
+			c75.9,64.8,162.1,114.5,254.2,147.3c83.2-84.3,149.2-178.4,196.8-280.7c-271,18.5-550.9-79.6-810.7-282.7l-153.2,88.5
+			C7347.2-1182.7,7382.1-1098.1,7427.4-1018.8z"/>
+		<path id="path8870-5" class="st3" d="M7427.3-2098.3c-45.3,79.1-80.5,163.6-104.6,251.4l243.4,140.6
+			c-18.2,98.1-18,197.6-0.4,293.8c114.5,29.9,229.1,40,341.5,30c-151.5-225.5-206.5-516.9-160.6-843.4l-153.2-88.5
+			C7529.1-2249.7,7473.3-2177.1,7427.3-2098.3z"/>
+		<path id="path8872-6" class="st1" d="M8362.1-2638.1c-91.1,0.2-181.8,12.1-270,35.2v281.1c-94.1,33.3-180.2,83.2-254.7,146.4
+			c31.4,114.1,79.9,218.3,144.8,310.8c119.6-243.9,344.4-437.3,650.1-560.8v-177C8544.2-2625.7,8453.4-2637.6,8362.1-2638.1z"/>
+	</g>
+</g>
+</svg>

src/images/icons/Framework/rails.svg

@@ -0,0 +1,29 @@
+<?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:#CC0000;}
+</style>
+<g transform="translate(8 8)">
+	<path class="st0" d="M33.8,22.2v2.2h4c0.8,0,2.2-0.6,2.3-2.3v-0.8c0-1.4-1.2-2.3-2.3-2.3h-2v-1h3.9v-2.2h-3.8c-1,0-2.3,0.8-2.3,2.3
+		v0.8c0,1.5,1.3,2.3,2.3,2.3c2.7,0-0.7,0,1.9,0v1.1 M12.5,21.7c0,0,2.1-0.2,2.1-2.9s-2.6-3-2.6-3H7.5v8.6h2.3v-2.1l2,2.1h3.4
+		L12.5,21.7z M11.6,19.9H9.8v-2h1.9c0,0,0.5,0.2,0.5,1C12.2,19.7,11.6,19.9,11.6,19.9z M20.4,15.9H18c-1.7,0-2.3,1.5-2.3,2.3v6.3
+		h2.4v-1.5h2.2v1.5h2.3v-6.3C22.7,16.3,21,15.9,20.4,15.9z M20.4,20.5h-2.2v-2.1c0,0,0-0.5,0.7-0.5h0.8c0.7,0,0.7,0.5,0.7,0.5
+		L20.4,20.5L20.4,20.5z"/>
+	<rect x="23.7" y="15.9" class="st0" width="2.5" height="8.6"/>
+	<polygon class="st0" points="29.7,22.2 29.7,15.9 27.2,15.9 27.2,22.2 27.2,24.4 29.7,24.4 33,24.4 33,22.2 	"/>
+	<path class="st0" d="M-7.2,24.4h9.6c0,0-1.8-8.4,4.2-11.7c1.3-0.6,5.5-3,12.4,2c0.2-0.2,0.4-0.3,0.4-0.3S13.2,8.1,6.2,8.8
+		c-3.5,0.3-7.9,3.5-10.4,7.8S-7.2,24.4-7.2,24.4z"/>
+	<path class="st0" d="M-7.2,24.4h9.6c0,0-1.8-8.4,4.2-11.7c1.3-0.6,5.5-3,12.4,2c0.2-0.2,0.4-0.3,0.4-0.3S13.2,8.1,6.2,8.8
+		c-3.5,0.3-7.9,3.5-10.4,7.8S-7.2,24.4-7.2,24.4z"/>
+	<path class="st0" d="M-7.2,24.4h9.6c0,0-1.8-8.4,4.2-11.7c1.3-0.6,5.5-3,12.4,2c0.2-0.2,0.4-0.3,0.4-0.3S13.2,8.1,6.2,8.8
+		c-3.5,0.3-7.9,3.5-10.4,7.8S-7.2,24.4-7.2,24.4z M12.8,9.5l0-0.8c-0.1-0.1-0.4-0.2-1.2-0.4l0,0.8C12,9.2,12.4,9.4,12.8,9.5z"/>
+	<path class="st0" d="M11.7,12.1l0,0.8c0.4,0,0.8,0.1,1.2,0.1l0-0.8C12.4,12.2,12,12.1,11.7,12.1z M7.2,8.3h0.1L7,7.6
+		c-0.4,0-0.8,0-1.2,0.1l0.2,0.7C6.5,8.3,6.8,8.3,7.2,8.3z M7.7,12.8L8,13.6c0.4-0.2,0.7-0.3,1.1-0.4l-0.3-0.8
+		C8.4,12.5,8.1,12.6,7.7,12.8z M2.2,9.6L1.7,8.7C1.4,8.9,1.1,9.1,0.8,9.3l0.6,0.8C1.6,9.9,1.9,9.7,2.2,9.6z M4.7,15l0.6,0.9
+		C5.5,15.6,5.8,15.3,6,15l-0.5-0.8C5.2,14.5,4.9,14.8,4.7,15z M3,18.9l1,0.8c0-0.5,0.1-0.9,0.3-1.4l-0.9-0.7C3.2,18,3.1,18.5,3,18.9
+		z M-2.3,13.2l-0.9-0.8c-0.3,0.3-0.6,0.6-0.9,0.9l0.9,0.8C-2.9,13.8-2.6,13.5-2.3,13.2z M-6,18.6l-1.4-0.5c-0.2,0.5-0.5,1.1-0.6,1.5
+		l1.4,0.5C-6.4,19.6-6.2,19-6,18.6z M2.8,22c0,0.6,0.1,1.2,0.1,1.5l1.5,0.5c-0.1-0.5-0.2-1-0.3-1.6L2.8,22z"/>
+</g>
+</svg>

src/images/icons/Framework/symfony.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:#FFFFFF;}
+</style>
+<g>
+	<path d="M48,24c0,13.3-10.7,24-24,24C10.7,48,0,37.3,0,24C0,10.7,10.7,0,24,0C37.3,0,48,10.7,48,24z"/>
+	<path class="st0" d="M34.5,8.9c-2.4,0.1-4.6,1.4-6.2,3.3c-1.8,2-2.9,4.5-3.8,6.9c-1.5-1.2-2.7-2.8-5.1-3.5c-1.9-0.5-3.8-0.3-5.6,1
+		c-0.9,0.6-1.4,1.6-1.7,2.5c-0.7,2.4,0.8,4.4,1.4,5.2l1.5,1.6c0.3,0.3,1,1.1,0.7,2.3c-0.4,1.3-1.9,2.1-3.5,1.6
+		c-0.7-0.2-1.7-0.7-1.5-1.5c0.1-0.3,0.3-0.5,0.4-0.8c0.1-0.2,0.2-0.4,0.2-0.5c0.3-0.9-0.1-2.1-1.1-2.4c-0.9-0.3-1.9-0.1-2.2,1.1
+		c-0.4,1.4,0.2,3.8,3.7,4.9c4.1,1.3,7.5-1,8-3.9c0.3-1.8-0.5-3.2-2-4.9l-1.2-1.4c-0.7-0.7-1-2-0.2-3c0.6-0.8,1.6-1.2,3.1-0.8
+		c2.2,0.6,3.2,2.1,4.8,3.4c-0.7,2.2-1.1,4.4-1.5,6.4l-0.2,1.5c-1.2,6.1-2.1,9.5-4.4,11.5c-0.5,0.3-1.1,0.8-2.1,0.9
+		c-0.5,0-0.7-0.3-0.7-0.5c0-0.4,0.3-0.5,0.5-0.7c0.3-0.2,0.8-0.5,0.7-1.4c0-1.1-0.9-2-2.2-1.9c-1,0-2.4,0.9-2.4,2.6
+		c0.1,1.7,1.6,3,4,2.9c1.3,0,4.1-0.6,6.9-3.9c3.3-3.8,4.2-8.2,4.9-11.4l0.8-4.2c0.4,0.1,0.9,0.1,1.4,0.1c4.1,0.1,6.1-2,6.1-3.6
+		c0-0.9-0.6-1.8-1.5-1.8c-0.6,0-1.4,0.4-1.6,1.3c-0.2,0.9,1.3,1.6,0.1,2.4c-0.8,0.5-2.3,0.9-4.4,0.6l0.4-2.1c0.8-4,1.7-8.8,5.3-8.9
+		c0.3,0,1.2,0,1.2,0.6c0,0.2,0,0.3-0.3,0.8c-0.3,0.4-0.3,0.7-0.3,1.1c0,1,0.8,1.7,1.9,1.6c1.5,0,1.9-1.5,1.9-2.2
+		C38.8,9.9,36.9,8.8,34.5,8.9z"/>
+</g>
+</svg>

src/images/icons/FrontendDevelopment/angularjs.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:#DD0031;}
+	.st1{fill:#C3002F;}
+	.st2{fill:#FFFFFF;}
+</style>
+<polygon class="st0" points="24,0 24,0 24,0 1.7,8 5.1,37.5 24,48 24,48 24,48 42.9,37.5 46.3,8 "/>
+<polygon class="st1" points="24,0 24,5.3 24,5.3 24,29.6 24,29.6 24,48 24,48 42.9,37.5 46.3,8 "/>
+<path class="st2" d="M24,5.3L10,36.6l0,0h5.2l0,0l2.8-7h11.9l2.8,7l0,0h5.2l0,0L24,5.3L24,5.3L24,5.3L24,5.3L24,5.3z M28.1,25.3
+	h-8.2l4.1-9.8L28.1,25.3z"/>
+</svg>

src/images/icons/FrontendDevelopment/babel.svg

@@ -0,0 +1,77 @@
+<?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:serif="http://www.serif.com/"
+	 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:#050507;}
+	.st1{fill:#F9DC3E;}
+</style>
+<g id="B" transform="matrix(1,0,0,1,2432.3,329.575)">
+	<g id="Shadow" transform="matrix(1,0,0,1,4.5,8)">
+		<path class="st0" d="M-2398.4-311.8c0.2,0,0.8-2.2,0.8-2.1l-0.2-1.2c-0.1-0.4-1.1-1.6-3.1-3.9c0-0.4,0.7-1.1,2.1-1.9l4.1-3.6
+			c0.9-1.2,1.5-3.1,1.6-5.7l-0.1-0.6c-0.2-1.8-1.5-3.3-4-4.5c-1.5-1-4.1-1.5-8-1.6c-3.2,0.3-7.3,1.4-12.5,3.4c-1.4,1-3,2-4.8,3
+			l0,0.3c0.1,0,0.3-0.1,0.5-0.2c0.2,0,0.3,0.1,0.3,0.3l0.3-0.2l0.2,0l0,0.1c0,0.1-1.1,1-3.4,2.6l0.2,0.3l-0.2,0l-0.3-0.1
+			c0,0.1-0.1,0.2-0.5,0.2l0,0.2l0.4,0.4c-0.1,0-0.3,0-0.5-0.1c-0.7,0.1-1.4,0.6-2.1,1.6l0.2,0.3c0.6-0.6,1-0.8,1.1-0.9l0,0.5
+			c-0.1,0-0.3,0.1-0.5,0.2l0.4,0.6c0.7-0.8,1.6-1.5,2.4-2.1c0.4,0.1,0.7,0.3,0.7,0.4l0.3,0c2.4-1.8,4.8-3.1,7.2-3.9l0,0.3
+			c-0.4,0.7-0.7,1-0.9,1c0,0.2,0.1,0.4,0.2,0.6c0,0.4-1,3.1-3.2,8.1c-5,11.7-9.1,20.3-12.5,25.9c0,0.1,0.1,0.3,0.2,0.4
+			c0.8-0.2,1.4-0.4,1.6-0.6l0.2,0l0,0.3l0.3,0l0.3-0.2c0,0.1,0.1,0.1,0.3,0.1l0,0.3c0,0.3-0.1,0.8-0.5,1.4c-0.3,0.4-0.7,1.2-1.1,2.4
+			l0,0.1l0.3,0c1.3-1.5,2.4-3,3.1-4.4c3.9-1.2,6.9-2.3,9-3.4c2.1-0.2,3.7-0.7,4.8-1.6l0-0.2l-0.8,0.2l-0.2,0l0-0.2
+			c1.5-0.2,2.6-0.6,3.2-1c3-2.3,5.2-3.9,6.8-4.9C-2401.4-307.4-2399.4-309.7-2398.4-311.8z M-2425.6-326l-0.2,0l0-0.3l0.6-0.1l0,0.1
+			C-2425.3-326.2-2425.4-326.1-2425.6-326z M-2428.8-294.4c-0.4-0.2-0.7-0.2-1-0.2l0-0.5c0-0.2,0.1-0.3,0.3-0.3
+			c0.2,0,0.3,0.1,0.3,0.4c0.5-0.7,0.8-1,0.9-1l0.3,0.1C-2428-294.9-2428.3-294.4-2428.8-294.4z M-2395-329.7c-0.2,0-0.5-0.5-0.9-1.5
+			l0-0.3c0.3,0,0.6,0.5,0.9,1.5L-2395-329.7z M-2395.5-333.2l-0.1,0.3l-4.6-1.9C-2397.1-334.7-2395.6-334.2-2395.5-333.2z
+			 M-2414.8-316.6l-0.6,0.1l0-0.3l0.6-0.1L-2414.8-316.6z M-2415.4-326.6l0.2,0l0,0.5c-0.1,0-0.3,0.2-0.6,0.7l0-0.3
+			C-2415.5-326.1-2415.3-326.4-2415.4-326.6z M-2416.7-323.3l0.1,0.6l-0.2,0l-0.1-0.6L-2416.7-323.3z M-2417.4-322.2l0.3,0
+			c0,0.5-0.2,0.8-0.4,0.8l-0.2,0C-2417.5-321.8-2417.4-322-2417.4-322.2z M-2418-320.6l0.2,0l0,0.1l-0.3,0.5l-0.3,0l0-0.1
+			C-2418.1-320.1-2417.9-320.3-2418-320.6z M-2418.5-319.2l-0.1,0.8l-0.2,0l-0.1-0.8L-2418.5-319.2z M-2423.8-304.2
+			c-0.2,1-0.4,1.6-0.7,1.6l0-0.1C-2424.5-303.3-2424.3-303.8-2423.8-304.2z M-2424.7-302.1l0,0.1c0,0.2-0.1,0.3-0.3,0.3l0-0.1
+			C-2425-302-2424.9-302.1-2424.7-302.1z M-2425-297.8l0.5,0l0,0.2c-0.1,0-0.3,0.1-0.5,0.2l-0.3,0
+			C-2425.3-297.6-2425.2-297.7-2425-297.8z M-2411.1-302.1c-2.7,1.3-4.3,2.3-4.8,2.7c-3,1-4.4,1.7-4.4,1.9c-2.6,1-4.4,1.8-5.2,2.3
+			c-0.2,0-0.5-0.1-0.9-0.2c0-0.5,0.2-1,0.7-1.3c0.5,0,0.9,0,1.3,0.2c0.5-0.3,1.3-0.5,2.5-0.8l0-0.3l-1,0.1c0.1-0.2,1.1-0.6,2.8-1.3
+			l0.5,0l0,0.1c-0.8,0.1-1.3,0.3-1.4,0.8c0,0.2,0.1,0.3,0.3,0.3c0.6-0.4,0.9-0.6,0.9-0.7c1.2-0.2,4.5-1.9,9.9-5.2l0,0.3
+			C-2409.7-303.2-2410.2-302.8-2411.1-302.1z M-2419.4-299.4c0.8-0.1,1.5-0.4,2-0.9c0.2,0,0.3,0.1,0.4,0.3c-0.4,0-1.1,0.4-2.2,1
+			l-0.2,0L-2419.4-299.4z M-2406.1-309.6l-4.1,3.3c-3.1,2-4.7,3-5,3c-4.9,2.7-7.9,4.1-9.1,4.2l-0.2,0c0.1-0.6,2.3-5,6.5-13.4
+			c1.9-0.2,4.8-1,8.8-2.6l1-0.1c2-0.2,3.5,0.2,4.5,1.2l0.1,0.6C-2404.3-311.2-2405.2-310-2406.1-309.6z M-2414.1-314.2l0.7-0.1
+			l0,0.1l-0.7,0.1L-2414.1-314.2z M-2404.8-315.7l0.5,0c0.4,0.2,0.7,0.4,0.7,0.6l0,0.1C-2404-315-2404.4-315.3-2404.8-315.7z
+			 M-2403.5-323.3c-0.4,0.5-1.6,1.4-3.5,2.6c-0.6,0.1-3,1-7.1,2.8c-0.2-0.1-0.4-0.1-0.7-0.1l0-0.3c0-0.6,0.2-1.3,0.8-2.2
+			c0.3-1.7,0.7-2.7,1-2.9l3.4-7.7c0-0.5,0.7-0.8,2.2-1.1l0.5,0l0,0.4c1.5-0.2,2.4-0.4,2.7-0.4c2.7-0.2,4.1,0.3,4.2,1.6l0.3,0
+			l-0.1-0.8l0.3,0c0.8,0.4,1.2,1,1.3,1.6c0,0.4-0.2,1-0.7,1.6c-0.2,0-0.3-0.1-0.3-0.4l-0.3,0l-0.1,0.9c-1.4,2.1-2.4,3.1-3,3.2
+			C-2403-323.7-2403.3-323.3-2403.5-323.3z M-2401.4-317.9c-0.3-0.2-0.5-0.3-0.7-0.3l0-0.5l0.3,0l0.7,0.4
+			C-2401.1-318-2401.2-317.9-2401.4-317.9z M-2399.2-315.3c0.3,0.1,0.5,0.3,0.5,0.4l-0.1,0l0,0c0,0-0.1,0-0.1,0l-0.2,0.2
+			L-2399.2-315.3z M-2399-314l0-0.1l0.4-0.1l0,0.1L-2399-314z M-2398-312.9c0,0,0,0.2,0,0.2C-2398.1-312.8-2398.1-312.9-2398-312.9z
+			"/>
+	</g>
+	<path id="Babel-B" serif:id="Babel B" class="st1" d="M-2394.4-304.6c0.2,0,0.8-2.2,0.8-2.1l-0.2-1.2c-0.1-0.4-1.1-1.6-3.1-3.9
+		c0-0.4,0.7-1.1,2.1-1.9l4.1-3.6c0.9-1.2,1.5-3.1,1.6-5.7l-0.1-0.6c-0.2-1.8-1.5-3.3-4-4.5c-1.5-1-4.1-1.5-8-1.6
+		c-3.2,0.3-7.3,1.4-12.5,3.4c-1.4,1-3,2-4.8,3l0,0.3c0.1,0,0.3-0.1,0.5-0.2c0.2,0,0.3,0.1,0.3,0.3l0.3-0.2l0.2,0l0,0.1
+		c0,0.1-1.1,1-3.4,2.6l0.2,0.3l-0.2,0l-0.3-0.1c0,0.1-0.1,0.2-0.5,0.2l0,0.2l0.4,0.4c-0.1,0-0.3,0-0.5-0.1c-0.7,0.1-1.4,0.6-2.1,1.6
+		l0.2,0.3c0.6-0.6,1-0.8,1.1-0.9l0,0.5c-0.1,0-0.3,0.1-0.5,0.2l0.4,0.6c0.7-0.8,1.6-1.5,2.4-2.1c0.4,0.1,0.7,0.3,0.7,0.4l0.3,0
+		c2.4-1.8,4.8-3.1,7.2-3.9l0,0.3c-0.4,0.7-0.7,1-0.9,1c0,0.2,0.1,0.4,0.2,0.6c0,0.4-1,3.1-3.2,8.1c-5,11.7-9.1,20.3-12.5,25.9
+		c0,0.1,0.1,0.3,0.2,0.4c0.8-0.2,1.4-0.4,1.6-0.6l0.2,0l0,0.3l0.3,0l0.3-0.2c0,0.1,0.1,0.1,0.3,0.1l0,0.3c0,0.3-0.1,0.8-0.5,1.4
+		c-0.3,0.4-0.7,1.2-1.1,2.4l0,0.1l0.3,0c1.3-1.5,2.4-3,3.1-4.4c3.9-1.2,6.9-2.3,9-3.4c2.1-0.2,3.7-0.7,4.8-1.6l0-0.2l-0.8,0.2
+		l-0.2,0l0-0.2c1.5-0.2,2.6-0.6,3.2-1c3-2.3,5.2-3.9,6.8-4.9C-2397.3-300.2-2395.3-302.4-2394.4-304.6z M-2421.5-318.7l-0.2,0l0-0.3
+		l0.6-0.1l0,0.1C-2421.2-318.9-2421.3-318.9-2421.5-318.7z M-2424.7-287.1c-0.4-0.2-0.7-0.2-1-0.2l0-0.5c0-0.2,0.1-0.3,0.3-0.3
+		c0.2,0,0.3,0.1,0.3,0.4c0.5-0.7,0.8-1,0.9-1l0.3,0.1C-2424-287.7-2424.2-287.2-2424.7-287.1z M-2391-322.4c-0.2,0-0.5-0.5-0.9-1.5
+		l0-0.3c0.3,0,0.6,0.5,0.9,1.5L-2391-322.4z M-2391.4-325.9l-0.1,0.3l-4.6-1.9C-2393.1-327.4-2391.5-326.9-2391.4-325.9z
+		 M-2410.8-309.3l-0.6,0.1l0-0.3l0.6-0.1L-2410.8-309.3z M-2411.3-319.3l0.2,0l0,0.5c-0.1,0-0.3,0.2-0.6,0.7l0-0.3
+		C-2411.4-318.9-2411.3-319.1-2411.3-319.3z M-2412.6-316.1l0.1,0.6l-0.2,0l-0.1-0.6L-2412.6-316.1z M-2413.4-315l0.3,0
+		c0,0.5-0.2,0.8-0.4,0.8l-0.2,0C-2413.4-314.5-2413.3-314.8-2413.4-315z M-2413.9-313.4l0.2,0l0,0.1l-0.3,0.5l-0.3,0l0-0.1
+		C-2414-312.9-2413.9-313.1-2413.9-313.4z M-2414.4-311.9l-0.1,0.8l-0.2,0l-0.1-0.8L-2414.4-311.9z M-2419.7-297
+		c-0.2,1-0.4,1.6-0.7,1.6l0-0.1C-2420.4-296-2420.2-296.5-2419.7-297z M-2420.6-294.9l0,0.1c0,0.2-0.1,0.3-0.3,0.3l0-0.1
+		C-2420.9-294.7-2420.8-294.8-2420.6-294.9z M-2420.9-290.6l0.5,0l0,0.2c-0.1,0-0.3,0.1-0.5,0.2l-0.3,0
+		C-2421.2-290.4-2421.1-290.5-2420.9-290.6z M-2407-294.8c-2.7,1.3-4.3,2.3-4.8,2.7c-3,1-4.4,1.7-4.4,1.9c-2.6,1-4.4,1.8-5.2,2.3
+		c-0.2,0-0.5-0.1-0.9-0.2c0-0.5,0.2-1,0.7-1.3c0.5,0,0.9,0,1.3,0.2c0.5-0.3,1.3-0.5,2.5-0.8l0-0.3l-1,0.1c0.1-0.2,1.1-0.6,2.8-1.3
+		l0.5,0l0,0.1c-0.8,0.1-1.3,0.3-1.4,0.8c0,0.2,0.1,0.3,0.3,0.3c0.6-0.4,0.9-0.6,0.9-0.7c1.2-0.2,4.5-1.9,9.9-5.2l0,0.3
+		C-2405.7-295.9-2406.1-295.5-2407-294.8z M-2415.3-292.1c0.8-0.1,1.5-0.4,2-0.9c0.2,0,0.3,0.1,0.4,0.3c-0.4,0-1.1,0.4-2.2,1l-0.2,0
+		L-2415.3-292.1z M-2402-302.4l-4.1,3.3c-3.1,2-4.7,3-5,3c-4.9,2.7-7.9,4.1-9.1,4.2l-0.2,0c0.1-0.6,2.3-5,6.5-13.4
+		c1.9-0.2,4.8-1,8.8-2.6l1-0.1c2-0.2,3.5,0.2,4.5,1.2l0.1,0.6C-2400.3-304-2401.1-302.7-2402-302.4z M-2410.1-306.9l0.7-0.1l0,0.1
+		l-0.7,0.1L-2410.1-306.9z M-2400.7-308.5l0.5,0c0.4,0.2,0.7,0.4,0.7,0.6l0,0.1C-2399.9-307.8-2400.3-308-2400.7-308.5z
+		 M-2399.4-316c-0.4,0.5-1.6,1.4-3.5,2.6c-0.6,0.1-3,1-7.1,2.8c-0.2-0.1-0.4-0.1-0.7-0.1l0-0.3c0-0.6,0.2-1.3,0.8-2.2
+		c0.3-1.7,0.7-2.7,1-2.9l3.4-7.7c0-0.5,0.7-0.8,2.2-1.1l0.5,0l0,0.4c1.5-0.2,2.4-0.4,2.7-0.4c2.7-0.2,4.1,0.3,4.2,1.6l0.3,0
+		l-0.1-0.8l0.3,0c0.8,0.4,1.2,1,1.3,1.6c0,0.4-0.2,1-0.7,1.6c-0.2,0-0.3-0.1-0.3-0.4l-0.3,0l-0.1,0.9c-1.4,2.1-2.4,3.1-3,3.2
+		C-2398.9-316.4-2399.3-316-2399.4-316z M-2397.3-310.6c-0.3-0.2-0.5-0.3-0.7-0.3l0-0.5l0.3,0l0.7,0.4
+		C-2397-310.8-2397.1-310.6-2397.3-310.6z M-2395.1-308c0.3,0.1,0.5,0.3,0.5,0.4l-0.1,0l0,0c0,0-0.1,0-0.1,0l-0.2,0.2L-2395.1-308z
+		 M-2394.9-306.8l0-0.1l0.4-0.1l0,0.1L-2394.9-306.8z M-2394-305.7c0,0,0,0.2,0,0.2C-2394-305.6-2394-305.6-2394-305.7z"/>
+</g>
+</svg>

src/images/icons/FrontendDevelopment/backbonejs.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:#002A41;}
+	.st1{fill:#0071B5;}
+</style>
+<g>
+	<path class="st0" d="M4.7,0v26L24,37v-7.5l-12.9-7.4V10.5L24,17.9V11L4.7,0L4.7,0z"/>
+	<path class="st1" d="M43.3,0v26L24,37v-7.5l12.9-7.4V10.5L24,17.9V11L43.3,0L43.3,0z"/>
+	<path class="st1" d="M4.7,48V22L24,11v7.5l-12.9,7.4v11L24,29.5V37L4.7,48L4.7,48z"/>
+	<path class="st0" d="M43.3,48V22L24,11v7.5l12.9,7.4v11L24,29.5V37L43.3,48L43.3,48z"/>
+</g>
+</svg>