Merge version_3 into main

Merge version_3 into main

src/app/layout.tsx

@@ -1425,4 +1425,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -41,51 +41,62 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="hero" data-section="hero">
-        <HeroBillboardTestimonial
-          title="Full-Stack Developer & Creative Technologist"
-          description="Crafting elegant, performant web experiences with modern technologies. Specialized in React, Next.js, and full-stack development with a focus on clean code and beautiful design."
-          tag="Welcome to my portfolio"
-          tagIcon={Code2}
-          tagAnimation="slide-up"
-          background={{ variant: "plain" }}
-          useInvertedBackground={false}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/a-professional-coder-working-at-a-modern-1772523700251-6df3d86c.png"
-          imageAlt="Professional coder at work"
-          mediaAnimation="blur-reveal"
-          buttons={[
-            { text: "View My Work", href: "projects" },
-            { text: "Contact Me", href: "contact" }
-          ]}
-          buttonAnimation="slide-up"
-          testimonials={[
-            {
-              name: "Sarah Chen",              handle: "CTO, TechVenture",              testimonial: "Outstanding developer with exceptional attention to detail. Delivered a complex project ahead of schedule.",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/professional-headshot-portrait-of-a-youn-1772523701569-dec7d03c.png?_wi=1",              imageAlt: "Sarah Chen"
-            },
-            {
-              name: "Marcus Johnson",              handle: "Product Lead, Innovate Inc",              testimonial: "Transformed our codebase and team productivity. A true professional in every aspect.",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/professional-headshot-portrait-of-a-youn-1772523701411-27cbe048.png?_wi=1",              imageAlt: "Marcus Johnson"
-            },
-            {
-              name: "Elena Rodriguez",              handle: "Founder, DesignStudio",              testimonial: "Perfect collaboration between design and development. The results exceeded expectations.",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/professional-headshot-portrait-of-a-dive-1772523699306-b5d34ee8.png?_wi=1",              imageAlt: "Elena Rodriguez"
-            },
-            {
-              name: "David Park",              handle: "CEO, CloudTech Solutions",              testimonial: "Reliable, skilled, and a pleasure to work with. Highly recommend for any serious project.",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/professional-headshot-portrait-of-a-conf-1772523700273-699bbf44.png?_wi=1",              imageAlt: "David Park"
-            }
-          ]}
-          testimonialRotationInterval={4000}
-        />
+      <div id="hero" data-section="hero" style={{ perspective: '1200px', transformStyle: 'preserve-3d' }}>
+        <div style={{
+          position: 'relative',
+          transform: 'translateZ(0)',
+          willChange: 'transform'
+        }}>
+          <HeroBillboardTestimonial
+            title="Full-Stack Developer & Creative Technologist"
+            description="Crafting elegant, performant web experiences with modern technologies. Specialized in React, Next.js, and full-stack development with a focus on clean code and beautiful design."
+            tag="Welcome to my portfolio"
+            tagIcon={Code2}
+            tagAnimation="slide-up"
+            background={{ variant: "plain" }}
+            useInvertedBackground={false}
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/a-professional-coder-working-at-a-modern-1772523700251-6df3d86c.png"
+            imageAlt="Professional coder at work"
+            mediaAnimation="blur-reveal"
+            buttons={[
+              { text: "View My Work", href: "projects" },
+              { text: "Contact Me", href: "contact" }
+            ]}
+            buttonAnimation="slide-up"
+            testimonials={[
+              {
+                name: "Sarah Chen",                handle: "CTO, TechVenture",                testimonial: "Outstanding developer with exceptional attention to detail. Delivered a complex project ahead of schedule.",                rating: 5,
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/professional-headshot-portrait-of-a-youn-1772523701569-dec7d03c.png?_wi=1",                imageAlt: "Sarah Chen"
+              },
+              {
+                name: "Marcus Johnson",                handle: "Product Lead, Innovate Inc",                testimonial: "Transformed our codebase and team productivity. A true professional in every aspect.",                rating: 5,
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/professional-headshot-portrait-of-a-youn-1772523701411-27cbe048.png?_wi=1",                imageAlt: "Marcus Johnson"
+              },
+              {
+                name: "Elena Rodriguez",                handle: "Founder, DesignStudio",                testimonial: "Perfect collaboration between design and development. The results exceeded expectations.",                rating: 5,
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/professional-headshot-portrait-of-a-dive-1772523699306-b5d34ee8.png?_wi=1",                imageAlt: "Elena Rodriguez"
+              },
+              {
+                name: "David Park",                handle: "CEO, CloudTech Solutions",                testimonial: "Reliable, skilled, and a pleasure to work with. Highly recommend for any serious project.",                rating: 5,
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQSuJP1cyBmaxxpBhmzkvDNEAB/professional-headshot-portrait-of-a-conf-1772523700273-699bbf44.png?_wi=1",                imageAlt: "David Park"
+              }
+            ]}
+            testimonialRotationInterval={4000}
+          />
+        </div>
       </div>
 
