diff --git a/package-lock.json b/package-lock.json index abf187598573f0aa15f7e0d76a6da2e2504d33be..363e16b44cf01cbfd2a5ecac390e0174036bbcb9 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 9b2a9ef3f63c1ec36f3084afa8dc9910fd306f31..505d60bc06ba5ee493bfaf17d818e5acb65001a7 100644 --- a/package.json +++ b/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", diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue index 85ef2f2ec30afcac19f1db02bb802576ed4c38aa..09785b68eb4e831d6470b6ecfd200c3df0a5ff42 100644 --- a/src/layouts/MainLayout.vue +++ b/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); } });