feat: Initialize portfolio website with core sections, smooth scrolling, scroll reveal animations, and comprehensive SEO.

app/components/Preloader.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+export function Preloader() {
+  const [progress, setProgress] = useState(0);
+  const [complete, setComplete] = useState(false);
+
+  useEffect(() => {
+    document.body.style.overflow = "hidden";
+    window.scrollTo(0, 0);
+
+    const duration = 2500;
+    const interval = 25;
+    const steps = duration / interval;
+    let currentStep = 0;
+
+    const timer = setInterval(() => {
+      currentStep++;
+      const newProgress = Math.min(Math.floor((currentStep / steps) * 100), 100);
+      setProgress(newProgress);
+
+      if (currentStep >= steps) {
+        clearInterval(timer);
+        setTimeout(() => {
+          setComplete(true);
+          setTimeout(() => {
+            document.body.style.overflow = "auto";
+          }, 1000); // Wait for exit animation
+        }, 400); // Pause briefly at exactly 100%
+      }
+    }, interval);
+
+    return () => {
+      clearInterval(timer);
+      document.body.style.overflow = "auto";
+    };
+  }, []);
+
+  return (
+    <AnimatePresence>
+      {!complete && (
+        <motion.div
+          initial={{ y: 0 }}
+          exit={{ y: "-100vh" }}
+          transition={{ duration: 0.9, ease: [0.76, 0, 0.24, 1] }}
+          className="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-[#0A0A0A] text-white"
+        >
+          <div className="flex w-full max-w-sm flex-col items-center justify-center gap-6 px-6">
+            <div className="overflow-hidden">
+              <motion.h1
+                initial={{ y: "100%" }}
+                animate={{ y: 0 }}
+                transition={{ duration: 1, ease: [0.76, 0, 0.24, 1], delay: 0.1 }}
+                className="text-4xl sm:text-5xl font-extrabold tracking-tight"
+                style={{ fontFamily: "'Monument Extended', sans-serif" }}
+              >
+                evandro<span className="text-[#E8FF00]">.dev</span>
+              </motion.h1>
+            </div>
+            
+            <div className="h-[2px] w-full overflow-hidden bg-white/10">
+              <motion.div
+                className="h-full bg-[#E8FF00]"
+                initial={{ width: 0 }}
+                animate={{ width: `${progress}%` }}
+                transition={{ duration: 0.1, ease: "linear" }}
+              />
+            </div>
+            
+            <div className="flex w-full justify-between overflow-hidden text-[11px] uppercase tracking-widest text-white/50">
+              <motion.div
+                initial={{ y: "100%" }}
+                animate={{ y: 0 }}
+                transition={{ duration: 0.8, ease: [0.76, 0, 0.24, 1], delay: 0.2 }}
+              >
+                Carregando
+              </motion.div>
+              <motion.div
+                initial={{ y: "100%" }}
+                animate={{ y: 0 }}
+                transition={{ duration: 0.8, ease: [0.76, 0, 0.24, 1], delay: 0.3 }}
+              >
+                {progress}%
+              </motion.div>
+            </div>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}