-      <div id="about" data-section="about">
+      <div id="about" data-section="about" style={{
+        position: 'relative',
+        transform: 'translateZ(20px)',
+        willChange: 'transform'
+      }}>
         <TextSplitAbout
           title="About Me"
           description={[
             "I'm a passionate full-stack developer with 8+ years of experience building web applications that scale. My journey started with a curiosity about how things work on the web, which evolved into a deep expertise in modern JavaScript frameworks and cloud technologies.",            "I specialize in creating performant, accessible, and beautifully designed digital products. From concept to deployment, I focus on clean code, user experience, and continuous improvement. I'm equally comfortable working solo on projects or collaborating within dynamic teams.",            "When I'm not coding, you'll find me contributing to open-source projects, writing technical blog posts, or exploring emerging web technologies. I believe in the power of sharing knowledge and lifting up the developer community."
           ]}
+          descriptionClassName="first:text-lg first:font-semibold first:leading-relaxed"
           buttons={[
             { text: "Download Resume", href: "#" }
           ]}
@@ -94,7 +105,11 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="projects" data-section="projects">
+      <div id="projects" data-section="projects" style={{
+        position: 'relative',
+        transform: 'translateZ(40px)',
+        willChange: 'transform'
+      }}>
         <FeatureCardEight
           features={[
             {
@@ -124,7 +139,11 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="metrics" data-section="metrics">
+      <div id="metrics" data-section="metrics" style={{
+        position: 'relative',
+        transform: 'translateZ(60px)',
+        willChange: 'transform'
+      }}>
         <MetricCardEleven
           metrics={[
             {
@@ -151,7 +170,11 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="team" data-section="team">
+      <div id="team" data-section="team" style={{
+        position: 'relative',
+        transform: 'translateZ(80px)',
+        willChange: 'transform'
+      }}>
         <TeamCardOne
           members={[
             {
@@ -179,7 +202,11 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="testimonials" data-section="testimonials">
+      <div id="testimonials" data-section="testimonials" style={{
+        position: 'relative',
+        transform: 'translateZ(100px)',
+        willChange: 'transform'
+      }}>
         <TestimonialCardOne
           testimonials={[
             {
@@ -219,7 +246,11 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="faq" data-section="faq">
+      <div id="faq" data-section="faq" style={{
+        position: 'relative',
+        transform: 'translateZ(120px)',
+        willChange: 'transform'
+      }}>
         <FaqSplitMedia
           faqs={[
             {
@@ -257,7 +288,11 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="contact" data-section="contact">
+      <div id="contact" data-section="contact" style={{
+        position: 'relative',
+        transform: 'translateZ(140px)',
+        willChange: 'transform'
+      }}>
         <ContactText
           text="Ready to start your next project or discuss how I can help? Let's connect and create something amazing together."
           animationType="entrance-slide"
@@ -270,7 +305,11 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="footer" data-section="footer">
+      <div id="footer" data-section="footer" style={{
+        position: 'relative',
+        transform: 'translateZ(160px)',
+        willChange: 'transform'
+      }}>
         <FooterBaseReveal
           columns={[
             {
@@ -298,6 +337,33 @@ export default function LandingPage() {
           copyrightText="© 2025 DevPortfolio. Crafted with code and creativity."
         />
       </div>
+
+      <style>{`
+        @keyframes parallaxScroll {
+          0% {
+            opacity: 0;
+            transform: translateZ(-100px) rotateX(10deg);
+          }
+          100% {
+            opacity: 1;
+            transform: translateZ(0) rotateX(0deg);
+          }
+        }
+
+        html {
+          scroll-behavior: smooth;
+        }
+
+        body {
+          overflow-x: hidden;
+        }
+
+        [data-section] {
+          animation: parallaxScroll 0.8s ease-out forwards;
+          animation-timeline: view();
+          animation-range: entry 0% cover 30%;
+        }
+      `}</style>
     </ThemeProvider>
   );
-}
+}