Implement about page

- Discord Status component

1 files changed, 78 insertions, 0 deletions

diff --git a/src/pages/about.astro b/src/pages/about.astro
index e69de29..bff10d8 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -0,0 +1,78 @@
+---
+import Layout from "../layouts/Layout.astro";
+import SocialNavbar from "../components/SocialNavbar.astro";
+import ShapesBackground from "../components/ShapesBackground.astro";
+import DiscordStatus from "../components/DiscordStatus.astro";
+---
+
+<Layout title="About">
+  <div class="grid-container">
+    <div class="grid-item">
+      <h1 class="welcome-text-gradient">About Me</h1>
+    </div>
+    <div class="grid-item">
+      <p class="introduction">
+        I'm am avid virtual youtuber (vtuber) + anime enjoyer so you may see a
+        trend in what my projects. Programming stuff is one of my hobbies but I
+        also spend my time playing video games although admittedly its pretty
+        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>
+    
+    <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>
+    </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>
+  .grid-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 2rem;
+    margin: 4rem auto;
+    max-width: 1200px;
+  }
+
+  .grid-item {
+    background-color: rgba(255, 255, 255, 0.05);
+    padding: 2rem;
+    border-radius: 10px;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+  }
+
+  h1 {
+    font-size: 3.5rem;
+    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;
+    color: rgba(255, 255, 255, 0.742);
+    font-size: 1.5rem;
+  }
+
+  @media (max-width: 768px) {
+    .grid-container {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>