fix: lazyloading issues on about page

src/pages/About.tsx

@@ -1,4 +1,5 @@
 import { motion } from 'motion/react';
+import { useLocation } from 'react-router-dom';
 import { useTranslation } from '../i18n';
 import {
   SiReact,
@@ -27,7 +28,7 @@ const containerVariants = {
   hidden: { opacity: 0 },
   visible: {
     opacity: 1,
-    transition: { staggerChildren: 0.1 },
+    transition: { staggerChildren: 0.1, delayChildren: 0.6 },
   },
 };
 
@@ -42,9 +43,10 @@ const itemVariants = {
 
 export function About() {
   const { t } = useTranslation();
+  const location = useLocation();
 
   return (
-    <main className={styles.about}>
+    <main className={styles.about} key={location.key}>
       {/* Hero Section */}
       <section className={styles.hero}>
         <div className="container">
@@ -65,9 +67,8 @@ export function About() {
           <motion.div
             className={styles.introContent}
             initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
           >
             <p className={styles.introText}>{t.about.intro}</p>
             <p className={styles.introText}>{t.about.experience}</p>
@@ -81,9 +82,8 @@ export function About() {
           <motion.div
             className={styles.sectionHeader}
             initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.4 }}
           >
             <h2>{t.about.skills.title}</h2>
             <p>{t.about.skills.subtitle}</p>
@@ -93,8 +93,7 @@ export function About() {
             className={styles.techGrid}
             variants={containerVariants}
             initial="hidden"
-            whileInView="visible"
-            viewport={{ once: true }}
+            animate="visible"
           >
             {techStack.map((tech) => (
               <motion.div