From 8f075645ddbb495f68b14b188e7f28148648c076 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Sat, 25 Sep 2021 22:17:25 -0400
Subject: [PATCH] Removed particles background

---
 frontend/package.json          |  1 -
 frontend/src/components/App.js |  4 +-
 frontend/src/particles.json    | 73 ----------------------------------
 frontend/src/styles/App.css    |  4 +-
 frontend/yarn.lock             | 21 ----------
 5 files changed, 3 insertions(+), 100 deletions(-)
 delete mode 100644 frontend/src/particles.json

diff --git a/frontend/package.json b/frontend/package.json
index 8c267e1..5f24c63 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,7 +17,6 @@
     "react-dom": "^17.0.2",
     "react-modal": "^3.14.3",
     "react-scripts": "4.0.3",
-    "react-tsparticles": "^1.28.0",
     "react-webworker": "^2.1.0",
     "tslib": "^2.2.0"
   },
diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js
index 41c43de..f062a95 100644
--- a/frontend/src/components/App.js
+++ b/frontend/src/components/App.js
@@ -1,5 +1,3 @@
-import Particles from 'react-tsparticles';
-import particlesOptions from '../particles.json';
 import Github from './Github';
 import MainColumn from './MainColumn';
 import '../styles/App.css';
@@ -7,7 +5,7 @@ import '../styles/App.css';
 const App = () => (
   <div className="App">
     <Github />
-    <Particles options={particlesOptions} />
+    <div className="background" />
     <MainColumn />
   </div>
 );
diff --git a/frontend/src/particles.json b/frontend/src/particles.json
deleted file mode 100644
index f79086e..0000000
--- a/frontend/src/particles.json
+++ /dev/null
@@ -1,73 +0,0 @@
-{
-  "fpsLimit": 30,
-  "interactivity": {
-    "detectsOn": "window",
-    "events": {
-      "onClick": {
-        "enable": false,
-        "mode": "push"
-      },
-      "onHover": {
-        "enable": true,
-        "mode": "bubble"
-      },
-      "resize": true
-    },
-    "modes": {
-      "bubble": {
-        "distance": 150,
-        "duration": 2,
-        "opacity": 0.5,
-        "size": 15
-      },
-      "push": {
-        "quantity": 4
-      },
-      "repulse": {
-        "distance": 200,
-        "duration": 0.4
-      }
-    }
-  },
-  "particles": {
-    "color": {
-      "value": "#ffffff"
-    },
-    "links": {
-      "color": "#ffffff",
-      "distance": 150,
-      "enable": true,
-      "opacity": 0.2,
-      "width": 1
-    },
-    "collisions": {
-      "enable": true
-    },
-    "move": {
-      "direction": "none",
-      "enable": true,
-      "outMode": "bounce",
-      "random": false,
-      "speed": 0.2,
-      "straight": false
-    },
-    "number": {
-      "density": {
-        "enable": true,
-        "value_area": 800
-      },
-      "value": 70
-    },
-    "opacity": {
-      "value": 0.4
-    },
-    "shape": {
-      "type": "circle"
-    },
-    "size": {
-      "random": true,
-      "value": 5
-    }
-  },
-  "detectRetina": true
-}
diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css
index 34e0fda..1feff72 100644
--- a/frontend/src/styles/App.css
+++ b/frontend/src/styles/App.css
@@ -15,11 +15,10 @@
   flex-direction: column;
 }
 
-#tsparticles {
+.background {
   position: fixed;
   width: 100%;
   height: 100%;
-  z-index: -1;
   background: rgb(87, 35, 117);
   background: linear-gradient(
     165deg,
@@ -27,6 +26,7 @@
     rgba(148, 62, 197, 1) 55%,
     rgba(211, 176, 231, 1) 100%
   );
+  z-index: -1;
 }
 
 .github {
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 3585fcc..b4f7e82 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -7964,11 +7964,6 @@ path-type@^4.0.0:
   resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-pathseg@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/pathseg/-/pathseg-1.2.0.tgz"
-  integrity sha512-+pQS7lTaoVIXhaCW7R3Wd/165APzZHWzYVqe7dxzdupxQwebgpBaCmf0/XZwmoA/rkDq3qvzO0qv4d5oFVrBRw==
-
 pbkdf2@^3.0.3:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.1.2.tgz#dd822aa0887580e52f1a039dc3eda108efae3075"
@@ -9145,15 +9140,6 @@ react-scripts@4.0.3:
   optionalDependencies:
     fsevents "^2.1.3"
 
-react-tsparticles@^1.28.0:
-  version "1.28.0"
-  resolved "https://registry.npmjs.org/react-tsparticles/-/react-tsparticles-1.28.0.tgz"
-  integrity sha512-3GSvD/1sHlpyhpzdWcP/uSy5AeoEKr+9ZZjaHGubCHualpSu2UilNunpw49J5AQq6AzsP4WFGI9bVulj3Uw0iw==
-  dependencies:
-    fast-deep-equal "^3.1.3"
-    tslib "^2.2.0"
-    tsparticles "^1.28.0"
-
 react-webworker@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/react-webworker/-/react-webworker-2.1.0.tgz#6bfe5d74d3f3e5bae89f316b8760b3e8cc551420"
@@ -10667,13 +10653,6 @@ tslib@^2.0.3, tslib@^2.2.0:
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz"
   integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
 
-tsparticles@^1.28.0:
-  version "1.28.0"
-  resolved "https://registry.npmjs.org/tsparticles/-/tsparticles-1.28.0.tgz"
-  integrity sha512-JDKNxuG99J64vF6cTfQ3S+lnhwK+LKHJYn46j9SX2Mae0gog34T0fm6cM0b1CRkB/MeCJ3mF0KaLRh5OdSEV1Q==
-  optionalDependencies:
-    pathseg "^1.2.0"
-
 tsutils@^3.17.1:
   version "3.20.0"
   resolved "https://registry.npmjs.org/tsutils/-/tsutils-3.20.0.tgz"