From cdc6e1ca55d0f84074b94c654afe5dcb681c9cda Mon Sep 17 00:00:00 2001 From: Pinapelz Date: Tue, 15 Oct 2024 00:00:22 -0700 Subject: initial commit --- about.html | 94 ++++++++++++++++++++++ assets/pfp.webp | Bin 0 -> 17490 bytes assets/xqcl.webp | Bin 0 -> 17480 bytes index.html | 150 ++++++++++++++++++++++++++++++++++ scripts/index.js | 30 +++++++ styles/bg.webp | Bin 0 -> 19612 bytes styles/styles.css | 237 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 7 files changed, 511 insertions(+) create mode 100644 about.html create mode 100644 assets/pfp.webp create mode 100644 assets/xqcl.webp create mode 100644 index.html create mode 100644 scripts/index.js create mode 100644 styles/bg.webp create mode 100644 styles/styles.css diff --git a/about.html b/about.html new file mode 100644 index 0000000..c42bee1 --- /dev/null +++ b/about.html @@ -0,0 +1,94 @@ + + + + + + About Me - Pinapelz Moe + + + + +
+
+ + About Me + +
+ +
+

Navigation

+ + Cute Anime GIF + +
+

Contact Me

+

idk maybe you need to reach me for some reason

+ +
+
+ Discord Avatar +
+

+
+ +
+
+ +
+
+

info

+

+ 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)
+

+

games

+

+ 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. +

+

stack

+

+ 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 +

+

+ Not much else to really say... if you want some random technical rambling go to my blog +

+ +
+ +
i miss erinya uuuuuuuuu!!!
+
+ + +
+ + + +
+ + diff --git a/assets/pfp.webp b/assets/pfp.webp new file mode 100644 index 0000000..6e29dc7 Binary files /dev/null and b/assets/pfp.webp differ diff --git a/assets/xqcl.webp b/assets/xqcl.webp new file mode 100644 index 0000000..f0e4e2d Binary files /dev/null and b/assets/xqcl.webp differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..f9091a0 --- /dev/null +++ b/index.html @@ -0,0 +1,150 @@ + + + + + + Pinapelz Moe + + + + +
+
+ + Welcome to pinapelz.moe + +
+
+

Navigation

+ + Cute Anime GIF + +
+

Contact Me

+

idk maybe you need to reach me for some reason

+ +
+
+ Discord Avatar +
+

+
+ +
+

+

+ +
+ +
+

Welcome!

+

+ Ahoy! Thanks for visiting! I thought the old Linktree + like site was pretty boring for a + .moe domain, so I took matters into my + own hands and "moeifyed" it! +

+

+ Hope you enjoy your stay! + +

+ +
+

cool and intersting stuff

+

or at least i think they're pretty cool :( go check them out!

+
    +
  • +

    + Patchwork Archive +

    + A running archive of VTuber music. Trying to archive every + music/cover created by the VTuber community. Over 15K songs/covers + and counting! +
    • +
  • +

    PhaseTracker

    + 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. +
    • +
  • +

    + Malmstone Calculator +

    + 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. +
    • +
  • +

    + DiscordToXIV +

    + 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. +
    • +
    +

    + wow i'm definelty not seeing a trend with these... the rest of the + stuff is over on my + GitHub! +

    +
+
+
+ +
+ + what this do again? + +
+
+ + 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 Binary files /dev/null and b/styles/bg.webp differ 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 -- cgit v1.2.3