mirror of
https://github.com/mileswolfallen2/miles-web.git
synced 2026-09-08 11:23:17 +00:00
375 lines
25 KiB
HTML
375 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>miles' music taste</title>
|
|
<meta name="description" content="Vocaloid · Rage Against the Machine.">
|
|
<link rel="canonical" href="https://milesallen.site/music.html">
|
|
<meta property="og:title" content="miles' music taste">
|
|
<meta property="og:description" content="Vocaloid · Rage Against the Machine.">
|
|
<meta property="og:image" content="https://milesallen.site/og.png">
|
|
<meta property="og:url" content="https://milesallen.site/music.html">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Mono:wght@400;700&family=Inter:wght@400;500;600;800&display=swap" rel="stylesheet">
|
|
<link rel="icon" type="image/png" href="favicon.png">
|
|
<link rel="stylesheet" href="projects/style.css">
|
|
<style>
|
|
:root{--music-bg:#0a0a0f;}
|
|
body{background:var(--music-bg);}
|
|
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(10,10,15,0.95);padding:14px 24px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,0.06);}
|
|
.nav-logo{font-family:var(--font-pixel);font-size:10px;color:var(--text);text-decoration:none;display:flex;align-items:center;gap:8px;}
|
|
.nav-logo .logo-dot{width:10px;height:10px;background:var(--accent);display:inline-block;}
|
|
.nav-links{display:flex;gap:18px;}
|
|
.nav-links a{font-family:var(--font-mono);font-size:11px;color:var(--muted);text-decoration:none;text-transform:uppercase;letter-spacing:.04em;}
|
|
.nav-links a:hover{color:var(--accent);}
|
|
.scroll-content{position:relative;z-index:1;padding-top:60px;}
|
|
|
|
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 5vw;position:relative;overflow:hidden;}
|
|
.hero h1{font-family:var(--font-pixel);font-size:clamp(24px,5vw,48px);color:var(--text);text-shadow:4px 4px 0 var(--accent);z-index:2;line-height:1.3;}
|
|
.hero .sub{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-top:12px;z-index:2;max-width:500px;}
|
|
|
|
.band{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 5vw;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,0.04);}
|
|
.band-header{text-align:center;margin-bottom:40px;z-index:2;}
|
|
.band-header .tag{font-family:var(--font-pixel);font-size:10px;color:var(--accent);letter-spacing:.12em;text-transform:uppercase;}
|
|
.band-header h2{font-family:var(--font-pixel);font-size:clamp(20px,4vw,40px);color:var(--text);margin-top:6px;text-transform:uppercase;}
|
|
.band-header p{font-family:var(--font-mono);font-size:12px;color:#999;max-width:500px;margin:10px auto 0;line-height:1.7;}
|
|
.band-content{position:relative;z-index:2;width:100%;max-width:800px;}
|
|
|
|
.band-card{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;}
|
|
@media(max-width:700px){.band-card{grid-template-columns:1fr;}}
|
|
.band-card .art{aspect-ratio:1;background:rgba(255,255,255,0.03);border:2px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;font-size:clamp(60px,15vw,120px);}
|
|
.band-card .info h3{font-family:var(--font-pixel);font-size:10px;color:var(--tape);text-transform:uppercase;margin-bottom:10px;}
|
|
.band-card .info .album{font-family:var(--font-pixel);font-size:8px;color:var(--accent);margin-bottom:4px;text-transform:uppercase;}
|
|
.band-card .info .song{font-family:var(--font-mono);font-size:12px;color:#bbb;line-height:1.8;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.04);}
|
|
.band-card .info .song:last-child{border:none;}
|
|
|
|
.spotify-wrap{margin-top:40px;text-align:center;}
|
|
.spotify-wrap iframe{border-radius:12px;max-width:100%;}
|
|
|
|
.section-title{font-family:var(--font-pixel);font-size:14px;color:var(--accent);text-align:center;margin:60px 0 24px;text-transform:uppercase;letter-spacing:.1em;}
|
|
|
|
.qoute{font-family:var(--font-mono);font-size:clamp(18px,4vw,36px);color:rgba(255,255,255,0.06);text-align:center;padding:40px;font-weight:700;letter-spacing:-.02em;}
|
|
.nonsense-wrap{text-align:center;margin:0 0 40px;}
|
|
.nonsense-link{display:inline-block;font-family:var(--font-mono);font-size:10px;color:var(--muted);text-decoration:none;padding:8px 14px;border:1px solid rgba(255,255,255,0.12);transition:all .3s;text-transform:uppercase;letter-spacing:.08em;}
|
|
.nonsense-link:hover{color:var(--accent);border-color:var(--accent);background:rgba(255,61,154,0.06);transform:translateY(-2px);}
|
|
|
|
footer{text-align:center;padding:40px 5vw;border-top:1px solid rgba(255,255,255,0.04);}
|
|
footer .ft{font-family:var(--font-mono);font-size:10px;color:var(--muted);line-height:1.8;}
|
|
|
|
.vinyl{position:absolute;width:200px;height:200px;border-radius:50%;border:2px solid rgba(255,61,154,0.06);background:rgba(255,61,154,0.02);animation:spinVinyl 8s linear infinite;pointer-events:none;z-index:0;}
|
|
.vinyl:nth-child(1){top:-40px;right:-40px;width:280px;height:280px;}
|
|
.vinyl:nth-child(2){bottom:-60px;left:-60px;width:240px;height:240px;animation-duration:12s;}
|
|
@keyframes spinVinyl{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
|
|
|
|
body.clean{--bg:#18181e;--text:#e4e0eb;--muted:#7b7890;--accent:#b8a9ff;}
|
|
body.clean::before,body.clean::after{display:none!important;}
|
|
body.clean nav{background:rgba(34,32,42,0.9);backdrop-filter:blur(8px);border-color:#333045;}
|
|
body.clean .nav-logo{font-size:13px;font-weight:600;font-family:'Inter',sans-serif;}
|
|
body.clean .nav-links a{font-family:'Inter',sans-serif;font-size:13px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted);}
|
|
body.clean .nav-links a:hover{color:var(--text);}
|
|
body.clean .scroll-content{padding-top:56px;}
|
|
body.clean .hero{min-height:auto;padding:80px 24px;}
|
|
body.clean .hero h1{font-family:'Inter',sans-serif;font-weight:700;font-size:clamp(28px,5vw,42px);color:var(--text);text-shadow:none;}
|
|
body.clean .hero .sub{font-family:'Inter',sans-serif;font-size:14px;color:var(--muted);}
|
|
body.clean .band{min-height:auto;padding:60px 24px;border-color:#333045;}
|
|
body.clean .band-header .tag{font-family:'Inter',sans-serif;font-size:10px;font-weight:600;letter-spacing:0.04em;color:var(--accent);}
|
|
body.clean .band-header h2{font-family:'Inter',sans-serif;font-weight:600;font-size:clamp(20px,3.5vw,30px);color:var(--text);text-transform:none;}
|
|
body.clean .band-header p{font-family:'Inter',sans-serif;color:var(--muted);}
|
|
body.clean .band-card .art{background:var(--bg);border-color:#333045;}
|
|
body.clean .band-card .info h3{font-family:'Inter',sans-serif;font-size:11px;font-weight:600;color:var(--muted);text-transform:none;}
|
|
body.clean .band-card .info .album{font-family:'Inter',sans-serif;font-size:10px;font-weight:600;color:var(--accent);text-transform:none;}
|
|
body.clean .band-card .info .song{font-family:'Inter',sans-serif;font-size:13px;color:var(--muted);border-color:#333045;font-weight:500;}
|
|
body.clean .section-title{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:0.03em;color:var(--text);text-transform:none;}
|
|
body.clean .qoute{font-family:'Inter',sans-serif;color:var(--muted);font-weight:600;padding:24px;font-size:clamp(14px,2.5vw,22px);}
|
|
body.clean footer{border-color:#333045;padding:24px;}
|
|
body.clean footer .ft{font-family:'Inter',sans-serif;font-size:11px;color:var(--muted);}
|
|
body.clean .vinyl{display:none;}
|
|
body.clean .spotify-wrap iframe{border-radius:8px;}
|
|
body.clean .nonsense-link{font-family:'Inter',sans-serif;font-size:13px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted);padding:6px 12px;border:1px solid #333045;border-radius:8px;}
|
|
body.clean .nonsense-link:hover{color:var(--text);border-color:var(--accent);background:rgba(184,169,255,0.08);transform:none;}
|
|
/* ============ MAXIMALIST (music-specific) ============ */
|
|
body.maximalist nav{background:var(--bg);backdrop-filter:none;border-bottom:6px solid var(--black);padding:14px 24px;}
|
|
body.maximalist .scroll-content{padding-top:56px;}
|
|
body.maximalist .hero{min-height:auto;padding:90px 24px 60px;background:var(--tape)!important;}
|
|
body.maximalist .hero h1{font-family:var(--shout);font-size:clamp(30px,6vw,64px);color:var(--black);text-shadow:none;text-transform:uppercase;line-height:.95;}
|
|
body.maximalist .hero h1::after{content:'';display:block;width:140px;height:16px;background:var(--pink);margin:14px auto 0;transform:rotate(-2deg);}
|
|
body.maximalist .hero .sub{font-family:var(--font-mono);font-weight:700;font-size:14px;color:var(--black);margin-top:16px;}
|
|
body.maximalist .band{min-height:auto;padding:70px 5vw;border:none;}
|
|
body.maximalist .band:nth-child(odd){background:var(--bg);}
|
|
body.maximalist .band:nth-child(even){background:var(--black);}
|
|
body.maximalist .band-header .tag{font-family:var(--font-pixel);font-size:13px;color:var(--tape);letter-spacing:2px;}
|
|
body.maximalist .band-header h2{font-family:var(--shout);font-size:clamp(24px,5vw,48px);color:var(--white);text-transform:uppercase;text-shadow:none;letter-spacing:0;}
|
|
body.maximalist .band-header h2::after{content:'';display:block;width:90px;height:12px;background:var(--pink);margin:12px auto 0;transform:rotate(-2deg);}
|
|
body.maximalist .band-header p{font-family:var(--font-mono);font-size:14px;color:var(--muted);line-height:1.7;}
|
|
body.maximalist .band-card .art{border:5px solid var(--black);border-radius:0;background:var(--white);box-shadow:10px 10px 0 var(--pink);}
|
|
body.maximalist #ratm .band-card .art{box-shadow:10px 10px 0 var(--red);}
|
|
body.maximalist .band-card .art::after{content:'ON REPEAT';font-family:var(--font-pixel);font-size:11px;color:var(--black);background:var(--tape);padding:4px 10px;border:2px solid var(--black);transform:rotate(-3deg);}
|
|
body.maximalist .band-card .info h3{font-family:var(--font-pixel);font-size:12px;color:var(--tape);text-transform:uppercase;letter-spacing:2px;}
|
|
body.maximalist .band-card .info .album{font-family:var(--font-pixel);font-size:10px;color:var(--pink);text-transform:uppercase;letter-spacing:2px;}
|
|
body.maximalist #ratm .band-card .info .album{color:var(--red);}
|
|
body.maximalist .band-card .info .song{font-family:var(--font-mono);font-weight:700;font-size:13px;color:var(--white);line-height:1.8;border-color:rgba(255,255,255,0.15);}
|
|
body.maximalist .section-title{font-family:var(--shout);font-size:16px;letter-spacing:3px;color:var(--tape);text-transform:uppercase;}
|
|
body.maximalist .qoute{font-family:var(--shout);font-size:clamp(22px,5vw,44px);color:var(--white);text-transform:uppercase;letter-spacing:0;padding:50px 24px;}
|
|
body.maximalist footer{border-color:var(--white);padding:40px 24px;}
|
|
body.maximalist footer .ft{font-family:var(--font-pixel);font-size:12px;color:var(--muted);letter-spacing:1px;}
|
|
body.maximalist .vinyl{display:none;}
|
|
body.maximalist .spotify-wrap iframe{border-radius:0;border:5px solid var(--white);box-shadow:8px 8px 0 var(--blue);}
|
|
body.maximalist .nonsense-link{font-family:var(--font-pixel);font-size:16px;letter-spacing:1px;text-transform:uppercase;color:var(--black);background:var(--tape);border:4px solid var(--black);border-radius:0;padding:12px 22px;box-shadow:6px 6px 0 var(--black);transform:rotate(-1deg);}
|
|
body.maximalist .nonsense-link:hover{transform:translate(-3px,-3px) rotate(0)!important;box-shadow:10px 10px 0 var(--pink);background:var(--blue);color:var(--black);}
|
|
|
|
/* ============ SYNTHWAVE (music-specific) ============ */
|
|
body.synthwave .hero h1{font-family:var(--shout);font-size:clamp(30px,5vw,56px);text-shadow:0 0 20px rgba(255,46,151,0.5),0 0 60px rgba(0,229,255,0.2);animation:none;line-height:1.1;}
|
|
body.synthwave .hero .sub{color:var(--muted);}
|
|
body.synthwave .band-header .tag{color:var(--blue);}
|
|
body.synthwave .band-header h2{font-family:var(--shout);font-size:clamp(22px,4vw,40px);text-shadow:0 0 18px rgba(255,46,151,0.4);}
|
|
body.synthwave .band-header p{color:var(--muted);}
|
|
body.synthwave .band-card .art{border-color:var(--accent);background:rgba(255,46,151,0.05);}
|
|
body.synthwave .band-card .info h3{color:var(--accent);}
|
|
body.synthwave .band-card .info .album{color:var(--blue);}
|
|
body.synthwave .band-card .info .song{color:var(--muted);border-color:rgba(0,229,255,0.15);}
|
|
body.synthwave .section-title{color:var(--blue);text-shadow:0 0 12px rgba(0,229,255,0.4);}
|
|
body.synthwave .qoute{color:var(--muted);opacity:.4;}
|
|
body.synthwave .vinyl{border-color:rgba(255,46,151,0.15);background:rgba(255,46,151,0.04);}
|
|
body.synthwave .nonsense-link{border-color:var(--accent);color:var(--muted);}
|
|
body.synthwave .nonsense-link:hover{background:rgba(255,46,151,0.12);box-shadow:0 0 18px rgba(255,46,151,0.3);color:var(--text);}
|
|
body.synthwave .spotify-wrap iframe{border-radius:8px;box-shadow:0 0 30px rgba(0,229,255,0.12);}
|
|
body.synthwave footer .ft{color:var(--muted);}
|
|
|
|
/* ============ PHOSPHOR (music-specific) ============ */
|
|
body.phosphor .hero h1{font-family:var(--shout);font-size:clamp(28px,5vw,52px);text-shadow:0 0 8px var(--text);animation:none;line-height:1.1;}
|
|
body.phosphor .band-header h2{font-family:var(--shout);font-size:clamp(20px,4vw,36px);text-shadow:0 0 6px var(--text);}
|
|
body.phosphor .band-card .art{border-color:rgba(57,255,108,0.35);}
|
|
body.phosphor .band-card .info .song{color:var(--muted);border-color:rgba(57,255,108,0.15);}
|
|
body.phosphor .vinyl{display:none;}
|
|
body.phosphor .qoute{color:var(--muted);opacity:.5;}
|
|
body.phosphor .nonsense-link{border-color:var(--accent);color:var(--accent);}
|
|
body.phosphor .nonsense-link:hover{background:rgba(57,255,108,0.1);color:var(--text);}
|
|
body.phosphor .spotify-wrap iframe{box-shadow:0 0 20px rgba(57,255,108,0.15);}
|
|
body.phosphor footer .ft{color:var(--muted);}
|
|
|
|
/* ============ CHROME (music-specific) ============ */
|
|
body.chrome .hero h1{font-family:var(--shout);font-size:clamp(32px,6vw,60px);text-shadow:8px 8px 0 rgba(255,255,255,0.15);animation:none;line-height:1.1;}
|
|
body.chrome .band-header h2{font-family:var(--shout);font-size:clamp(24px,4vw,44px);text-shadow:4px 4px 0 rgba(255,255,255,0.15);}
|
|
body.chrome .band-header p{color:var(--muted);}
|
|
body.chrome .band-card .art{border-color:var(--text);background:var(--bg);}
|
|
body.chrome .band-card .info h3{color:var(--text);}
|
|
body.chrome .band-card .info .album{color:var(--muted);}
|
|
body.chrome .band-card .info .song{color:var(--muted);border-color:rgba(255,255,255,0.12);}
|
|
body.chrome .vinyl{display:none;}
|
|
body.chrome .qoute{color:var(--muted);opacity:.4;}
|
|
body.chrome .nonsense-link{border-color:var(--text);color:var(--text);}
|
|
body.chrome .nonsense-link:hover{background:var(--text);color:var(--bg);transform:translateY(-2px);}
|
|
body.chrome .spotify-wrap iframe{border-radius:0;border:2px solid var(--text);}
|
|
body.chrome footer .ft{color:var(--muted);}
|
|
|
|
/* ============ PAPER (music-specific) ============ */
|
|
body.paper .hero h1{font-family:var(--shout);font-size:clamp(30px,5vw,54px);color:var(--text);text-shadow:none;animation:none;line-height:1.1;}
|
|
body.paper .hero .sub{color:var(--muted);}
|
|
body.paper .band-header .tag{color:var(--accent);}
|
|
body.paper .band-header h2{font-family:var(--shout);font-size:clamp(24px,4vw,40px);color:var(--text);text-shadow:none;}
|
|
body.paper .band-header p{color:var(--muted);}
|
|
body.paper .band-card .art{border:1px solid #d9d2c2;background:#fff;border-radius:14px 10px 16px 11px/11px 16px 10px 14px;box-shadow:2px 3px 0 rgba(43,38,32,0.06),5px 8px 18px rgba(43,38,32,0.07);transform:rotate(-.5deg);}
|
|
body.paper .band-card .info h3{color:var(--muted);}
|
|
body.paper .band-card .info .album{color:var(--accent);}
|
|
body.paper .band-card .info .song{color:var(--muted);border-color:#e8e2d3;}
|
|
body.paper .section-title{color:var(--text);}
|
|
body.paper .qoute{color:var(--muted);opacity:.7;}
|
|
body.paper .vinyl{display:none;}
|
|
body.paper .nonsense-link{border:1px solid #d9d2c2;color:var(--muted);border-radius:8px 5px 9px 6px/6px 9px 5px 8px;box-shadow:2px 2px 0 rgba(43,38,32,0.05);}
|
|
body.paper .nonsense-link:hover{border-color:var(--accent);color:var(--accent);background:#fff;transform:translateY(-2px) rotate(-1deg);}
|
|
body.paper .spotify-wrap iframe{border:1px solid #d9d2c2;border-radius:12px 8px 14px 9px/9px 14px 8px 12px;box-shadow:2px 3px 0 rgba(43,38,32,0.06);}
|
|
body.paper footer{border-color:#d9d2c2;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="cursor-dot" id="cursorDot"></div>
|
|
<div class="cursor-ring" id="cursorRing"></div>
|
|
<div class="progress-bar" id="progressBar"></div>
|
|
<button class="theme-toggle" id="themeToggle" aria-label="Toggle theme"></button>
|
|
<div class="shortcut-modal" id="shortcutModal">
|
|
<div class="shortcut-card">
|
|
<h3>Keyboard Shortcuts</h3>
|
|
<div class="shortcut-row"><span>Go Home</span><kbd>H</kbd></div>
|
|
<div class="shortcut-row"><span>Go to GitHub</span><kbd>G</kbd></div>
|
|
<div class="shortcut-row"><span>Toggle theme</span><kbd>T</kbd></div>
|
|
<div class="shortcut-row"><span>Show shortcuts</span><kbd>?</kbd></div>
|
|
<div class="close-hint">Press Esc or ? to close</div>
|
|
</div>
|
|
</div>
|
|
<div class="flash" id="flash"></div>
|
|
<div class="toast-stack" id="toastStack"></div>
|
|
<nav class="mobile-nav">
|
|
<a href="index.html">Home</a>
|
|
<a href="projects/fedl.html">FEDL</a>
|
|
<a href="projects/omniemu.html">OmniEmu</a>
|
|
<a href="projects/command-move.html">CommandMove</a>
|
|
<a href="https://github.com/mileswolfallen2" target="_blank">GitHub</a>
|
|
</nav>
|
|
|
|
<nav>
|
|
<a href="index.html" class="nav-logo"><span class="logo-dot"></span> milesallen</a>
|
|
<div class="nav-links">
|
|
<a href="index.html#about">About</a>
|
|
<a href="index.html#skills">Skills</a>
|
|
<a href="index.html#projects">Projects</a>
|
|
<a href="index.html#contact">Contact</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="scroll-content">
|
|
<section class="hero" id="hero">
|
|
<div class="vinyl"></div>
|
|
<div class="vinyl"></div>
|
|
<h1>WHAT I LISTEN TO</h1>
|
|
<p class="sub">Vocaloid · Rage Against the Machine</p>
|
|
<div style="margin-top:40px;font-size:60px;opacity:.3;">🎧</div>
|
|
</section>
|
|
|
|
<section class="band" id="vocaloid">
|
|
<div class="band-header">
|
|
<div class="tag">▸ 01</div>
|
|
<h2>Vocaloid</h2>
|
|
<p>Hatsune Miku, Kasane Teto, and a generation of producers making vocal synthesis sound like the future. This is what's been on repeat — the Vocaloid 2026 playlist.</p>
|
|
</div>
|
|
<div class="band-content">
|
|
<div class="band-card">
|
|
<div class="art">🎧</div>
|
|
<div class="info">
|
|
<h3>On Heavy Rotation</h3>
|
|
<div class="album">▸ Jamie Paige</div>
|
|
<div class="song">Machine Love</div>
|
|
<div class="song">Birdbrain (w/ OK Glass)</div>
|
|
<div class="song">When Spring Comes</div>
|
|
<div class="song">Cadmium Colors</div>
|
|
<div class="song">People Posture Play Pretend</div>
|
|
<div class="song">Encore</div>
|
|
<div class="song">I Wish That I Could Fall</div>
|
|
<div class="song">Strawberry</div>
|
|
<div class="song">Clouddrop</div>
|
|
<div class="song">ROT FOR CLOUT (w/ Visualeyes)</div>
|
|
<div class="song">Dyad (w/ unit.0)</div>
|
|
<div class="song">Manifesto</div>
|
|
<div class="album" style="margin-top:10px;">▸ FLAVOR FOLEY</div>
|
|
<div class="song">Spoken For</div>
|
|
<div class="song">weathergirl</div>
|
|
<div class="song">Water the Roses</div>
|
|
<div class="song">BUTCHER VANITY</div>
|
|
<div class="song">rawdog</div>
|
|
<div class="song">炜WARD ROMANCE</div>
|
|
<div class="song">Human</div>
|
|
<div class="song">Ego Renegade Boy</div>
|
|
<div class="album" style="margin-top:10px;">▸ VocaloKAT</div>
|
|
<div class="song">Left Behind Generation</div>
|
|
<div class="song">Pull the Trigger</div>
|
|
<div class="song">Affection Addiction (w/ Aku P)</div>
|
|
<div class="song">Lucid Dreamscape</div>
|
|
<div class="album" style="margin-top:10px;">▸ EROMA</div>
|
|
<div class="song">POTETO CHIP</div>
|
|
<div class="song">INSOMNIA</div>
|
|
<div class="song">BURNOUT</div>
|
|
<div class="song">Life kinda sucks</div>
|
|
<div class="song">NEURODIVERGENCE</div>
|
|
<div class="album" style="margin-top:10px;">▸ AnythingBecomeMoe</div>
|
|
<div class="song">ヤラララ</div>
|
|
<div class="song">次元通信</div>
|
|
<div class="song">PingPong TIKITAKA</div>
|
|
<div class="album" style="margin-top:10px;">▸ TRAP CHICK</div>
|
|
<div class="song">Approve Please, Genie! (w/ 重音テト, 音街ウナ)</div>
|
|
<div class="song">Execution Clap (w/ 重音テト)</div>
|
|
<div class="album" style="margin-top:10px;">▸ rusino</div>
|
|
<div class="song">Looping the Rooms (w/ Hatsune Miku)</div>
|
|
<div class="song">Debug Drug</div>
|
|
<div class="song">Lambent Aria (w/ Hatsune Miku)</div>
|
|
<div class="album" style="margin-top:10px;">▸ Singles & Standouts</div>
|
|
<div class="song">LEMON MELON COOKIETAK — Hatsune Miku</div>
|
|
<div class="song">INTERNET YAMERO — NEEDY GIRL OVERDOSE, KOTOKO, Aiobahn</div>
|
|
<div class="song">mochimochi — TAK</div>
|
|
<div class="song">Medicine — Sasuke Haraguchi</div>
|
|
<div class="song">Tetoris — 柊マグネタイト</div>
|
|
<div class="song">Lost Umbrella — INABAKUMORI</div>
|
|
<div class="song">Young Girl A — marchie</div>
|
|
<div class="song">モニタリング — DECO*27</div>
|
|
<div class="song">Liar Macaron — 暴飲暴食P (w/ Kasane Teto)</div>
|
|
<div class="song">numb numb — TAK (w/ Hatsune Miku, Kasane Teto)</div>
|
|
<div class="song">あなぐらぐらし — Kikuo</div>
|
|
<div class="song">Konton Boogie — jon-YAKITORY</div>
|
|
<div class="song">Rolling Girl — KimaroArt (w/ Kasane Teto)</div>
|
|
<div class="song">CUTE DEPRESSED — Dyan Dxddy</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="band" id="ratm">
|
|
<div class="band-header">
|
|
<div class="tag">▸ 02</div>
|
|
<h2>Rage Against the Machine</h2>
|
|
<p>Political fury meets funk metal. Zack de la Rocha's vocals, Tom Morello's unearthly guitar, Tim Commerford's bass, Brad Wilk's drums. Every song is a revolution.</p>
|
|
</div>
|
|
<div class="band-content">
|
|
<div class="band-card">
|
|
<div class="art">🎸</div>
|
|
<div class="info">
|
|
<h3>Essential Songs</h3>
|
|
<div class="album">▸ Rage Against the Machine (1992)</div>
|
|
<div class="song">Killing in the Name</div>
|
|
<div class="song">Bombtrack</div>
|
|
<div class="song">Wake Up</div>
|
|
<div class="song">Freedom</div>
|
|
<div class="album" style="margin-top:10px;">▸ Evil Empire (1996)</div>
|
|
<div class="song">Bulls on Parade</div>
|
|
<div class="song">People of the Sun</div>
|
|
<div class="song">Down Rodeo</div>
|
|
<div class="album" style="margin-top:10px;">▸ The Battle of Los Angeles (1999)</div>
|
|
<div class="song">Guerrilla Radio</div>
|
|
<div class="song">Sleep Now in the Fire</div>
|
|
<div class="song">Testify</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="section-title">▸ The Playlist ◂</div>
|
|
|
|
<div class="spotify-wrap">
|
|
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/56aypKEhG6rrsYOvIQzHei?utm_source=generator&theme=0" width="90%" height="452" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
|
|
</div>
|
|
|
|
<div class="qoute">"I go from Rage Against the Machine to Hatsune Miku in 0.3 seconds"</div>
|
|
<div class="nonsense-wrap"><a href="quotes.html" class="nonsense-link">more nonsense →</a></div>
|
|
|
|
<footer>
|
|
<div class="ft">Turn it up · Miles · 2026</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="projects/script.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
|
|
<script>
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
gsap.from('.hero h1', { y: 40, opacity: 0, duration: 1, ease: 'power3.out' });
|
|
gsap.from('.hero .sub', { y: 20, opacity: 0, duration: 0.8, delay: 0.3, ease: 'power3.out' });
|
|
gsap.from('.hero div:last-child', { scale: 0, opacity: 0, duration: 0.6, delay: 0.8, ease: 'back.out' });
|
|
gsap.from('nav', { y: -20, opacity: 0, duration: 0.6, ease: 'power2.out' });
|
|
|
|
document.querySelectorAll('.band').forEach(band => {
|
|
const h2 = band.querySelector('h2');
|
|
const card = band.querySelector('.band-card');
|
|
if(h2) gsap.from(h2, { scrollTrigger: { trigger: band, start: 'top 80%' }, y: 30, opacity: 0, duration: 0.8, ease: 'power3.out' });
|
|
if(card) gsap.from(card, { scrollTrigger: { trigger: band, start: 'top 75%' }, y: 40, opacity: 0, duration: 0.8, ease: 'power3.out' });
|
|
});
|
|
|
|
gsap.from('.spotify-wrap', { scrollTrigger: { trigger: '.spotify-wrap', start: 'top 85%' }, y: 30, opacity: 0, duration: 0.8, ease: 'power3.out' });
|
|
gsap.from('.qoute', { scrollTrigger: { trigger: '.qoute', start: 'top 90%' }, scale: 0.8, opacity: 0, duration: 1, ease: 'power2.out' });
|
|
gsap.from('footer', { scrollTrigger: { trigger: 'footer', start: 'top 95%' }, opacity: 0, duration: 0.8 });
|
|
|
|
window.addEventListener('keydown', function(e){
|
|
if(e.key === 'h' || e.key === 'H') window.location.href = 'index.html';
|
|
if(e.key === 'g' || e.key === 'G') window.location.href = 'https://github.com/mileswolfallen2';
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |