miles/miles-web
1
0
Fork 0
mirror of https://github.com/mileswolfallen2/miles-web.git synced 2026-09-08 11:23:17 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
8ed399346f2248fd9ba46d81db337081bfc2c24e
miles-web/music.html
T
miles 12acce05b7 update
2026-07-29 15:37:44 -05:00

278 lines
16 KiB
HTML
Raw Blame History

<!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;}
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;}
</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 &amp; 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 style="text-align:center;margin:-20px 0 40px;font-family:var(--font-mono);font-size:9px;color:var(--muted);"><a href="quotes.html" style="color:var(--muted);text-decoration:none;transition:color .3s;" onmouseover="this.style.color='#FF3D9A'" onmouseout="this.style.color='inherit'">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>
Reference in New Issue View Git Blame Copy Permalink