nvmd.json
Character

hi scroll scroll about me

hi my name is jay i am an artist, coder, editor and graphic designer from the philippines! those are one of my hobbies i love doing but i can definitely do more than just those mentioned

i am NOT telling my age unless you're trusted, but i suggest not interacting with me if you're younger than 16. i also listen to k-pop, watch anime k-drama read novels and i'm a huge fan of philosophy and astronomy related stuff! or just science in general. e-sports (currently/mainly VCT and LCK) is also one of my favorite interests ^^ my favorite player is rascal which is ex-kt and ex-drx. it has been 5 years ever since~ i also like doublelift and weixiao; ruler, duro, lucid, career, bdd, fenrir, keria, untara, lehends scout and etc! my favorite vct teams are sen, gen g, t1, edg and blg at the moment. lck is t1, gen g, ns, krx, kt, hle. lpl is blg and lec is g2 hel, g2, tlaw and mkoi!

i also yumeship myself with tsavorae from hi3 and seraphine from league~ strictly non-sharing unless i trust you or find comfort in you HAHAHAHA

rules

before you follow (byf): 1. i'm slightly sensitive but i prefer you being honest on how you feel about me so i don't get the wrong idea. 2. i DON'T respond to messages almost everyday because i simply just don't chat. but i'm here if you need me! 3. i have somewhat issues comprehending which sayings are a joke or not depending how obvious you make so i'd rather have tone tags if you can. 4. i don't condone semi-toxic personality. 5. i have problematic humor if we're close-close. 6. (for twitter) i retweet often and some may include nsfw.

do not interact (dni): 1. you're toxic as a whole. 2. unironically problematic. 3. you don't respect boundaries. 4. anti my favs\ 5. you're close-minded or just a close-minded christian.

press the play button for music...

