feat: split project into components

app/projects/(project-card)/index.jsx

@@ -0,0 +1,50 @@
+import Link from "next/link";
+import { motion } from "framer-motion";
+import Image from "next/image";
+export default function projectCard({project, index}) {
+  return (
+		<Link href={"projects/" + project.slug} key={index}>
+			<motion.div
+				className="z-10 relative flex justify-center items-start flex-col mb-5 md:px-10 w-full h-auto bg-gray-400 group/tes py-20 px-5 md:py-2 aspect-video "
+				initial={{
+					opacity: 0,
+					x: -200,
+				}}
+				whileInView={{
+					opacity: 1,
+					x: 0,
+				}}
+				transition={{
+					type: "spring",
+				}}>
+				{" "}
+				{/* Add relative here */}
+				<Image
+					src={project.bg.src}
+					alt="Alvalens"
+					layout="fill"
+					objectFit="cover"
+					placeholder="blur"
+					className="bg-slate-950 opacity-10  group-hover/tes:opacity-100 transition-all ease duration-500"
+					blurDataURL={project.bg.blurDataURL}
+				/>
+				<div className="absolute top-0 left-0 bg-gray-600 px-4 py-2">
+					<h4 className="text-white">{project.year}</h4>
+				</div>
+				<div className="transition-all ease duration-500 opacity-100 content text-center group-hover/tes:opacity-0 z-10">
+					<h1 className="text-3xl font-bold mb-3">{project.title}</h1>
+					<p>{project.desc}</p>
+					<div className="flex justify-center items-center flex-row mt-5 flex-wrap">
+						{project.tech.split(",").map((t, index) => (
+							<span
+								key={index}
+								className="m-1 px-4 py-2 bg-gray-600 text-white ">
+								{t}
+							</span>
+						))}
+					</div>
+				</div>
+			</motion.div>
+		</Link>
+  );
+}