added Discord activity tracking feature

3 files changed, 134 insertions, 18 deletions

diff --git a/src/components/DiscordActivity.astro b/src/components/DiscordActivity.astro
new file mode 100644
index 0000000..2d59c1f
--- /dev/null
+++ b/src/components/DiscordActivity.astro
@@ -0,0 +1,83 @@
+<script>
+  async function fetchData() {
+    const API_URL = "https://api.lanyard.rest/v1/users/246787839570739211";
+
+    try {
+      const response = await fetch(API_URL);
+      const data = await response.json();
+
+      if (data && data.success) {
+        const activities = data.data.activities;
+        let activityHTML = "";
+        for (const activity of activities) {
+          const imageUrl =
+            activity.assets && activity.assets.large_image
+              ? activity.assets.large_image
+              : "";
+
+          activityHTML += `
+              <div class="activity-card">
+                <h3>${activity.name}</h3>
+                <p>${activity.details ? activity.details : ""}</p>
+                <p>${activity.state ? activity.state : ""}</p>
+              </div>
+            `;
+        }
+
+        document.querySelector("#activities").innerHTML = activityHTML;
+      } else {
+        console.error("Failed fetching user data:", data.message);
+      }
+    } catch (error) {
+      console.error("Network error:", error);
+    }
+  }
+
+  window.addEventListener("DOMContentLoaded", fetchData);
+</script>
+
+<section>
+  <div>
+    <div id="activities"></div>
+  </div>
+</section>
+<style>
+section {
+    max-width: 800px;
+    margin: 40px auto;
+    padding: 24px;
+    border-radius: 12px;
+    background-color: #1a1a1a; 
+    font-family: 'Courier New', Courier, monospace;
+    color: #c0c0c0;
+}
+
+
+.activity-card {
+    background-color: #1a1a1a;
+    padding: 20px;
+    margin-bottom: 16px;
+    border: 1px solid #c0c0c0;
+    display: flex;
+    flex-direction: column;
+}
+
+.activity-card h3 {
+    margin-top: 0;
+    margin-bottom: 8px; 
+}
+
+.activity-card p {
+    margin: 0;
+    font-size: 0.5em;
+    line-height: 1.5;
+    padding: 4px 0;
+}
+
+.activity-card p + p {
+    margin-top: 6px;
+    border-top: 1px dashed #c0c0c0;
+    padding-top: 8px;
+}
+
+</style>
diff --git a/src/components/ShapesBackground.astro b/src/components/ShapesBackground.astro
index fd56d72..9a518c6 100644
--- a/src/components/ShapesBackground.astro
+++ b/src/components/ShapesBackground.astro
@@ -20,7 +20,7 @@
   .context h1 {
     text-align: center;
     color: #fff;
-    font-size: 50px;
+    font-size: 3rem; /* Using rem for scalable font size */
   }
 
   .circles {
@@ -37,13 +37,14 @@
     position: absolute;
     display: block;
     list-style: none;
-    width: 20px;
-    height: 20px;
+    width: 2vw;
+    height: 2vw;
     background: rgba(255, 255, 255, 0.2);
     animation: animate 25s linear infinite;
-    bottom: -150px;
+    bottom: -10vw;
   }
 
+
   .circles li:nth-child(1) {
     left: 25%;
     width: 80px;
@@ -132,4 +133,16 @@
       border-radius: 50%;
     }
   }
+  @media (max-width: 768px) {
+    .context h1 {
+      font-size: 2rem;
+    }
+
+    .circles li {
+      width: 5vw;
+      height: 5vw;
+      bottom: -15vw;
+    }
+    
+  }
 </style>
\ No newline at end of file
diff --git a/src/pages/about.astro b/src/pages/about.astro
index bff10d8..4c64d69 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -1,8 +1,8 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import SocialNavbar from "../components/SocialNavbar.astro";
-import ShapesBackground from "../components/ShapesBackground.astro";
 import DiscordStatus from "../components/DiscordStatus.astro";
+import DiscordActivity from "../components/DiscordActivity.astro";
 ---
 
 <Layout title="About">
@@ -18,26 +18,36 @@ import DiscordStatus from "../components/DiscordStatus.astro";
         much just MMOs, JRPGs, and Visual Novels.
       </p>
     </div>
-    <div class="grid-item"> <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=pinapelz&layout=pie&hide=makefile&theme=dark&langs_count=12" alt="Github Language Stats" style="width: 400px; height: auto" ></div>
     <div class="grid-item">
-        <img src="https://xiv-character-cards.drakon.cloud/characters/id/30300645.png" style="width: 740px; height: auto">
-    
-        </div>
-    
+      <p class="introduction">
+        <h2>推しししししし!!!!</h2>
+        <img src="https://files.pinapelz.com/FM5RJDxUYAMqkOF.jpeg" style="width: 350px; height: auto; align-items: center; margin-bottom: 15px;"/>
+        <img src="https://files.catbox.moe/zawgke.webp" style="width: 300px; height: auto; align-items: right;"/>
+      </p>
+  </div>
     <div class="grid-item">
-        <p class="introduction">
-            <img src="https://files.catbox.moe/2aioik.webp" style="width: 300px; height: auto; align-items: center;"/>
-            <DiscordStatus />
-        </p>
+      <h2>What am I up to?</h2>
+      <DiscordStatus />
+      <DiscordActivity />
+      
+    </div>
+    <div class="grid-item"> 
+      <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=pinapelz&layout=pie&hide=makefile&theme=dark&langs_count=12" alt="Github Language Stats" style="width: 400px; height: auto" >
+    </div>
+    <div class="grid-item">
+      <h2>My Final Fantasy XIV Character!</h2>
+        <img src="https://xiv-character-cards.drakon.cloud/characters/id/30300645.png" style="width: 740px; height: auto">
     </div>
-      <div class="grid-item">
-        <img src="https://files.pinapelz.com/pso2ngs-2232-collab.png" width="740px; height: auto"> 
-      </div>
   </div>
   <SocialNavbar />
 </Layout>
-<ShapesBackground />
+
 <style>
+  body {
+    margin: 0;
+    padding: 0;
+    width: 100vw;
+  }
   .grid-container {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
@@ -63,6 +73,16 @@ import DiscordStatus from "../components/DiscordStatus.astro";
     color: rgba(255, 255, 255, 0.742);
   }
 
+  h2 {
+    font-size: 2rem;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+    margin-bottom: 1em;
+    transition: transform 0.3s ease-in-out;
+    color: rgba(255, 255, 255, 0.742);
+  }
+
   p {
     margin-top: 0.5rem;
     margin-bottom: 0;