From a511476c12960c876eab735dc9777ac23b351acf Mon Sep 17 00:00:00 2001
From: Yusuf Morsi <ymorsi7@gmail.com>
Date: Thu, 24 Feb 2022 14:35:45 -0800
Subject: [PATCH] work in progress (background animation)

---
 index.html | 48 ++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 46 insertions(+), 2 deletions(-)
diff --git a/index.html b/index.html
index f647385..8431fdb 100644
--- a/index.html
+++ b/index.html
@@ -10,13 +10,14 @@
 	<link rel="stylesheet" type="text/css" href="./docs/css/popup.css">
 	<link rel="stylesheet" type="text/css" href="./docs/css/main1.css">
 	<link rel="stylesheet" type="text/css" href="docs\css\scrollfade.css">
+	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 	<script src="docs\js\scrollfade.js"></script>
-
+	<script src = "https://cdn.jsdelivr.net/gh/BMSVieira/BVAmbient@413fec0/js/bvambient.js"></script>
 
 	<link rel="stylesheet" href="./docs/css/bootstrap.min.css" />
 	<link rel="stylesheet" href="./docs/css/font-awesome.min.css" />
 	<link rel="stylesheet" href="./docs/css/magnific-popup.css" />
-	<link rel="stylesheet" href="./docs/css/slicknav.min.css" />
+	<link rel="stylesheet" href="./docs/css/slicknav.mssssssin.css" />
 	<link rel="stylesheet" href="./docs/css/owl.carousel.min.css" />
 	<link rel="stylesheet" type="text/css" href="./docs/css/stylep.css">
 	<link rel="stylesheet" type="text/css" href="./docs/css/styles.css">
@@ -34,6 +35,8 @@
 
 </head>
 
+
+
 <body>
 	<br>
 	<!-- Navbar -->
@@ -970,6 +973,47 @@ <h3 class="title is-3">More About Me</h3>
 		}
 
 	</script>
+
+<!--BELOW IS FOR BACKGROUND ANIMATION (WORK IN PROGRESS)-->
+<script>
+
+/* Check External Source: bvambient.js */ 
+document.addEventListener("DOMContentLoaded", function() {
+                   var demo1 = new BVAmbient({
+            selector: "#ambient",
+            fps: 60,
+            max_transition_speed: 12000,
+            min_transition_speed: 8000,
+            particle_number: 30,
+            particle_maxwidth: 60,
+            particle_minwidth: 10,
+            particle_radius: 50,
+            particle_opacity: true,
+            particle_colision_change: true,
+            particle_background: "#58c70c",
+            particle_image: {
+              image: false,
+              src: ""
+            },
+            responsive: [
+                {
+                  breakpoint: 768,
+                  settings: {
+                    particle_number: "15"
+                  }
+                },
+                {
+                  breakpoint: 480,
+                  settings: {
+                    particle_number: "10"
+                  }
+                }
+            ]
+          });
+    });
+
+
+</script>
 	<script src="./docs/js/controller.js"></script>
 	<script src="./docs/js/title.js"></script>
 	<script src="./docs/js/popup.js"></script>
