diff options
Diffstat (limited to 'moe.pinapelz.com/about.html')
| -rw-r--r-- | moe.pinapelz.com/about.html | 288 |
1 files changed, 288 insertions, 0 deletions
diff --git a/moe.pinapelz.com/about.html b/moe.pinapelz.com/about.html new file mode 100644 index 0000000..06568f2 --- /dev/null +++ b/moe.pinapelz.com/about.html @@ -0,0 +1,288 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>ok for some reason u want to know about me</title> + <meta name="description" content="sure i guess" /> + <link rel="icon" href="assets/pfp.webp" /> + <link rel="stylesheet" type="text/css" href="styles/styles.css" /> + <script src="scripts/index.js"></script> + <style> + @keyframes blink { + 0%, + 50% { + opacity: 1; + } + 51%, + 100% { + opacity: 0; + } + } + + .blink { + animation: blink 1.5s infinite; + } + + .retro-shadow { + text-shadow: + 2px 2px 0px #ff69b4, + 4px 4px 0px #ffb6c1; + } + + .y2k-border { + border: 2px ridge #ff1493; + padding: 10px; + background: linear-gradient( + 180deg, + rgba(255, 255, 255, 0.9) 0%, + rgba(255, 182, 193, 0.3) 100% + ); + } + + .content h3 { + background: linear-gradient( + 90deg, + #ffb6c1, + #ff69b4, + #ff1493, + #ff69b4, + #ffb6c1 + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + font-size: 1.5em; + text-transform: uppercase; + } + + .sites { + border: 3px double #ff69b4; + padding: 10px; + margin: 10px 0; + background: repeating-linear-gradient( + 45deg, + #ffe4e1, + #ffe4e1 10px, + #ffb6c1 10px, + #ffb6c1 20px + ); + } + + .sparkle { + background-image: url("https://www.animatedimages.org/data/media/52/animated-star-image-0116.gif"); + background-repeat: no-repeat; + background-position: right center; + background-size: 20px 20px; + padding-right: 25px; + } + </style> + </head> + <body> + <div class="top-navbar"> + <nav aria-label="Main navigation"> + <ul> + <li><a href="/">home</a></li> + <li> + <a href="/about.html" aria-current="page">webmaster</a> + </li> + <li><a href="/projects.html">projects</a></li> + </ul> + </nav> + </div> + <div class="container"> + <div class="header" style="margin-top: 20px"> + <marquee behavior="alternate" direction="left" scrollamount="6"> + <span class="retro-shadow">About Me</span> + </marquee> + </div> + + <div class="sidebar"> + <div class="contacts-section y2k-border"> + <img + src="assets/pfp.webp" + class="border-img crazy-image" + width="250px" + alt="Profile Picture" + style=" + border: 3px ridge #ff1493; + box-shadow: 5px 5px 15px rgba(255, 20, 147, 0.5); + " + /> + <h3>📧 Contact Me 📧</h3> + <p> + <small + >idk maybe you need to reach me for some + reason</small + > + </p> + <ul> + <li> + <span class="blink">►</span> Email: + <a href="mailto:pinapelz@moekyun.me" + >pinapelz@moekyun.me</a + > + </li> + <li> + <span class="blink">►</span> X: + <a href="https://x.com/pinapelz">@pinapelz</a> + </li> + <li> + <span class="blink">►</span> Fedi: + <a href="https://sakurajima.social/@pinapelz" + >@pinapelz@sakurajima.social</a + > + </li> + <li> + <span class="blink">►</span> Matrix: + @pinapelz:chat.moekyun.me + </li> + <li><span class="blink">►</span> Discord: @pinapelz</li> + </ul> + </div> + </div> + + <div class="content"> + <div class="general-section center"> + <div class="y2k-border" style="margin-bottom: 20px"> + <h3>⚡ info ⚡</h3> + <ul style="list-style-type: none; text-align: left"> + <li>🐧 daily drives linux (endeavour os)</li> + <li>💻 mainly uses hyprland and cosmic</li> + <li>📺 anime/manga, rhythm game, mmorpg enjoyer</li> + <li>🧠 im tryna unrot my brain rn</li> + + </ul> + <p> I post a lot of random stuff <br/> on my "microblog" at: <a href="https://micro.pinapelz.com/">https://micro.pinapelz.com</a></p> + </div> + + <div class="y2k-border" style="margin-bottom: 20px"> + <h3>🎮 games 🎮</h3> + <ul style="list-style-type: none"> + <li> + <b style="color: #ff1493">MMOs</b> - FFXIV, PSO2 + </li> + <li> + <b style="color: #ff1493">(J)RPGs</b> - Persona, + Xenoblade + </li> + <li> + <b style="color: #ff1493" + >Visual Novel/Adventure</b + > + - Danganronpa, AI The Somnium, 999 + </li> + </ul> + <p><i>basically stuff that is heavy on the story</i></p> + <p> + right now i'm trying to make progress on my backlog + </p> + </div> + + <div + style=" + display: flex; + gap: 20px; + flex-wrap: wrap; + justify-content: center; + " + > + <div + class="y2k-border" + style="flex: 1; min-width: 200px" + > + <h3>📚 anime/manga</h3> + <p> + I pretty much only watch/ read slice of life... + yuru camp, k-on, nichijou that sorta thing + </p> + </div> + + <div + class="y2k-border" + style="flex: 1; min-width: 200px" + > + <h3>🎭 vtubers</h3> + <p> + <s>mostly watch erina makina (pc), rosemi lovelock (now miki), and pavolia reine (holo)</s> + <br/>(I still hang around sometimes but certainly don't watch as much anymore) + </p> + </div> + + <div + class="y2k-border" + style="flex: 1; min-width: 200px" + > + <h3>⚙️ tech stack</h3> + <p> + whatever seems fun (but usually next js + + tailwind + flask if I just want to build something super fast) + </p> + </div> + <div + class="y2k-border" + style="flex: 1; min-width: 200px" + > + <h3>KPOP</h3> + <p> + i recently got into kpop. I listen to YENA, NMIXX, IVE, LE SSERAFIM the most + </p> + </div> + </div> + + + <div style="margin: 30px 0"> + + <marquee + behavior="scroll" + direction="left" + scrollamount="4" + > + Not much else to say... if you want some random + technical rambling go to + <a + href="https://blog.pinapelz.com" + style="color: #ff1493; font-weight: bold" + >my blog</a + > + </marquee> + </div> + </div> + </div> + <div class="footer"> + <p style="text-align: center"> + <a href="https://pinapelz.moe">pinapelz.moe</a> / + <a href="https://pinapelz.com">pinapelz.com</a> / + <a href="https://arcade.pinapelz.com">arcade.moekyun.me</a> + / + <a href="https://phase-tracker.com">phase-tracker.com</a> / + <a href="https://patchwork.moekyun.me" + >patchwork.moekyun.me</a + > + / + <a href="https://blog.pinapelz.com">blog.pinapelz.com</a> / + <a href="https://mojibaka.pinapelz.com" + >mojibaka.pinapelz.com</a + > + / <a href="https://moekyun.me">moekyun.me</a> / + <a href="https://vtuber-captcha.moekyun.me" + >vtuber-captcha.moekyun.me</a + > + </p> + <center style="margin-top: 20px"> + <a href="https://nekoweb.org/"> + <img + src="https://nekoweb.org/assets/buttons/button7.gif" + /> + </a> + <a href="https://linux.org/"> + <img + src="https://adriansblinkiecollection.neocities.org/buttons/a46.jpg" + /> + </a> + <br /> + </center> + </div> + </div> + </body> +</html> |