Merge pull request #1 from La-404-Devinci/projects-animation

add: forum associatif project + projects animation with framer motion

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
+    "framer-motion": "^11.7.0",
     "next": "14.2.13",
     "react": "^18",
     "react-dom": "^18",

src/components/project.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import cn from "@/utils/function";
+import { motion } from "framer-motion";
+import Image from "next/image";
+import { useState } from "react";
+
+interface ProjectProps {
+  project: {
+    name: string;
+    date: string;
+    image: string;
+  };
+  index: number;
+}
+
+const anim = {
+  initial: {width: 0},
+  open: {width: "auto", transition: {duration: 0.4, ease: [0.23, 1, 0.32, 1]}},
+  closed: {width: 0}
+}
+
+const Project = ({ project, index }: ProjectProps) => {
+
+  const [isActive, setIsActive] = useState(false);
+
+  return ( 
+    <div 
+      key={`project:${index}`}
+      className={cn(
+        "h-40 flex items-center justify-between p-8",
+        index === 0 
+          ? "border-t border-b border-gray-800" 
+          : "border-b border-gray-800"
+      )}
+      onMouseEnter={() => {setIsActive(true)}}
+      onMouseLeave={() => {setIsActive(false)}}
+    >
+      <div className="flex items-center gap-8 justify-center">
+        <h3 className="text-6xl text-gray-50 font-medium">{project.name}</h3>
+        <motion.div 
+          variants={anim} 
+          animate={isActive ? "open" : "closed"}
+          className="overflow-hidden origin-center flex justify-center"
+        >
+          <Image
+            src={`/img/${project.image}`}
+            alt={project.name}
+            width={0}
+            height={0}
+            sizes="208px"
+            className="w-52 max-w-none"
+          />
+        </motion.div>
+      </div>
+      <p className="text-gray-400">{project.date}</p>
+    </div>
+   );
+}
+
+export default Project;

src/components/sections/projects.tsx

@@ -1,14 +1,21 @@
 import { gasoekOne } from "@/app/font";
-import cn from "@/utils/function";
+import Project from "../project";
 
 const projects = [
   {
     "name": "Pixel War",
     "date": "2023-2024",
+    "image": "pixelwar.png",
   },
   {
     "name": "Hacker's Journey",
     "date": "2023-2024",
+    "image": "hackerjourney.png",
+  },
+  {
+    "name": "Forum Associatif",
+    "date": "2023-2024",
+    "image": "forumassociatif.png",
   },
 ]
 
@@ -20,18 +27,7 @@ const ProjectsSection = () => {
       </h2>
       <div className="flex flex-col w-full">
         {projects.map((project, index) => (
-          <div 
-            key={`project:${index}`}
-            className={cn(
-              "h-40 flex items-center justify-between p-8",
-              index === 0 
-                ? "border-t border-b border-gray-800" 
-                : "border-b border-gray-800"
-            )}
-          >
-            <h3 className="text-6xl text-gray-50 font-medium">{project.name}</h3>
-            <p className="text-gray-400">{project.date}</p>
-          </div>
+          <Project key={`project:${index}`}  project={project} index={index} />
         ))}
       </div>
     </div>