Updated The Home page

home.css

@@ -67,7 +67,7 @@
 
 
 body::-webkit-scrollbar {
-  width: 1em;
+  width: 1  em;
   height: 1em;
 }
 

index.css

@@ -1,3 +1,6 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
+
 body,
 html {
     margin: 0;
@@ -50,7 +53,7 @@ html {
 /* Base styles */
 body {
   font-family: sans-serif;
-  background-color: #181818; /* Dark gray background */
+  background-color: #22428C; 
   color: #ffffff; /* White text color */
   margin: 0;
   display: flex;
@@ -96,6 +99,7 @@ main h1 {
   font-size: 3rem;
   margin-bottom: 1rem;
   color: #ffffff; /* White heading text */
+
 }
 
 /* Search bar styles */
@@ -108,9 +112,11 @@ main h1 {
   padding: 1rem;
   border-radius: 5px;
   border: none;
-  background-color: #0d0d0d; /* Dark gray input background */
-  color: #f5eeee; /* White input text */
+  /* background-color: #0d0d0d; Dark gray input background */
+  color: #22428C; /* White input text */
   flex-grow: 1;
+  font-weight: 500;
+
 }
 
 #searchButton {
@@ -123,6 +129,12 @@ main h1 {
   height: 24px;
 }
 
+.links{
+  font-family: "Indie Flower", serif;
+  font-weight: 400;
+  font-size: 18px;
+  font-style: normal;
+}
 /* No projects message */s
 #no-projects {
   text-align: center;
@@ -135,4 +147,33 @@ footer {
   padding: 1rem;
   text-align: center;
   color: #f3eeee; /* Light gray footer text */
+  font-family: "Indie Flower", serif;
+  font-weight: 800;
+  font-style: normal;
+}
+
+.cursor-follower{
+  height:35px;
+  width:35px;
+  border-radius: 100%;
+  position: absolute;
+  background-color: transparent;
+  z-index: 1000;
+  top:100px;
+  transition: 2s ease-in;
+  background-image: url("./react.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  animation: circle 4s linear infinite alternate-reverse;
+  background-blend-mode:overlay;
+}
+
+@keyframes circle {
+  0%{
+    transform: rotateZ(0deg);
+  }
+
+  100%{
+    transform: rotateZ(360deg);
+  }
 }

index.html

@@ -11,6 +11,7 @@
       content="A collection of 100 web projects from basic to intermediate using html css and js."
       property="og:description"
     />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <meta content="/" property="og:url" />
     <meta content="https://i.imgur.com/3cztaa9.png" property="og:image" />
     <meta content="#c2a3d6" data-react-helmet="true" name="theme-color" />
@@ -187,14 +188,16 @@
 
       <div class="links">
         <table class="table is-fullwidth is-bordered is-striped is-hoverable">
-          <thead>
+          <thead style="text-align: center;">
             <tr>
               <th>Day</th>
               <th>Project Name</th>
               <th>Demo Link</th>
             </tr>
           </thead>
-          <tbody id="tableBody"></tbody>
+          <tbody id="tableBody" style="text-align: center;">
+
+          </tbody>
         </table>
       </div>
 
@@ -273,11 +276,36 @@ <h2 class="is-size-4">Important Links</h2>
       <i class="fa-solid fa-arrow-up fa-lg"></i>
     </button>
 
+    <div class="cursor-follower">
+
+    </div>
+
     <!-- Pushed JavaScript Code To Here -->
     <script src="index.js"></script>
     <script src="bulma.js"></script>
 
     <script>
+
+      //cursor-follower code
+      var body = document.querySelector("body");
+      var cf = document.querySelector(".cursor-follower");
+      var xp=0;
+      var yp=0;
+      var mouseX=0;
+      var mouseY=0;
+      body.addEventListener("mousemove",(e)=>{
+        mouseX=e.pageX;
+        mouseY=e.pageY;
+      })
+
+      setInterval(()=>{
+        xp+=(mouseX - xp);
+        yp+=(mouseY - yp);
+
+        cf.style.left=xp+"px";
+        cf.style.top=yp+"px";
+      },20);
+
       // Get the button element
       const scrollBtn = document.getElementById('scrollBtn');
 
@@ -297,6 +325,8 @@ <h2 class="is-size-4">Important Links</h2>
             behavior: "smooth"
         });
       };
+
+
 
     </script>
   </body>

index.js

@@ -99,9 +99,9 @@ function fillTable(){
         link = document.createElement("td")
         a = document.createElement("a")
 
-
-        days.innerText = (e[0]) // Putting Data in the table data elements
-        nameP.innerText = (e[1])
+        
+        days.innerHTML = ("<i class='fa-solid fa-calendar'></i> "+e[0]) // Putting Data in the table data elements
+        nameP.innerHTML = ("<i class='fa-solid fa-list-check'></i> "+e[1])
         a.href = e[2]
         a.innerText = "Here"
         nameP.classList.add("project-name") // Added this class to search among the results