From 1c1c5db4caf55e3204b82bfa4b39a50ff1283b06 Mon Sep 17 00:00:00 2001
From: Pinapelz <donaldshan1@outlook.com>
Date: Wed, 20 Sep 2023 00:24:08 -0700
Subject: implemented project page with cards

---
 src/pages/about.astro |   0
 src/pages/index.astro | 138 ++------------------------------------------------
 2 files changed, 3 insertions(+), 135 deletions(-)
 create mode 100644 src/pages/about.astro

(limited to 'src/pages')

diff --git a/src/pages/about.astro b/src/pages/about.astro
new file mode 100644
index 0000000..e69de29
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;
-- 
cgit v1.2.3