update

404.html

@@ -109,7 +109,8 @@
     <span style="color:var(--muted);margin:0 8px;">·</span>
     <a href="experiments.html" style="color:var(--accent);text-decoration:none;">Internet History</a>
   </div>
-  Built by Miles · 2026 · Powered by too much coffee and the Konami code
+  Built by Miles · 2026 · Powered by too much coffee and the Konami code<br>
+  <span style="font-size:9px;opacity:.4;">A B ← → ← → ↓ ↓ ↑ ↑</span>
 </footer>
 </body>
 </html>

about-me.html

@@ -147,6 +147,8 @@
 
     <blockquote>The best developers aren't the ones who know the most. They're the ones who never stop being curious.</blockquote>
 
+    <div style="font-family:var(--font-mono);font-size:9px;color:#333;text-align:right;margin-top:12px;letter-spacing:.15em;">ab←→←→↓↓↑↑</div>
+
     <a href="index.html#about" class="back-link">
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><polyline points="15 18 9 12 15 6"/></svg>
       Back to Portfolio

colophon.html

@@ -107,7 +107,7 @@
         <p>The color palette is minimal: black background, white text, hot pink accents, and yellow tape strips. No gradients, no complex color schemes. Just high contrast and aggressive accent colors.</p>
 
         <h2>Accessibility</h2>
-        <p>The custom cursor hides the default cursor site-wide, but the Konami code (↑ ↑ ↓ ↓ ← → ← → B A) reveals it. The site supports keyboard navigation via the <code>?</code> shortcut modal. Light mode reduces eye strain in bright environments.</p>
+        <p>The custom cursor hides the default cursor site-wide, but the Konami code (↑ ↑ ↓ ↓ ← → ← → B A) reveals it. The site supports keyboard navigation via the <code>?</code> shortcut modal. Light mode reduces eye strain in bright environments. Some secrets respond to the reverse.</p>
 
         <h2>Performance</h2>
         <p>No frameworks, no build step, no unnecessary dependencies. The site is static HTML with minimal JavaScript. Fonts are loaded with preconnect hints. GSAP is loaded from CDN with browser caching. Each page is under 50KB of HTML.</p>

experiments.html

@@ -816,7 +816,7 @@ footer .footer-text{font-family:var(--font-mono);font-size:10px;color:var(--mute
             <span class="ctrl">▶️</span>
             <span class="ctrl">⏭️</span>
           </div>
-          <div style="text-align:center;margin-top:12px;font-family:var(--font-mono);font-size:9px;color:var(--muted);">Netflix · Spotify · Hulu · HBO</div>
+          <div style="text-align:center;margin-top:12px;font-family:var(--font-mono);font-size:9px;color:var(--muted);">Netflix · Spotify<a href="music.html" style="color:inherit;text-decoration:none;transition:color .3s;" onmouseover="this.style.color='#FF3D9A'" onmouseout="this.style.color='inherit'" title="♪">♩</a> · Hulu · HBO</div>
         </div>
       </div>
     </section>
@@ -910,6 +910,9 @@ footer .footer-text{font-family:var(--font-mono);font-size:10px;color:var(--mute
           <strong>5.</strong> The browser renders HTML, CSS, JS into pixels.<br>
           All of this happens in <strong style="color:var(--accent);">under a second</strong>.
         </div>
+        <div class="flow-note" style="margin-top:6px;font-size:10px;color:#444;text-align:center;">
+          <em>secret protocol: AB←→←→↓↓↑↑</em>
+        </div>
       </div>
     </section>
 
@@ -940,6 +943,7 @@ footer .footer-text{font-family:var(--font-mono);font-size:10px;color:var(--mute
           <div class="inv-item">HTTPS/TLS</div>
           <div class="inv-item">WebAssembly</div>
           <div class="inv-item">AI / LLMs</div>
+          <div class="inv-item" style="color:var(--muted);opacity:.4;font-size:11px;letter-spacing:.2em;">A B ← → ← → ↓ ↓ ↑ ↑</div>
         </div>
       </div>
     </section>

index.html

@@ -526,12 +526,14 @@
     <span>* STILL DEBUGGING *</span>
     <span>* GEOMETRY DASH ADDICT *</span>
     <span>* USUALLY ONLINE *</span>
+    <span>* AB ← → ← → ↓ ↓ ↑ ↑ *</span>
     <span>* BUILDING EMULATORS *</span>
     <span>* SEND HELP *</span>
     <span>* 160 REPOS AND COUNTING *</span>
     <span>* STILL DEBUGGING *</span>
     <span>* GEOMETRY DASH ADDICT *</span>
     <span>* USUALLY ONLINE *</span>
+    <span>* AB ← → ← → ↓ ↓ ↑ ↑ *</span>
   </div>
 </div>
 

music.html

@@ -0,0 +1,253 @@
+<!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);}}
+  </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>

projects/script.js

@@ -53,6 +53,24 @@
     }
   })();
 
