feat: create a project card with framer-motion animation to showcase project details

Author: thekiranmahajan

src/components/ProjectCard.jsx

@@ -0,0 +1,80 @@
+import { useRef } from "react";
+import {
+  motion,
+  useMotionTemplate,
+  useMotionValue,
+  useSpring,
+} from "motion/react";
+
+const ROTATION_RANGE = 18;
+const HALF_ROTATION_RANGE = ROTATION_RANGE / 2;
+
+const ProjectCard = () => {
+  const ref = useRef(null);
+
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+
+  const xSpring = useSpring(x);
+  const ySpring = useSpring(y);
+
+  const transform = useMotionTemplate`rotateX(${xSpring}deg) rotateY(${ySpring}deg)`;
+
+  const handleMouseMove = (e) => {
+    if (!ref.current) return [0, 0];
+
+    const rect = ref.current.getBoundingClientRect();
+
+    const width = rect.width;
+    const height = rect.height;
+
+    const mouseX = (e.clientX - rect.left) * ROTATION_RANGE;
+    const mouseY = (e.clientY - rect.top) * ROTATION_RANGE;
+
+    const rX = (mouseY / height - HALF_ROTATION_RANGE) * -1;
+    const rY = mouseX / width - HALF_ROTATION_RANGE;
+
+    x.set(rX);
+    y.set(rY);
+  };
+
+  const handleMouseLeave = () => {
+    x.set(0);
+    y.set(0);
+  };
+
+  return (
+    <motion.div
+      ref={ref}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
+      style={{
+        transformStyle: "preserve-3d",
+        transform,
+      }}
+      className="relative h-80 w-2/5 rounded-xl bg-gradient-to-br from-light-blue to-custom-violet"
+    >
+      <div
+        style={{
+          transform: "translateZ(75px)",
+          transformStyle: "preserve-3d",
+        }}
+        className="absolute inset-4 grid place-content-center rounded-xl bg-white shadow-lg"
+      >
+        <div>
+          <img src="" alt="" />
+        </div>
+        <p
+          style={{
+            transform: "translateZ(50px)",
+          }}
+          className="text-center text-2xl font-bold"
+        >
+          Work in Progress...
+        </p>
+      </div>
+    </motion.div>
+  );
+};
+
+export default ProjectCard;

src/components/Tabs.jsx

@@ -18,7 +18,12 @@ const Tabs = ({ tabs, activeTab, setActiveTab }) => {
               layoutId="active-pill"
               className="absolute inset-0 bg-light-blue dark:bg-custom-yellow"
               style={{ borderRadius: 9999 }}
-              transition={{ type: "spring", duration: 0.6 }}
+              transition={{
+                type: "spring",
+                stiffness: 300,
+                damping: 20,
+                duration: 0.6,
+              }}
             />
           )}
 

src/components/index.js

@@ -17,3 +17,4 @@ export { default as TerminalContactForm } from "./TerminalContactForm";
 export { default as SkillBar } from "./SkillBar";
 export { default as SkillTabs } from "./SkillTabs";
 export { default as ExperienceTabs } from "./ExperienceTabs";
+export { default as ProjectCard } from "./ProjectCard";

src/sections/Projects.jsx

@@ -1,5 +1,5 @@
 import { motion } from "motion/react";
-import { SectionHeading, SectionSubHeading } from "../components";
+import { ProjectCard, SectionHeading, SectionSubHeading } from "../components";
 import useSectionInView from "../hooks/useSectionInView";
 
 const Projects = () => {
@@ -8,10 +8,16 @@ const Projects = () => {
     <motion.section
       ref={sectionRef}
       id="projects"
-      className="flex h-screen w-full flex-col items-center py-10 md:py-14 lg:w-4/5 dark:text-white"
+      className="flex min-h-screen w-full flex-col items-center py-10 md:py-14 lg:w-4/5 dark:text-white"
     >
       <SectionHeading headingText="Projects" />
       <SectionSubHeading subHeadingText="Proud Creations" />
+      <div className="container mt-10 flex h-full w-full flex-wrap items-center justify-center gap-5 p-2">
+        <ProjectCard />
+        <ProjectCard />
+        <ProjectCard />
+        <ProjectCard />
+      </div>
     </motion.section>
   );
 };