bansky section

index.html

@@ -602,6 +602,419 @@
             color: rgba(255, 255, 255, 0.5);
         }
 
+        /* Banksy Section */
+        .banksy {
+            padding: 0;
+            position: relative;
+            background: #1a1a1a;
+            overflow: hidden;
+            min-height: 100vh;
+        }
+
+        .banksy-wall {
+            position: absolute;
+            inset: 0;
+            background:
+                url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"),
+                linear-gradient(180deg, #2d2d2d 0%, #1a1a1a 50%, #0d0d0d 100%);
+            background-blend-mode: overlay;
+            opacity: 0.9;
+        }
+
+        .banksy-bricks {
+            position: absolute;
+            inset: 0;
+            background-image:
+                linear-gradient(to right, #333 1px, transparent 1px),
+                linear-gradient(to bottom, #333 1px, transparent 1px),
+                linear-gradient(to bottom, transparent 49%, #292929 49%, #292929 51%, transparent 51%);
+            background-size: 120px 40px, 120px 40px, 240px 80px;
+            background-position: 0 0, 0 0, 60px 0;
+            opacity: 0.3;
+        }
+
+        .banksy-content {
+            position: relative;
+            z-index: 1;
+            padding: 6rem 4rem;
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+
+        .banksy-header {
+            margin-bottom: 4rem;
+        }
+
+        .banksy-title {
+            font-family: 'Courier New', monospace;
+            font-size: clamp(3rem, 10vw, 8rem);
+            font-weight: 900;
+            color: white;
+            text-transform: uppercase;
+            letter-spacing: -0.05em;
+            line-height: 0.9;
+            position: relative;
+            display: inline-block;
+        }
+
+        .banksy-title::before {
+            content: '';
+            position: absolute;
+            bottom: 0.1em;
+            left: 0;
+            right: 0;
+            height: 0.15em;
+            background: #ff0000;
+            transform: skewX(-12deg);
+        }
+
+        .banksy-subtitle {
+            font-family: 'Courier New', monospace;
+            font-size: 1rem;
+            color: #888;
+            text-transform: uppercase;
+            letter-spacing: 0.3em;
+            margin-top: 1rem;
+        }
+
+        .stencil-container {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 3rem;
+            margin-bottom: 4rem;
+        }
+
+        .stencil-card {
+            background: transparent;
+            position: relative;
+        }
+
+        .stencil-card::before {
+            content: '';
+            position: absolute;
+            inset: -10px;
+            background: rgba(255,255,255,0.02);
+            border: 2px dashed rgba(255,255,255,0.1);
+            transform: rotate(-1deg);
+        }
+
+        .spray-text {
+            font-family: 'Arial Black', sans-serif;
+            font-size: 2rem;
+            font-weight: 900;
+            color: white;
+            text-transform: uppercase;
+            position: relative;
+            display: inline-block;
+            padding: 0.5rem 0;
+        }
+
+        .spray-text.red {
+            color: #ff0000;
+        }
+
+        .spray-text.yellow {
+            color: #ffcc00;
+        }
+
+        .spray-text::after {
+            content: '';
+            position: absolute;
+            bottom: -5px;
+            left: 0;
+            width: 100%;
+            height: 20px;
+            background: linear-gradient(180deg, currentColor 0%, transparent 100%);
+            opacity: 0.3;
+            filter: blur(3px);
+        }
+
+        .drip {
+            position: relative;
+        }
+
+        .drip::after {
+            content: '';
+            position: absolute;
+            bottom: -30px;
+            left: 20%;
+            width: 3px;
+            height: 30px;
+            background: linear-gradient(180deg, currentColor 0%, transparent 100%);
+            border-radius: 0 0 3px 3px;
+        }
+
+        .stencil-body {
+            font-family: 'Courier New', monospace;
+            font-size: 1rem;
+            color: #aaa;
+            line-height: 1.8;
+            margin-top: 1.5rem;
+        }
+
+        .stencil-body strong {
+            color: white;
+            font-weight: normal;
+            background: rgba(255,0,0,0.3);
+            padding: 0 0.25rem;
+        }
+
+        /* The rat illustration */
+        .banksy-rat {
+            position: absolute;
+            right: 5%;
+            top: 15%;
+            width: 200px;
+            height: auto;
+            opacity: 0.9;
+            filter: drop-shadow(0 0 20px rgba(0,0,0,0.5));
+            transform: scaleX(-1);
+        }
+
+        /* Graffiti equation */
+        .graffiti-equation {
+            background: rgba(0,0,0,0.5);
+            border-left: 4px solid #ff0000;
+            padding: 2rem 3rem;
+            margin: 3rem 0;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .graffiti-equation::before {
+            content: 'THE FORMULA THEY DON\'T WANT YOU TO KNOW';
+            position: absolute;
+            top: -0.5rem;
+            left: 2rem;
+            font-family: 'Courier New', monospace;
+            font-size: 0.7rem;
+            color: #ff0000;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            background: #1a1a1a;
+            padding: 0 0.5rem;
+        }
+
+        .graffiti-equation .eq {
+            font-family: 'Times New Roman', serif;
+            font-size: 2.5rem;
+            color: white;
+            letter-spacing: 0.05em;
+        }
+
+        .graffiti-equation .eq .highlight {
+            color: #ff0000;
+            position: relative;
+        }
+
+        .graffiti-equation .eq .highlight::after {
+            content: '';
+            position: absolute;
+            left: -5px;
+            right: -5px;
+            bottom: 0;
+            height: 3px;
+            background: #ff0000;
+        }
+
+        /* Manifesto style list */
+        .manifesto {
+            margin: 4rem 0;
+            padding: 0;
+            list-style: none;
+        }
+
+        .manifesto li {
+            font-family: 'Courier New', monospace;
+            font-size: 1.25rem;
+            color: white;
+            padding: 1rem 0;
+            border-bottom: 1px solid rgba(255,255,255,0.1);
+            position: relative;
+            padding-left: 3rem;
+        }
+
+        .manifesto li::before {
+            content: '✗';
+            position: absolute;
+            left: 0;
+            color: #ff0000;
+            font-size: 1.5rem;
+        }
+
+        .manifesto li.yes::before {
+            content: '✓';
+            color: #00ff00;
+        }
+
+        .manifesto li span {
+            color: #666;
+            font-size: 0.9rem;
+            display: block;
+            margin-top: 0.25rem;
+        }
+
+        /* Stencil SVG */
+        .stencil-svg {
+            width: 100%;
+            max-width: 600px;
+            margin: 2rem auto;
+            display: block;
+        }
+
+        /* Spray paint splatter */
+        .splatter {
+            position: absolute;
+            width: 150px;
+            height: 150px;
+            background: radial-gradient(circle at center, #ff0000 0%, transparent 70%);
+            opacity: 0.1;
+            filter: blur(20px);
+            pointer-events: none;
+        }
+
+        .splatter-1 { top: 10%; left: 5%; }
+        .splatter-2 { top: 60%; right: 10%; transform: scale(1.5); }
+        .splatter-3 { bottom: 20%; left: 30%; transform: scale(0.8); }
+
+        /* Quote graffiti */
+        .banksy-quote {
+            font-family: 'Arial Black', sans-serif;
+            font-size: clamp(1.5rem, 4vw, 2.5rem);
+            color: white;
+            text-align: center;
+            margin: 4rem 0;
+            padding: 3rem;
+            position: relative;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            line-height: 1.4;
+        }
+
+        .banksy-quote::before,
+        .banksy-quote::after {
+            content: '';
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 100px;
+            height: 2px;
+            background: #ff0000;
+        }
+
+        .banksy-quote::before { top: 0; }
+        .banksy-quote::after { bottom: 0; }
+
+        .banksy-quote .author {
+            display: block;
+            font-family: 'Courier New', monospace;
+            font-size: 0.875rem;
+            color: #666;
+            text-transform: none;
+            letter-spacing: 0.1em;
+            margin-top: 1.5rem;
+        }
+
+        /* The big comparison */
+        .versus {
+            display: grid;
+            grid-template-columns: 1fr auto 1fr;
+            gap: 2rem;
+            align-items: center;
+            margin: 4rem 0;
+        }
+
+        .versus-side {
+            text-align: center;
+            padding: 2rem;
+        }
+
+        .versus-side.old {
+            opacity: 0.5;
+            text-decoration: line-through;
+            text-decoration-color: #ff0000;
+            text-decoration-thickness: 3px;
+        }
+
+        .versus-side h4 {
+            font-family: 'Arial Black', sans-serif;
+            font-size: 1.5rem;
+            color: white;
+            text-transform: uppercase;
+            margin-bottom: 1rem;
+        }
+
+        .versus-side.old h4 {
+            color: #666;
+        }
+
+        .versus-side p {
+            font-family: 'Courier New', monospace;
+            font-size: 3rem;
+            color: #ff0000;
+            font-weight: bold;
+        }
+
+        .versus-side.new p {
+            color: #00ff00;
+        }
+
+        .versus-divider {
+            font-family: 'Arial Black', sans-serif;
+            font-size: 2rem;
+            color: white;
+            padding: 1rem;
+            background: #ff0000;
+            border-radius: 50%;
+            width: 60px;
+            height: 60px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        /* Exit through the gradient */
+        .banksy-footer {
+            text-align: center;
+            padding: 4rem 0 2rem;
+            border-top: 1px solid rgba(255,255,255,0.1);
+            margin-top: 4rem;
+        }
+
+        .banksy-footer p {
+            font-family: 'Courier New', monospace;
+            font-size: 0.8rem;
+            color: #444;
+            text-transform: uppercase;
+            letter-spacing: 0.2em;
+        }
+
+        @media (max-width: 768px) {
+            .stencil-container {
+                grid-template-columns: 1fr;
+            }
+
+            .versus {
+                grid-template-columns: 1fr;
+                gap: 1rem;
+            }
+
+            .versus-divider {
+                transform: rotate(90deg);
+            }
+
+            .banksy-content {
+                padding: 4rem 1.5rem;
+            }
+
+            .banksy-rat {
+                width: 100px;
+                top: 5%;
+                right: 2%;
+                opacity: 0.5;
+            }
+        }
+
         /* Focus Areas */
         .focus {
             padding: 10rem 4rem;
@@ -1479,6 +1892,147 @@
         </div>
     </section>
 
+    <!-- BANKSY SECTION - Breaking all the rules -->
+    <section class="banksy" id="banksy">
+        <div class="banksy-wall"></div>
+        <div class="banksy-bricks"></div>
+
+        <!-- Splatter effects -->
+        <div class="splatter splatter-1"></div>
+        <div class="splatter splatter-2"></div>
+        <div class="splatter splatter-3"></div>
+
+        <!-- The Rat SVG -->
+        <svg class="banksy-rat" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g fill="white">
+                <!-- Rat body stencil style -->
+                <ellipse cx="100" cy="120" rx="60" ry="35" fill="white"/>
+                <ellipse cx="55" cy="105" rx="25" ry="20" fill="white"/>
+                <circle cx="45" cy="98" r="4" fill="#1a1a1a"/>
+                <ellipse cx="38" cy="95" rx="8" ry="12" fill="white"/>
+                <ellipse cx="52" cy="88" rx="10" ry="15" fill="white"/>
+                <!-- Tail -->
+                <path d="M160 120 Q180 100 175 70 Q172 50 185 40" stroke="white" stroke-width="6" fill="none" stroke-linecap="round"/>
+                <!-- Legs -->
+                <rect x="70" y="145" width="8" height="20" rx="2" fill="white"/>
+                <rect x="95" y="148" width="8" height="22" rx="2" fill="white"/>
+                <rect x="120" y="146" width="8" height="20" rx="2" fill="white"/>
+                <!-- Holding spray can -->
+                <rect x="20" y="115" width="25" height="40" rx="4" fill="white"/>
+                <rect x="28" y="105" width="10" height="12" rx="2" fill="white"/>
+                <circle cx="32" cy="102" r="4" fill="white"/>
+                <!-- Spray coming out -->
+                <ellipse cx="32" cy="85" rx="8" ry="5" fill="#ff0000" opacity="0.8"/>
+                <ellipse cx="30" cy="70" rx="12" ry="8" fill="#ff0000" opacity="0.5"/>
+                <ellipse cx="35" cy="55" rx="15" ry="10" fill="#ff0000" opacity="0.3"/>
+            </g>
+        </svg>
+
+        <div class="banksy-content">
+            <div class="banksy-header">
+                <h2 class="banksy-title">Destroy<br/>The Gradient</h2>
+                <p class="banksy-subtitle">A street guide to second-order optimization</p>
+            </div>
+
+            <div class="stencil-container">
+                <div class="stencil-card">
+                    <div class="spray-text red drip">The Problem</div>
+                    <p class="stencil-body">
+                        For 50 years, <strong>SGD</strong> has ruled machine learning like a corrupt regime. It only looks at the slope. It ignores the terrain. It takes the same tiny steps whether crossing a flat plain or climbing a cliff.<br><br>
+                        <strong>Adam</strong> tried to fix it. Added momentum. Added adaptive rates. But it's still first-order. Still blind to curvature. Still part of the system.
+                    </p>
+                </div>
+                <div class="stencil-card">
+                    <div class="spray-text yellow drip">The Revolution</div>
+                    <p class="stencil-body">
+                        <strong>Shampoo</strong> sees what others don't. It reads the curvature of the loss landscape. It knows when to sprint and when to tiptoe.<br><br>
+                        The secret? <strong>Kronecker factorization</strong>. Instead of storing an impossible (n² × n²) matrix, it keeps two smaller ones. The establishment said it couldn't be done. They were wrong.
+                    </p>
+                </div>
+            </div>
+
+            <div class="graffiti-equation">
+                <div class="eq">
+                    W<sub>t+1</sub> = W<sub>t</sub> − η · <span class="highlight">L<sup>−¼</sup></span> G <span class="highlight">R<sup>−¼</sup></span>
+                </div>
+            </div>
+
+            <div class="versus">
+                <div class="versus-side old">
+                    <h4>First Order</h4>
+                    <p>2,512</p>
+                    <span style="color:#666;font-family:monospace;font-size:0.8rem;">steps to converge</span>
+                </div>
+                <div class="versus-divider">VS</div>
+                <div class="versus-side new">
+                    <h4>Shampoo</h4>
+                    <p>1,729</p>
+                    <span style="color:#666;font-family:monospace;font-size:0.8rem;">steps to converge</span>
+                </div>
+            </div>
+
+            <ul class="manifesto">
+                <li>Storing the full Hessian<span>O(n⁴) memory — impossible for real networks</span></li>
+                <li>Diagonal approximations<span>Throws away all the useful structure</span></li>
+                <li>Ignoring curvature entirely<span>Walking blindfolded through a maze</span></li>
+                <li class="yes">Kronecker-factored preconditioners<span>O(m² + n²) memory — actually tractable</span></li>
+                <li class="yes">Accumulate L = GGᵀ and R = GᵀG<span>Capture structure without explosion</span></li>
+                <li class="yes">Matrix fourth roots via Schur-Newton<span>Fast, stable, no eigendecomposition needed</span></li>
+            </ul>
+
+            <!-- Stencil illustration of the transformation -->
+            <svg class="stencil-svg" viewBox="0 0 600 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <!-- Chaotic gradient on left -->
+                <g transform="translate(50, 30)">
+                    <text x="50" y="0" text-anchor="middle" fill="#666" font-family="Courier New" font-size="10" letter-spacing="0.1em">RAW GRADIENT</text>
+                    <rect x="0" y="20" width="100" height="120" fill="none" stroke="#ff0000" stroke-width="2"/>
+                    <!-- Chaotic arrows inside -->
+                    <path d="M20 50 L80 90" stroke="white" stroke-width="2"/>
+                    <path d="M30 100 L70 40" stroke="white" stroke-width="2"/>
+                    <path d="M50 30 L50 130" stroke="white" stroke-width="2"/>
+                    <path d="M15 70 L85 70" stroke="white" stroke-width="2"/>
+                    <path d="M25 120 L75 50" stroke="white" stroke-width="2"/>
+                    <path d="M40 35 L60 125" stroke="white" stroke-width="2"/>
+                    <text x="50" y="160" text-anchor="middle" fill="#ff0000" font-family="Arial Black" font-size="12">CHAOS</text>
+                </g>
+
+                <!-- Arrow with transformation -->
+                <g transform="translate(180, 80)">
+                    <rect x="0" y="0" width="240" height="50" fill="rgba(255,255,255,0.05)" rx="4"/>
+                    <text x="120" y="20" text-anchor="middle" fill="#888" font-family="Courier New" font-size="9">PRECONDITION</text>
+                    <text x="120" y="38" text-anchor="middle" fill="white" font-family="Times New Roman" font-size="14">L<tspan baseline-shift="super" font-size="9">−¼</tspan> × G × R<tspan baseline-shift="super" font-size="9">−¼</tspan></text>
+                    <path d="M0 25 L-15 25 M240 25 L255 25" stroke="#ff0000" stroke-width="2"/>
+                    <polygon points="255,25 248,20 248,30" fill="#ff0000"/>
+                </g>
+
+                <!-- Organized gradient on right -->
+                <g transform="translate(450, 30)">
+                    <text x="50" y="0" text-anchor="middle" fill="#666" font-family="Courier New" font-size="10" letter-spacing="0.1em">PRECONDITIONED</text>
+                    <rect x="0" y="20" width="100" height="120" fill="none" stroke="#00ff00" stroke-width="2"/>
+                    <!-- Organized arrows - all pointing same direction -->
+                    <path d="M20 40 L20 120" stroke="white" stroke-width="2"/>
+                    <polygon points="20,120 15,110 25,110" fill="white"/>
+                    <path d="M40 45 L40 115" stroke="white" stroke-width="2"/>
+                    <polygon points="40,115 35,105 45,105" fill="white"/>
+                    <path d="M60 40 L60 120" stroke="white" stroke-width="2"/>
+                    <polygon points="60,120 55,110 65,110" fill="white"/>
+                    <path d="M80 45 L80 115" stroke="white" stroke-width="2"/>
+                    <polygon points="80,115 75,105 85,105" fill="white"/>
+                    <text x="50" y="160" text-anchor="middle" fill="#00ff00" font-family="Arial Black" font-size="12">ORDER</text>
+                </g>
+            </svg>
+
+            <div class="banksy-quote">
+                "They told us second-order was too expensive. We told them they weren't trying hard enough."
+                <span class="author">— The Shampoo Manifesto</span>
+            </div>
+
+            <div class="banksy-footer">
+                <p>Exit through the gradient shop</p>
+            </div>
+        </div>
+    </section>
+
     <section class="focus" id="focus">
         <div class="focus-header reveal">
             <span class="section-label">Focus Areas</span>