diff options
Diffstat (limited to 'moe.pinapelz.com/index.html')
| -rw-r--r-- | moe.pinapelz.com/index.html | 340 |
1 files changed, 340 insertions, 0 deletions
diff --git a/moe.pinapelz.com/index.html b/moe.pinapelz.com/index.html new file mode 100644 index 0000000..bd634d2 --- /dev/null +++ b/moe.pinapelz.com/index.html @@ -0,0 +1,340 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>pinapelz.moe - u found it</title> + <meta name="description" content="moe moe wow why did i make this" /> + <link rel="icon" href="assets/pfp.webp" /> + <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.1.17/dist/index.global.js"></script> + <link rel="stylesheet" type="text/css" href="styles/styles.css" /> + <link rel="stylesheet" type="text/css" href="styles/clock.css" /> + <link + href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" + rel="stylesheet" + /> + <link rel="alternate" type="text/html" href="https://pinapelz.moe/micro/posts" class="u-url"> + <link rel="alternate" type="text/html" href="https://pinapelz.moe/micro/posts/index.xml" rel="feed"> + <script src="scripts/index.js"></script> + <style> + .marquee span { + font-family: "Press Start 2P", cursive; + font-size: 25px; + } + @media (max-width: 768px) { + .marquee span { + font-size: 16px; + } + } + @media (max-width: 480px) { + .marquee span { + font-size: 12px; + } + } + + /* Fix iframe container constraints */ + .sidebar { + min-height: auto !important; + height: auto !important; + overflow: visible !important; + } + + .sidebar iframe { + display: block; + margin: 10px auto; + width: 100%; + max-width: 320px; + border: none; + } + + /* Ensure flex containers don't constrain height */ + .flex { + align-items: stretch; + } + </style> + </head> + <body> + <div class="h-card" style="display:none;"> + <a class="u-url p-name" href="https://pinapelz.moe">Pinapelz</a> + <img class="u-photo" src="assets/pfp.webp" alt=""> + <p class="p-note">check it out. I'm in the house like carpet</p> + </div> + <div class="container mx-auto px-4 lg:px-8 max-w-7xl"> + <div class="header"> + <div class="header-content"> + <div class="marquee"> + <span>welcome to pinapelz.moe</span> + </div> + <div class="header-animation"> + <img + src="assets/603.webp" + alt="rosemi" + class="random-float" + /> + <img + src="assets/eri.jpg" + alt="erina" + class="random-float" + /> + <img + src="assets/reine.jpg" + alt="reine" + class="random-float" + /> + <img + src="assets/usami.webp" + alt="usami" + class="random-float" + /> + <img + src="assets/vuln.jpg" + alt="vuln" + class="random-float" + /> + <img + src="assets/gc.jpg" + alt="gnomechild" + class="random-float" + /> + <img + src="assets/rappy.webp" + alt="rappy" + class="random-float" + /> + <img + src="assets/aiba.webp" + alt="aiba" + class="random-float" + /> + <img + src="assets/sdvx.png" + alt="sdvx" + class="random-float" + /> + </div> + </div> + </div> + <div class="flex flex-col xl:flex-row gap-6"> + <div class="sidebar w-full xl:w-1/4 mb-6 xl:mb-0"> + <h3 class="text-lg font-bold mb-3">Navigation</h3> + <ul class="mb-4"> + <li class="mb-1"><a href="/" class="hover:underline">home</a></li> + <li class="mb-1"><a href="/about.html" class="hover:underline">webmaster</a></li> + <li class="mb-1"><a href="/projects.html" class="hover:underline">projects</a></li> + </ul> + <img + src="assets/pfp.webp" + class="border-img crazy-image w-full max-w-xs mx-auto block" + alt="Cute Anime GIF" + /> + + <div class="contacts-section mt-4"> + <h3 class="text-lg font-bold mb-2">Contact Me</h3> + <p class="mb-3 text-sm">idk maybe you need to reach me for some reason</p> + <ul class="space-y-1 text-sm"> + <li> + Email: + <a rel="me" href="mailto:pinapelz@moekyun.me" + >pinapelz@moekyun.me</a + > + </li> + <li> + X: <a rel="me" href="https://x.com/pinapelz">@pinapelz</a> + </li> + <li> + Fedi: + <a rel="me" href="https://sakurajima.social/@pinapelz" + >@pinapelz@sakurajima.social</a + > + </li> + <li> + <span class="blink">►</span> Matrix: @pinapelz:chat.moekyun.me + </li> + <li>Discord: @pinapelz</li> + </ul> + </div> + <section id="discord-status" class="discord-status flex-col sm:flex-row"> + <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" class="my-4"></p> + </div> + + <div class="content w-full xl:w-3/4"> + <div class="welcome-box mb-6"> + <h2 class="text-xl font-bold mb-3">Welcome!</h2> + <p class="mb-3"> + <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 class="flex items-center"> + Hope you enjoy your stay! + <img + src="assets/xqcl.webp" + class="w-8 h-8 ml-2" + alt="xqcL" + /> + </p> + </div> + + <div class="general-section flex flex-col xl:flex-row gap-4 xl:gap-6 mb-6"> + <div id="music-player" class="music-player w-full xl:flex-1"> + <h3 class="text-lg font-bold mb-3">Patchwork Radio</h3> + <audio controls class="w-full mb-3"> + <source + src="https://a4.asurahosting.com/listen/patchworkarchive/radio.mp3" + type="audio/mpeg" + /> + Your browser does not support the audio element. + </audio> + <div id="now-playing" class="now-playing text-center"> + <h4 class="font-bold">Now Playing:</h4> + <p id="song-title" class="text-sm">Loading... 123</p> + <p id="song-artist" class="text-sm mb-2"> + plz be patient. radio might be down + </p> + <a href="https://patchwork.moekyun.me/radio" class="text-sm hover:underline" + >Powered by Patchwork Archive</a + > + </div> + </div> + <div class="w-full xl:w-auto xl:flex-shrink-0 text-center"> + <img + src="assets/growing.gif" + alt="Rosemi Lovelock good morning" + class="border-img max-h-40 xl:max-h-72 w-auto mx-auto" + /> + </div> + <div class="w-full xl:flex-1"> + <h3 class="text-center text-lg font-bold mb-3"> <a href="https://micro.pinapelz.com" class="hover:underline">micro.pinapelz.com</a></h3> + <a href="https://micro.pinapelz.com" class="block text-center"> + <img + src="assets/sayo-fries.gif" + alt="Sayo Hikawa eating fries" + class="border-img tilt-hover max-h-32 lg:max-h-40 w-auto mx-auto mb-3" + /> + </a> + <style> + .tilt-hover { + transition: transform 0.3s ease; + } + .tilt-hover:hover { + transform: translateY(-20px) rotate(10deg) scale(1.1); + animation: fly 1s ease-in-out; + } + @keyframes fly { + 0% { transform: translateY(0) rotate(0deg) scale(1); } + 25% { transform: translateY(-10px) rotate(5deg) scale(1.05); } + 50% { transform: translateY(-20px) rotate(10deg) scale(1.1); } + 75% { transform: translateY(-15px) rotate(8deg) scale(1.08); } + 100% { transform: translateY(-20px) rotate(10deg) scale(1.1); } + } + </style> + <p class="text-center text-sm mb-2">my <a href="https://indieweb.org/" class="hover:underline">indieweb</a> micro blog bridged with fediverse and bluesky. short thoughts, updates, and random stuff</p> + <a href="https://micro.pinapelz.com" class="block text-center hover:underline">check it out here</a> + </div> + </div> + <div id="clock" class="clock-widget mb-6"></div> + <div class="general-section flex flex-col xl:flex-row gap-4 mb-6"> + <div class="w-full xl:flex-1 xl:border-r xl:border-black xl:pr-4 mb-4 xl:mb-0"> + <img src="assets/rg-tier.gif" alt="Grace from SDVX" class="border-img w-1/2 lg:w-1/3 h-auto block mx-auto mb-3" /> + <h3 class="text-center text-lg font-bold mb-2"> <a href="/rhythm-games-tierlist.html" class="hover:underline">Rhythm Game Tierlist</a></h3> + <p class="text-center text-sm mb-2">my personal tierlist for rhythm games. I try to judge a series as a whole since most of them keep the same mechanics in sequels</p> + <a href="/rhythm-games-tierlist.html" class="block text-center hover:underline">check it out here</a> + </div> + <div class="w-full xl:flex-1 xl:pl-4"> + <h3 class="text-lg font-bold mb-2 text-center">Recent Links (cause im lazy to make navigation)</h3> + <p>Not everything is public, but if you gain access i guess its public for u. + </p> + <ul class="list-disc list-inside space-y-2 text-sm"> + <li><a href="/encoded-take-no1.html" class="hover:underline">[ENCODED SECRET POST NO.1]</a></li> + <li><a href="/encoded-take-no2.html" class="hover:underline">[ENCODED SECRET POST NO.2]</a></li> + </div> + </div> + + <div class="general-section grid grid-cols-1 lg:grid-cols-3 gap-4 text-lg items-start"> + <div class="flex flex-col h-full"> + <h3 class="text-lg font-bold mb-2">GitHub</h3> + <p class="mb-3 text-sm flex-grow"> + nerdge programming <br /> + + open source stuff 🤓 + </p> + <a href="https://github.com/pinapelz" class="hover:underline flex items-center"> + <img + src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" + alt="GitHub Logo" + class="w-5 h-5 mr-2" + /> + github.com/pinapelz + </a> + </div> + + <div class="flex flex-col h-full"> + <h3 class="text-lg font-bold mb-2">"Technical" Blog</h3> + <p class="mb-3 text-sm flex-grow"> + random long-form rambling<br /> + (usually technical or niche stuff) + </p> + <a href="https://blog.pinapelz.com" class="hover:underline"> + blog.pinapelz.com + </a> + </div> + <div class="flex flex-col h-full"> + <h3 class="text-lg font-bold mb-2">Super Secret Link</h3> + <p class="mb-3 text-sm flex-grow"> + mystery link for true vtuber degens<br /> + I'll change it from time to time + </p> + <a href="https://link.moekyun.me/Y4z40E" class="hover:underline"> + 🔒 https://link.moekyun.me/Y4z40E + </a> + </div> + </div> + </div> + </div> + <div class="footer text-center pt-6 mt-6 text-xs"> + <div class="footer-links mb-4"> + <p class="flex flex-wrap justify-center gap-x-2 gap-y-1 text-xs sm:text-sm"> + <span><a href="https://pinapelz.moe" class="hover:underline break-all">pinapelz.moe</a></span> + <span>/</span> + <span><a href="https://pinapelz.com" class="hover:underline break-all">pinapelz.com</a></span> + <span>/</span> + <span><a href="https://arcade.pinapelz.com" class="hover:underline break-all">arcade.moekyun.me</a></span> + <span>/</span> + <span><a href="https://phase-tracker.com" class="hover:underline break-all">phase-tracker.com</a></span> + <span>/</span> + <span><a href="https://patchwork.moekyun.me" class="hover:underline break-all">patchwork.moekyun.me</a></span> + <span>/</span> + <span><a href="https://blog.pinapelz.com" class="hover:underline break-all">blog.pinapelz.com</a></span> + <span>/</span> + <span><a href="https://mojibaka.pinapelz.com" class="hover:underline break-all">mojibaka.pinapelz.com</a></span> + <span>/</span> + <span><a href="https://moekyun.me" class="hover:underline break-all">moekyun.me</a></span> + <span>/</span> + <span><a href="https://vtuber-captcha.moekyun.me" class="hover:underline break-all">vtuber-captcha.moekyun.me</a></span> + </p> + </div> + <div class="flex justify-center gap-2"> + <a href="https://nekoweb.org/"> + <img src="https://nekoweb.org/assets/buttons/button7.gif" alt="Nekoweb" /> + </a> + <a href="https://linux.org/"> + <img src="https://adriansblinkiecollection.neocities.org/buttons/a46.jpg" alt="Linux" /> + </a> + </div> + + </div> + </body> +</html> |