/* ===================================================== GOOGLE FONT — POPPINS ===================================================== */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap'); /* ===================================================== RESET ===================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; min-height: 100%; } body { background: #f7f7f7; font-family: 'Poppins', sans-serif; font-weight: 500; color: #b8b8b8; } /* ===================================================== WEBSITE ===================================================== */ .website { width: 100%; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; } /* ===================================================== MAIN CARD ===================================================== */ .main-card { position: relative; width: min(1190px, 92vw); height: 690px; background: #ffffff; border-radius: 30px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08); overflow: hidden; } /* ===================================================== INNER TOP BORDER ===================================================== */ .main-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 30px; background: #bebebe; border-radius: 30px 30px 0 0; z-index: 1; } /* ===================================================== MUSIC BUTTON ===================================================== */ .music-button { position: absolute; top: 45px; left: 18px; width: 38px; height: 38px; border: none; background: transparent; cursor: pointer; z-index: 20; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease, opacity 0.2s ease; } .music-button:hover { transform: scale(1.08); } .music-button:active { transform: scale(0.95); } /* Play triangle */ .play-icon { width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 31px solid #bcbcbc; margin-left: 5px; transition: transform 0.25s ease, border-left-color 0.25s ease; } /* ===================================================== PLAY/PAUSE ICON ===================================================== */ .play-icon.playing { width: 24px; height: 30px; border: none; position: relative; margin-left: 0px; background: transparent; } /* left pause bar */ .play-icon.playing::before { content: ""; position: absolute; left: 0px; top: 0px; width: 7px; height: 30px; background: #bcbcbc; border-radius: 2px; } /* right pause bar */ .play-icon.playing::after { content: ""; position: absolute; right: 0; top: 0; width: 7px; height: 30px; background: #bcbcbc; border-radius: 2px; } /* ===================================================== FILE NAME ===================================================== */ .file-name { position: absolute; top: 36px; right: 49px; font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 500; color: #444444; letter-spacing: 0.2px; z-index: 10; } /* ===================================================== CHARACTER ===================================================== */ .character-container { position: absolute; left: 22px; bottom: 35px; width: 410px; height: 675px; display: flex; align-items: flex-end; justify-content: center; z-index: 5; pointer-events: none; } .character { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; display: block; } /* ===================================================== CONTENT AREA ===================================================== */ .content-area { position: absolute; top: 130px; right: 47px; width: 730px; z-index: 10; } /* ===================================================== TABS ===================================================== */ .tabs { position: relative; height: 48px; display: flex; align-items: flex-end; gap: 9px; padding-left: 43px; /* Slightly raises the buttons so they sit more like the reference image. */ transform: translateY(9px); z-index: 20; } /* Individual tab */ .tab-button { position: relative; height: 46px; min-width: 125px; padding: 0 28px; border: none; border-radius: 15px; background: #eeeeee; color: #b5b5b5; font-family: 'Poppins', sans-serif; font-size: 23px; font-weight: 500; cursor: pointer; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.12); transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } /* Hover */ .tab-button:hover { transform: scale(0.96); background: #e9e9e9; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.10); } /* Active */ .tab-button.active { background: #eeeeee; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10); } /* ===================================================== INFORMATION BOX ===================================================== */ .information-box { position: relative; width: 100%; height: 386px; margin-top: -5px; background: #fafafa; border: 2px solid #f0f0f0; border-radius: 17px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07); overflow: hidden; } /* ===================================================== CONTENT SECTIONS ===================================================== */ .content-section { position: absolute; inset: 0; padding: 33px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease; } .content-section.active { opacity: 1; visibility: visible; pointer-events: auto; } /* ===================================================== SECTION TITLE ===================================================== */ .content-section h1 { font-family: 'Poppins', sans-serif; font-size: 36px; font-weight: 500; line-height: 1.2; color: #b8b8b8; margin-bottom: 18px; } /* ===================================================== SCROLL CONTENT ===================================================== */ .scroll-content { height: 285px; overflow-y: auto; padding-right: 18px; color: #aaaaaa; font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 500; line-height: 1.7; } /* ===================================================== SCROLLBAR ===================================================== */ .scroll-content::-webkit-scrollbar { width: 6px; } .scroll-content::-webkit-scrollbar-track { background: transparent; } .scroll-content::-webkit-scrollbar-thumb { background: #d7d7d7; border-radius: 10px; } .scroll-content::-webkit-scrollbar-thumb:hover { background: #c5c5c5; } .scroll-content { scrollbar-width: thin; scrollbar-color: #d7d7d7 transparent; } /* ===================================================== CHAT / CBOX ===================================================== */ .chat-section { padding: 0; display: flex; align-items: stretch; justify-content: stretch; } .cbox-container { width: 100%; height: 100%; overflow: hidden; border-radius: 15px; } .cbox { width: 100%; height: 100%; border: none; display: block; } /* ===================================================== SOCIAL LINKS CONTAINER ===================================================== */ .social-links { width: 100%; /* Slightly slimmer than before. */ height: 68px; /* Move the links upward. */ margin-top: 20px; padding: 0 55px; border-radius: 40px; background: #fafafa; border: 2px solid #f0f0f0; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.06); display: flex; align-items: center; justify-content: space-between; } /* ===================================================== SOCIAL TEXT ===================================================== */ .social-link { color: #b8b8b8; text-decoration: none; font-family: 'Poppins', sans-serif; font-size: 20px; font-weight: 500; transition: transform 0.2s ease, color 0.2s ease; } /* Hover */ .social-link:hover { transform: scale(0.96); color: #a8a8a8; } /* ===================================================== MUSIC STATUS ===================================================== */ .music-status { width: min(1190px, 92vw); margin-top: 15px; padding-left: 16px; font-family: 'Poppins', sans-serif; font-size: 25px; font-weight: 500; color: #858585; text-align: left; transition: opacity 0.25s ease; } /* ===================================================== RESPONSIVE DESIGN ===================================================== */ @media (max-width: 1100px) { .main-card { height: 620px; } .character-container { width: 380px; height: 630px; left: 15px; bottom: 35px; } .content-area { width: 620px; right: 30px; top: 115px; } .information-box { height: 350px; } .social-link { font-size: 23px; } } /* ===================================================== PAGE FADE-IN + OVERALL SIZE ===================================================== */ .website { opacity: 0; transform: scale(0.85) translateY(8px); transform-origin: center center; transition: opacity 1.2s ease, transform 1.2s ease; } .website.page-loaded { opacity: 1; transform: scale(0.85) translateY(0); } /* ===================================================== RESPONSIVE SCALING ===================================================== */ /* IMPORTANT: We DO NOT rearrange the website on mobile. Instead, the same desktop composition is kept and the card naturally becomes smaller. */ /* ----------------------------------------------------- TABLETS ----------------------------------------------------- */ @media (max-width: 1190px) { .website { padding: 25px; } .main-card { width: 100%; } .character-container { left: 1.85%; width: 34.45%; height: 97.8%; } .content-area { top: 18.84%; right: 3.95%; width: 61.34%; } .file-name { top: 5.2%; right: 4.1%; } } /* ----------------------------------------------------- SMALLER TABLETS / PHONES Everything keeps the same arrangement. ----------------------------------------------------- */ @media (max-width: 700px) { .website { padding: 12px; } .main-card { width: 100%; border-radius: 24px; } .main-card::before { height: 4.35%; min-height: 18px; border-radius: 24px 24px 0 0; } .music-button { top: 6.5%; left: 1.5%; width: 38px; height: 38px; } .play-icon { border-top-width: 18px; border-bottom-width: 18px; border-left-width: 28px; } .file-name { top: 5.2%; right: 4%; font-size: clamp(13px, 3vw, 20px); } .character-container { left: 1.85%; bottom: 5%; width: 34.45%; height: 97.8%; } .content-area { top: 18.84%; right: 3.95%; width: 61.34%; } .tabs { height: 7%; gap: 1.2%; padding-left: 5.9%; transform: translateY(15%); } .tab-button { min-width: 0; height: 95%; padding: 0 3%; font-size: clamp(9px, 2vw, 20px); border-radius: 12px; white-space: nowrap; } .information-box { height: 56%; margin-top: -1%; } .content-section { padding: 4.5%; } .content-section h1 { font-size: clamp(15px, 3.1vw, 32px); margin-bottom: 3%; } .scroll-content { height: 75%; padding-right: 5%; font-size: clamp(8px, 1.5vw, 16px); line-height: 1.65; } .social-links { height: 10%; margin-top: 3%; padding: 0 7%; border-radius: 40px; } .social-link { font-size: clamp(8px, 1.7vw, 18px); } .music-status { width: 100%; margin-top: 10px; padding-left: 3px; font-size: clamp(11px, 2vw, 20px); } } /* ===================================================== VERY SMALL PHONES ===================================================== */ @media (max-width: 400px) { .website { padding: 8px; } .main-card { border-radius: 20px; } .main-card::before { min-height: 16px; } .music-button { top: 6%; width: 32px; height: 32px; } .play-icon { border-top-width: 15px; border-bottom-width: 15px; border-left-width: 23px; } .content-section { padding: 4%; } .scroll-content { font-size: clamp(7px, 2vw, 13px); } } /* ===================================================== LARGE DESKTOP ===================================================== */ @media (min-width: 1200px) { .website { padding: 40px; } .main-card { width: 1190px; flex-shrink: 0; } .music-status { width: 1190px; } } /* ===================================================== WAIT FOR PAGE TO LOAD ===================================================== */ document.addEventListener("DOMContentLoaded", () => { /* ================================================= ELEMENTS ================================================= */ const musicButton = document.getElementById("music-button"); const musicIcon = document.querySelector(".play-icon"); musicButton.setAttribute("aria-label", "Pause music"); const music = document.getElementById("background-music"); const musicStatus = document.getElementById("music-status"); const tabButtons = document.querySelectorAll(".tab-button"); const contentSections = document.querySelectorAll(".content-section"); /* ================================================= MUSIC SETTINGS ================================================= */ /* Change this to the title of your song. */ const songTitle = "some of your love - partynextdoor"; /* ================================================= PAGE FADE-IN ================================================= */ setTimeout(() => { document.querySelector(".website").classList.add("page-loaded"); }, 100); /* ================================================= MUSIC PLAY / STOP ================================================= */ musicButton.addEventListener("click", () => { /* If music is currently paused, start playing. */ if (music.paused) { music.play() .then(() => { /* Change status text */ musicStatus.textContent = songTitle; /* Change triangle appearance */ musicIcon.classList.add("playing"); }) .catch((error) => { console.log( "Music could not be played:", error ); }); } /* Otherwise, stop the music. */ else { music.pause(); /* Reset music to beginning. */ music.currentTime = 0; /* Reset status */ musicStatus.textContent = "press the play button for music..."; /* Reset icon */ musicIcon.classList.remove("playing"); musicButton.setAttribute("aria-label", "Play music"); } }); /* ================================================= WHEN SONG ENDS ================================================= */ music.addEventListener("ended", () => { musicStatus.textContent = "press the play button for music..."; musicIcon.classList.remove("playing"); musicButton.setAttribute("aria-label", "Play music"); }); /* ================================================= TAB SWITCHING ================================================= */ tabButtons.forEach(button => { button.addEventListener("click", () => { /* Get the section that this button belongs to. */ const sectionName = button.dataset.section; /* ================================ REMOVE ACTIVE FROM ALL BUTTONS ================================= */ tabButtons.forEach(tab => { tab.classList.remove("active"); }); /* ================================ ACTIVATE CLICKED BUTTON ================================= */ button.classList.add("active"); /* ================================ HIDE ALL CONTENT ================================= */ contentSections.forEach(section => { section.classList.remove("active"); }); /* ================================ SHOW SELECTED CONTENT ================================= */ const selectedSection = document.getElementById(sectionName); if (selectedSection) { selectedSection.classList.add("active"); } }); }); /* ================================================= SOCIAL LINK ANIMATION ================================================= */ const socialLinks = document.querySelectorAll(".social-link"); socialLinks.forEach(link => { link.addEventListener("click", () => { /* Small click effect. */ link.style.transform = "scale(0.94)"; setTimeout(() => { link.style.transform = ""; }, 120); }); }); /* ================================================= TAB CLICK ANIMATION ================================================= */ tabButtons.forEach(button => { button.addEventListener("mousedown", () => { button.style.transform = "scale(0.93)"; }); button.addEventListener("mouseup", () => { button.style.transform = ""; }); button.addEventListener("mouseleave", () => { button.style.transform = ""; }); }); }); /* ===================================================== COPY / LONG-PRESS WARNING ===================================================== */ let copyWarningShown = false; function showCopyWarning() { // Prevent the alert from appearing repeatedly if (copyWarningShown) return; copyWarningShown = true; alert( "what are you doing?" ); // Allow the warning to appear again after the alert is closed setTimeout(() => { copyWarningShown = false; }, 1000); } /* ===================================================== RIGHT CLICK ===================================================== */ document.addEventListener("contextmenu", (event) => { event.preventDefault(); showCopyWarning(); }); /* ===================================================== COPY ===================================================== */ document.addEventListener("copy", () => { showCopyWarning(); }); /* ===================================================== LONG PRESS ===================================================== */ let pressTimer; document.addEventListener("touchstart", () => { pressTimer = setTimeout(() => { showCopyWarning(); }, 700); }, { passive: true }); document.addEventListener("touchend", () => { clearTimeout(pressTimer); }); document.addEventListener("touchmove", () => { clearTimeout(pressTimer); });