+  /* MUSIC PAGE EASTER EGG: A, B, ←, →, ←, →, ↓, ↓, ↑, ↑ */
+  (function(){
+    const seq = ['a','b','ArrowLeft','ArrowRight','ArrowLeft','ArrowRight','ArrowDown','ArrowDown','ArrowUp','ArrowUp'];
+    let pos = 0;
+    window.addEventListener('keydown', function(e){
+      const key = e.key.length === 1 ? e.key.toLowerCase() : e.key;
+      if (key === seq[pos]) {
+        pos++;
+        if (pos === seq.length) {
+          pos = 0;
+          window.location.href = '/music.html';
+        }
+      } else {
+        pos = (key === seq[0]) ? 1 : 0;
+      }
+    });
+  })();
+
   /* CURSOR */
   (function(){
     const dot = document.getElementById('cursorDot');
@@ -73,9 +91,10 @@
       ring.style.top = ry + 'px';
       requestAnimationFrame(loop);
     })();
-    document.querySelectorAll('a, button, .meta-chip, .tech-badge, .feature-card, .proj-card, .blog-card, .hl-cell, .term-btn, .chip').forEach(function(el){
+    document.addEventListener('mouseover', function(e){
-      el.addEventListener('mouseenter', function(){ dot.classList.add('hover'); ring.classList.add('hover'); });
+      const t = e.target.closest('a, button, input, textarea, select, [role="button"], .meta-chip, .tech-badge, .feature-card, .proj-card, .blog-card, .hl-cell, .term-btn, .chip');
-      el.addEventListener('mouseleave', function(){ dot.classList.remove('hover'); ring.classList.remove('hover'); });
+      dot.classList.toggle('hover', !!t);
+      ring.classList.toggle('hover', !!t);
     });
   })();
 
@@ -108,6 +127,22 @@
     window.toggleTheme = toggleTheme;
   })();
 
