diff --git a/app/page.tsx b/app/page.tsx index 586da53..93054e3 100644 --- a/app/page.tsx +++ b/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() { + ); diff --git a/components/CertificationCall.tsx b/components/CertificationCall.tsx new file mode 100644 index 0000000..1088215 --- /dev/null +++ b/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: ( +
+ linear board demo +
+ ), + }, + { + 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: ( +
+ Google Analytics Certification +
+ ), + }, + { + 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: ( +
+ Google Analytics Certification +
+ ), + }, + { + 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: ( +
+ Google Analytics Certification +
+ ), + }, +]; +export function StickyScrollRevealDemo() { + return ( +
+

+ My Certification +

+ +
+ ); +} diff --git a/components/ui/sticky-scroll-reveal.tsx b/components/ui/sticky-scroll-reveal.tsx new file mode 100644 index 0000000..31d15ae --- /dev/null +++ b/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(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 ( + +
+
+ {content.map((item, index) => ( +
+ + {item.title} + + + {item.description} + +
+ ))} +
+
+
+
+ {content[activeCard].content ?? null} +
+ + ); +}; diff --git a/public/googleAnalytics.png b/public/googleAnalytics.png new file mode 100644 index 0000000..1e040e7 Binary files /dev/null and b/public/googleAnalytics.png differ diff --git a/public/hackerrank.png b/public/hackerrank.png new file mode 100644 index 0000000..67d51f4 Binary files /dev/null and b/public/hackerrank.png differ diff --git a/public/jsm-logo.png b/public/jsm-logo.png deleted file mode 100644 index 6907f8f..0000000 Binary files a/public/jsm-logo.png and /dev/null differ diff --git a/public/linkedin.png b/public/linkedin.png new file mode 100644 index 0000000..8d436d7 Binary files /dev/null and b/public/linkedin.png differ diff --git a/public/mongoDB.png b/public/mongoDB.png new file mode 100644 index 0000000..90ce159 Binary files /dev/null and b/public/mongoDB.png differ