update site

2 files changed, 304 insertions, 122 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>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index dea00f2..68d8a2c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,137 +1,138 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import SocialNavbar from '../components/SocialNavbar.astro';
+import SocialNavbar from "../components/SocialNavbar.astro";
 import ShapesBackground from "../components/ShapesBackground.astro";
 ---
 
 <Layout title="Pinapelz">
-  <div class="center-wrapper">
-    <main>
-      <h1 class="welcome-message">
-        <span class="welcome-text-gradient">Welcome</span> 👋
-      </h1>
-      <p class="introduction">
-        I'm <span class="text-gradient">Yukai Shan</span>, a Software Engineering
-        student at UC Irvine
-      </p>
-      <p class="introduction">
-        Sometimes I make cool things. Feel free to go and check them out!
-      </p>
-      <SocialNavbar/>
-    </main>
-  </div>
-  <ShapesBackground/>
-  <script>
+    <div class="center-wrapper">
+        <main>
+            <h1 class="welcome-message">
+                <span class="welcome-text-gradient">Welcome</span> 👋
+            </h1>
+            <p class="introduction">
+                I'm <span class="text-gradient">Pinapelz</span>, a Software
+                Engineering graduate passionate about open-source software and
+                building fun and interesting things.
+            </p>
+            <p class="introduction">Some of them even work.</p>
+        </main>
+        <SocialNavbar />
+    </div>
+</Layout>
+<ShapesBackground />
+<script>
     const welcomeMessages = [
-      'print("Hello World")',
-      "Hello there",
-      "Bonjour",
-      "こにちは",
-      "你好",
-      "Ahoy!",
+        'print("Hello World")',
+        "Hello there",
+        "Bonjour",
+        "こにちは",
+        "你好",
+        "Ahoy!",
     ];
 
     let currentIndex = 0;
     const h1 = document.querySelector(
-      "h1.welcome-message span.welcome-text-gradient"
+        "h1.welcome-message span.welcome-text-gradient",
     );
 
     function typeMessage(message) {
-      let i = 0;
-      h1.textContent = "";
-      const interval = setInterval(() => {
-        if (i < message.length) {
-          h1.textContent += message[i];
-          i++;
-        } else {
-          clearInterval(interval);
-          currentIndex = (currentIndex + 1) % welcomeMessages.length;
-          setTimeout(() => {
-            h1.classList.add("slide-out");
-            setTimeout(() => {
-              typeMessage(welcomeMessages[currentIndex]);
-              h1.classList.remove("slide-out");
-            }, 1000);
-          }, 3000);
-        }
-      }, 100);
+        let i = 0;
+        h1.textContent = "";
+        const interval = setInterval(() => {
+            if (i < message.length) {
+                h1.textContent += message[i];
+                i++;
+            } else {
+                clearInterval(interval);
+                currentIndex = (currentIndex + 1) % welcomeMessages.length;
+                setTimeout(() => {
+                    h1.classList.add("slide-out");
+                    setTimeout(() => {
+                        typeMessage(welcomeMessages[currentIndex]);
+                        h1.classList.remove("slide-out");
+                    }, 1000);
+                }, 3000);
+            }
+        }, 100);
     }
     typeMessage(welcomeMessages[currentIndex]);
-  </script>
-</Layout>
+</script>
+
 <style>
-  @import url("https://fonts.googleapis.com/css?family=Noto:400,700");
+    @import url("https://fonts.googleapis.com/css?family=Noto:400,700");
 
-  * {
-    margin: 0px;
-    padding: 0px;
-  }
+    * {
+        margin: 0px;
+        padding: 0px;
+    }
 
-  body {
-    font-family: "Noto", sans-serif;
-    height: 100%;
-  }
-  main {
-    margin: auto;
-    padding: 1rem;
-    width: 800px;
-    max-width: calc(100% - 2rem);
-    color: white;
-    font-size: 20px;
-    line-height: 1.6;
-  }
-  .astro-a {
-    position: absolute;
-    top: -32px;
-    left: 50%;
-    transform: translatex(-50%);
-    width: 220px;
-    height: auto;
-    z-index: -1;
-  }
-  h1 {
-    font-size: 3.5rem;
-    font-weight: 700;
-    line-height: 1;
-    text-align: center;
-    margin-bottom: 1em;
-    transition: transform 0.3s ease-in-out;
-  }
+    body {
+        font-family: "Noto", sans-serif;
+        height: 100%;
+    }
+    main {
+        margin: 0 auto;
+        padding: 1rem;
+        width: 800px;
+        max-width: calc(100% - 2rem);
+        color: white;
+        font-size: 20px;
+        line-height: 1.6;
+    }
+    .astro-a {
+        position: absolute;
+        top: -32px;
+        left: 50%;
+        transform: translatex(-50%);
+        width: 220px;
+        height: auto;
+        z-index: -1;
+    }
+    h1 {
+        font-size: 3.5rem;
+        font-weight: 700;
+        line-height: 1;
+        text-align: center;
+        margin-bottom: 1em;
+        transition: transform 0.3s ease-in-out;
+    }
 
-  h1:hover {
-    transform: scale(1.1);
-  }
-  .welcome-text-gradient {
-    background-image: var(--accent-gradient-purp);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-size: 400%;
-    background-position: 0%;
-    transition: background-position 0.3s ease-in-out;
-  }
-  .text-gradient {
-    background-image: var(--accent-gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-size: 400%;
-    background-position: 0%;
-    transition: background-position 0.3s ease-in-out;
-  }
-  .slide-out {
-    transform: translateX(-100%);
-    transition: transform 0.5s ease-in-out;
-  }
-  .introduction {
-    font-size: 1.5rem;
-    text-align: center;
-    color: #ffffffbd;
-  }
+    h1:hover {
+        transform: scale(1.1);
+    }
+    .welcome-text-gradient {
+        background-image: var(--accent-gradient-purp);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-size: 400%;
+        background-position: 0%;
+        transition: background-position 0.3s ease-in-out;
+    }
+    .text-gradient {
+        background-image: var(--accent-gradient);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-size: 400%;
+        background-position: 0%;
+        transition: background-position 0.3s ease-in-out;
+    }
+    .slide-out {
+        transform: translateX(-100%);
+        transition: transform 0.5s ease-in-out;
+    }
+    .introduction {
+        font-size: 1.5rem;
+        text-align: center;
+        color: #ffffffbd;
+    }
 
-  .center-wrapper {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    height: 90vh;
-  }
+    .center-wrapper {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 0.75rem;
+        min-height: 90vh;
+    }
 </style>