Implement about page

- Discord Status component

3 files changed, 251 insertions, 0 deletions

diff --git a/src/components/DiscordStatus.astro b/src/components/DiscordStatus.astro
new file mode 100644
index 0000000..8365418
--- /dev/null
+++ b/src/components/DiscordStatus.astro
@@ -0,0 +1,49 @@
+---
+const API_URL = "https://api.lanyard.rest/v1/users/246787839570739211";
+const response = await fetch(API_URL);
+const data = await response.json();
+
+const discordUser = data.data.discord_user;
+const discordStatus = data.data.discord_status;
+
+const statusColors = {
+  online: "#43b581",
+  idle: "#faa61a",
+  dnd: "#f04747",
+  offline: "#747f8d",
+};
+
+---
+
+<section style={`background-color: ${statusColors[discordStatus]};`}>
+    <img src="https://assets-global.website-files.com/6257adef93867e50d84d30e2/636e0a6ca814282eca7172c6_icon_clyde_white_RGB.svg"alt={`${discordUser.username}'s Avatar`} />
+    <h2>Status: {discordStatus}</h2>
+</section>
+<style>
+    section {
+      display: flex;
+      align-items: center;
+      padding: 20px;
+      border-radius: 10px;
+      color: white;
+      transition: background-color 0.3s ease-in-out;
+    }
+  
+    img {
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      margin-right: 20px;
+    }
+  
+    h2 {
+      margin: 0;
+      font-size: 1.5rem;
+    }
+  
+    p {
+      margin: 0;
+      font-size: 1rem;
+      opacity: 0.8;
+    }
+  </style>
\ No newline at end of file
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>
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
new file mode 100644
index 0000000..0fe7e5d
--- /dev/null
+++ b/src/pages/projects.astro
@@ -0,0 +1,124 @@
+---
+import Layout from "../layouts/Layout.astro";
+import SocialNavbar from "../components/SocialNavbar.astro";
+import Card from "../components/Card.astro";
+import ShapesBackground from "../components/ShapesBackground.astro";
+---
+
+<Layout title="Projects">
+  <main>
+    <h1>Projects</h1>
+    <ul role="list" class="link-card-grid">
+      <Card
+        href="https://github.com/pinapelz/ytmp3AutoTag"
+        title="ytmp3AutoTag"
+        body="JSwing application that downloads YouTube videos as MP3 and automatically tags them with metadata from the video"
+        language="Java"
+        languageColor="#b07219"
+      />
+      <Card
+        href="https://github.com/pinapelz/youtube-timed-playlist"
+        title="YouTube Timed Playlist"
+        body="React JS web app that allows users to create YouTube playlists with custom start and end times for each video"
+        language="Javascript"
+        languageColor="#f1e05a"
+      />
+      <Card
+        href="https://github.com/pinapelz/JHolodex"
+        title="JHolodex"
+        body="Object-Oriented Java wrapper for the Holodex API written with Retrofit2"
+        language="Java"
+        languageColor="#b07219"
+      />
+      <Card
+        href="https://github.com/pinapelz/VTScheduleXIV"
+        title="VTScheduleXIV"
+        body="FFXIV Dalamud plugin that displays the schedule of upcoming VTuber streams in-game"
+        language="C#"
+        languageColor="#178600"
+      />
+      <Card
+        href="https://github.com/pinapelz/NijiTrack"
+        title="Nijitrack"
+        body="Python scripts that records historical subscriber data of YouTube channels and generates HTML reports of the data"
+        language="Python"
+        languageColor="#3572A5"
+      />
+      <Card
+        href="https://github.com/Patchwork-Archive"
+        title="Patchwork Archive"
+        body="An archival project for music created by Virtual YouTubers"
+        language="HTML"
+        languageColor="#e34c26"
+      />
+      <Card
+        href="https://github.com/pinapelz/yet-another-lavaplayer-bot"
+        title="Yet Another Lavaplayer Bot"
+        body="Self-hosted JDA Discord music bot that uses Lavaplayer to play music from YouTube, Soundcloud, etc in Discord voice channels"
+        language="Java"
+        languageColor="#b07219"
+      />
+      <Card
+        href="https://github.com/pinapelz/vtuber-captcha"
+        title="VTuber Captcha"
+        body="Python Flask API that serves fun VTuber related captcha data"
+        language="Python"
+        languageColor="#3572A5"
+      />
+      <Card
+        href="https://github.com/pinapelz/link-shortener-moekyun.me"
+        title="moekyun.me Link Shortener"
+        body="Python Flask link shortener with built in support for custom URLs, special features, and Vercel deployment"
+        language="Python"
+        languageColor="#3572A5"
+      />
+
+      <Card
+        href="https://github.com/pinapelz/ffxiv-macro-time-counter"
+        title="FFXIV Macro Time Counter"
+        body="Calculator that determines the time it takes to execute a given macro in Final Fantasy XIV with options for consumables"
+        language="Typescript"
+        languageColor="#2b7489"
+      />
+      <Card
+        href="https://github.com/pinapelz/cloudflare-worker-d1-url-shortener"
+        title="Cloudflare D1 Link Shortener"
+        body="Link shortener that uses Cloudflare Workers and Severless SQL D1 database"
+        language="Javascript"
+        languageColor="#f1e05a"
+      />
+      <Card
+        href="https://github.com/pinapelz/Sapphire"
+        title="Sapphire (Contributed)"
+        body="A Final Fantasy XIV Server Emulator written in C++"
+        language="C++"
+        languageColor="#f34b7d"
+      />
+    </ul>
+  </main>
+  <SocialNavbar />
+  <ShapesBackground />
+  <style>
+    main {
+      margin: auto;
+      padding: 1rem;
+      width: 1200px;
+      color: white;
+      font-size: 20px;
+      line-height: 1.6;
+    }
+    .link-card-grid {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(24ch, 1fr));
+      gap: 2rem;
+      padding: 0;
+    }
+    @media (max-width: 768px) {
+    .link-card-grid {
+      display: grid;
+      grid-template-columns: repeat(1, minmax(12ch, 1fr));
+      gap: 2rem;
+      padding: 0;
+    }
+  </style>
+</Layout>