feat: Portfolio section animation

app/page.tsx

@@ -332,7 +332,7 @@ export default function Web() {
         <ImageFilter />
       </section>
 
-      <section className="bg-[#0f172a] dark:bg-gray-900">
+      <section className="bg-[#0f172a] dark:bg-gray-900 md:pt-[8%] lg:pt-[5%]">
         <div className="mx-auto max-w-screen-md px-4 py-8 lg:py-16">
           <h2 className="mb-4 text-center text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-5xl">
             Contact Us

components/ImageFilter/ImageFilter.tsx

@@ -4,6 +4,7 @@ import { Button } from "components/Button/Button"
 import { useState } from "react"
 import { Image } from "./image"
 import { FilterableData } from "./FilterableData"
+import { CardBody, CardContainer, CardItem } from "components/Ui/Card"
 import { motion } from "framer-motion" // Import motion
 
 const ImageFilter = () => {
@@ -43,12 +44,16 @@ const ImageFilter = () => {
                 : "hidden" /* Hide if not matched */
             }`}
           >
-            <Image
+            <CardContainer>
-              className="h-[400px] w-full overflow-hidden rounded-lg"
+              <CardBody>
-              image={item.src}
+                <Image
-              alt={item.name}
+                  className="h-[400px] w-full overflow-hidden rounded-lg"
-              objectCover="object-cover"
+                  image={item.src}
-            />
+                  alt={item.name}
+                  objectCover="object-cover"
+                />
+              </CardBody>
+            </CardContainer>
           </motion.div>
         ))}
       </main>

components/Ui/Card.tsx

@@ -0,0 +1,125 @@
+"use client"
+
+import { cn } from "./../../utils/cn"
+import Image from "next/image"
+import React, { createContext, useState, useContext, useRef, useEffect } from "react"
+
+const MouseEnterContext = createContext<[boolean, React.Dispatch<React.SetStateAction<boolean>>] | undefined>(undefined)
+
+export const CardContainer = ({
+  children,
+  className,
+  containerClassName,
+}: {
+  children?: React.ReactNode
+  className?: string
+  containerClassName?: string
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [isMouseEntered, setIsMouseEntered] = useState(false)
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!containerRef.current) return
+    const { left, top, width, height } = containerRef.current.getBoundingClientRect()
+    const x = (e.clientX - left - width / 2) / 25
+    const y = (e.clientY - top - height / 2) / 25
+    containerRef.current.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`
+  }
+
+  const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
+    setIsMouseEntered(true)
+    if (!containerRef.current) return
+  }
+
+  const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!containerRef.current) return
+    setIsMouseEntered(false)
+    containerRef.current.style.transform = `rotateY(0deg) rotateX(0deg)`
+  }
+  return (
+    <MouseEnterContext.Provider value={[isMouseEntered, setIsMouseEntered]}>
+      <div
+        className={cn("flex items-center justify-center", containerClassName)}
+        style={{
+          perspective: "1000px",
+        }}
+      >
+        <div
+          ref={containerRef}
+          onMouseEnter={handleMouseEnter}
+          onMouseMove={handleMouseMove}
+          onMouseLeave={handleMouseLeave}
+          className={cn("relative flex items-center justify-center transition-all duration-200 ease-linear", className)}
+          style={{
+            transformStyle: "preserve-3d",
+          }}
+        >
+          {children}
+        </div>
+      </div>
+    </MouseEnterContext.Provider>
+  )
+}
+
+export const CardBody = ({ children, className }: { children: React.ReactNode; className?: string }) => {
+  return (
+    <div className={cn("h-full w-full [transform-style:preserve-3d]  [&>*]:[transform-style:preserve-3d]", className)}>
+      {children}
+    </div>
+  )
+}
+
+export const CardItem = ({
+  as: Tag = "div",
+  children,
+  className,
+  translateX = 0,
+  translateY = 0,
+  translateZ = 0,
+  rotateX = 0,
+  rotateY = 0,
+  rotateZ = 0,
+  ...rest
+}: {
+  as?: React.ElementType
+  children: React.ReactNode
+  className?: string
+  translateX?: number | string
+  translateY?: number | string
+  translateZ?: number | string
+  rotateX?: number | string
+  rotateY?: number | string
+  rotateZ?: number | string
+  [key: string]: any
+}) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const [isMouseEntered] = useMouseEnter()
+
+  useEffect(() => {
+    handleAnimations()
+  }, [isMouseEntered])
+
+  const handleAnimations = () => {
+    if (!ref.current) return
+    if (isMouseEntered) {
+      ref.current.style.transform = `translateX(${translateX}px) translateY(${translateY}px) translateZ(${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`
+    } else {
+      ref.current.style.transform = `translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)`
+    }
+  }
+
+  return (
+    <Tag ref={ref} className={cn("w-full transition duration-200 ease-linear", className)} {...rest}>
+      {children}
+    </Tag>
+  )
+}
+
+// Create a hook to use the context
+export const useMouseEnter = () => {
+  const context = useContext(MouseEnterContext)
+  if (context === undefined) {
+    throw new Error("useMouseEnter must be used within a MouseEnterProvider")
+  }
+  return context
+}