Remove shapes background from project page

2 files changed, 128 insertions, 144 deletions

diff --git a/src/components/ShapesBackground.astro b/src/components/ShapesBackground.astro
index 9a518c6..f288039 100644
--- a/src/components/ShapesBackground.astro
+++ b/src/components/ShapesBackground.astro
@@ -1,148 +1,135 @@
 <ul class="circles">
-    <li></li>
-    <li></li>
-    <li></li>
-    <li></li>
-    <li></li>
-    <li></li>
-    <li></li>
-    <li></li>
-    <li></li>
-    <li></li>
-  </ul>
+  <li></li>
+  <li></li>
+  <li></li>
+  <li></li>
+  <li></li>
+  <li></li>
+  <li></li>
+  <li></li>
+  <li></li>
+  <li></li>
+</ul>
 <style>
-  .context {
-    width: 100%;
-    position: absolute;
-    top: 50vh;
-  }
-
-  .context h1 {
-    text-align: center;
-    color: #fff;
-    font-size: 3rem; /* Using rem for scalable font size */
-  }
-
-  .circles {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    z-index: -1;
-  }
+.context {
+  width: 100%;
+  position: absolute;
+  top: 50vh;
+}
 
-  .circles li {
-    position: absolute;
-    display: block;
-    list-style: none;
-    width: 2vw;
-    height: 2vw;
-    background: rgba(255, 255, 255, 0.2);
-    animation: animate 25s linear infinite;
-    bottom: -10vw;
-  }
+.context h1 {
+  text-align: center;
+  color: #fff;
+  font-size: 50px;
+}
 
+.circles {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  z-index: -1;
+}
 
-  .circles li:nth-child(1) {
-    left: 25%;
-    width: 80px;
-    height: 80px;
-    animation-delay: 0s;
-  }
+.circles li {
+  position: absolute;
+  display: block;
+  list-style: none;
+  width: 20px;
+  height: 20px;
+  background: rgba(255, 255, 255, 0.2);
+  animation: animate 25s linear infinite;
+  bottom: -150px;
+}
 
-  .circles li:nth-child(2) {
-    left: 10%;
-    width: 20px;
-    height: 20px;
-    animation-delay: 2s;
-    animation-duration: 12s;
-  }
+.circles li:nth-child(1) {
+  left: 25%;
+  width: 80px;
+  height: 80px;
+  animation-delay: 0s;
+}
 
-  .circles li:nth-child(3) {
-    left: 70%;
-    width: 20px;
-    height: 20px;
-    animation-delay: 4s;
-  }
+.circles li:nth-child(2) {
+  left: 10%;
+  width: 20px;
+  height: 20px;
+  animation-delay: 2s;
+  animation-duration: 12s;
+}
 
-  .circles li:nth-child(4) {
-    left: 40%;
-    width: 60px;
-    height: 60px;
-    animation-delay: 0s;
-    animation-duration: 18s;
-  }
+.circles li:nth-child(3) {
+  left: 70%;
+  width: 20px;
+  height: 20px;
+  animation-delay: 4s;
+}
 
-  .circles li:nth-child(5) {
-    left: 65%;
-    width: 20px;
-    height: 20px;
-    animation-delay: 0s;
-  }
+.circles li:nth-child(4) {
+  left: 40%;
+  width: 60px;
+  height: 60px;
+  animation-delay: 0s;
+  animation-duration: 18s;
+}
 
-  .circles li:nth-child(6) {
-    left: 75%;
-    width: 110px;
-    height: 110px;
-    animation-delay: 3s;
-  }
+.circles li:nth-child(5) {
+  left: 65%;
+  width: 20px;
+  height: 20px;
+  animation-delay: 0s;
+}
 
-  .circles li:nth-child(7) {
-    left: 35%;
-    width: 150px;
-    height: 150px;
-    animation-delay: 7s;
-  }
+.circles li:nth-child(6) {
+  left: 75%;
+  width: 110px;
+  height: 110px;
+  animation-delay: 3s;
+}
 
-  .circles li:nth-child(8) {
-    left: 50%;
-    width: 25px;
-    height: 25px;
-    animation-delay: 15s;
-    animation-duration: 45s;
-  }
+.circles li:nth-child(7) {
+  left: 35%;
+  width: 150px;
+  height: 150px;
+  animation-delay: 7s;
+}
 
-  .circles li:nth-child(9) {
-    left: 20%;
-    width: 15px;
-    height: 15px;
-    animation-delay: 2s;
-    animation-duration: 35s;
-  }
+.circles li:nth-child(8) {
+  left: 50%;
+  width: 25px;
+  height: 25px;
+  animation-delay: 15s;
+  animation-duration: 45s;
+}
 
-  .circles li:nth-child(10) {
-    left: 85%;
-    width: 150px;
-    height: 150px;
-    animation-delay: 0s;
-    animation-duration: 11s;
-  }
+.circles li:nth-child(9) {
+  left: 20%;
+  width: 15px;
+  height: 15px;
+  animation-delay: 2s;
+  animation-duration: 35s;
+}
 
-  @keyframes animate {
-    0% {
-      transform: translateY(0) rotate(0deg);
-      opacity: 0.5;
-      border-radius: 0;
-    }
+.circles li:nth-child(10) {
+  left: 85%;
+  width: 150px;
+  height: 150px;
+  animation-delay: 0s;
+  animation-duration: 11s;
+}
 
-    100% {
-      transform: translateY(-1000px) rotate(720deg);
-      opacity: 0;
-      border-radius: 50%;
-    }
+@keyframes animate {
+  0% {
+    transform: translateY(0) rotate(0deg);
+    opacity: 0.5;
+    border-radius: 0;
   }
-  @media (max-width: 768px) {
-    .context h1 {
-      font-size: 2rem;
-    }
 
-    .circles li {
-      width: 5vw;
-      height: 5vw;
-      bottom: -15vw;
-    }
-    
+  100% {
+    transform: translateY(-1000px) rotate(720deg);
+    opacity: 0;
+    border-radius: 50%;
   }
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index d5f97c9..0da5cc1 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -2,7 +2,6 @@
 import Layout from "../layouts/Layout.astro";
 import SocialNavbar from "../components/SocialNavbar.astro";
 import Card from "../components/Card.astro";
-import ShapesBackground from "../components/ShapesBackground.astro";
 ---
 
 <Layout title="Projects">
@@ -97,23 +96,21 @@ import ShapesBackground from "../components/ShapesBackground.astro";
     </ul>
   </main>
   <SocialNavbar />
-  <ShapesBackground />
   <style>
-    
     main {
-    margin: auto;
-    padding: 1rem;
-    max-width: 1200px;
-    color: white;
-    font-size: 20px;
-    line-height: 1.6;
-}
-.link-card-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(24ch, 1fr));
-  gap: 2rem;
-  padding: 0;
-}
+      margin: auto;
+      padding: 1rem;
+      max-width: 1200px;
+      color: white;
+      font-size: 20px;
+      line-height: 1.6;
+    }
+    .link-card-grid {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(24ch, 1fr));
+      gap: 2rem;
+      padding: 0;
+    }
     @media (max-width: 1020px) {
       .link-card-grid {
         display: grid;