7 files changed, 511 insertions, 0 deletions
diff --git a/about.html b/about.html
new file mode 100644
index 0000000..c42bee1
--- /dev/null
+++ b/about.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>About Me - Pinapelz Moe</title>
+    <link rel="stylesheet" type="text/css" href="styles/styles.css" />
+    <script src="scripts/index.js"></script>
+  </head>
+  <body>
+    <div class="container">
+      <div class="header">
+        <marquee behavior="alternate" direction="left">
+          About Me
+        </marquee>
+      </div>
+
+      <div class="sidebar">
+        <h3>Navigation</h3>
+        <ul>
+          <li><a href="/">Home</a></li>
+          <li><a href="#">About Me</a></li>
+        </ul>
+        <img
+          src="assets/pfp.webp"
+          class="border-img crazy-image"
+          width="250px"
+          alt="Cute Anime GIF"
+        />
+
+        <div class="contacts-section">
+          <h3>Contact Me</h3>
+          <p>idk maybe you need to reach me for some reason</p>
+          <ul>
+            <li>
+              Email:
+              <a href="mailto:pinapelz@moekyun.me">pinapelz@moekyun.me</a>
+            </li>
+            <li>X: <a href="https://x.com/pinapelz">@pinapelz</a></li>
+            <li>
+              Misskey:
+              <a href="https://mk.arks.cafe/@pinapelz"
+                >@pinapelz@mk.arks.cafe</a
+              >
+            </li>
+            <li>Discord: @pinapelz</li>
+          </ul>
+        </div>
+        <section id="discord-status" class="discord-status">
+          <img
+            src="https://assets-global.website-files.com/6257adef93867e50d84d30e2/636e0a6ca814282eca7172c6_icon_clyde_white_RGB.svg"
+            alt="Discord Avatar"
+          />
+        <div class="status-container">
+            <h2><span class="status-text"></span></h2>
+        </div>
+          <script>fetchDiscordStatus("246787839570739211");</script>
+        </section>
+      </div>
+
+      <div class="content">
+        <div class="projects-section">
+            <h3>info</h3>
+            <p>
+            I'm a student at UC Irvine studying Software Engineering. I daily drive Arch Linux but my WM/DE changes depending on
+            what I feel like, I mainly use Hyprland and KDE Plasma though. In case you couldn't tell, I watch anime + read manga +
+            (although these days i mainly just accumulated brainrot from watching twitch streams + vtubers)<br/>
+            </p>
+            <h3>games</h3>
+            <p>
+            I mostly play MMOs (FFXIV, PSO2, OSRS), RPGs (Persona, Xenoblade), and [sorta] Visual Novels (AI The Sommnium, Danganronpa, 999). Its basically
+            mostly story heavy stuff.
+            </p>
+            <h3>stack</h3>
+            <p>
+            idk, it changes a lot. i feel like its been mostly Next JS + React + Tailwind CSS serverless lately. but tbh i hop around a lot. whatever seems fun
+            </p>
+            <p>
+                Not much else to really say... if you want some random technical rambling go to <a href="https://blog.pinapelz.com">my blog</a>
+            </p>
+            <a href="https://imisserinya.phase-tracker.com">
+            <div style="text-align: center;">
+                <img src="https://files.pinapelz.com/1077804029737975879.webp" width="300px" class="crazy-image"/>
+                <div class="fullscreen-text">i miss erinya uuuuuuuuu!!!</div>
+            </div>
+          </a>
+
+      </div>
+
+      
+
+    </div>
+  </body>
+</html>
diff --git a/assets/pfp.webp b/assets/pfp.webp
new file mode 100644
index 0000000..6e29dc7
--- /dev/null
+++ b/assets/pfp.webp
diff --git a/assets/xqcl.webp b/assets/xqcl.webp
new file mode 100644
index 0000000..f0e4e2d
--- /dev/null
+++ b/assets/xqcl.webp
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f9091a0
--- /dev/null
+++ b/index.html
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pinapelz Moe</title>
+    <link rel="stylesheet" type="text/css" href="styles/styles.css" />
+    <script src="scripts/index.js"></script>
+  </head>
+  <body>
+    <div class="container">
+      <div class="header">
+        <marquee behavior="alternate" direction="left">
+          Welcome to pinapelz.moe
+        </marquee>
+      </div>
+      <div class="sidebar">
+        <h3>Navigation</h3>
+        <ul>
+          <li><a href="/">Home</a></li>
+          <li><a href="/about.html">About Me</a></li>
+        </ul>
+        <img
+          src="assets/pfp.webp"
+          class="border-img crazy-image"
+          width="250px"
+          alt="Cute Anime GIF"
+        />
+
+        <div class="contacts-section">
+          <h3>Contact Me</h3>
+          <p>idk maybe you need to reach me for some reason</p>
+          <ul>
+            <li>
+              Email:
+              <a href="mailto:pinapelz@moekyun.me">pinapelz@moekyun.me</a>
+            </li>
+            <li>X: <a href="https://x.com/pinapelz">@pinapelz</a></li>
+            <li>
+              Misskey:
+              <a href="https://mk.arks.cafe/@pinapelz"
+                >@pinapelz@mk.arks.cafe</a
+              >
+            </li>
+            <li>Discord: @pinapelz</li>
+          </ul>
+        </div>
+        <section id="discord-status" class="discord-status">
+          <img
+            src="https://assets-global.website-files.com/6257adef93867e50d84d30e2/636e0a6ca814282eca7172c6_icon_clyde_white_RGB.svg"
+            alt="Discord Avatar"
+          />
+          <div class="status-container">
+            <h2><span class="status-text"></span></h2>
+          </div>
+          <script>fetchDiscordStatus("246787839570739211");</script>
+        </section>
+        <p id="quote">
+        </p>
+        <script>
+          document.addEventListener("DOMContentLoaded", () => {
+            const quotes = [
+              "Give a man a fish, learn him how to eat, give a man- learn a man how to - xQc",
+              "Yeah I'm GAY, Good at Yugioh - Rosemi Lovelock",
+              "yipee - Erina Makina",
+              "Your friend doesn't like Vtubers? Tell your friend to get some taste - Pavolia Reine",
+            ];
+
+            function getRandomQuote() {
+              const randomIndex = Math.floor(Math.random() * quotes.length);
+              return quotes[randomIndex];
+            }
+
+            const quoteElement = document.getElementById("quote");
+            quoteElement.innerHTML = `<i>${getRandomQuote()}</i>`;
+          });
+        </script>
+      </div>
+
+      <div class="content">
+        <h2>Welcome!</h2>
+        <p>
+          <blink>Ahoy!</blink> Thanks for visiting! I thought the old Linktree
+          like site was pretty boring for a
+          <span class="glitter">.moe</span> domain, so I took matters into my
+          own hands and "<span class="glitter">moeifyed</span>" it!
+        </p>
+        <p style="display: flex; align-items: center">
+          Hope you enjoy your stay!
+          <img src="assets/xqcl.webp" width="35px" style="margin-left: 10px" />
+        </p>
+
+        <div class="projects-section">
+          <h1 style="color: #ff69b4">cool and intersting stuff</h1>
+          <h4>or at least i think they're pretty cool :( go check them out!</h4>
+          <ul>
+            <li>
+              <h2>
+                <a href="https://patchwork.moekyun.me">Patchwork Archive</a>
+              </h2>
+              A running archive of VTuber music. Trying to archive every
+              music/cover created by the VTuber community. Over 15K songs/covers
+              and counting!
+            </li>
+            <li>
+              <h2><a href="https://phase-tracker.com">PhaseTracker</a></h2>
+              The UNOFFICIAL Phase Connect subscriber tracker. I know some
+              people don't like number sites, but I still thought that it would
+              be awesome to track the growth of one of my favorite VTuber
+              groups.
+            </li>
+            <li>
+              <h2>
+                <a href="https://github.com/pinapelz/ffxiv-malmstone"
+                  >Malmstone Calculator</a
+                >
+              </h2>
+              A FFXIV Dalamud plugin that helps with calculating how much more
+              pvp you got left to play before hitting the next level in the
+              battlepass system. Made it cause I was tired of always having to
+              use an online calculator and plugging in the numbers manually.
+            </li>
+            <li>
+              <h2>
+                <a href="https://github.com/pinapelz/discord-to-xiv"
+                  >DiscordToXIV</a
+                >
+              </h2>
+              A crazy FFXIV plugin that uses BetterDiscord and websockets to
+              bring Discord messages into your FFXIV game. Now you can feel less
+              lonely in game.
+            </li>
+            <br />
+            <p>
+              wow i'm definelty not seeing a trend with these... the rest of the
+              stuff is over on my
+              <a href="https://github.com/pinapelz">GitHub</a>!
+            </p>
+          </ul>
+        </div>
+      </div>
+
+      <div class="footer">
+        <marquee behavior="scroll" direction="right">
+          what this do again?
+        </marquee>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/scripts/index.js b/scripts/index.js
new file mode 100644
index 0000000..a9ddf93
--- /dev/null
+++ b/scripts/index.js
@@ -0,0 +1,30 @@
+function fetchDiscordStatus(userId) {
+    const API_URL = `https://api.lanyard.rest/v1/users/${userId}`;
+
+    fetch(API_URL)
+      .then(response => response.json())
+      .then(data => {
+        const discordStatus = data.data.discord_status;
+
+        const statusColors = {
+          online: "#43b581",
+          idle: "#faa61a",
+          dnd: "#f04747",
+          offline: "#747f8d",
+        };
+
+        const statusText = {
+          online: "Online",
+          idle: "Idle",
+          dnd: "Do Not Disturb",
+          offline: "Offline",
+        };
+
+        const statusSection = document.getElementById(`discord-status`);
+        const statusTextElement = statusSection.querySelector(".status-text");
+
+        statusSection.style.backgroundColor = statusColors[discordStatus];
+        statusTextElement.textContent = "Currently: " + statusText[discordStatus];
+      })
+      .catch(error => console.error("Error fetching Discord status:", error));
+  }
+\ No newline at end of file
diff --git a/styles/bg.webp b/styles/bg.webp
new file mode 100644
index 0000000..3ed366d
--- /dev/null
+++ b/styles/bg.webp
diff --git a/styles/styles.css b/styles/styles.css
new file mode 100644
index 0000000..dcbb506
--- /dev/null
+++ b/styles/styles.css
@@ -0,0 +1,237 @@
+body {
+    background: url('bg.webp');
+    background-size: 100px 100px, 100% 100%;
+    font-family: 'Courier New', monospace;
+    color: #333;
+    background-color: pink;
+    cursor: url('cursor.gif'), auto;
+}
+.container {
+    width: 80%;
+    margin: 0 auto;
+    border: dashed pink 3px;
+    background: white;
+    padding: 20px;
+    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
+}
+.header {
+    text-align: center;
+    font-size: 2em;
+    color: #ff69b4;
+    text-shadow:
+        1px 1px 2px #fff,
+        2px 2px 4px #ffa07a;
+    animation: glitter 3s infinite alternate;
+}
+.sidebar {
+    float: left;
+    width: 25%;
+    padding: 10px;
+    margin-top: 30px;
+    border: solid #ffb6c1 2px;
+    background: #ffe4e1;
+    text-align: center;
+}
+
+.sidebar ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    text-align: center;
+}
+
+.sidebar ul li {
+    margin-bottom: 10px;
+}
+
+.sidebar ul li a {
+    color: #ff69b4;
+    text-decoration: none;
+}
+
+.sidebar ul li a:hover {
+    text-decoration: underline;
+}
+
+.content {
+    float: right;
+    width: 70%;
+    padding: 10px;
+}
+.footer {
+    clear: both;
+    text-align: center;
+    padding-top: 30px;
+    margin-top: 20px;
+    font-size: 0.8em;
+}
+a {
+    color: #ff69b4;
+    text-decoration: none;
+}
+a:hover {
+    text-decoration: underline;
+}
+.glitter {
+    color: #ff69b4;
+    font-weight: bold;
+    animation: glitter 3s infinite alternate;
+}
+@keyframes glitter {
+    0% {
+        color: #ff69b4;
+    }
+    25% {
+        color: #ff1493;
+    }
+    50% {
+        color: #db7093;
+    }
+    75% {
+        color: #ff69b4;
+    }
+    100% {
+        color: #ffa07a;
+    }
+}
+
+.border-img {
+    max-width: 100%;
+    border: solid #ff69b4 2px;
+}
+
+marquee {
+    font-size: 1.2em;
+    color: #ff69b4;
+    margin-bottom: 10px;
+}
+blink {
+    color: #ff1493;
+    animation: blinker 1.5s linear infinite;
+}
+@keyframes blinker {
+    50% {
+        opacity: 0;
+    }
+}
+.projects-section {
+    margin-top: 20px;
+    padding: 10px;
+    background: #ffebf0;
+    border: solid #ffb6c1 2px;
+}
+.projects-section h3 {
+    color: #ff69b4;
+    text-shadow: 1px 1px 2px #fff;
+}
+.projects-section ul {
+    list-style-type: disc;
+    padding-left: 20px;
+}
+.projects-section ul li {
+    margin-bottom: 10px;
+}
+
+.contacts-section {
+    margin-top: 20px;
+    padding: 10px;
+    background: #ffe4e1;
+    border: solid #ffb6c1 2px;
+}
+.contacts-section h3 {
+    color: #ff69b4;
+    text-shadow: 1px 1px 2px #fff;
+}
+.contacts-section ul {
+    list-style-type: none;
+    padding: 0;
+}
+.contacts-section ul li {
+    margin-bottom: 5px;
+}
+
+
+
+.discord-status {
+    display: flex;
+    align-items: center;
+    padding: 15px;
+    border-radius: 10px;
+    color: white;
+    transition: background-color 0.3s ease-in-out;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    background: #7289da;
+  }
+
+  .discord-status img {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    margin-right: 20px;
+  }
+
+  .discord-status h2 {
+    font-size: 1.2rem;
+  }
+
+  .discord-status p {
+    font-size: 1rem;
+    opacity: 0.8;
+  }
+
+  @keyframes crazy-animation {
+    0% {
+        transform: rotate(0deg) scale(1) translateX(0) skew(0deg) rotateY(0deg);
+        filter: hue-rotate(0deg) blur(0px);
+        opacity: 1;
+    }
+    10% {
+        transform: rotate(30deg) scale(1.3) translateX(10px) skew(10deg) rotateY(90deg);
+        filter: hue-rotate(50deg) blur(2px);
+        opacity: 0.8;
+    }
+    25% {
+        transform: rotate(45deg) scale(1.5) translateX(20px) skew(-10deg) rotateY(180deg);
+        filter: hue-rotate(120deg) blur(4px);
+        opacity: 0.6;
+    }
+    50% {
+        transform: rotate(-45deg) scale(0.8) translateX(-30px) skew(15deg) rotateY(270deg);
+        filter: hue-rotate(200deg) blur(6px);
+        opacity: 1;
+    }
+    75% {
+        transform: rotate(90deg) scale(1.8) translateX(15px) skew(-15deg) rotateY(360deg);
+        filter: hue-rotate(300deg) blur(3px);
+        opacity: 0.7;
+    }
+    100% {
+        transform: rotate(0deg) scale(1) translateX(0) skew(0deg) rotateY(0deg);
+        filter: hue-rotate(360deg) blur(0px);
+        opacity: 1;
+    }
+}
+
+.crazy-image:hover {
+    animation: crazy-animation 3s ease-in-out infinite;
+}
+
+.fullscreen-text {
+    top: 0;
+    left: 0;
+    color: black;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 2em;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.5s, visibility 0.5s;
+    z-index: 10;
+}
+
+.crazy-image:hover + .fullscreen-text {
+    opacity: 1;
+    visibility: visible;
+}
+\ No newline at end of file