+  /* SECRET HINT: inject into shortcut modal */
+  (function(){
+    const modal = document.getElementById('shortcutModal');
+    if (!modal) return;
+    const card = modal.querySelector('.shortcut-card');
+    if (card && !card.querySelector('.secret-hint')) {
+      const hint = document.createElement('div');
+      hint.className = 'secret-hint';
+      hint.style.cssText = 'font-family:var(--font-mono);font-size:9px;color:#666;text-align:center;padding:8px 0 4px;border-top:1px solid rgba(255,255,255,0.06);margin-top:6px;letter-spacing:.06em;';
+      hint.textContent = '· · · AB \u2190 \u2192 \u2190 \u2192 \u2193 \u2193 \u2191 \u2191';
+      const close = card.querySelector('.close-hint');
+      if (close) card.insertBefore(hint, close);
+      else card.appendChild(hint);
+    }
+  })();
+
   /* KEYBOARD SHORTCUTS (shared) */
   (function(){
     const modal = document.getElementById('shortcutModal');

projects/style.css

@@ -31,14 +31,6 @@ body::after{
 a{color:inherit;text-decoration:none;}
 
 body.custom-cursor-enabled *{cursor:none !important;}
-body.custom-cursor-enabled a,
-body.custom-cursor-enabled button,
-body.custom-cursor-enabled input,
-body.custom-cursor-enabled textarea,
-body.custom-cursor-enabled select,
-body.custom-cursor-enabled [role="button"]{
-  cursor:auto !important;
-}
 .cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:99999;border-radius:50%;}
 .cursor-dot{
   width:6px;height:6px;background:var(--accent);

quotes.html

@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Quotes | Miles Wolf Allen</title>
+  <meta name="description" content="A collection of fun, absurd, and questionable quotes. Internet culture, programming jokes, and general nonsense.">
+  <link rel="canonical" href="https://milesallen.site/quotes.html">
+  <meta property="og:title" content="Quotes | Miles Wolf Allen">
+  <meta property="og:description" content="A collection of fun, absurd, and questionable quotes.">
+  <meta property="og:image" content="https://milesallen.site/og.png">
+  <meta property="og:url" content="https://milesallen.site/quotes.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>
+.q-hero{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 5vw;position:relative;overflow:hidden;}
+.q-hero h1{font-family:var(--font-pixel);font-size:clamp(32px,7vw,64px);color:var(--text);text-shadow:4px 4px 0 var(--accent),-2px -2px 0 var(--tape);line-height:1.2;animation:glitch 6s ease-in-out infinite;}
+.q-hero .sub{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-top:12px;max-width:400px;}
+@keyframes glitch{0%,90%,100%{text-shadow:4px 4px 0 var(--accent),-2px -2px 0 var(--tape);}92%{text-shadow:4px 4px 0 var(--red),-2px -2px 0 var(--accent);transform:translateX(2px);}94%{text-shadow:4px 4px 0 var(--accent),-2px -2px 0 var(--red);transform:translateX(-2px);}}
+
+.q-grid{max-width:900px;margin:0 auto;padding:20px 5vw 80px;display:grid;grid-template-columns:1fr 1fr;gap:20px;}
+@media(max-width:700px){.q-grid{grid-template-columns:1fr;}}
+
+.q-card{padding:24px;border:2px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.02);position:relative;transition:border-color .3s,background .3s;}
+.q-card:hover{border-color:var(--accent);background:rgba(255,61,154,0.04);}
+.q-card:nth-child(odd){transform:rotate(-.5deg);}
+.q-card:nth-child(even){transform:rotate(.5deg);margin-top:14px;}
+.q-card:nth-child(3n){transform:rotate(1deg);}
+.q-card:nth-child(4n){transform:rotate(-1.2deg);margin-top:-6px;}
+.q-card .qt{font-family:var(--font-mono);font-size:14px;color:#ddd;line-height:1.7;font-style:italic;}
+.q-card .qt::before{content:'\201C';color:var(--accent);font-size:24px;font-family:serif;position:absolute;top:8px;left:14px;opacity:.4;}
+.q-card .att{font-family:var(--font-pixel);font-size:8px;color:var(--muted);margin-top:12px;letter-spacing:.08em;text-transform:uppercase;}
+.q-card .att::before{content:'\2014 ';color:var(--tape);}
+
+.q-footer{text-align:center;padding:40px 5vw;border-top:1px solid rgba(255,255,255,0.04);}
+.q-footer .ft{font-family:var(--font-mono);font-size:10px;color:var(--muted);line-height:1.8;}
+.q-footer a{color:var(--accent);text-decoration:none;}
+  </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="q-hero">
+      <h1>QUOTES</h1>
+      <p class="sub">Things I find funny, accurate, or both</p>
+      <div style="margin-top:30px;font-size:40px;opacity:.15;">❝❞</div>
+    </section>
+
+    <div class="q-grid">
+      <div class="q-card"><div class="qt">I'm not arguing, I'm just explaining why I'm right.</div><div class="att">Unknown</div></div>
+      <div class="q-card"><div class="qt">My music taste is a chaotic neutral and I wouldn't have it any other way.</div><div class="att">Miles, probably</div></div>
+      <div class="q-card"><div class="qt">Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program.</div><div class="att">Linus Torvalds</div></div>
+      <div class="q-card"><div class="qt">It's not a bug, it's an undocumented feature.</div><div class="att">Every developer ever</div></div>
+      <div class="q-card"><div class="qt">There are only 10 types of people in the world: those who understand binary and those who don't.</div><div class="att">Classic</div></div>
+      <div class="q-card"><div class="qt">I put the 'pro' in procrastination.</div><div class="att">Unknown</div></div>
+      <div class="q-card"><div class="qt">The light at the end of the tunnel is probably a train.</div><div class="att">Optimistic realist</div></div>
+      <div class="q-card"><div class="qt">I have 99 problems and 92 of them are in this one file.</div><div class="att">A developer's prayer</div></div>
+      <div class="q-card"><div class="qt">Talk is cheap. Show me the code.</div><div class="att">Linus Torvalds</div></div>
+      <div class="q-card"><div class="qt">I'm not lazy, I'm on energy-saving mode.</div><div class="att">Mood</div></div>
+      <div class="q-card"><div class="qt">I'm not a complete idiot, some parts are missing.</div><div class="att">Unknown</div></div>
+      <div class="q-card"><div class="qt">Intelligence is the ability to avoid doing work, yet getting the work done.</div><div class="att">Linus Torvalds</div></div>
+      <div class="q-card"><div class="qt">If at first you don't succeed, call it version 1.0.</div><div class="att">Software wisdom</div></div>
+      <div class="q-card"><div class="qt">My brain has too many tabs open.</div><div class="att">Modern life</div></div>
+      <div class="q-card"><div class="qt">I don't always test my code, but when I do, I do it in production.</div><div class="att">The most interesting developer</div></div>
+      <div class="q-card"><div class="qt">The fact that there's a highway to hell but only a stairway to heaven says a lot about anticipated traffic volume.</div><div class="att">Linus Torvalds</div></div>
+      <div class="q-card"><div class="qt">I'm not saying I'm Batman, but have you ever seen me and Batman in the same room?</div><div class="att">Totally Batman</div></div>
+      <div class="q-card"><div class="qt">I'm sorry for what I said when it was Monday.</div><div class="att">Every week</div></div>
+      <div class="q-card"><div class="qt">There are two types of people: those who can extrapolate from incomplete data.</div><div class="att">Unknown</div></div>
+      <div class="q-card"><div class="qt">Vocaloid is just digital ventriloquism and I'm here for it.</div><div class="att">Me, to myself</div></div>
+      <div class="q-card"><div class="qt">I go from Rage Against the Machine to Hatsune Miku in 0.3 seconds and I'm not sorry.</div><div class="att">Music taste explained</div></div>
+      <div class="q-card"><div class="qt">My life feels like a test I didn't study for.</div><div class="att">Relatable content</div></div>
+      <div class="q-card"><div class="qt">I have a degree in 'I don't know what I'm doing'.</div><div class="att">Impostor syndrome</div></div>
+      <div class="q-card"><div class="qt">I'm not weird, I'm limited edition.</div><div class="att">Unique branding</div></div>
+      <div class="q-card"><div class="qt">The difference between stupidity and genius is that genius has its limits.</div><div class="att">Albert Einstein</div></div>
+      <div class="q-card"><div class="qt">I'm not saying you're the dumbest person in the world, but you better hope the dumbest person in the world doesn't die.</div><div class="att">Sen. John Kennedy</div></div>
+      <div class="q-card"><div class="qt">I will be a unity candidate and pledge to build at least one affordable house.</div><div class="att">Count Binface</div></div>
+      <div class="q-card"><div class="qt">Software is like sex: it's better when it's free.</div><div class="att">Linus Torvalds</div></div>
+    </div>
+
+    <footer class="q-footer">
+      <div class="ft">More nonsense added periodically · <a href="music.html">♪</a> · <a href="index.html">home</a></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('.q-hero h1', { y: 40, opacity: 0, duration: 1, ease: 'power3.out' });
+gsap.from('.q-hero .sub', { y: 20, opacity: 0, duration: 0.8, delay: 0.3, ease: 'power3.out' });
+gsap.from('nav', { y: -20, opacity: 0, duration: 0.6, ease: 'power2.out' });
+
+gsap.from('.q-card', {
+  scrollTrigger: { trigger: '.q-grid', start: 'top 85%' },
+  y: 30, opacity: 0, duration: 0.5, stagger: 0.08, ease: 'power3.out'
+});
+
+gsap.from('.q-footer', { scrollTrigger: { trigger: '.q-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>