fix: lazyloading issues on about page

src/App.tsx

@@ -1,6 +1,6 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { LanguageProvider } from './i18n';
-import { Navbar, Footer, FancyCursor } from './components/layout';
+import { Navbar, Footer, FancyCursor, ScrollToTop } from './components/layout';
 import { Home, About, Contact } from './pages';
 import './styles/global.css';
 
@@ -8,6 +8,7 @@ export function App() {
   return (
     <LanguageProvider>
       <BrowserRouter>
+        <ScrollToTop />
         <FancyCursor />
         <Navbar />
         <Routes>

src/components/layout/FancyCursor.test.tsx

@@ -2,7 +2,6 @@
 import { render, fireEvent, act } from '@testing-library/react';
 import { FancyCursor } from './FancyCursor';
 import { describe, it, expect, vi, beforeAll, afterAll, beforeEach } from 'vitest';
-import React from 'react';
 
 describe('FancyCursor', () => {
     beforeAll(() => {

src/components/layout/Navbar.test.tsx

@@ -14,7 +14,7 @@ describe('Navbar Performance', () => {
     scrollYGetterSpy = vi.fn(() => 0);
     Object.defineProperty(window, 'scrollY', {
       configurable: true,
-      get: scrollYGetterSpy,
+      get: scrollYGetterSpy as any,
     });
     vi.useFakeTimers();
   });

src/components/layout/ScrollToTop.tsx

@@ -0,0 +1,16 @@
+import { useLayoutEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+export function ScrollToTop() {
+  const { pathname } = useLocation();
+
+  useLayoutEffect(() => {
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: 'instant'
+    });
+  }, [pathname]);
+
+  return null;
+}

src/components/layout/index.ts

@@ -1,3 +1,4 @@
 export { Navbar } from './Navbar';
 export { Footer } from './Footer';
 export { FancyCursor } from './FancyCursor';
+export { ScrollToTop } from './ScrollToTop';

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