Remove tsparticles

package-lock.json

@@ -12,7 +12,6 @@
         "axios": "0.27.2",
         "core-js": "3.26.1",
         "quasar": "2.7.7",
-        "tsparticles": "1.41.6",
         "vue": "3.2.47",
         "vue-router": "4.1.6"
       },
@@ -10541,23 +10540,6 @@
       "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
       "dev": true
     },
-    "node_modules/tsparticles": {
-      "version": "1.41.6",
-      "resolved": "https://registry.npmjs.org/tsparticles/-/tsparticles-1.41.6.tgz",
-      "integrity": "sha512-LdU1eWaRdCVAvgF3UA5/qR/otWloGHAOSrzSiXx5nEnyBY6mvpLws3TMX0R5Y3xHE1JoomtxqnIsIJXL/21/pQ==",
-      "deprecated": "2.3.1 is out and it has a smaller output size",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/matteobruni"
-        },
-        {
-          "type": "buymeacoffee",
-          "url": "https://www.buymeacoffee.com/matteobruni"
-        }
-      ],
-      "hasInstallScript": true
-    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -19480,11 +19462,6 @@
       "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
       "dev": true
     },
-    "tsparticles": {
-      "version": "1.41.6",
-      "resolved": "https://registry.npmjs.org/tsparticles/-/tsparticles-1.41.6.tgz",
-      "integrity": "sha512-LdU1eWaRdCVAvgF3UA5/qR/otWloGHAOSrzSiXx5nEnyBY6mvpLws3TMX0R5Y3xHE1JoomtxqnIsIJXL/21/pQ=="
-    },
     "type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",

package.json

@@ -19,8 +19,7 @@
     "core-js": "3.26.1",
     "quasar": "2.7.7",
     "vue": "3.2.47",
-    "vue-router": "4.1.6",
-    "tsparticles": "1.41.6"
+    "vue-router": "4.1.6"
   },
   "devDependencies": {
     "@babel/eslint-parser": "7.21.3",

src/layouts/MainLayout.vue

@@ -44,10 +44,6 @@
         <div class="col">
           <div class="full-height full-width">
             <q-scroll-area class="full-height full-width page">
-              <div
-                id="particles-js"
-                :class="this.$q.dark.isActive ? 'dark_gradient' : 'normal_gradient'"
-              />
               <router-view/>
             </q-scroll-area>
           </div>
@@ -77,117 +73,15 @@
 
 <script>
 import { defineComponent, ref } from "vue";
-import { tsParticles } from 'tsparticles';
 
 export default defineComponent({
   name: "MainLayout",
 
   setup() {
     let year = new Date().getFullYear();
-    let options = {
-      "fpsLimit": 30,
-      "particles": {
-        "number": {
-          "value": 50,
-          "density": {
-            "enable": true,
-            "value_area": 800
-          }
-        },
-        "color": {
-          "value": ["#325358", "#C0FFEE", "#31CCEC", "#6A1A78"]
-        },
-        "shape": {
-          "type": ["circle", "triangle", "edge", "polygon"],
-          "stroke": {
-            "width": 0,
-            "color": ["#325358", "#C0FFEE", "#31CCEC", "#6A1A78"]
-          },
-          "polygon": {
-            "nb_sides": 6
-          }
-        },
-        "opacity": {
-          "value": 1,
-          "random": true,
-          "anim": {
-            "enable": true,
-            "speed": 1,
-            "opacity_min": 0.1,
-            "sync": false
-          }
-        },
-        "size": {
-          "value": 3.5,
-          "random": true,
-          "anim": {
-            "enable": true,
-            "speed": 1,
-            "size_min": 0.1,
-            "sync": false
-          }
-        },
-        "links": {
-          "enable": true,
-          "distance": 150,
-          "color": "#C0FFEE",
-          "opacity": 0.4,
-          "width": 1
-        },
-        "move": {
-          "enable": true,
-          "speed": 1.5,
-          "direction": "right",
-          "random": true,
-          "straight": false,
-          "outModes": {
-            "default": "out",
-            "bottom": "out",
-            "left": "out",
-            "right": "out",
-            "top": "out"
-          },
-          "bounce": false
-        },
-      },
-      "interactivity": {
-        "detect_on": "canvas",
-        "events": {
-          "onhover": {
-            "enable": true,
-            "mode": ["bubble", "grab"]
-          },
-          "onclick": {
-            "enable": false,
-            "mode": "push"
-          },
-          "resize": true
-        },
-        "modes": {
-          "grab": {
-            "distance": 140,
-            "line_linked": {
-              "opacity": 1
-            }
-          },
-          "bubble": {
-            "distance": 200,
-            "size": 4,
-            "duration": 5,
-            "opacity": 1,
-            "speed": 0.1
-          },
-          "push": {
-            "particles_nb": 4
-          }
-        }
-      },
-      "retina_detect": true
-    };
     return {
       viewInfo: ref(false),
-      year,
-      options
+      year
     }
   },
   methods : {
@@ -198,7 +92,6 @@ export default defineComponent({
   },
   mounted() {
     this.$q.dark.set(this.$q.cookies.get('dark.isActive'));
-    tsParticles.load("particles-js", this.options);
   }
 
 });