implemented project page with cards

2 files changed, 3 insertions, 135 deletions

diff --git a/src/pages/about.astro b/src/pages/about.astro
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/about.astro
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a08de2d..fce4326 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,9 +1,10 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import SocialNavbar from '../components/SocialNavbar.astro';
+import ShapesBackground from "../components/ShapesBackground.astro";
 ---
 
-<Layout title="Welcome to Pinapelz">
+<Layout title="Pinapelz">
   <div class="center-wrapper">
     <main>
       <h1 class="welcome-message">
@@ -19,18 +20,7 @@ import SocialNavbar from '../components/SocialNavbar.astro';
       <SocialNavbar/>
     </main>
   </div>
-  <ul class="circles">
-    <li></li>
-    <li></li>
-    <li></li>
-    <li></li>
-    <li></li>
-    <li></li>
-    <li></li>
-    <li></li>
-    <li></li>
-    <li></li>
-  </ul>
+  <ShapesBackground/>
   <script>
     const welcomeMessages = [
       'print("Hello World")',
@@ -81,128 +71,6 @@ import SocialNavbar from '../components/SocialNavbar.astro';
     font-family: "Noto", sans-serif;
     height: 100%;
   }
-
-  .context {
-    width: 100%;
-    position: absolute;
-    top: 50vh;
-  }
-
-  .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 {
-    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(1) {
-    left: 25%;
-    width: 80px;
-    height: 80px;
-    animation-delay: 0s;
-  }
-
-  .circles li:nth-child(2) {
-    left: 10%;
-    width: 20px;
-    height: 20px;
-    animation-delay: 2s;
-    animation-duration: 12s;
-  }
-
-  .circles li:nth-child(3) {
-    left: 70%;
-    width: 20px;
-    height: 20px;
-    animation-delay: 4s;
-  }
-
-  .circles li:nth-child(4) {
-    left: 40%;
-    width: 60px;
-    height: 60px;
-    animation-delay: 0s;
-    animation-duration: 18s;
-  }
-
-  .circles li:nth-child(5) {
-    left: 65%;
-    width: 20px;
-    height: 20px;
-    animation-delay: 0s;
-  }
-
-  .circles li:nth-child(6) {
-    left: 75%;
-    width: 110px;
-    height: 110px;
-    animation-delay: 3s;
-  }
-
-  .circles li:nth-child(7) {
-    left: 35%;
-    width: 150px;
-    height: 150px;
-    animation-delay: 7s;
-  }
-
-  .circles li:nth-child(8) {
-    left: 50%;
-    width: 25px;
-    height: 25px;
-    animation-delay: 15s;
-    animation-duration: 45s;
-  }
-
-  .circles li:nth-child(9) {
-    left: 20%;
-    width: 15px;
-    height: 15px;
-    animation-delay: 2s;
-    animation-duration: 35s;
-  }
-
-  .circles li:nth-child(10) {
-    left: 85%;
-    width: 150px;
-    height: 150px;
-    animation-delay: 0s;
-    animation-duration: 11s;
-  }
-
-  @keyframes animate {
-    0% {
-      transform: translateY(0) rotate(0deg);
-      opacity: 0.5;
-      border-radius: 0;
-    }
-
-    100% {
-      transform: translateY(-1000px) rotate(720deg);
-      opacity: 0;
-      border-radius: 50%;
-    }
-  }
   main {
     margin: auto;
     padding: 1rem;