<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AYVEN - Link In Bio</title>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DBF3DLJL2H"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-DBF3DLJL2H');
</script>
<!-- Import Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* --- WINDOWS 95 RETRO THEME CONFIGURATION --- */
:root {
--desktop-bg: #008080;
--win-face: #c0c0c0;
--win-text: #000000;
--title-bg: #000080;
--title-bg-inactive: #808080;
--title-text: #ffffff;
--title-text-inactive: #c0c0c0;
--border-light: #ffffff;
--border-dark: #000000;
--border-mid: #808080;
}
/* Override WordPress default margins and display */
body, html, .wp-site-blocks, .is-layout-flow, .is-layout-constrained, .entry-content, .post-inner {
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
background-color: var(--desktop-bg) !important;
}
/* Hide standard headers/footers to create an immersive bio experience */
header, footer, .entry-header, .entry-title, .wp-block-post-title, .site-header, .site-footer {
display: none !important;
}
/* Retro Font Smoothing Reset */
body, button, input, select, .link-in-bio-container {
-webkit-font-smoothing: none !important;
-moz-osx-font-smoothing: none !important;
text-rendering: optimizeSpeed !important;
font-family: 'MS Sans Serif', 'Tahoma', 'Geneva', sans-serif !important;
}
.link-in-bio-container {
background-color: var(--desktop-bg);
color: var(--win-text);
display: flex;
flex-direction: column;
align-items: center;
padding: 24px 16px 64px 16px;
box-sizing: border-box;
min-height: 100vh;
width: 100%;
}
/* --- AUTHENTIC WIN95 BEVELS --- */
.win-outset {
background: var(--win-face);
border-top: 2px solid var(--border-light);
border-left: 2px solid var(--border-light);
border-right: 2px solid var(--border-dark);
border-bottom: 2px solid var(--border-dark);
box-shadow: inset -1px -1px var(--border-mid), inset 1px 1px #dfdfdf;
}
.win-inset {
background: #ffffff;
border-top: 2px solid var(--border-mid);
border-left: 2px solid var(--border-mid);
border-right: 2px solid var(--border-light);
border-bottom: 2px solid var(--border-light);
box-shadow: inset 1px 1px var(--border-dark), inset -1px -1px #dfdfdf;
}
/* --- WINDOW STRUCTURES --- */
.window {
width: 100%;
padding: 3px;
box-sizing: border-box;
}
.title-bar {
background: var(--title-bg);
color: var(--title-text);
padding: 3px 6px;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
font-size: 13px;
letter-spacing: 0.5px;
margin-bottom: 2px;
user-select: none;
}
.title-btn {
width: 16px;
height: 14px;
background: var(--win-face);
border-top: 1px solid var(--border-light);
border-left: 1px solid var(--border-light);
border-right: 1px solid var(--border-dark);
border-bottom: 1px solid var(--border-dark);
display: flex;
justify-content: center;
align-items: center;
font-size: 10px;
font-weight: bold;
color: var(--win-text);
cursor: pointer;
box-shadow: inset -1px -1px var(--border-mid);
user-select: none;
}
.title-btn:active {
border-top: 1px solid var(--border-dark);
border-left: 1px solid var(--border-dark);
border-right: 1px solid var(--border-light);
border-bottom: 1px solid var(--border-light);
box-shadow: inset 1px 1px var(--border-mid);
padding-top: 1px;
padding-left: 1px;
}
.window-content {
padding: 10px;
}
/* --- REUSABLE BUTTONS --- */
.btn-link {
text-decoration: none;
color: var(--win-text) !important;
display: flex;
align-items: center;
padding: 6px 10px;
font-weight: bold;
font-size: 14px;
cursor: pointer;
box-sizing: border-box;
background: var(--win-face);
user-select: none;
}
.btn-link:active {
border-top: 2px solid var(--border-dark);
border-left: 2px solid var(--border-dark);
border-right: 2px solid var(--border-light);
border-bottom: 2px solid var(--border-light);
box-shadow: inset 1px 1px var(--border-mid);
padding: 7px 9px 5px 11px;
}
.btn-small {
justify-content: center;
width: auto;
min-width: 100px;
font-size: 12px;
padding: 4px 12px;
}
.notepad-content {
padding: 12px;
font-family: 'Courier New', Courier, monospace !important;
font-size: 13px;
line-height: 1.4;
overflow-y: auto;
}
.show-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
border-bottom: 1px dotted var(--border-mid);
padding-bottom: 8px;
gap: 10px;
}
.show-row a {
color: #0000ff !important;
text-decoration: underline;
font-weight: bold;
}
/* Flashing Windows 95-style ticket button. */
.ticket-button {
color: var(--win-text) !important;
text-decoration: none !important;
white-space: nowrap;
animation: ticket-flash 1.15s steps(1, end) infinite;
}
@keyframes ticket-flash {
0%, 48% {
background: var(--win-face);
color: var(--win-text) !important;
outline: 1px dotted var(--win-text);
outline-offset: -4px;
}
49%, 100% {
background: var(--title-bg);
color: var(--title-text) !important;
outline: 1px dotted var(--title-text);
outline-offset: -4px;
}
}
@media (prefers-reduced-motion: reduce) {
.ticket-button {
animation: none;
}
}
.social-grid {
display: flex;
justify-content: space-between;
gap: 10px;
}
.social-sq {
flex: 1;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
font-weight: bold;
}
/* Animation effects */
@keyframes spin-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spin-slow {
animation: spin-slow 12s linear infinite;
}
</style>
</head>
<body>
<div class="link-in-bio-container">
<!-- 1. HEADER LOGO AREA -->
<div class="w-full max-w-[420px] mb-2 mt-0 flex flex-col items-center">
<!-- LOGO IMAGE -->
<img id="logo-image" src="https://ayvenmusic.com/wp-content/uploads/2026/06/ayvenlogo1-nobg-cropped.png" alt="AYVEN" class="max-w-[220px] h-auto object-contain select-none" onerror="this.style.display='none'">
</div>
<!-- MAIN SINGLE COLUMN CONTAINER -->
<div class="w-full max-w-[420px] flex flex-col gap-4">
<!-- 2. LISTEN TO NEW SONG WINDOW -->
<div class="window win-outset">
<div class="title-bar">
<span class="flex items-center gap-1.5 select-none font-sans">
<span class="spin-slow">đŋ</span>
<span>listen to my music !</span>
</span>
<div class="title-btn" onclick="playClick()">â</div>
</div>
<div class="window-content bg-[#dfdfdf] p-3 flex flex-col gap-3">
<div class="flex gap-3">
<!-- Cover Art Box -->
<img src="https://ayvenmusic.com/wp-content/uploads/2026/06/November-Album-Art.jpg" alt="Cover Art" class="w-[80px] h-[80px] win-inset border border-gray-400 object-cover flex-shrink-0">
<!-- Static Song details -->
<div class="flex-grow flex flex-col justify-between font-mono text-[11px] text-black">
<div>
<h3 class="text-xs font-bold text-[#000080] border-b border-gray-400 pb-0.5 mb-1 font-sans">
SONG DETAILS
</h3>
<div class="grid grid-cols-2 gap-x-1 gap-y-0.5 leading-tight">
<span class="text-zinc-600">TITLE:</span>
<span class="font-bold text-pink-600">NOVEMBER</span>
<span class="text-zinc-600">LENGTH:</span>
<span class="font-bold">3:35</span>
<span class="text-zinc-600">RELEASED:</span>
<span class="font-bold text-teal-700">Sept 2025</span>
</div>
</div>
</div>
</div>
<!-- Platform Streaming Buttons -->
<div class="flex flex-col gap-2 mt-1 font-sans">
<a href="https://open.spotify.com/artist/4sgvvCIHF6QY9jJIsaWDA2?si=E_zHAJbrQnam0ftz929y5w" target="_blank" rel="noopener" class="btn-link win-outset flex items-center justify-between hover:bg-[#c6c6c6]" onclick="playClick()">
<span class="flex items-center gap-2">
<img src="https://ayvenmusic.com/wp-content/uploads/2026/06/Spotify_Pixel-removebg-preview_clean.png" alt="Spotify" class="w-5 h-5 object-contain pixel-icon">
<span class="text-xs font-bold">SPOTIFY</span>
</span>
<span class="text-zinc-500 flex items-center">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
<polyline points="15 3 21 3 21 9"></polyline>
<line x1="10" y1="14" x2="21" y2="3"></line>
</svg>
</span>
</a>
<a href="https://music.apple.com/us/artist/ayven/1803990083" target="_blank" rel="noopener" class="btn-link win-outset flex items-center justify-between hover:bg-[#c6c6c6]" onclick="playClick()">
<span class="flex items-center gap-2">
<img src="https://ayvenmusic.com/wp-content/uploads/2026/06/Apple_Music_Pixel-removebg-preview_clean.png" alt="Apple Music" class="w-5 h-5 object-contain pixel-icon">
<span class="text-xs font-bold">APPLE MUSIC</span>
</span>
<span class="text-zinc-500 flex items-center">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
<polyline points="15 3 21 3 21 9"></polyline>
<line x1="10" y1="14" x2="21" y2="3"></line>
</svg>
</span>
</a>
<a href="https://music.youtube.com/@ayvenmusic" target="_blank" rel="noopener" class="btn-link win-outset flex items-center justify-between hover:bg-[#c6c6c6]" onclick="playClick()">
<span class="flex items-center gap-2">
<img src="https://ayvenmusic.com/wp-content/uploads/2026/06/YT_Music_Pixel-removebg-preview_clean.png" alt="YouTube Music" class="w-5 h-5 object-contain pixel-icon">
<span class="text-xs font-bold">YOUTUBE MUSIC</span>
</span>
<span class="text-zinc-500 flex items-center">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
<polyline points="15 3 21 3 21 9"></polyline>
<line x1="10" y1="14" x2="21" y2="3"></line>
</svg>
</span>
</a>
<a href="https://hyperfollow.com/ayvenmusic" target="_blank" rel="noopener" class="btn-link win-outset flex items-center justify-between hover:bg-[#c6c6c6]" onclick="playClick()">
<span class="flex items-center gap-2">
<span>đˇ</span>
<span class="text-xs font-bold">LISTEN ON OTHER</span>
</span>
<span class="text-zinc-500 flex items-center">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
<polyline points="15 3 21 3 21 9"></polyline>
<line x1="10" y1="14" x2="21" y2="3"></line>
</svg>
</span>
</a>
</div>
</div>
</div>
<!-- 3. UPCOMING SHOWS NOTEPAD WINDOW -->
<div class="window win-outset">
<div class="title-bar">
<span class="flex items-center gap-1.5 select-none font-sans">đ UPCOMING_SHOWS.txt</span>
<div class="title-btn" onclick="playClick()">â</div>
</div>
<div class="window-content bg-white p-0">
<!-- Notepad Menu Interface -->
<div class="flex items-center gap-3 bg-[#dfdfdf] border-b border-gray-400 px-2 py-1 text-xs select-none font-sans">
<span class="hover:bg-blue-800 hover:text-white px-1 cursor-pointer">File</span>
<span class="hover:bg-blue-800 hover:text-white px-1 cursor-pointer">Edit</span>
<span class="hover:bg-blue-800 hover:text-white px-1 cursor-pointer">Search</span>
<span class="hover:bg-blue-800 hover:text-white px-1 cursor-pointer">Help</span>
</div>
<div class="notepad-content win-inset">
<div>
<div class="text-[11px] text-[#000080] font-sans font-bold border-b border-gray-300 pb-1.5 mb-2 select-none">
đ SHOW_DATES.TXT
</div>
<div class="flex flex-col gap-2 font-mono text-xs text-black">
<div class="show-row" style="margin-bottom: 0;">
<div class="flex flex-col">
<span class="font-bold">THURSDAY, OCTOBER 22 - THE VIPER ROOM</span>
<span class="text-gray-500 text-[10px]">HOLLYWOOD, CA</span>
</div>
<!-- TICKET LINK PLACEHOLDER:
Replace href="#" with the real ticket URL, then remove
"event.preventDefault();" from onclick. -->
<a href="#" data-ticket-url="PASTE_TICKET_URL_HERE" class="ticket-button font-bold border border-[#808080] px-2 py-1 win-outset text-xs text-center" onclick="event.preventDefault(); playClick();">GET TIX</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 4. BUY MERCH WINDOW -->
<div class="window win-outset hidden" aria-hidden="true">
<div class="title-bar">
<span class="flex items-center gap-1.5 select-none font-sans">đ BUY_MERCH.exe</span>
<div class="title-btn" onclick="playClick()">â</div>
</div>
<div class="window-content bg-[#dfdfdf] p-3 font-sans">
<!-- Folder Explorer Directory bar -->
<div class="flex items-center gap-2 bg-[#dfdfdf] border-b border-gray-400 p-1 mb-3 text-xs select-none">
<span class="text-gray-500 font-bold ml-1">Address:</span>
<div class="win-inset bg-white px-2 py-0.5 flex-grow font-mono flex items-center gap-1.5 text-gray-700">
<span>đ C:\AYVEN_STORE\CATALOG</span>
</div>
</div>
<div class="flex flex-col gap-3">
<!-- Item 1: Cassette -->
<a href="https://wordpress.org" target="_blank" rel="noopener" class="win-outset p-3 bg-[#dfdfdf] hover:bg-[#d5d5d5] flex justify-between items-center gap-3 transition-colors cursor-pointer text-left block" style="text-decoration: none;" onclick="playClick()">
<div class="flex items-center gap-4 w-full">
<div class="w-16 h-16 win-inset bg-black flex items-center justify-center text-3xl flex-shrink-0">
đŧ
</div>
<div class="flex flex-col">
<span class="font-bold text-xs text-black block">LIMITED EDITION CASSETTE</span>
<span class="text-[10px] font-mono text-zinc-600 mt-1 block">PRICE: $14.99</span>
<span class="text-[9px] font-bold text-blue-700 hover:underline mt-1 block">CLICK TO PREVIEW ITEM â</span>
</div>
</div>
</a>
<!-- Item 2: Tee -->
<a href="https://wordpress.org" target="_blank" rel="noopener" class="win-outset p-3 bg-[#dfdfdf] hover:bg-[#d5d5d5] flex justify-between items-center gap-3 transition-colors cursor-pointer text-left block" style="text-decoration: none;" onclick="playClick()">
<div class="flex items-center gap-4 w-full">
<div class="w-16 h-16 win-inset bg-black flex items-center justify-center text-3xl flex-shrink-0">
đ
</div>
<div class="flex flex-col">
<span class="font-bold text-xs text-black block">CYBERPUNK NEON LOGO TEE</span>
<span class="text-[10px] font-mono text-zinc-600 mt-1 block">PRICE: $24.99</span>
<span class="text-[9px] font-bold text-blue-700 hover:underline mt-1 block">CLICK TO PREVIEW ITEM â</span>
</div>
</div>
</a>
<!-- Item 3: Sticker Pack -->
<a href="https://wordpress.org" target="_blank" rel="noopener" class="win-outset p-3 bg-[#dfdfdf] hover:bg-[#d5d5d5] flex justify-between items-center gap-3 transition-colors cursor-pointer text-left block" style="text-decoration: none;" onclick="playClick()">
<div class="flex items-center gap-4 w-full">
<div class="w-16 h-16 win-inset bg-black flex items-center justify-center text-3xl flex-shrink-0">
đī¸
</div>
<div class="flex flex-col">
<span class="font-bold text-xs text-black block">HOLOGRAPHIC STICKER PACK</span>
<span class="text-[10px] font-mono text-zinc-600 mt-1 block">PRICE: $4.99</span>
<span class="text-[9px] font-bold text-blue-700 hover:underline mt-1 block">CLICK TO PREVIEW ITEM â</span>
</div>
</div>
</a>
<!-- VIEW FULL SHOP RED BUTTON -->
<a href="/shop" target="_blank" rel="noopener" class="win-outset w-full py-2.5 text-center flex justify-center items-center text-white font-bold text-xs hover:bg-red-700 mt-1" style="background-color: #ff0000; color: white !important; text-decoration: none;" onclick="playClick()">
<span>VIEW FULL SHOP</span>
</a>
</div>
</div>
</div>
<!-- 5. BIOGRAPHY WINDOW -->
<div class="window win-outset hidden" aria-hidden="true">
<div class="title-bar">
<span class="flex items-center gap-1.5 select-none font-sans">âšī¸ ABOUT_ME.txt</span>
<div class="title-btn" onclick="playClick()">â</div>
</div>
<div class="window-content bg-white p-3 font-mono text-xs">
<p class="font-bold text-[#000080] mb-2 border-b pb-1 select-none font-sans">
đ BLOG_001.TXT
</p>
<p class="leading-relaxed text-gray-800">
Ayven's about me goes here!
</p>
<div class="border-t border-gray-200 mt-3 pt-2 text-[10px] text-gray-500 flex justify-between select-none font-sans">
<span>EST: 2025</span>
<span>BASED: LOS ANGELES</span>
</div>
</div>
</div>
<!-- 6. SOCIAL BUTTONS GRID -->
<div class="social-grid font-sans">
<a href="https://www.instagram.com/ayven.music/?hl=en" target="_blank" rel="noopener" class="btn-link social-sq win-outset hover:bg-[#d5d5d5]" onclick="playClick()">
<img src="https://ayvenmusic.com/wp-content/uploads/2026/06/Insta_Pixel-removebg-preview_clean.png" alt="Instagram" class="w-6 h-6 object-contain pixel-icon">
</a>
<a href="https://www.youtube.com/@ayvenmusic" target="_blank" rel="noopener" class="btn-link social-sq win-outset hover:bg-[#d5d5d5]" onclick="playClick()">
<img src="https://ayvenmusic.com/wp-content/uploads/2026/06/YT_Pixel-removebg-preview_clean.png" alt="YouTube" class="w-6 h-6 object-contain pixel-icon">
</a>
<a href="https://ko-fi.com/ayvenmusic" target="_blank" rel="noopener" class="btn-link social-sq win-outset hover:bg-[#d5d5d5]" onclick="playClick()">
<img src="https://ayvenmusic.com/wp-content/uploads/2026/06/KoFi_Pixel-removebg-preview_clean.png" alt="Ko-Fi" class="w-6 h-6 object-contain pixel-icon">
</a>
</div>
<!-- 7. ERROR MESSAGE / SOUNDCLOUD WINDOW -->
<div class="window win-outset">
<div class="title-bar">
<span class="select-none font-sans">Error: end of page</span>
<div class="title-btn" onclick="playClick()">â</div>
</div>
<div class="window-content bg-[#dfdfdf] p-4 font-sans">
<div class="flex flex-col items-center justify-center gap-2 text-center w-full">
<div class="w-9 h-9 bg-red-600 text-white rounded-full flex items-center justify-center font-bold text-xl select-none border-2 border-white shadow mb-1">
â
</div>
<div class="flex flex-col items-center">
<h3 class="m-0 mb-1.5 text-xs font-bold uppercase text-[#000080]">
SECRET DEMOS
</h3>
<a href="https://soundcloud.com/a-a-272836168" target="_blank" rel="noopener" class="btn-link btn-small win-outset text-[11px] px-5 py-1 hover:bg-[#c6c6c6]" style="text-decoration: none;" onclick="playClick()">
SOUNDCLOUD
</a>
</div>
</div>
</div>
</div>
</div>
<!-- FOOTER SIGNATURE -->
<div class="text-[10px] font-mono text-zinc-300 select-none text-center mt-6 flex flex-col gap-0.5">
<span>Š 2026 AYVEN. ALL RIGHTS RESERVED.</span>
</div>
</div>
<!-- Satisfying Retro Audio Engine (Standard Web Audio API) -->
<script>
let audioCtx = null;
function getAudioContext() {
if (!audioCtx) {
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
}
return audioCtx;
}
function playClick() {
try {
const ctx = getAudioContext();
if (ctx.state === 'suspended') {
ctx.resume();
}
// Quick retro click chime
const osc = ctx.createOscillator();
const gain = ctx.createGain();
osc.connect(gain);
gain.connect(ctx.destination);
osc.type = 'sine';
osc.frequency.setValueAtTime(1200, ctx.currentTime);
osc.frequency.exponentialRampToValueAtTime(300, ctx.currentTime + 0.05);
gain.gain.setValueAtTime(0.08, ctx.currentTime);
gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.05);
osc.start();
osc.stop(ctx.currentTime + 0.05);
} catch (e) {
console.log("Audio not allowed yet");
}
}
// Play Startup Chime on first interaction
window.addEventListener('click', () => {
try {
const ctx = getAudioContext();
if (ctx.state === 'suspended') {
ctx.resume();
}
} catch(e) {}
}, { once: true });
// Google Analytics Outbound Link Tracking
document.addEventListener('DOMContentLoaded', () => {
const allLinks = document.querySelectorAll('a');
allLinks.forEach(link => {
link.addEventListener('click', (e) => {
const url = link.getAttribute('href');
// Only track external links
if (url && url.startsWith('http')) {
if (typeof gtag === 'function') {
gtag('event', 'outbound_link_click', {
'link_url': url,
'link_text': link.innerText.trim().replace(/\s+/g, ' ').substring(0, 50) || 'Image/Icon Link'
});
}
}
});
});
});
</script>
</body>
</html>