feat: Introduce new AI skills, core application layout, and cinematic UI components for the portfolio.

app/components/cinematic/PageIntro.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
+import { createPortal } from "react-dom";
 import { motion, AnimatePresence } from "framer-motion";
 
 const INTRO_LINES = [
@@ -12,8 +13,18 @@ const INTRO_LINES = [
 export default function PageIntro() {
   const [isVisible, setIsVisible] = useState(true);
   const [counter, setCounter] = useState(0);
+  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
+    setMounted(true);
+    // Remove the immediate blocking overlay now that the animated loader is ready
+    const blocker = document.getElementById("__loading-blocker");
+    if (blocker) blocker.remove();
+  }, []);
+
+  useEffect(() => {
+    if (!mounted) return;
+
     // Animate counter from 0 to 100
     const duration = 2000;
     const start = performance.now();
@@ -34,13 +45,16 @@ export default function PageIntro() {
     };
 
     requestAnimationFrame(tick);
-  }, []);
+  }, [mounted]);
 
-  return (
+  if (!mounted) return null;
+
+  return createPortal(
     <AnimatePresence>
       {isVisible && (
         <motion.div
-          className="fixed inset-0 z-[10000] flex items-center justify-center bg-[#0a0a0a]"
+          className="fixed inset-0 z-[99999] flex items-center justify-center bg-[#0a0a0a]"
+          style={{ position: "fixed", top: 0, left: 0, right: 0, bottom: 0, width: "100vw", height: "100vh" }}
           exit={{
             clipPath: "inset(0 0 100% 0)",
             transition: { duration: 1, ease: [0.76, 0, 0.24, 1] },
@@ -156,6 +170,8 @@ export default function PageIntro() {
           </div>
         </motion.div>
       )}
-    </AnimatePresence>
+    </AnimatePresence>,
+    document.body
   );
 }
+