added oliver

src/components/InstagramFeed.tsx

@@ -26,17 +26,16 @@ export function InstagramFeed() {
       
       {/* Instagram Feed Grid - Posts Only */}
       <div className="mb-4">
-        {/* @ts-ignore - allowTransparency is valid for iframe */}
         <iframe 
           src="https://cdn.lightwidget.com/widgets/dfd875efe9b05e47b5ff190cc0a71990.html" 
           scrolling="no" 
-          allowTransparency={true}
           className="lightwidget-widget" 
           style={{
             width: '100%',
             height: '200px',
             border: 'none',
-            overflow: 'hidden'
+            overflow: 'hidden',
+            backgroundColor: 'transparent'
           }}
         />
       </div>

src/components/Temp-Placeholder.tsx

@@ -4,6 +4,8 @@ import { CursorDotBackground } from "./CursorDotBackground";
 import { HorizontalAccordion } from "./HorizontalAccordion";
 import { InstagramFeed } from "./InstagramFeed";
 import { useEffect, useRef, useState } from "react";
+import Image from "next/image";
+import { motion, AnimatePresence } from "framer-motion";
 
 export function TempPlaceholder() {
   const titleRef = useRef<HTMLHeadingElement | null>(null);
@@ -12,6 +14,8 @@ export function TempPlaceholder() {
   const [titleWidth, setTitleWidth] = useState<number | null>(null);
   const [bioFontSizePx, setBioFontSizePx] = useState<number | null>(null);
   const baseBioFontSizeRef = useRef<number | null>(null);
+  const [isEasterEggOpen, setIsEasterEggOpen] = useState(false);
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
 
   useEffect(() => {
     const measure = () => {
@@ -110,7 +114,11 @@ export function TempPlaceholder() {
           </HorizontalAccordion>
         </div>
         <h1 
-          className="text-4xl sm:text-5xl md:text-7xl lg:text-8xl xl:text-9xl font-black mb-4 md:mb-6 font-exo-2 text-center mx-auto leading-none" 
+          onClick={(e) => {
+            setMousePosition({ x: e.clientX, y: e.clientY });
+            setIsEasterEggOpen(true);
+          }}
+          className="text-4xl sm:text-5xl md:text-7xl lg:text-8xl xl:text-9xl font-black mb-4 md:mb-6 font-exo-2 text-center mx-auto leading-none cursor-pointer transition-opacity hover:opacity-80" 
           style={{ 
             color: '#000000',
             textShadow: '2px 2px 0px #ff4d00, 4px 4px 0px #ff4d00',
@@ -121,6 +129,58 @@ export function TempPlaceholder() {
             BIOHAZARD
           </span>
         </h1>
+        
+        <AnimatePresence>
+          {isEasterEggOpen && (
+            <>
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.3 }}
+                className="fixed inset-0 z-50 bg-black/80"
+                onClick={() => setIsEasterEggOpen(false)}
+              />
+              <motion.div
+                initial={{ opacity: 0, scale: 0.7, x: '-50%', y: '-50%' }}
+                animate={{ opacity: 1, scale: 1, x: '-50%', y: '-50%' }}
+                exit={{ opacity: 0, scale: 0.7, x: '-50%', y: '-50%' }}
+                transition={{ 
+                  duration: 0.4,
+                  ease: [0.16, 1, 0.3, 1]
+                }}
+                style={{
+                  position: 'fixed',
+                  left: mousePosition.x,
+                  top: mousePosition.y,
+                }}
+                className="z-50 w-[90vw] max-w-[350px]"
+                onMouseLeave={() => setIsEasterEggOpen(false)}
+              >
+                <div className="relative bg-black rounded-lg overflow-hidden shadow-2xl">
+                  <motion.div
+                    initial={{ opacity: 0, scale: 0.9 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    transition={{ 
+                      duration: 0.3,
+                      delay: 0.1,
+                      ease: [0.16, 1, 0.3, 1]
+                    }}
+                    className="relative w-full aspect-square"
+                  >
+                    <Image 
+                      src="/OLIVER.jpeg" 
+                      alt="Easter egg" 
+                      fill
+                      unoptimized
+                      className="object-cover"
+                    />
+                  </motion.div>
+                </div>
+              </motion.div>
+            </>
+          )}
+        </AnimatePresence>
         <p className="mb-6 md:mb-8 text-base sm:text-lg text-gray-300">
           <strong>Who we are:</strong> artists and technical people, we're
           better at VFX than we are at web design, I promise.

src/middleware.ts

@@ -5,7 +5,7 @@ export function middleware(request: NextRequest) {
   const { pathname } = request.nextUrl;
 
   // Allow only the home page and Next.js internal routes
-  if (pathname === '/' || pathname.startsWith('/_next') || pathname.startsWith('/favicon.ico')) {
+  if (pathname === '/' || pathname.startsWith('/_next') || pathname.startsWith('/favicon.') || pathname === '/OLIVER.jpeg') {
     return NextResponse.next();
   }