Finished Page

home.css

@@ -265,6 +265,25 @@ input:checked + .slider:before {
   z-index: 1; 
 }
 
+#toggle-effects-home {
+  position: fixed;
+  top: 10px;
+  left: 10px;
+  padding: 10px 20px;
+  background-color: #4CAF50;
+  color: white;
+  text-decoration: none;
+  font-size: 16px;
+  font-family: 'BoldFont', sans-serif;
+  border-radius: 50px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+  transition: background-color 0.3s;
+  z-index: 1000;
+}
+
+#toggle-effects-home:hover {
+  background-color: #388E3C;
+}
 
 @font-face {
   font-family: BoldFont;

home.js

@@ -88,7 +88,7 @@ document.addEventListener('DOMContentLoaded', function() {
     var x = 0;
 
     for(var i = 0; i < bufferLength; i++) {
-      barHeight = dataArray[i] * 3; 
+      barHeight = dataArray[i]; 
 
       canvasCtx.fillStyle = 'rgb(50, 50, ' + (barHeight + 100) + ')'; 
       canvasCtx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
@@ -160,3 +160,33 @@ document.addEventListener('DOMContentLoaded', function() {
   playSong(currentSongIndex);
 });
 
+document.addEventListener('DOMContentLoaded', () => {
+  const toggleEffectsBtn = document.getElementById('toggle-effects-home');
+
+  if (localStorage.getItem('fancyEffects') === 'disabled') {
+    disableFancyEffects();
+  }
+
+  toggleEffectsBtn.addEventListener('click', () => {
+    if (document.body.classList.contains('fancy-effects-disabled')) {
+      enableFancyEffects();
+      localStorage.setItem('fancyEffects', 'enabled');
+    } else {
+      disableFancyEffects();
+      localStorage.setItem('fancyEffects', 'disabled');
+    }
+  });
+});
+
+function disableFancyEffects() {
+  document.body.classList.add('fancy-effects-disabled');
+  $('*').stop(true);
+  $('canvas').css('display', 'none');
+  gsap.globalTimeline.pause();
+}
+
+function enableFancyEffects() {
+  document.body.classList.remove('fancy-effects-disabled');
+  $('canvas').css('display', 'block');
+  gsap.globalTimeline.resume();
+}

index.html

@@ -34,6 +34,9 @@
         <div id="nowPlaying" class="now-playing">Now playing...</div>
       </div>
       <button id="startAudio">Start Audio</button>
+      <button id="toggle-effects">Toggle Effects</button>
+
+      <button id="toggle-effects-home" >Toggle Effects</button>
 
 
       <canvas id="visualizer"></canvas>

info.css

@@ -185,6 +185,26 @@
   #back-to-home:hover {
     background-color: #1976D2; 
   }
+
+  #toggle-effects {
+    position: fixed;
+    top: 10px;
+    left: 90px; /* Adjusted position next to the back button */
+    padding: 10px 20px;
+    background-color: #4CAF50;
+    color: white;
+    text-decoration: none;
+    font-size: 16px;
+    font-family: 'BoldFont', sans-serif;
+    border-radius: 50px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+    transition: background-color 0.3s;
+    z-index: 1000;
+  }
+
+  #toggle-effects:hover {
+    background-color: #388E3C;
+  }
   @media (min-width: 1025px) and (max-width: 1366px) {
     #info-text-container {
       top: 15%;

info.js

@@ -38,7 +38,7 @@ document.addEventListener('DOMContentLoaded', function() {
         let x = 0;
 
         for(let i = 0; i < dataArray.length; i++) {
-            barHeight = dataArray[i] * 2;
+            barHeight = dataArray[i];
             canvasCtx.fillStyle = `rgb(50, 50, ${barHeight + 100})`;
             canvasCtx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
             x += barWidth + 1;
@@ -165,3 +165,34 @@ document.addEventListener('DOMContentLoaded', function() {
 
   });
 
+  document.addEventListener('DOMContentLoaded', () => {
+    const toggleEffectsBtn = document.getElementById('toggle-effects');
+
+    if (localStorage.getItem('fancyEffects') === 'disabled') {
+      disableFancyEffects();
+    }
+
+    toggleEffectsBtn.addEventListener('click', () => {
+      if (document.body.classList.contains('fancy-effects-disabled')) {
+        enableFancyEffects();
+        localStorage.setItem('fancyEffects', 'enabled');
+      } else {
+        disableFancyEffects();
+        localStorage.setItem('fancyEffects', 'disabled');
+      }
+    });
+  });
+
+  function disableFancyEffects() {
+    document.body.classList.add('fancy-effects-disabled');
+    $('*').stop(true);
+    $('canvas').css('display', 'none');
+    gsap.globalTimeline.pause();
+  }
+
+  function enableFancyEffects() {
+    document.body.classList.remove('fancy-effects-disabled');
+    $('canvas').css('display', 'block');
+    gsap.globalTimeline.resume();
+  }
+

infopage.html

@@ -40,6 +40,8 @@
         Back
       </a>
 
+      <button id="toggle-effects">Toggle Effects</button>
+
     <div class="controls">
         <label class="switch">
             <input type="checkbox" id="toggleMusic">

projects.css

@@ -101,7 +101,25 @@
   #back-to-home:hover {
     background-color: #1976D2; 
   }
-
+  #toggle-effects {
+    position: fixed;
+    top: 10px;
+    left: 90px; /* Adjusted position next to the back button */
+    padding: 10px 20px;
+    background-color: #4CAF50;
+    color: white;
+    text-decoration: none;
+    font-size: 16px;
+    font-family: 'BoldFont', sans-serif;
+    border-radius: 50px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+    transition: background-color 0.3s;
+    z-index: 1000;
+  }
+
+  #toggle-effects:hover {
+    background-color: #388E3C;
+  }
   @media (max-width: 1024px) {
     #list-text {
       top: 10%;

projects.js

@@ -0,0 +1,31 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const toggleEffectsBtn = document.getElementById('toggle-effects');
+
+    if (localStorage.getItem('fancyEffects') === 'disabled') {
+      disableFancyEffects();
+    }
+
+    toggleEffectsBtn.addEventListener('click', () => {
+      if (document.body.classList.contains('fancy-effects-disabled')) {
+        enableFancyEffects();
+        localStorage.setItem('fancyEffects', 'enabled');
+      } else {
+        disableFancyEffects();
+        localStorage.setItem('fancyEffects', 'disabled');
+      }
+    });
+  });
+
+  function disableFancyEffects() {
+    document.body.classList.add('fancy-effects-disabled');
+    $('*').stop(true);
+    $('canvas').css('display', 'none');
+    gsap.globalTimeline.pause();
+  }
+
+  function enableFancyEffects() {
+    document.body.classList.remove('fancy-effects-disabled');
+    $('canvas').css('display', 'block');
+    gsap.globalTimeline.resume();
+  }
+

projectspage.html

@@ -5,7 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="./home.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/jquery.ripples/dist/jquery.ripples-min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <link rel="stylesheet" href="./projects.css">
     <link rel="shortcut icon" href="./Media/favicon.ico" type="image/x-icon">
@@ -23,6 +25,8 @@
     <a href="./index.html" id="back-to-home">
         Back
     </a>
+    <button id="toggle-effects">Toggle Effects</button>
+
 
 
     <div id="projects-container">
@@ -76,5 +80,6 @@
 
     <audio id="backgroundMusic" loop></audio>
     <script src="./home.js" defer></script>
+    <script src="./projects.js"></script>
 </body>
 </html>

skills.css

@@ -372,6 +372,26 @@
   background-color: #1976D2; 
 }
 
