2 files changed, 100 insertions, 4 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