diff --git a/htdocs/assets/js/floatingbar-config.js b/htdocs/assets/js/floatingbar-config.js
new file mode 100644
index 0000000..ca0f4c9
--- /dev/null
+++ b/htdocs/assets/js/floatingbar-config.js
@@ -0,0 +1,18 @@
+//---controls the bottom floating bar behaviour
+let lastScrollTop = 0;
+
+window.addEventListener("scroll", function () {
+    const st = window.pageYOffset || document.documentElement.scrollTop;
+
+    if (st > lastScrollTop) {
+    // Scrolling down
+    document.getElementById("floating-bar").classList.add("floatingbar-slide-down");
+    document.getElementById("floating-bar").classList.remove("floatingbar-slide-up");
+    } else {
+    // Scrolling up
+    document.getElementById("floating-bar").classList.remove("floatingbar-slide-down");
+    document.getElementById("floating-bar").classList.add("floatingbar-slide-up");
+    }
+
+    lastScrollTop = st <= 0 ? 0 : st;
+});
\ No newline at end of file
diff --git a/htdocs/assets/js/preloader-config.js b/htdocs/assets/js/preloader-config.js
new file mode 100644
index 0000000..1187601
--- /dev/null
+++ b/htdocs/assets/js/preloader-config.js
@@ -0,0 +1,4 @@
+//---controls the page preloader behaviour
+window.addEventListener("load", function(){
+    $('#preloader').addClass('hidden');
+});
\ No newline at end of file
diff --git a/htdocs/assets/style.css b/htdocs/assets/style.css
index 4cff2e6..03345cc 100644
--- a/htdocs/assets/style.css
+++ b/htdocs/assets/style.css
@@ -575,10 +575,6 @@ video {
   left: 3.2rem;
 }
 
-.left-\[50vw\] {
-  left: 50vw;
-}
-
 .right-0 {
   right: 0px;
 }
@@ -1374,28 +1370,11 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-\[0px_0px_30px\] {
-  --tw-shadow: 0px 0px 30px;
-  --tw-shadow-colored: 0px 0px 30px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-\[0px_0px_20px\] {
-  --tw-shadow: 0px 0px 20px;
-  --tw-shadow-colored: 0px 0px 20px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .shadow-accent_primary {
   --tw-shadow-color: #38BDF8;
   --tw-shadow: var(--tw-shadow-colored);
 }
 
-.shadow-accent_primary_extratransparent {
-  --tw-shadow-color: rgba(56, 189, 248, 0.15);
-  --tw-shadow: var(--tw-shadow-colored);
-}
-
 .shadow-accent_primary_transparent {
   --tw-shadow-color: rgba(56, 189, 248, 0.30);
   --tw-shadow: var(--tw-shadow-colored);
@@ -1485,16 +1464,21 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.hover\:shadow-\[0px_0px_30px\]:hover {
+  --tw-shadow: 0px 0px 30px;
+  --tw-shadow-colored: 0px 0px 30px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .hover\:shadow-lg:hover {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.hover\:shadow-\[0px_0px_30px\]:hover {
-  --tw-shadow: 0px 0px 30px;
-  --tw-shadow-colored: 0px 0px 30px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+.hover\:shadow-accent_primary_extratransparent:hover {
+  --tw-shadow-color: rgba(56, 189, 248, 0.15);
+  --tw-shadow: var(--tw-shadow-colored);
 }
 
 .hover\:shadow-accent_primary_transparent:hover {
@@ -1507,11 +1491,6 @@ video {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
-.hover\:shadow-accent_primary_extratransparent:hover {
-  --tw-shadow-color: rgba(56, 189, 248, 0.15);
-  --tw-shadow: var(--tw-shadow-colored);
-}
-
 .group:hover .group-hover\:flex {
   display: flex;
 }
diff --git a/htdocs/index.php b/htdocs/index.php
index 20b8766..860f0ce 100644
--- a/htdocs/index.php
+++ b/htdocs/index.php
@@ -219,11 +219,10 @@ require './core/query_functions.php';
         </div>
     </div>
     <?php require 'assets/_footer.php';?>
-    <script>
-        window.addEventListener("load", function(){
-         $('#preloader').addClass('hidden');
-        });
-
+    <script type="text/javascript" src="./assets/js/preloader-config.js"></script>
+    <script type="text/javascript" src="./assets/js/floatingbar-config.js"></script>
+    <script type="text/javascript">
+        //---hello textbox (hero-section) config
         const texts = ["Namaste! 🙏", "Hello! 👋", "Konnichiwa! 😄", "Anyeonghaseyo! 😊", "Hola! 😃", "Bonjour! 😄", "Zdravstvuyte! 🙂", "Marhabaan! 😊", "Olá! 😃", "Salve! 🤠"];
         const textContainer = document.getElementById("helloContainer");
 
@@ -238,6 +237,7 @@ require './core/query_functions.php';
         }
         animateText();
 
+        //---about me card hover animation config
         const handleOnMouseMove = e => {
             const { currentTarget: target } = e;
             const rect = target.getBoundingClientRect(),
@@ -251,24 +251,6 @@ require './core/query_functions.php';
         for(const card of document.querySelectorAll(".aboutcontainer")){
             card.onmousemove = e => handleOnMouseMove(e);
         }
-
-        let lastScrollTop = 0;
-
-        window.addEventListener("scroll", function () {
-            const st = window.pageYOffset || document.documentElement.scrollTop;
-
-            if (st > lastScrollTop) {
-            // Scrolling down
-            document.getElementById("floating-bar").classList.add("floatingbar-slide-down");
-            document.getElementById("floating-bar").classList.remove("floatingbar-slide-up");
-            } else {
-            // Scrolling up
-            document.getElementById("floating-bar").classList.remove("floatingbar-slide-down");
-            document.getElementById("floating-bar").classList.add("floatingbar-slide-up");
-            }
-
-            lastScrollTop = st <= 0 ? 0 : st;
-        });
     </script>
 </body>
 </html>
\ No newline at end of file