feat: add animation to buttons

app/projects/page.jsx

@@ -227,7 +227,19 @@ export default function Page() {
 				</div>
 
 				{/* choose category */}
-				<div className="flex flex-row justify-center items-start flex-wrap gap-3 md:gap-5 my-5">
+				<motion.div
+					initial={{
+						opacity: 0,
+						x: 200,
+					}}
+					whileInView={{
+						opacity: 1,
+						x: 0,
+					}}
+					transition={{
+						type: "spring",
+					}}
+					className="flex flex-row justify-center items-start flex-wrap gap-3 md:gap-5 my-5">
 					{Object.keys(category).map((key, index) => (
 						<div
 							key={index}
@@ -236,16 +248,11 @@ export default function Page() {
 									? "bg-gray-300 text-black hover:bg-gray-700 hover:text-white"
 									: "bg-gray-700 text-white hover:bg-gray-300 hover:text-black"
 							}`}
-							onClick={() =>
+							onClick={() => setActiveCategory(key)}>
-								setActiveCategory(
-									key,
-									console.log(key, activeCategory)
-								)
-							}>
 							{category[key]}
 						</div>
 					))}
-				</div>
+				</motion.div>
 
 				{/* projects */}
 				<div className="w-screen mx-auto container gap-4 px-10 grid grid-cols-1 md:grid-cols-2 mb-10 cursor-pointer">
@@ -258,11 +265,18 @@ export default function Page() {
 					))}
 				</div>
 				{/* view in archive btn */}
-				<div className="flex justify-center items-center flex-col my-5 self-start ">
+				<motion.div
+					initial={{
+						opacity: 0,
+					}}
+					whileInView={{
+						opacity: 1,
+					}}
+					className="flex justify-center items-center flex-col my-5 self-start ">
 					<Button variation="primary">
 						<Link href="projects/archive">View In Archive</Link>
 					</Button>
-				</div>
+				</motion.div>
 			</main>
 		</>
 	);