add ScrollProgressBar component

CONTRIBUTORS.md

@@ -143,7 +143,19 @@
           <sub><b>divy-03</b></sub>
         </a>
       </td>
-
+      </tr>
+    <tr>
+      <td align="center">
+        <a href="https://github.com/shubsolos19" target="_blank" rel="noopener noreferrer">
+          <img
+            src="https://avatars.githubusercontent.com/shubsolos19"
+            width="85"
+            alt="shubsolos19"
+          />
+          <br />
+          <sub><b>shubsolos19</b></sub>
+        </a>
+      </td>
     </tr>
   </tbody>
 </table>

community-website/components/ScrollProgressBar.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+
+const ScrollProgressBar = () => {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    const updateProgress = () => {
+      const scrollTop = window.scrollY;
+      const docHeight =
+        document.documentElement.scrollHeight - window.innerHeight;
+      const percent = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
+      setProgress(percent);
+    };
+
+    window.addEventListener("scroll", updateProgress);
+    return () => window.removeEventListener("scroll", updateProgress);
+  }, []);
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: `${progress}%`,
+        height: "3px",
+        background: "linear-gradient(90deg, #0070f3, #00c6ff)",
+        zIndex: 9999,
+        transition: "width 0.1s ease",
+      }}
+    />
+  );
+};
+
+export default ScrollProgressBar;

community-website/pages/_app.tsx

@@ -1,8 +1,15 @@
+import ScrollProgressBar from "../components/ScrollProgressBar";
+
 import '../styles/globals.css'
 import type { AppProps } from 'next/app'
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+ return (
+  <>
+    <ScrollProgressBar />
+    <Component {...pageProps} />
+  </>
+)
 }
 
 export default MyApp

community-website/pages/contributors.tsx

@@ -283,6 +283,27 @@ const Contributors: NextPage = () => {
                     </sub>
                   </a>
                 </td>
+              <tr>
+                <td align="center" className={styles.tableData}>
+                  <a
+                       href="https://github.com/shubsolos19"
+                       target="_blank"
+                       rel="noopener noreferrer"
+                    >
+                       <img
+                       src="https://avatars.githubusercontent.com/shubsolos19"
+                       width="85"
+                       height="85"
+                       alt="shubsolos19"
+                       className={styles.profileImage}
+                      />
+                      <br />
+                      <sub>
+                        <b>shubsolos19</b>
+                      </sub>
+                    </a>
+                  </td>
+                </tr>
               </tr>
             </tbody>
           </table>