From 6bf6fde65d428afcea7ffaa71f294a0d5ca6034c Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 4 Mar 2026 14:21:41 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 337 +++++++----------------------------------------
 1 file changed, 48 insertions(+), 289 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9e39ed3..09918a6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -60,76 +60,6 @@ export default function HomePage() {
       secondaryButtonStyle="layered"
       headingFontWeight="light"
     >
-      <style>{`
-        @keyframes drawLine {
-          0% {
-            stroke-dashoffset: 1000;
-            opacity: 0;
-          }
-          10% {
-            opacity: 1;
-          }
-          90% {
-            opacity: 1;
-          }
-          100% {
-            stroke-dashoffset: 0;
-            opacity: 0;
-          }
-        }
-
-        @keyframes tiltShift {
-          0%, 100% {
-            transform: translateY(0) rotateZ(-1deg);
-          }
-          50% {
-            transform: translateY(-8px) rotateZ(1deg);
-          }
-        }
-
-        @keyframes sketchCursor {
-          0% {
-            opacity: 1;
-            transform: scale(1);
-          }
-          100% {
-            opacity: 0;
-            transform: scale(0.8);
-          }
-        }
-
-        .decorative-line {
-          stroke-dasharray: 1000;
-          animation: drawLine 4s ease-in-out 2s infinite;
-          pointer-events: none;
-        }
-
-        .tilt-media {
-          animation: tiltShift 6s ease-in-out infinite;
-        }
-
-        .sketch-trail {
-          position: fixed;
-          pointer-events: none;
-          z-index: 10;
-        }
-
-        .sketch-mark {
-          position: absolute;
-          border-radius: 50%;
-          animation: sketchCursor 1.5s ease-out forwards;
-        }
-      `}</style>
-
-      <canvas
-        id="sketch-canvas"
-        style={{
-          position: "fixed",          top: 0,
-          left: 0,
-          width: "100%",          height: "100%",          pointerEvents: "none",          zIndex: 5,
-        }}
-      />
-
       <div id="nav" data-section="nav">
         <NavbarStyleFullscreen
           navItems={navItems}
@@ -139,64 +69,30 @@ export default function HomePage() {
         />
       </div>
 
-      <svg
-        style={{
-          position: "absolute",          top: "100px",          left: "50%",          transform: "translateX(-50%)",          width: "200px",          height: "2px",          pointerEvents: "none",          zIndex: 1,
-        }}
-      >
-        <line
-          x1="0"
-          y1="1"
-          x2="200"
-          y2="1"
-          stroke="currentColor"
-          strokeWidth="1"
-          opacity="0.3"
-          className="decorative-line"
-        />
-      </svg>
-
       <div id="hero" data-section="hero">
-        <div className="tilt-media">
-          <HeroBillboardTestimonial
-            title="Building ideas into reality"
-            description="A collection of projects, thoughts, and vision. Explore what's in progress, subscribe to my writing, or let's connect."
-            background={{ variant: "plain" }}
-            imageSrc="http://img.b2bpic.net/free-psd/acting-agency-template-landing-page_23-2148797778.jpg"
-            imageAlt="Portfolio hero showcase"
-            mediaAnimation="blur-reveal"
-            testimonials={[
-              {
-                name: "Creative Vision",                handle: "Portfolio Focus",                testimonial: "Transforming concepts into compelling visual narratives that resonate with audiences and drive meaningful engagement.",                rating: 5,
-                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5BwcOCEdbUvGXGzmfDl4faxC/uploaded-1772588138755-nsxcu3nt.png"
-              },
-            ]}
-            buttons={[
-              { text: "Explore My Work", href: "/projects" },
-              { text: "Subscribe", href: "#" },
-            ]}
-            buttonAnimation="blur-reveal"
-            useInvertedBackground={false}
-            tag="Creative Portfolio"
-            tagAnimation="blur-reveal"
-          />
-        </div>
-      </div>
-
-      <svg
-        style={{
-          position: "absolute",          top: "600px",          left: "10%",          width: "150px",          height: "50px",          pointerEvents: "none",          zIndex: 1,
-        }}
-      >
-        <path
-          d="M 10 30 Q 40 5 80 30 T 150 30"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          fill="none"
-          opacity="0.2"
-          className="decorative-line"
+        <HeroBillboardTestimonial
+          title="Building ideas into reality"
+          description="A collection of projects, thoughts, and vision. Explore what's in progress, subscribe to my writing, or let's connect."
+          background={{ variant: "plain" }}
+          imageSrc="http://img.b2bpic.net/free-psd/acting-agency-template-landing-page_23-2148797778.jpg"
+          imageAlt="Portfolio hero showcase"
+          mediaAnimation="blur-reveal"
+          testimonials={[
+            {
+              name: "Creative Vision",              handle: "Portfolio Focus",              testimonial: "Transforming concepts into compelling visual narratives that resonate with audiences and drive meaningful engagement.",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5BwcOCEdbUvGXGzmfDl4faxC/uploaded-1772588138755-nsxcu3nt.png"
+            },
+          ]}
+          buttons={[
+            { text: "Explore My Work", href: "/projects" },
+            { text: "Subscribe", href: "#" },
+          ]}
+          buttonAnimation="blur-reveal"
+          useInvertedBackground={false}
+          tag="Creative Portfolio"
+          tagAnimation="blur-reveal"
         />
-      </svg>
+      </div>
 
       <div id="about" data-section="about">
         <TextSplitAbout
@@ -211,68 +107,34 @@ export default function HomePage() {
         />
       </div>
 
-      <svg
-        style={{
-          position: "absolute",          top: "900px",          right: "5%",          width: "100px",          height: "100px",          pointerEvents: "none",          zIndex: 1,
-        }}
-      >
-        <circle
-          cx="50"
-          cy="50"
-          r="40"
-          stroke="currentColor"
-          strokeWidth="1"
-          fill="none"
-          opacity="0.2"
-          className="decorative-line"
-        />
-      </svg>
-
       <div id="projects" data-section="projects">
-        <div className="tilt-media">
-          <ProductCardTwo
-            title="Selected Projects"
-            description="A curated selection of work demonstrating creative vision and strategic thinking across design and digital mediums."
-            textboxLayout="default"
-            animationType="slide-up"
-            useInvertedBackground={false}
-            gridVariant="three-columns-all-equal-width"
-            products={[
-              {
-                id: "1",                brand: "Visual Identity",                name: "Brand Narrative Series",                price: "2024",                rating: 5,
-                reviewCount: "Strategic Design",                imageSrc: "http://img.b2bpic.net/free-photo/startup-business-people-looking-strategy-board-information-thoughtful_53876-22977.jpg?_wi=1",                imageAlt: "Brand narrative project"
-              },
-              {
-                id: "2",                brand: "Digital Experience",                name: "Interactive Storytelling",                price: "2024",                rating: 5,
-                reviewCount: "Web Design",                imageSrc: "http://img.b2bpic.net/free-photo/top-photo-camera-laptop-vintage-tone-wooden-background_482257-35230.jpg?_wi=1",                imageAlt: "Digital experience project"
-              },
-              {
-                id: "3",                brand: "Creative Direction",                name: "Visual Language System",                price: "2024",                rating: 5,
-                reviewCount: "Brand Strategy",                imageSrc: "http://img.b2bpic.net/free-vector/geometric-gradient-shapes-cover-collection_52683-32230.jpg?_wi=1",                imageAlt: "Creative direction project"
-              },
-            ]}
-            carouselMode="buttons"
-            tag="Portfolio Showcase"
-            tagAnimation="blur-reveal"
-            buttons={[{ text: "View All Projects", href: "/projects" }]}
-          />
-        </div>
-      </div>
-
-      <svg
-        style={{
-          position: "absolute",          top: "1400px",          left: "50%",          transform: "translateX(-50%)",          width: "120px",          height: "80px",          pointerEvents: "none",          zIndex: 1,
-        }}
-      >
-        <polyline
-          points="10,70 40,20 70,50 100,10"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          fill="none"
-          opacity="0.2"
-          className="decorative-line"
+        <ProductCardTwo
+          title="Selected Projects"
+          description="A curated selection of work demonstrating creative vision and strategic thinking across design and digital mediums."
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+          gridVariant="three-columns-all-equal-width"
+          products={[
+            {
+              id: "1",              brand: "Visual Identity",              name: "Brand Narrative Series",              price: "2024",              rating: 5,
+              reviewCount: "Strategic Design",              imageSrc: "http://img.b2bpic.net/free-photo/startup-business-people-looking-strategy-board-information-thoughtful_53876-22977.jpg?_wi=1",              imageAlt: "Brand narrative project"
+            },
+            {
+              id: "2",              brand: "Digital Experience",              name: "Interactive Storytelling",              price: "2024",              rating: 5,
+              reviewCount: "Web Design",              imageSrc: "http://img.b2bpic.net/free-photo/top-photo-camera-laptop-vintage-tone-wooden-background_482257-35230.jpg?_wi=1",              imageAlt: "Digital experience project"
+            },
+            {
+              id: "3",              brand: "Creative Direction",              name: "Visual Language System",              price: "2024",              rating: 5,
+              reviewCount: "Brand Strategy",              imageSrc: "http://img.b2bpic.net/free-vector/geometric-gradient-shapes-cover-collection_52683-32230.jpg?_wi=1",              imageAlt: "Creative direction project"
+            },
+          ]}
+          carouselMode="buttons"
+          tag="Portfolio Showcase"
+          tagAnimation="blur-reveal"
+          buttons={[{ text: "View All Projects", href: "/projects" }]}
         />
-      </svg>
+      </div>
 
       <div id="testimonial" data-section="testimonial">
         <TestimonialCardFifteen
@@ -290,21 +152,6 @@ export default function HomePage() {
         />
       </div>
 
-      <svg
-        style={{
-          position: "absolute",          top: "1800px",          left: "15%",          width: "180px",          height: "60px",          pointerEvents: "none",          zIndex: 1,
-        }}
-      >
-        <path
-          d="M 10 40 L 40 10 L 70 40 L 100 15 L 140 45 L 180 20"
-          stroke="currentColor"
-          strokeWidth="1"
-          fill="none"
-          opacity="0.2"
-          className="decorative-line"
-        />
-      </svg>
-
       <div id="connect" data-section="connect">
         <SocialProofOne
           title="Connect With Me"
@@ -317,21 +164,6 @@ export default function HomePage() {
         />
       </div>
 
-      <svg
-        style={{
-          position: "absolute",          top: "2200px",          right: "8%",          width: "140px",          height: "70px",          pointerEvents: "none",          zIndex: 1,
-        }}
-      >
-        <path
-          d="M 10 50 Q 40 10 70 50 T 140 50"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          fill="none"
-          opacity="0.2"
-          className="decorative-line"
-        />
-      </svg>
-
       <div id="contact-cta" data-section="contact-cta">
         <ContactCTA
           tag="Get In Touch"
@@ -353,79 +185,6 @@ export default function HomePage() {
           copyrightText="© 2025 Portfolio. Crafted with intention and creative vision."
         />
       </div>
-
-      <script>{`
-        (function() {
-          const canvas = document.getElementById('sketch-canvas');
-          if (!canvas) return;
-          
-          const ctx = canvas.getContext('2d');
-          canvas.width = window.innerWidth;
-          canvas.height = window.innerHeight;
-          
-          let mouseX = 0;
-          let mouseY = 0;
-          let isDrawing = false;
-          
-          const strokes = [];
-          
-          const sketchColors = ['rgba(0, 0, 0, 0.15)', 'rgba(100, 100, 100, 0.1)', 'rgba(50, 50, 50, 0.12)'];
-          
-          document.addEventListener('mousemove', (e) => {
-            mouseX = e.clientX;
-            mouseY = e.clientY;
-            
-            if (Math.random() > 0.92) {
-              const offsets = [
-                { x: Math.random() * 20 - 10, y: Math.random() * 20 - 10 },
-                { x: Math.random() * 15 - 7, y: Math.random() * 15 - 7 }
-              ];
-              
-              offsets.forEach(offset => {
-                const stroke = {
-                  x: mouseX + offset.x,
-                  y: mouseY + offset.y,
-                  size: Math.random() * 3 + 1,
-                  opacity: Math.random() * 0.4 + 0.3,
-                  color: sketchColors[Math.floor(Math.random() * sketchColors.length)],
-                  life: 1
-                };
-                strokes.push(stroke);
-              });
-            }
-          });
-          
-          function animate() {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            
-            for (let i = strokes.length - 1; i >= 0; i--) {
-              const stroke = strokes[i];
-              stroke.life -= 0.02;
-              
-              if (stroke.life <= 0) {
-                strokes.splice(i, 1);
-                continue;
-              }
-              
-              ctx.fillStyle = stroke.color;
-              ctx.globalAlpha = stroke.life * 0.5;
-              ctx.beginPath();
-              ctx.arc(stroke.x, stroke.y, stroke.size, 0, Math.PI * 2);
-              ctx.fill();
-            }
-            
-            ctx.globalAlpha = 1;
-            requestAnimationFrame(animate);
-          }
-          
-          animate();
-          
-          window.addEventListener('resize', () => {
-            canvas.width = window.innerWidth;
-            canvas.height = window.innerHeight;
-          });
-        })();
-      `}</script>
     </ThemeProvider>
   );
 }