From a5adcf4553ac5d1c72256749c8582046088623a1 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 4 Mar 2026 01:57:23 +0000
Subject: [PATCH 1/5] Update src/app/about/page.tsx

---
 src/app/about/page.tsx | 211 ++++++++++++++++++++++++++++++++++++++---
 1 file changed, 198 insertions(+), 13 deletions(-)

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 02dfedc..c028a77 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -19,8 +19,7 @@ export default function AboutPage() {
 
   const footerColumns = [
     {
-      title: "Navigation",
-      items: [
+      title: "Navigation",      items: [
         { label: "Home", href: "/" },
         { label: "Projects", href: "/projects" },
         { label: "Vision", href: "/about" },
@@ -28,8 +27,7 @@ export default function AboutPage() {
       ],
     },
     {
-      title: "Connect",
-      items: [
+      title: "Connect",      items: [
         { label: "Twitter", href: "https://twitter.com" },
         { label: "LinkedIn", href: "https://linkedin.com" },
         { label: "Instagram", href: "https://instagram.com" },
@@ -37,8 +35,7 @@ export default function AboutPage() {
       ],
     },
     {
-      title: "Resources",
-      items: [
+      title: "Resources",      items: [
         { label: "Newsletter", href: "#" },
         { label: "Blog", href: "/writing" },
         { label: "Privacy", href: "#" },
@@ -60,6 +57,76 @@ export default function AboutPage() {
       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}
@@ -69,13 +136,28 @@ export default function AboutPage() {
         />
       </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="about-vision" data-section="about-vision">
         <TextSplitAbout
           title="Vision & Creative Philosophy"
           description={[
-            "My journey has been defined by a commitment to intentional design—creating visual narratives that respect the viewer's intelligence and imagination. I believe that every design decision should serve a purpose, whether functional or emotional, creating experiences that resonate deeply and leave lasting impressions.",
-            "I draw inspiration from film aesthetics, the elegance of vintage typography, and the power of minimalist principles. These influences guide my approach to creating digital experiences that feel deliberately crafted, inviting audiences to pause, reflect, and engage meaningfully with ideas and stories that matter.",
-          ]}
+            "My journey has been defined by a commitment to intentional design—creating visual narratives that respect the viewer's intelligence and imagination. I believe that every design decision should serve a purpose, whether functional or emotional, creating experiences that resonate deeply and leave lasting impressions.",            "I draw inspiration from film aesthetics, the elegance of vintage typography, and the power of minimalist principles. These influences guide my approach to creating digital experiences that feel deliberately crafted, inviting audiences to pause, reflect, and engage meaningfully with ideas and stories that matter."]}
           useInvertedBackground={false}
           showBorder={true}
           buttons={[{ text: "Explore My Work", href: "/projects" }]}
@@ -83,6 +165,21 @@ export default function AboutPage() {
         />
       </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"
+        />
+      </svg>
+
       <div id="testimonial-about" data-section="testimonial-about">
         <TestimonialCardFifteen
           testimonial="What sets this creative professional apart is their ability to synthesize complex ideas into elegant, intentional solutions. Their work demonstrates deep understanding of both form and function, creating experiences that feel both timeless and contemporary."
@@ -90,9 +187,7 @@ export default function AboutPage() {
           author="Brand Strategist, Creative Agency"
           avatars={[
             {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5BwcOCEdbUvGXGzmfDl4faxC/uploaded-1772588138755-nsxcu3nt.png",
-              alt: "Industry colleague",
-            },
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5BwcOCEdbUvGXGzmfDl4faxC/uploaded-1772588138755-nsxcu3nt.png",              alt: "Industry colleague"},
           ]}
           ratingAnimation="blur-reveal"
           avatarsAnimation="blur-reveal"
@@ -100,6 +195,23 @@ export default function AboutPage() {
         />
       </div>
 
+      <svg
+        style={{
+          position: "absolute",          top: "1000px",          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="connect-channels" data-section="connect-channels">
         <SocialProofOne
           title="Let's Connect"
@@ -118,6 +230,79 @@ export default function AboutPage() {
           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>
   );
-}
\ No newline at end of file
+}
-- 
2.49.1


From aeda16098aa54f35f75e6e0906bd9f7d1a0ee8ee Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 4 Mar 2026 01:57:24 +0000
Subject: [PATCH 2/5] Update src/app/contact/page.tsx

---
 src/app/contact/page.tsx | 207 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 197 insertions(+), 10 deletions(-)

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 169264e..0efd9c1 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -19,8 +19,7 @@ export default function ContactPage() {
 
   const footerColumns = [
     {
-      title: "Navigation",
-      items: [
+      title: "Navigation",      items: [
         { label: "Home", href: "/" },
         { label: "Projects", href: "/projects" },
         { label: "Vision", href: "/about" },
@@ -28,8 +27,7 @@ export default function ContactPage() {
       ],
     },
     {
-      title: "Connect",
-      items: [
+      title: "Connect",      items: [
         { label: "Twitter", href: "https://twitter.com" },
         { label: "LinkedIn", href: "https://linkedin.com" },
         { label: "Instagram", href: "https://instagram.com" },
@@ -37,8 +35,7 @@ export default function ContactPage() {
       ],
     },
     {
-      title: "Resources",
-      items: [
+      title: "Resources",      items: [
         { label: "Newsletter", href: "#" },
         { label: "Blog", href: "/writing" },
         { label: "Privacy", href: "#" },
@@ -60,6 +57,76 @@ export default function ContactPage() {
       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}
@@ -69,6 +136,23 @@ export default function ContactPage() {
         />
       </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="contact-main" data-section="contact-main">
         <ContactCTA
           tag="Let's Collaborate"
@@ -84,6 +168,21 @@ export default function ContactPage() {
         />
       </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"
+        />
+      </svg>
+
       <div id="contact-methods" data-section="contact-methods">
         <SocialProofOne
           title="Connect Through Your Preferred Channel"
@@ -96,6 +195,23 @@ export default function ContactPage() {
         />
       </div>
 
+      <svg
+        style={{
+          position: "absolute",          top: "1000px",          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="contact-testimonial" data-section="contact-testimonial">
         <TestimonialCardFifteen
           testimonial="Reaching out was the best decision we made. The creative process was collaborative, transparent, and incredibly rewarding. Highly recommended for anyone serious about exceptional design."
@@ -103,9 +219,7 @@ export default function ContactPage() {
           author="Client, Collaborative Project"
           avatars={[
             {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5BwcOCEdbUvGXGzmfDl4faxC/uploaded-1772588138755-nsxcu3nt.png",
-              alt: "Happy client",
-            },
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5BwcOCEdbUvGXGzmfDl4faxC/uploaded-1772588138755-nsxcu3nt.png",              alt: "Happy client"},
           ]}
           ratingAnimation="blur-reveal"
           avatarsAnimation="blur-reveal"
@@ -119,6 +233,79 @@ export default function ContactPage() {
           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>
   );
-}
\ No newline at end of file
+}
-- 
2.49.1


From 900060b549861d0b7378ae3a06fc40abdb5c5cdf Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 4 Mar 2026 01:57:24 +0000
Subject: [PATCH 3/5] Update src/app/layout.tsx

---
 src/app/layout.tsx | 31 ++++++++-----------------------
 1 file changed, 8 insertions(+), 23 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 387b99f..4611629 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -6,40 +6,25 @@ import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
 
 const inter = Inter({
-  variable: "--font-inter",
-  subsets: ["latin"],
+  variable: "--font-inter",  subsets: ["latin"],
 });
 
 const openSans = Open_Sans({
-  variable: "--font-open-sans",
-  subsets: ["latin"],
+  variable: "--font-open-sans",  subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: "Building Ideas Into Reality | Creative Portfolio",
-  description: "A collection of projects, thoughts, and creative vision. Explore work across design, digital experience, and strategic direction.",
-  keywords: "portfolio, creative design, digital experience, brand strategy, visual storytelling",
-  metadataBase: new URL("https://portfolio.example.com"),
+  title: "Building Ideas Into Reality | Creative Portfolio",  description: "A collection of projects, thoughts, and creative vision. Explore work across design, digital experience, and strategic direction.",  keywords: "portfolio, creative design, digital experience, brand strategy, visual storytelling",  metadataBase: new URL("https://portfolio.example.com"),
   alternates: {
-    canonical: "https://portfolio.example.com",
-  },
+    canonical: "https://portfolio.example.com"},
   openGraph: {
-    title: "Building Ideas Into Reality",
-    description: "Creative portfolio showcasing intentional design and strategic vision.",
-    type: "website",
-    siteName: "Portfolio",
-    images: [
+    title: "Building Ideas Into Reality",    description: "Creative portfolio showcasing intentional design and strategic vision.",    type: "website",    siteName: "Portfolio",    images: [
       {
-        url: "http://img.b2bpic.net/free-psd/acting-agency-template-landing-page_23-2148797778.jpg",
-        alt: "Portfolio showcase",
-      },
+        url: "http://img.b2bpic.net/free-psd/acting-agency-template-landing-page_23-2148797778.jpg",        alt: "Portfolio showcase"},
     ],
   },
   twitter: {
-    card: "summary_large_image",
-    title: "Building Ideas Into Reality",
-    description: "Creative portfolio with intentional design and vision.",
-    images: ["http://img.b2bpic.net/free-psd/acting-agency-template-landing-page_23-2148797778.jpg"],
+    card: "summary_large_image",    title: "Building Ideas Into Reality",    description: "Creative portfolio with intentional design and vision.",    images: ["http://img.b2bpic.net/free-psd/acting-agency-template-landing-page_23-2148797778.jpg"],
   },
 };
 
@@ -1427,4 +1412,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
\ No newline at end of file
+}
-- 
2.49.1


From 0d1c6d372086b6dccf5b9859947d7437173f358e Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 4 Mar 2026 01:57:25 +0000
Subject: [PATCH 4/5] Update src/app/page.tsx

---
 src/app/page.tsx | 373 ++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 291 insertions(+), 82 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4a3c54f..9569756 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -22,8 +22,7 @@ export default function HomePage() {
 
   const footerColumns = [
     {
-      title: "Navigation",
-      items: [
+      title: "Navigation",      items: [
         { label: "Home", href: "/" },
         { label: "Projects", href: "/projects" },
         { label: "Vision", href: "/about" },
@@ -31,8 +30,7 @@ export default function HomePage() {
       ],
     },
     {
-      title: "Connect",
-      items: [
+      title: "Connect",      items: [
         { label: "Twitter", href: "https://twitter.com" },
         { label: "LinkedIn", href: "https://linkedin.com" },
         { label: "Instagram", href: "https://instagram.com" },
@@ -40,8 +38,7 @@ export default function HomePage() {
       ],
     },
     {
-      title: "Resources",
-      items: [
+      title: "Resources",      items: [
         { label: "Newsletter", href: "#" },
         { label: "Blog", href: "/writing" },
         { label: "Privacy", href: "#" },
@@ -63,6 +60,76 @@ 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}
@@ -72,41 +139,69 @@ export default function HomePage() {
         />
       </div>
 
-      <div id="hero" data-section="hero">
-        <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
+        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"
+        />
+      </svg>
+
       <div id="about" data-section="about">
         <TextSplitAbout
           title="About My Vision"
           description={[
-            "I believe in intentional design that bridges creativity and purpose. Every project is an opportunity to explore the intersection of aesthetic sophistication and clear communication.",
-            "My work draws inspiration from film aesthetics, vintage typography, and minimalist principles. I create digital experiences that feel thoughtfully crafted, inviting audiences to engage deeply with ideas and stories.",
-          ]}
+            "I believe in intentional design that bridges creativity and purpose. Every project is an opportunity to explore the intersection of aesthetic sophistication and clear communication.",            "My work draws inspiration from film aesthetics, vintage typography, and minimalist principles. I create digital experiences that feel thoughtfully crafted, inviting audiences to engage deeply with ideas and stories."]}
           useInvertedBackground={true}
           showBorder={true}
           buttons={[{ text: "View Full Story", href: "/about" }]}
@@ -114,53 +209,66 @@ export default function HomePage() {
         />
       </div>
 
-      <div id="projects" data-section="projects">
-        <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
+        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"
+        />
+      </svg>
+
       <div id="testimonial" data-section="testimonial">
         <TestimonialCardFifteen
           testimonial="An exceptional creative mind who transforms complex ideas into visually compelling narratives. Working with them elevated our entire brand presence."
@@ -168,9 +276,7 @@ export default function HomePage() {
           author="Creative Director, Strategic Brand Partners"
           avatars={[
             {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5BwcOCEdbUvGXGzmfDl4faxC/uploaded-1772588138755-nsxcu3nt.png",
-              alt: "Creative collaborator",
-            },
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5BwcOCEdbUvGXGzmfDl4faxC/uploaded-1772588138755-nsxcu3nt.png",              alt: "Creative collaborator"},
           ]}
           ratingAnimation="blur-reveal"
           avatarsAnimation="blur-reveal"
@@ -178,6 +284,21 @@ 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"
@@ -190,6 +311,21 @@ 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"
@@ -211,6 +347,79 @@ 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>
   );
-}
\ No newline at end of file
+}
-- 
2.49.1


From d0d9539549189765ffc285cacae5c4e474b6c429 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 4 Mar 2026 01:57:26 +0000
Subject: [PATCH 5/5] Update src/app/projects/page.tsx

---
 src/app/projects/page.tsx | 274 ++++++++++++++++++++++++++++++--------
 1 file changed, 221 insertions(+), 53 deletions(-)

diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
index 61d5442..ee447bb 100644
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@@ -19,8 +19,7 @@ export default function ProjectsPage() {
 
   const footerColumns = [
     {
-      title: "Navigation",
-      items: [
+      title: "Navigation",      items: [
         { label: "Home", href: "/" },
         { label: "Projects", href: "/projects" },
         { label: "Vision", href: "/about" },
@@ -28,8 +27,7 @@ export default function ProjectsPage() {
       ],
     },
     {
-      title: "Connect",
-      items: [
+      title: "Connect",      items: [
         { label: "Twitter", href: "https://twitter.com" },
         { label: "LinkedIn", href: "https://linkedin.com" },
         { label: "Instagram", href: "https://instagram.com" },
@@ -37,8 +35,7 @@ export default function ProjectsPage() {
       ],
     },
     {
-      title: "Resources",
-      items: [
+      title: "Resources",      items: [
         { label: "Newsletter", href: "#" },
         { label: "Blog", href: "/writing" },
         { label: "Privacy", href: "#" },
@@ -60,6 +57,76 @@ export default function ProjectsPage() {
       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}
@@ -69,52 +136,65 @@ export default function ProjectsPage() {
         />
       </div>
 
-      <div id="projects-gallery" data-section="projects-gallery">
-        <ProductCardTwo
-          title="Complete Project Gallery"
-          description="Comprehensive collection of work spanning design, branding, digital experience, and strategic direction. Each project represents intentional creative vision and meticulous execution."
-          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=2",
-              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=2",
-              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=2",
-              imageAlt: "Creative direction project",
-            },
-          ]}
-          carouselMode="buttons"
-          tag="Portfolio Showcase"
-          tagAnimation="blur-reveal"
+      <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="projects-gallery" data-section="projects-gallery">
+        <div className="tilt-media">
+          <ProductCardTwo
+            title="Complete Project Gallery"
+            description="Comprehensive collection of work spanning design, branding, digital experience, and strategic direction. Each project represents intentional creative vision and meticulous execution."
+            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=2",                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=2",                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=2",                imageAlt: "Creative direction project"},
+            ]}
+            carouselMode="buttons"
+            tag="Portfolio Showcase"
+            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"
+        />
+      </svg>
+
       <div id="testimonial-projects" data-section="testimonial-projects">
         <TestimonialCardFifteen
           testimonial="Working on these projects revealed an exceptional ability to translate complex briefs into elegant, compelling visual solutions that exceeded our expectations."
@@ -122,9 +202,7 @@ export default function ProjectsPage() {
           author="Project Director, Design Studio"
           avatars={[
             {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5BwcOCEdbUvGXGzmfDl4faxC/uploaded-1772588138755-nsxcu3nt.png",
-              alt: "Project collaborator",
-            },
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5BwcOCEdbUvGXGzmfDl4faxC/uploaded-1772588138755-nsxcu3nt.png",              alt: "Project collaborator"},
           ]}
           ratingAnimation="blur-reveal"
           avatarsAnimation="blur-reveal"
@@ -132,6 +210,23 @@ export default function ProjectsPage() {
         />
       </div>
 
+      <svg
+        style={{
+          position: "absolute",          top: "1000px",          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-cta" data-section="projects-cta">
         <ContactCTA
           tag="Start Your Project"
@@ -153,6 +248,79 @@ export default function ProjectsPage() {
           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>
   );
-}
\ No newline at end of file
+}
-- 
2.49.1