Update src/app/about-me/page.tsx

Merge version_4 into main

src/app/about-me/page.tsx

@@ -5,7 +5,8 @@ import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloating
 import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
-import { MapPin, Users, Award, Zap } from 'lucide-react';
+import AboutMetric from '@/components/sections/about/AboutMetric';
+import { MapPin, Users, Award, Zap, BookOpen, Globe } from 'lucide-react';
 
 export default function AboutMePage() {
   return (
@@ -56,6 +57,20 @@ export default function AboutMePage() {
       </div>
 
       <div id="about" data-section="about">
+        <AboutMetric
+          title="Who I Am"
+          metrics={[
+            { icon: Globe, label: "Student in USA", value: "From NL" },
+            { icon: BookOpen, label: "Academic Focus", value: "Excellence" },
+            { icon: Award, label: "Athletic Drive", value: "Competitive" },
+            { icon: Users, label: "Mission", value: "Help Businesses" }
+          ]}
+          metricsAnimation="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="why-elevate" data-section="why-elevate">
         <ContactText
           text="I'm a passionate student-athlete balancing rigorous academics and competitive sports while pursuing my dreams in the United States. Originally from The Hague, Netherlands, I bring a unique perspective shaped by European heritage and American ambition. My commitment to excellence extends beyond the playing field into every project I undertake, whether it's web design, digital strategy, or building meaningful connections."
           animationType="reveal-blur"