From 4e98142a73e20d360c00a5059d3844c42c8a0174 Mon Sep 17 00:00:00 2001
From: Radhika Malpani <radhikavishnudas2002@gmail.com>
Date: Sun, 13 Oct 2024 22:23:44 +0530
Subject: [PATCH] Added Progressbar

---
 about.html       | 39 +++++++++++++++++++++++++++++++++++++++
 index.html       | 40 ++++++++++++++++++++++++++++++++++++++++
 resume.html      | 41 +++++++++++++++++++++++++++++++++++++++++
 resume_tips.html | 42 +++++++++++++++++++++++++++++++++++++++++-
 4 files changed, 161 insertions(+), 1 deletion(-)
diff --git a/about.html b/about.html
index 7354957..a1a77c3 100644
--- a/about.html
+++ b/about.html
@@ -308,10 +308,49 @@
     }
 }
 
+#progress-container {
+            width: 100%;
+            height: 5px;
+            background-color: white;
+            border-radius: 5px;
+            overflow: hidden; 
+            position: fixed;
+            top: 0;
+            left: 0; 
+            z-index: 9999; 
+        }
+
+        #progress-bar {
+            height: 100%;
+            background-color: #3f10ea;
+        }
+
     </style>
 </head>
 <body>
 
+    <div id="progress-container">
+        <div id="progress-bar"></div>
+      </div>
+    
+      <script>
+    let lastScrollPercentage = 0; 
+    
+    function updateProgressBar() {
+        const scrollTop = window.scrollY; 
+        const windowHeight = document.documentElement.scrollHeight - window.innerHeight; 
+        const scrollPercentage = (scrollTop / windowHeight) * 100; 
+    
+        const progressBar = document.getElementById('progress-bar');
+        
+        
+        lastScrollPercentage += (scrollPercentage - lastScrollPercentage) * 0.1; 
+        progressBar.style.width = lastScrollPercentage + '%'; 
+    }
+    window.addEventListener('scroll', updateProgressBar);
+    
+      </script>
+
    <!-- Navbar -->
    <nav class="navbar">
     <img src="images/logo.png" alt="logo">
diff --git a/index.html b/index.html
index 7b6fb90..3af0264 100644
--- a/index.html
+++ b/index.html
@@ -671,12 +671,52 @@
       .scroll-to-top i {
         font-size: 20px;
       }
+
+      #progress-container {
+            width: 100%;
+            height: 5px;
+            background-color: white;
+            border-radius: 5px;
+            overflow: hidden; 
+            position: fixed;
+            top: 0;
+            left: 0; 
+            z-index: 9999; 
+        }
+
+        #progress-bar {
+            height: 100%;
+            background-color: #3f10ea;
+        }
+      
     </style>
   </head>
 
   <body>
     <!-- header section starts -->
 
+    <div id="progress-container">
+      <div id="progress-bar"></div>
+    </div>
+  
+    <script>
+  let lastScrollPercentage = 0; 
+  
+  function updateProgressBar() {
+      const scrollTop = window.scrollY; 
+      const windowHeight = document.documentElement.scrollHeight - window.innerHeight; 
+      const scrollPercentage = (scrollTop / windowHeight) * 100; 
+  
+      
+      const progressBar = document.getElementById('progress-bar');
+      
+     
+      lastScrollPercentage += (scrollPercentage - lastScrollPercentage) * 0.1; 
+      progressBar.style.width = lastScrollPercentage + '%'; 
+  }
+  window.addEventListener('scroll', updateProgressBar);
+  
+    </script>
 
     <!-- Scripts -->
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
diff --git a/resume.html b/resume.html
index 6bf7be2..98d5a2c 100644
--- a/resume.html
+++ b/resume.html
@@ -335,9 +335,50 @@
           font-size: 22px;
         }
       }
+
+      #progress-container {
+            width: 100%;
+            height: 5px;
+            background-color: white;
+            border-radius: 5px;
+            overflow: hidden; 
+            position: fixed;
+            top: 0;
+            left: 0; 
+            z-index: 9999; 
+        }
+
+        #progress-bar {
+            height: 100%;
+            background-color: #3f10ea;
+        }
+
     </style>
   </head>
   <body>
+
+    <div id="progress-container">
+      <div id="progress-bar"></div>
+    </div>
+  
+    <script>
+  let lastScrollPercentage = 0; 
+  
+  function updateProgressBar() {
+      const scrollTop = window.scrollY; 
+      const windowHeight = document.documentElement.scrollHeight - window.innerHeight; 
+      const scrollPercentage = (scrollTop / windowHeight) * 100; 
+  
+      const progressBar = document.getElementById('progress-bar');
+      
+      
+      lastScrollPercentage += (scrollPercentage - lastScrollPercentage) * 0.1; 
+      progressBar.style.width = lastScrollPercentage + '%'; 
+  }
+  window.addEventListener('scroll', updateProgressBar);
+  
+    </script>
+    
     <!-- Navbar -->
     <nav class="navbar">
         <img src="images/logo.png" alt="logo">
diff --git a/resume_tips.html b/resume_tips.html
index ddc01d0..b88c88b 100644
--- a/resume_tips.html
+++ b/resume_tips.html
@@ -244,10 +244,50 @@
             margin-bottom:20px;
             cursor: pointer; /* Change cursor to pointer */
         }
-        
+
+         #progress-container {
+            width: 100%;
+            height: 5px;
+            background-color: white;
+            border-radius: 5px;
+            overflow: hidden; 
+            position: fixed;
+            top: 0;
+            left: 0; 
+            z-index: 9999; 
+        }
+
+        #progress-bar {
+            height: 100%;
+            background-color: #3f10ea;
+        }
+
     </style>
 </head>
 <body>
+
+    <div id="progress-container">
+        <div id="progress-bar"></div>
+      </div>
+    
+      <script>
+    let lastScrollPercentage = 0; 
+    
+    function updateProgressBar() {
+        const scrollTop = window.scrollY; 
+        const windowHeight = document.documentElement.scrollHeight - window.innerHeight; 
+        const scrollPercentage = (scrollTop / windowHeight) * 100; 
+    
+        const progressBar = document.getElementById('progress-bar');
+        
+        
+        lastScrollPercentage += (scrollPercentage - lastScrollPercentage) * 0.1; 
+        progressBar.style.width = lastScrollPercentage + '%'; 
+    }
+    window.addEventListener('scroll', updateProgressBar);
+    
+      </script>
+      
    <!-- Navbar -->
    <nav class="navbar">
     <img src="images/logo.png" alt="logo">
