added particles js

ByteForgeSoftware · Jun 30, 2023 · a57b94c · a57b94c
1 parent 4e3476e
commit a57b94c
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -12,11 +12,14 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"  rel="stylesheet"/>
+
   </head>
   <body>
+    <div id="tsparticles" class="tsparticles"></div>
     <div id="app" class="vh-100">
-
     </div>
+    <script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-triangles@2/tsparticles.preset.triangles.bundle.min.js"></script>
     <script type="module" src="/src/main.ts"></script>
+
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "vite": "^4.3.9"
   },
   "dependencies": {
-    "bootstrap": "^5.3.0"
+    "bootstrap": "^5.3.0",
+    "tsparticles-engine": "^2.10.1"
   }
 }
diff --git a/src/animations.scss b/src/animations.scss
@@ -3,7 +3,7 @@
   0% {
     opacity: 0;
     transform: translateX(-50%);
-    text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
+    text-shadow: -2px 3px 0 red, 2px -3px 0 rgb(69, 69, 69);
   };
   60% {
     opacity: 0.5;
@@ -12,7 +12,7 @@
   80% {
     transform: none;
     opacity: 1;
-    text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
+    text-shadow: 2px -3px 0 red, -2px 3px 0 rgb(69, 69, 69);
   }
   100% {
     text-shadow: none;
@@ -21,11 +21,11 @@
 
 @keyframes glitch {
   0% {
-    text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
+    text-shadow: -2px 3px 0 red, 2px -3px 0 rgb(69, 69, 69);
     transform: translate(var(--glitch-translate));
   }
   2% {
-    text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
+    text-shadow: 2px -3px 0 red, -2px 3px 0 rgb(69, 69, 69);
   }
   4%, 100% {  text-shadow: none; transform: none; }
 }
diff --git a/src/main.ts b/src/main.ts
@@ -1,6 +1,83 @@
 import 'bootstrap';
 import 'bootstrap/scss/bootstrap.scss';
 import './style.scss'
+import { tsParticles } from "tsparticles-engine";
+
+(async () => {
+  //@ts-ignore
+  await loadTrianglesPreset(tsParticles); // this is required only if you are not using the bundle script
+
+  await tsParticles.load("tsparticles", {
+    particles: {
+      "number": {
+        "value": 35,
+        "density": {
+          "enable": true,
+          "value_area": 500
+        }
+      },
+      "color": {
+        "value": "#ffffff"
+      },
+      "shape": {
+        "type": "circle",
+        "stroke": {
+          "width": 0,
+          "color": "#000000"
+        },
+        "polygon": {
+          "nb_sides": 5
+        },
+        "image": {
+          "width": 100,
+          "height": 100
+        }
+      },
+      "opacity": {
+        "value": 0.5,
+        "random": false,
+        "anim": {
+          "enable": false,
+          "speed": 0.5,
+          "opacity_min": 0.1,
+          "sync": false
+        }
+      },
+      "size": {
+        "value": 3,
+        "random": true,
+        "anim": {
+          "enable": false,
+          "speed": 10,
+          "size_min": 0.1,
+          "sync": false
+        }
+      },
+      "line_linked": {
+        "enable": true,
+        "distance": 150,
+        "color": "#ffffff",
+        "opacity": 0.4,
+        "width": 1
+      },
+      "move": {
+        "enable": true,
+        "speed": 2,
+        "direction": "none",
+        "random": false,
+        "straight": false,
+        "out_mode": "out",
+        "bounce": false,
+        "attract": {
+          "enable": false,
+          "rotateX": 600,
+          "rotateY": 1200
+        }
+      }
+
+    }
+  });
+})();
 
 const app = document.querySelector<HTMLDivElement>('#app');
 if (app) {

diff --git a/src/style.scss b/src/style.scss
@@ -31,7 +31,7 @@ body {
   grid-template-columns: 1fr;
 }
 
-header {
+header, main,body, footer {
   z-index: 2;
 }
 
@@ -69,4 +69,8 @@ header {
 
 .logo {
   width: 38px;
+}
+
+.tsparticles {
+  opacity: 0.5;
 }
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,7 +1,6 @@
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-  // base:'/byteforgesoftware.github.io',
   css: {
   },
 });