Update src/app/styles/base.css

Merge version_3 into main

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>
   );
-}
+}

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>
   );
-}
+}

src/app/layout.tsx

@@ -1,45 +1,28 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import { Open_Sans } from "next/font/google";
+import { Crimson_Text } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
 
-const inter = Inter({
-  variable: "--font-inter",
-  subsets: ["latin"],
-});
-
-const openSans = Open_Sans({
-  variable: "--font-open-sans",
-  subsets: ["latin"],
+const crimsonText = Crimson_Text({
+  variable: "--font-crimson-text",  subsets: ["latin"],
+  weight: ["400", "600"],
 });
 
 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"],
   },
 };
 
@@ -52,7 +35,7 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <ServiceWrapper>
         <body
-          className={`${inter.variable} ${openSans.variable} antialiased`}
+          className={`${crimsonText.variable} antialiased`}
         >
           <Tag />
           {children}
@@ -1427,4 +1410,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

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: "#" },
@@ -82,11 +79,8 @@ export default function HomePage() {
           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",
+              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={[
@@ -104,8 +98,7 @@ export default function HomePage() {
         <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}
@@ -124,34 +117,16 @@ export default function HomePage() {
           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: "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: "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",
+              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"
@@ -168,8 +143,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"
@@ -197,8 +171,8 @@ export default function HomePage() {
           description="Whether you're exploring new creative directions, developing a project, or simply want to discuss ideas, I'd love to hear from you."
           background={{ variant: "plain" }}
           buttons={[
+            { text: "Explore My Writing", href: "#" },
             { text: "Start a Conversation", href: "/contact" },
-            { text: "Subscribe to My Writing", href: "#" },
           ]}
           buttonAnimation="blur-reveal"
           useInvertedBackground={true}
@@ -213,4 +187,4 @@ export default function HomePage() {
       </div>
     </ThemeProvider>
   );
-}
+}

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>
   );
-}
+}

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-open-sans), sans-serif;
+  font-family: var(--font-crimson-text), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-inter), sans-serif;
+  font-family: var(--font-crimson-text), sans-serif;
 }