update site

1 files changed, 188 insertions, 7 deletions

diff --git a/src/pages/about.astro b/src/pages/about.astro
index 2a2b720..da121e5 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -1,6 +1,5 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import DiscordStatus from "../components/DiscordStatus.astro";
 ---
 
 <Layout title="About">
@@ -33,13 +32,10 @@ import DiscordStatus from "../components/DiscordStatus.astro";
             >
               Contact Me
             </a>
-            <a href="https://discord.com/users/246787839570739211">
-              <DiscordStatus />
-            </a>
           </div>
         </div>
         <img
-          src="https://files.pinapelz.com/21994085.png"
+          src="/pfp.png"
           width="400"
           height="400"
           alt="pinapelz profile pic"
@@ -196,7 +192,7 @@ import DiscordStatus from "../components/DiscordStatus.astro";
             </div>
           </div>
 
-          <p class="text-gray-400 text-xl font-bold mt-24">
+          <p class="text-gray-400 text-xl font-bold">
             Front End Technologies:
           </p>
 
@@ -303,7 +299,7 @@ import DiscordStatus from "../components/DiscordStatus.astro";
             </svg>
           </div>
 
-          <p class="text-gray-400 text-xl font-bold mt-24">Dev Ops:</p>
+          <p class="text-gray-400 text-xl font-bold">Dev Ops:</p>
 
           <div class="svg-container">
             <svg
@@ -347,6 +343,63 @@ import DiscordStatus from "../components/DiscordStatus.astro";
         </div>
       </div>
     </div>
+    <div class="container px-4 md:px-6 mx-auto mt-16">
+      <section class="interests-panel" aria-labelledby="interests-heading">
+        <div class="interests-intro">
+          <p class="eyebrow">More About Me</p>
+          <h2 id="interests-heading">Personal Interests</h2>
+          <p>
+            I enjoy exploring ideas that blend technical curiosity with creative
+            problem-solving. Most of the projects I build start from my own hobbies
+            and interests turning "what if"
+            ideas into software that I genuinely find useful. So here's a glance at
+            my personal hobbies/interests.
+          </p>
+        </div>
+
+        <div class="interests-grid">
+            <article class="interest-card">
+              <span class="interest-number">01</span>
+              <h3>Self-Hosting</h3>
+              <p>
+                I'm interested in software that gives people ownership over their data and
+                communities. From running personal services to exploring decentralized
+                platforms like Matrix, I enjoy learning how independent systems work.
+              </p>
+            </article>
+
+            <article class="interest-card">
+              <span class="interest-number">02</span>
+              <h3>Linux</h3>
+              <p>
+                Arch Linux has been my daily driver for years. I enjoy customizing my
+                environment, understanding how systems work under the hood, and exploring
+                the open-source ecosystem.
+              </p>
+            </article>
+
+            <article class="interest-card">
+              <span class="interest-number">03</span>
+              <h3>Gaming</h3>
+              <p>
+                MMOs (FFXIV), visual novels (AI: The Sommnium Files), and JRPGs (Persona) are some of my favorite genres. I'm drawn to
+                games with rich worlds and systems that encourage
+                long-term progression and discovery. I also particularly enjoy rhythm games, ones that are entirely skill based (SDVX).
+              </p>
+            </article>
+
+            <article class="interest-card">
+              <span class="interest-number">04</span>
+              <h3>Anime & K-Pop</h3>
+              <p>
+                I've always enjoyed being part of online fandom communities. Following new
+                releases, discussions, and fan-created content has inspired several ideas
+                for projects and community-focused tools. (NMIXX, Slice of Life Anime)
+              </p>
+            </article>
+        </div>
+      </section>
+    </div>
   </section>
   <style>
     .svg-container {
@@ -359,5 +412,133 @@ import DiscordStatus from "../components/DiscordStatus.astro";
       width: 75px;
       height: 75px;
     }
+
+    .interests-panel {
+      position: relative;
+      overflow: hidden;
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      border-radius: 2rem;
+      padding: clamp(1.5rem, 4vw, 3rem);
+      background:
+        radial-gradient(circle at top left, rgba(204, 102, 102, 0.35), transparent 34rem),
+        linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
+      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
+    }
+
+    .interests-panel::before {
+      content: "";
+      position: absolute;
+      inset: 1rem;
+      pointer-events: none;
+      border: 1px dashed rgba(255, 255, 255, 0.14);
+      border-radius: 1.5rem;
+    }
+
+    .interests-intro {
+      position: relative;
+      max-width: 680px;
+      margin-bottom: 2rem;
+      color: white;
+    }
+
+    .interests-intro .eyebrow {
+      width: fit-content;
+      margin-bottom: 0.75rem;
+      border-radius: 999px;
+      background: rgba(204, 102, 102, 0.16);
+      padding: 0.35rem 0.85rem;
+      color: #ffb3b3;
+      font-size: 0.78rem;
+      font-weight: 700;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .interests-intro h2 {
+      font-size: clamp(2.25rem, 6vw, 4.75rem);
+      font-weight: 800;
+      line-height: 0.95;
+      letter-spacing: -0.06em;
+    }
+
+    .interests-intro p:not(.eyebrow) {
+      margin-top: 1rem;
+      color: rgba(255, 255, 255, 0.72);
+      font-size: 1.05rem;
+      line-height: 1.8;
+    }
+
+    .interests-grid {
+      position: relative;
+      display: grid;
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      gap: 1rem;
+    }
+
+    .interest-card {
+      min-height: 230px;
+      border-radius: 1.35rem;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      background: rgba(19, 21, 26, 0.78);
+      padding: 1.25rem;
+      color: white;
+      transition:
+        transform 180ms ease,
+        border-color 180ms ease,
+        background 180ms ease;
+    }
+
+    .interest-card:nth-child(even) {
+      transform: translateY(1.25rem);
+    }
+
+    .interest-card:hover {
+      transform: translateY(-0.35rem);
+      border-color: rgba(255, 179, 179, 0.42);
+      background: rgba(35, 24, 29, 0.9);
+    }
+
+    .interest-card:nth-child(even):hover {
+      transform: translateY(0.85rem);
+    }
+
+    .interest-number {
+      display: inline-flex;
+      margin-bottom: 3.5rem;
+      color: #cc6666;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+      font-size: 0.9rem;
+      font-weight: 800;
+    }
+
+    .interest-card h3 {
+      margin-bottom: 0.65rem;
+      font-size: 1.25rem;
+      font-weight: 800;
+      letter-spacing: -0.03em;
+    }
+
+    .interest-card p {
+      color: rgba(255, 255, 255, 0.64);
+      font-size: 0.95rem;
+      line-height: 1.7;
+    }
+
+    @media (max-width: 1024px) {
+      .interests-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+    }
+
+    @media (max-width: 640px) {
+      .interests-grid {
+        grid-template-columns: 1fr;
+      }
+
+      .interest-card:nth-child(even),
+      .interest-card:nth-child(even):hover {
+        transform: none;
+      }
+    }
   </style>
 </Layout>