fix: Reduce component flashing on page load and scroll

- Remove mounted state checks that return null (Hero, About, Projects)
- Reduce animation delays and durations for faster initial render
- Change viewport margins from -100px to -50px for earlier trigger
- Reduce initial animation distances (y: 40 -> 20, y: 30 -> 20)
- Use requestAnimationFrame for Header mount to prevent flash
- Always render components instead of returning null to prevent layout shift
- Optimize Framer Motion transitions for smoother scrolling

app/components/About.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { useState, useEffect } from "react";
 import { motion, Variants } from "framer-motion";
 import { Globe, Server, Wrench, Shield, Gamepad2, Code, Activity, Lightbulb } from "lucide-react";
 
@@ -16,24 +15,18 @@ const staggerContainer: Variants = {
 };
 
 const fadeInUp: Variants = {
-  hidden: { opacity: 0, y: 30 },
+  hidden: { opacity: 0, y: 20 },
   visible: {
     opacity: 1,
     y: 0,
     transition: {
-      duration: 1,
+      duration: 0.5,
       ease: [0.25, 0.1, 0.25, 1],
     },
   },
 };
 
 const About = () => {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
   const techStack = [
     {
       category: "Frontend & Mobile",
@@ -64,8 +57,6 @@ const About = () => {
     { icon: Activity, text: "Jogging to clear my mind and stay active" },
   ];
 
-  if (!mounted) return null;
-
   return (
     <section
       id="about"