+#toggle-effects {
+  position: fixed;
+  top: 10px;
+  left: 90px; /* Adjusted position next to the back button */
+  padding: 10px 20px;
+  background-color: #4CAF50;
+  color: white;
+  text-decoration: none;
+  font-size: 16px;
+  font-family: 'BoldFont', sans-serif;
+  border-radius: 50px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+  transition: background-color 0.3s;
+  z-index: 1000;
+}
+
+#toggle-effects:hover {
+  background-color: #388E3C;
+}
+
 @media only screen and (min-width: 768px) and (max-width: 1024px) {
   #titletemplate, #titletemplate2, #titletemplate3 {
     width: 25%;

skills.js

@@ -48,3 +48,54 @@ window.onclick = function(event) {
     modal.style.display = "none";
   }
 }
+
+document.addEventListener('DOMContentLoaded', () => {
+  const toggleEffectsBtn = document.getElementById('toggle-effects');
+
+  if (localStorage.getItem('fancyEffects') === 'disabled') {
+    disableAdvancedEffects();
+  }
+
+  toggleEffectsBtn.addEventListener('click', () => {
+    const effectsDisabled = document.body.classList.toggle('fancy-effects-disabled');
+
+    if (effectsDisabled) {
+      disableAdvancedEffects();
+    } else {
+      enableAdvancedEffects();
+    }
+
+    localStorage.setItem('fancyEffects', effectsDisabled ? 'disabled' : 'enabled');
+  });
+});
+
+document.addEventListener('DOMContentLoaded', () => {
+  const toggleEffectsBtn = document.getElementById('toggle-effects');
+
+  if (localStorage.getItem('fancyEffects') === 'disabled') {
+    disableFancyEffects();
+  }
+
+  toggleEffectsBtn.addEventListener('click', () => {
+    if (document.body.classList.contains('fancy-effects-disabled')) {
+      enableFancyEffects();
+      localStorage.setItem('fancyEffects', 'enabled');
+    } else {
+      disableFancyEffects();
+      localStorage.setItem('fancyEffects', 'disabled');
+    }
+  });
+});
+
+function disableFancyEffects() {
+  document.body.classList.add('fancy-effects-disabled');
+  $('*').stop(true);
+  $('canvas').css('display', 'none');
+  gsap.globalTimeline.pause();
+}
+
+function enableFancyEffects() {
+  document.body.classList.remove('fancy-effects-disabled');
+  $('canvas').css('display', 'block');
+  gsap.globalTimeline.resume();
+}

skillspage.html

@@ -6,7 +6,9 @@
     <link rel="stylesheet" href="./home.css">
     <link rel="stylesheet" href="./skills.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/jquery.ripples/dist/jquery.ripples-min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <title>Skills Page</title>
     <link rel="shortcut icon" href="./Media/favicon.ico" type="image/x-icon">
@@ -26,6 +28,8 @@
     <a href="./index.html" id="back-to-home">
       Back
     </a>
+    <button id="toggle-effects">Toggle Effects</button>
+
 
     <img src="./Media/SkillsSprites/plus.PNG" alt="plus" id="plus">