New Commits

app/page.tsx

@@ -1,3 +1,4 @@
+import { StickyScrollRevealDemo } from "@/components/CertificationCall";
 import Grid from "@/components/Grid";
 import Hero from "@/components/Hero";
 import { CardHoverEffectDemo } from "@/components/HoverEffect";
@@ -25,6 +26,7 @@ export default function Home() {
         <TabsDemo />
         <RecentProjects />
         <CardHoverEffectDemo />
+        <StickyScrollRevealDemo />
       </div>
     </main>
   );

components/CertificationCall.tsx

@@ -0,0 +1,81 @@
+"use client";
+import React from "react";
+import { StickyScroll } from "./ui/sticky-scroll-reveal";
+import Image from "next/image";
+
+const content = [
+  {
+    title: "SQL Advanced HackerRank",
+    description:
+      "Work together in real time with your team, clients, and stakeholders. Collaborate on documents, share ideas, and make decisions quickly. With our platform, you can streamline your workflow and increase productivity.",
+    content: (
+      <div className="h-full w-full bg-[linear-gradient(to_bottom_right,var(--cyan-500),var(--emerald-500))] flex items-center justify-center text-white">
+        <Image
+          src="/hackerrank.png"
+          width={300}
+          height={300}
+          className="h-full w-full object-cover"
+          alt="linear board demo"
+        />
+      </div>
+    ),
+  },
+  {
+    title: "Google Analytics Certification",
+    description:
+      "See changes as they happen. With our platform, you can track every modification in real time. No more confusion about the latest version of your project. Say goodbye to the chaos of version control and embrace the simplicity of real-time updates.",
+    content: (
+      <div className="h-full w-full  flex items-center justify-center text-white">
+        <Image
+          src="/googleAnalytics.png"
+          width={300}
+          height={300}
+          className="h-full w-full object-cover"
+          alt="Google Analytics Certification"
+        />
+      </div>
+    ),
+  },
+  {
+    title: "MongoDB for SQL Experts",
+    description:
+      "Experience real-time updates and never stress about version control again. Our platform ensures that you're always working on the most recent version of your project, eliminating the need for constant manual updates. Stay in the loop, keep your team aligned, and maintain the flow of your work without any interruptions.",
+    content: (
+      <div className="h-full w-full bg-[linear-gradient(to_bottom_right,var(--orange-500),var(--yellow-500))] flex items-center justify-center text-white">
+        <Image
+          src="/mongodb.png"
+          width={300}
+          height={300}
+          className="h-full w-full object-cover"
+          alt="Google Analytics Certification"
+        />
+      </div>
+    ),
+  },
+  {
+    title: "Entrepreneurship Foundations",
+    description:
+      "Experience real-time updates and never stress about version control again. Our platform ensures that you're always working on the most recent version of your project, eliminating the need for constant manual updates. Stay in the loop, keep your team aligned, and maintain the flow of your work without any interruptions.",
+    content: (
+      <div className="h-full w-full bg-[linear-gradient(to_bottom_right,var(--cyan-500),var(--emerald-500))] flex items-center justify-center text-white">
+        <Image
+          src="/linkedin.png"
+          width={300}
+          height={300}
+          className="h-full w-full object-cover"
+          alt="Google Analytics Certification"
+        />
+      </div>
+    ),
+  },
+];
+export function StickyScrollRevealDemo() {
+  return (
+    <div className="p-10">
+      <h1 className="heading mb-16">
+        My <span className="text-purple">Certification</span>
+      </h1>
+      <StickyScroll content={content} />
+    </div>
+  );
+}

components/ui/sticky-scroll-reveal.tsx

@@ -0,0 +1,114 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import { useMotionValueEvent, useScroll } from "framer-motion";
+import { motion } from "framer-motion";
+import { cn } from "@/utils/cn";
+
+export const StickyScroll = ({
+  content,
+  contentClassName,
+}: {
+  content: {
+    title: string;
+    description: string;
+    content?: React.ReactNode | any;
+  }[];
+  contentClassName?: string;
+}) => {
+  const [activeCard, setActiveCard] = React.useState(0);
+  const ref = useRef<any>(null);
+  const { scrollYProgress } = useScroll({
+    container: ref,
+    offset: ["start start", "end start"],
+  });
+  const cardLength = content.length;
+
+  useMotionValueEvent(scrollYProgress, "change", (latest) => {
+    const cardsBreakpoints = content.map((_, index) => index / cardLength);
+    const closestBreakpointIndex = cardsBreakpoints.reduce(
+      (acc, breakpoint, index) => {
+        const distance = Math.abs(latest - breakpoint);
+        if (distance < Math.abs(latest - cardsBreakpoints[acc])) {
+          return index;
+        }
+        return acc;
+      },
+      0
+    );
+    setActiveCard(closestBreakpointIndex);
+  });
+
+  const backgroundColors = [
+    "var(--slate-900)",
+    "var(--black)",
+    "var(--neutral-900)",
+  ];
+  const linearGradients = [
+    "linear-gradient(to bottom right, var(--cyan-500), var(--emerald-500))",
+    "linear-gradient(to bottom right, var(--pink-500), var(--indigo-500))",
+    "linear-gradient(to bottom right, var(--orange-500), var(--yellow-500))",
+  ];
+
+  const [backgroundGradient, setBackgroundGradient] = useState(
+    linearGradients[0]
+  );
+
+  useEffect(() => {
+    setBackgroundGradient(linearGradients[activeCard % linearGradients.length]);
+  }, [activeCard]);
+
+  return (
+    <motion.div
+      animate={{
+        backgroundColor: backgroundColors[activeCard % backgroundColors.length],
+      }}
+      className="h-[30rem] w-[100%] overflow-y-auto flex justify-center relative text-justify space-x-3 rounded-[10px] p-10"
+      ref={ref}
+      style={{
+        scrollbarWidth: "thin",
+        scrollbarColor: "#63686e #000",
+      }}
+    >
+      <div className="div relative flex items-start px-4">
+        <div className="max-w-7xl">
+          {content.map((item, index) => (
+            <div key={item.title + index} className="my-20">
+              <motion.h2
+                initial={{
+                  opacity: 0,
+                }}
+                animate={{
+                  opacity: activeCard === index ? 1 : 0.3,
+                }}
+                className="text-2xl font-bold text-slate-100"
+              >
+                {item.title}
+              </motion.h2>
+              <motion.p
+                initial={{
+                  opacity: 0,
+                }}
+                animate={{
+                  opacity: activeCard === index ? 1 : 0.3,
+                }}
+                className="text-kg text-slate-300 max-w-sm mt-10"
+              >
+                {item.description}
+              </motion.p>
+            </div>
+          ))}
+          <div className="h-40" />
+        </div>
+      </div>
+      <div
+        style={{ background: backgroundGradient }}
+        className={cn(
+          "hidden lg:block h-60 w-80 rounded-md bg-white sticky top-10 overflow-hidden",
+          contentClassName
+        )}
+      >
+        {content[activeCard].content ?? null}
+      </div>
+    </motion.div>
+  );
+};