Spaces:
Running
Running
Ctrl+K
-
1.52 kB
initial commit
-
218 Bytes
<!DOCTYPE html> <html lang="en" class="scroll-smooth"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Forensic Musicology: A Sonic Deconstruction (1968-1980)</title> <script src="https://cdn.tailwindcss.com"></script> <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=Roboto+Mono:wght@400;700&family=Inter:wght@400;600;700&display=swap" rel="stylesheet"> <style> /* Custom Styles for Cyberpunk Brutalist Aesthetic */ body { background-color: #0A0A0A; color: #E5E5E5; font-family: 'Inter', sans-serif; } .font-mono { font-family: 'Roboto Mono', monospace; } .font-sans { font-family: 'Inter', sans-serif; } .cyber-glitch { text-shadow: 0.05em 0 0 rgba(0, 255, 255, 0.75), -0.025em -0.05em 0 rgba(255, 0, 0, 0.75), 0.025em 0.05em 0 rgba(0, 255, 0, 0.75); animation: glitch 5s infinite linear alternate-reverse; } .cyber-glow { transition: all 0.3s ease; } .cyber-glow:hover { text-shadow: 0 0 8px rgba(0, 255, 255, 0.6); color: #00FFFF; } .cyber-border { border: 1px solid rgba(229, 231, 235, 0.2); transition: border-color 0.3s ease; } .cyber-border:hover { border-color: rgba(0, 255, 255, 0.5); } .content-section { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .content-section.is-visible { opacity: 1; transform: translateY(0); } .signal-path-arrow { font-family: 'Roboto Mono', monospace; color: #00FFFF; } .timeline::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); top: 0; bottom: 0; width: 2px; background-color: rgba(229, 231, 235, 0.2); } .timeline-item { position: relative; } .timeline-dot { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); width: 16px; height: 16px; background-color: #0A0A0A; border: 2px solid #00FFFF; border-radius: 50%; z-index: 10; } .table-header { background-color: rgba(229, 231, 235, 0.05); } @keyframes glitch { 0% { text-shadow: 0.05em 0 0 rgba(0,255,255,0.75), -0.05em -0.025em 0 rgba(255,0,0,0.75), -0.025em 0.05em 0 rgba(0,255,0,0.75); } 14% { text-shadow: 0.05em 0 0 rgba(0,255,255,0.75), -0.05em -0.025em 0 rgba(255,0,0,0.75), -0.025em 0.05em 0 rgba(0,255,0,0.75); } 15% { text-shadow: -0.05em -0.025em 0 rgba(0,255,255,0.75), 0.025em 0.025em 0 rgba(255,0,0,0.75), -0.05em -0.05em 0 rgba(0,255,0,0.75); } 49% { text-shadow: -0.05em -0.025em 0 rgba(0,255,255,0.75), 0.025em 0.025em 0 rgba(255,0,0,0.75), -0.05em -0.05em 0 rgba(0,255,0,0.75); } 50% { text-shadow: 0.025em 0.05em 0 rgba(0,255,255,0.75), 0.05em 0 0 rgba(255,0,0,0.75), 0 -0.05em 0 rgba(0,255,0,0.75); } 99% { text-shadow: 0.025em 0.05em 0 rgba(0,255,255,0.75), 0.05em 0 0 rgba(255,0,0,0.75), 0 -0.05em 0 rgba(0,255,0,0.75); } 100% { text-shadow: -0.025em 0 0 rgba(0,255,255,0.75), -0.025em -0.025em 0 rgba(255,0,0,0.75), -0.025em -0.05em 0 rgba(0,255,0,0.75); } } </style> </head> <body class="antialiased"> <!-- Header --> <header class="p-4 md:p-8 sticky top-0 z-50 bg-[#0A0A0A]/80 backdrop-blur-sm cyber-border border-b"> <div class="container mx-auto flex justify-between items-center"> <h1 class="font-mono text-lg md:text-xl font-bold tracking-widest uppercase cyber-glitch">F.M.A.</h1> <nav class="hidden md:flex space-x-6 font-mono text-sm"> <a href="#alchemists" class="cyber-glow">I. ALCHEMISTS</a> <a href="#cathedral" class="cyber-glow">II. CATHEDRAL</a> <a href="#language" class="cyber-glow">III. LANGUAGE</a> <a href="#anomalies" class="cyber-glow">IV. ANOMALIES</a> </nav> </div> </header> <main class="container mx-auto p-4 md:p-8"> <!-- Hero Section --> <section class="text-center my-16 md:my-24 content-section"> <h2 class="font-mono text-3xl md:text-5xl lg:text-6xl font-bold tracking-tighter uppercase">Sonic Deconstruction</h2> <p class="text-lg md:text-xl text-gray-400 mt-4 max-w-3xl mx-auto">A Forensic Analysis of Audio Engineering & Production // 1968-1980</p> </section> <!-- I. The Alchemists of Tone --> <section id="alchemists" class="my-24 md:my-32 content-section"> <h3 class="font-mono text-2xl md:text-3xl font-bold border-b border-cyan-400/50 pb-2 mb-8">I. The Alchemists of Tone</h3> <p class="text-gray-400 max-w-4xl mb-12">The era's sound was sculpted by instrumentalists who treated technology as an extension of their artistic will. They were sonic architects, pioneering new techniques and modifying their gear to forge the foundational tones of modern rock.</p> <div class="space-y-12"> <h4 class="font-mono text-xl font-semibold tracking-wide">Signal Chain Archaeology</h4> <!-- Tony Iommi --> <article class="cyber-border p-6 rounded-lg"> <h5 class="font-mono text-lg font-bold text-cyan-400">Tony Iommi // Architect of Heavy</h5> <p class="text-sm text-gray-400 mb-4">Injury-driven innovation: downtuned guitars and light strings required a treble booster to cut through, creating the first true high-gain metal tone.</p> <div class="flex flex-wrap items-center gap-4 text-center"> <div class="cyber-border p-3 rounded-md flex-grow">Gibson SG ('Monkey')</div> <div class="signal-path-arrow text-2xl">→</div> <div class="cyber-border p-3 rounded-md flex-grow">Dallas Rangemaster Treble Booster</div> <div class="signal-path-arrow text-2xl">→</div> <div class="cyber-border p-3 rounded-md flex-grow">Laney/Orange Amps</div> </div> </article> <!-- Jimmy Page --> <article class="cyber-border p-6 rounded-lg"> <h5 class="font-mono text-lg font-bold text-cyan-400">Jimmy Page // The Studio Auteur</h5> <p class="text-sm text-gray-400 mb-4">A master of layering and ambient miking. Famously used a Telecaster into a Supro amp for the 'Stairway' solo and pioneered direct-to-console distortion.</p> <div class="flex flex-wrap items-center gap-4 text-center"> <div class="cyber-border p-3 rounded-md flex-grow">Fender Telecaster / Gibson Les Paul</div> <div class="signal-path-arrow text-2xl">→</div> <div class="cyber-border p-3 rounded-md flex-grow">Maestro Echoplex EP-2 (Preamp Boost)</div> <div class="signal-path-arrow text-2xl">→</div> <div class="cyber-border p-3 rounded-md flex-grow">Marshall / Supro Amps</div> </div> </article> <!-- Ritchie Blackmore --> <article class="cyber-border p-6 rounded-lg"> <h5 class="font-mono text-lg font-bold text-cyan-400">Ritchie Blackmore // Stratocaster Fury</h5> <p class="text-sm text-gray-400 mb-4">Pursued controlled violence with scalloped fretboards and heavily modified Marshall Major heads, using a tape deck as a preamp for searing gain.</p> <div class="flex flex-wrap items-center gap-4 text-center"> <div class="cyber-border p-3 rounded-md flex-grow">Fender Stratocaster (Scalloped)</div> <div class="signal-path-arrow text-2xl">→</div> <div class="cyber-border p-3 rounded-md flex-grow">Aiwa Tape Deck (Preamp)</div> <div class="signal-path-arrow text-2xl">→</div> <div class="cyber-border p-3 rounded-md flex-grow">Modified Marshall Major 200W</div> </div> </article> <!-- Robert Fripp --> <article class="cyber-border p-6 rounded-lg"> <h5 class="font-mono text-lg font-bold text-cyan-400">Robert Fripp // The Avant-Garde Intellectual</h5> <p class="text-sm text-gray-400 mb-4">Pioneered "Frippertronics," a real-time tape-looping system using two Revox tape machines to build complex, evolving soundscapes. The amplifier was a clean platform (Hiwatt) for a sound created entirely by effects and technique.</p> <div class="flex flex-wrap items-center gap-4 text-center"> <div class="cyber-border p-3 rounded-md flex-grow">Gibson Les Paul Custom</div> <div class="signal-path-arrow text-2xl">→</div> <div class="cyber-border p-3 rounded-md flex-grow">EHX Big Muff / Fuzz</div> <div class="signal-path-arrow text-2xl">→</div> <div class="cyber-border p-3 rounded-md flex-grow">Hiwatt DR103 (For Clean Headroom)</div> <div class="signal-path-arrow text-2xl">→</div> <div class="cyber-border p-3 rounded-md flex-grow">Frippertronics Tape Loop System</div> </div> </article> </div> </section> <!-- II. The Cathedral of Sound --> <section id="cathedral" class="my-24 md:my-32 content-section"> <h3 class="font-mono text-2xl md:text-3xl font-bold border-b border-cyan-400/50 pb-2 mb-8">II. The Cathedral of Sound</h3> <p class="text-gray-400 max-w-4xl mb-12">The recording studio evolved from a documentary space into an instrument itself. The philosophies of producers and the unique sonic signatures of iconic hardware defined the sound of classic records.</p> <div class="overflow-x-auto"> <h4 class="font-mono text-xl font-semibold tracking-wide mb-6">Console Forensics: Neve vs. API vs. Trident vs. Helios</h4> <table class="w-full text-left border-collapse cyber-border"> <thead> <tr class="table-header font-mono uppercase text-sm"> <th class="p-4">Console</th> <th class="p-4">Sonic Signature</th> <th class="p-4">Key Technology</th> <th class="p-4">Defining Artists</th> </tr> </thead> <tbody> <tr class="border-t border-gray-200/20"> <td class="p-4 font-bold">Neve 80-Series</td> <td class="p-4">Huge, punchy, warm, "larger-than-life." The definitive British rock sound.</td> <td class="p-4 font-mono text-sm">Class-A, transformer-balanced (1073)</td> <td class="p-4">Pink Floyd, Queen, Nirvana</td> </tr> <tr class="border-t border-gray-200/20"> <td class="p-4 font-bold">API Consoles</td> <td class="p-4">Big, bold, punchy, clear. The definitive American rock sound.</td> <td class="p-4 font-mono text-sm">Discrete 2520 op-amp, Proportional Q EQ</td> <td class="p-4">Aerosmith, Heart, Funk & Soul records</td> </tr> <tr class="border-t border-gray-200/20"> <td class="p-4 font-bold">Trident A-Range</td> <td class="p-4">Smoother, creamier, and highly "musical." Famous for its colorful EQ.</td> <td class="p-4 font-mono text-sm">All-discrete, Inductor-based EQ</td> <td class="p-4">David Bowie, Queen, Elton John</td> </tr> <tr class="border-t border-gray-200/20"> <td class="p-4 font-bold">Helios Type 69</td> <td class="p-4">Open, slightly gritty, with a unique "woody" midrange. Less polished than its peers.</td> <td class="p-4 font-mono text-sm">Lustraphone transformer preamps, 3-band EQ</td> <td class="p-4">Led Zeppelin, The Who, Rolling Stones</td> </tr> </tbody> </table> </div> <div class="mt-16"> <h4 class="font-mono text-xl font-semibold tracking-wide mb-12 text-center">Studio Technology Evolution</h4> <div class="relative timeline max-w-2xl mx-auto"> <div class="timeline-item mb-12"> <div class="timeline-dot"></div> <div class="w-1/2 ml-auto pl-8"><div class="cyber-border p-4 rounded-lg"><h5 class="font-mono font-bold">1968-1970: Foundation</h5><p class="text-sm text-gray-400">8-track recording becomes standard. Transistor consoles and effects pedals emerge.</p></div></div> </div> <div class="timeline-item mb-12"> <div class="timeline-dot"></div> <div class="w-1/2 mr-auto pr-8 text-right"><div class="cyber-border p-4 rounded-lg"><h5 class="font-mono font-bold">1971-1974: Expansion</h5><p class="text-sm text-gray-400">16-track enables complexity. Minimoog makes synths portable. The project studio is born (e.g., Mike Oldfield's *Tubular Bells*).</p></div></div> </div> <div class="timeline-item mb-12"> <div class="timeline-dot"></div> <div class="w-1/2 ml-auto pl-8"><div class="cyber-border p-4 rounded-lg"><h5 class="font-mono font-bold">1975-1978: Sophistication</h5><p class="text-sm text-gray-400">24-track becomes standard. Digital effects (reverb, delay) are introduced. Giorgio Moroder's "I Feel Love" (1977) pioneers the synth-sequenced dance track.</p></div></div> </div> </div> </div> </section> <!-- III. The Language of an Era --> <section id="language" class="my-24 md:my-32 content-section"> <h3 class="font-mono text-2xl md:text-3xl font-bold border-b border-cyan-400/50 pb-2 mb-8">III. The Language of an Era</h3> <p class="text-gray-400 max-w-4xl mb-12">The sonic revolution was mirrored by a compositional one. Rock's musical vocabulary expanded beyond its blues roots to incorporate modal harmony, classical counterpoint, and complex rhythmic structures.</p> <div class="grid md:grid-cols-2 gap-8"> <article class="cyber-border p-6 rounded-lg"> <h4 class="font-mono text-lg font-bold">Mixolydian Mode</h4> <p class="text-sm text-gray-400 mb-4">Major scale with a flat 7th ($b7$). The sound of blues-rock and Southern rock. Bright and powerful with a bluesy edge.</p> <div class="font-mono text-cyan-400 p-4 bg-black/50 rounded-md">I - ii - iii° - IV - v - vi - $b$VII</div> <p class="text-xs mt-2 text-gray-500">Key Progression: I - $b$VII - IV</p> </article> <article class="cyber-border p-6 rounded-lg"> <h4 class="font-mono text-lg font-bold">Dorian Mode</h4> <p class="text-sm text-gray-400 mb-4">Natural minor with a raised 6th. The "cooler," sophisticated minor sound of hard rock and prog.</p> <div class="font-mono text-cyan-400 p-4 bg-black/50 rounded-md">i - ii - $b$III - IV - v - vi° - $b$VII</div> <p class="text-xs mt-2 text-gray-500">Key Progression: i - IV</p> </article> </div> </section> <!-- IV. Declassified Histories & Sonic Anomalies --> <section id="anomalies" class="my-24 md:my-32 content-section"> <h3 class="font-mono text-2xl md:text-3xl font-bold border-b border-cyan-400/50 pb-2 mb-8">IV. Declassified Histories & Sonic Anomalies</h3> <p class="text-gray-400 max-w-4xl mb-12">Beyond the established canon lie stories of radical divergence and iconoclastic production. These figures rejected mainstream techniques, pioneering sounds and philosophies that would prove deeply influential to post-punk, electronic music, and beyond.</p> <div class="space-y-12"> <!-- Conny Plank --> <article class="cyber-border p-6 rounded-lg"> <h5 class="font-mono text-lg font-bold text-cyan-400">Conny Plank // The Krautrock Anti-Producer</h5> <p class="text-sm text-gray-400 mb-4">A central figure in the German Krautrock scene, Plank's philosophy was a deliberate rejection of Anglo-American production norms. He treated the studio as a compositional tool for creating alien textures, favoring live, ambient drum sounds and radical tape manipulation over polished perfection. His work with Can, Neu!, and early Kraftwerk established a new sonic language free from blues lineage, directly influencing post-punk and electronic music.</p> </article> <!-- Giorgio Moroder --> <article class="cyber-border p-6 rounded-lg"> <h5 class="font-mono text-lg font-bold text-cyan-400">Giorgio Moroder // The Click Track Prophecy</h5> <p class="text-sm text-gray-400 mb-4">With Donna Summer's "I Feel Love" (1977), Moroder created a sound that was pure future shock. By syncing a Moog modular synthesizer's pulsing bassline to a click track—and nothing else—he severed dance music from its R&B and funk roots. It was the first major hit driven entirely by electronic rhythm, creating the foundational blueprint for synth-pop, techno, and all subsequent forms of electronic dance music. It was a sound built on metronomic precision, not human groove.</p> </article> </div> </section> </main> <footer class="text-center p-8 mt-16 border-t border-gray-200/20"> <p class="font-mono text-xs text-gray-500">ARTIFEX Labs // Forensic Musicology Division // Analysis Complete</p> </footer> <script> // JavaScript for scroll-triggered animations const sections = document.querySelectorAll('.content-section'); const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('is-visible'); } }); }, { threshold: 0.1 // Trigger when 10% of the element is visible }); sections.forEach(section => { observer.observe(section); }); </script> </body> </html> can you amake this cyberpunk brutalist galaaxy style, back and white, bodyfont Jura, boldy header all caps archivo black - Initial Deployment
-
45.8 kB
undefined - Follow Up Deployment
-
388 Bytes
initial commit