refactor: separating each section of pages in about

app/about/components/skills/tools.jsx

@@ -1,6 +1,22 @@
+import { motion } from "framer-motion";
+
 export default function Tools() {
 	return (
-		<>
+		<motion.div
+			className="flex justify-start items-center flex-col mb-5 "
+			initial={{
+				opacity: 0,
+				x: 200,
+			}}
+			whileInView={{
+				opacity: 1,
+				x: 0,
+			}}
+			transition={{
+				delay: 0.6,
+
+				type: "spring",
+			}}>
 			<h2 className="text-2xl md:text-xl font-normal mb-3 md:tracking-[.3rem] lg:tracking-[.5rem] uppercase">
 				Tools
 			</h2>
@@ -21,6 +37,6 @@ export default function Tools() {
 				</span>{" "}
 				|{" "}
 			</p>
-		</>
+		</motion.div>
 	);
 }