feat: add educatuion section

app/about/(education)/education.jsx

@@ -0,0 +1,159 @@
+import Image from "next/image";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faMedal } from "@fortawesome/free-solid-svg-icons";
+
+import Me4 from "@/public/img/me4.jpeg";
+
+export default function Education() {
+	return (
+		<section className="grid gap-8 md:gap-12">
+			<div className="text-center space-y-2">
+				<h1 className="text-3xl md:text-4xl font-bold tracking-tighter">
+					Education
+				</h1>
+				<p className="text-muted-foreground max-w-[800px] mx-auto">
+					Get to know more about my educational background.
+				</p>
+			</div>
+			<div className="grid gap-8 md:gap-12">
+				<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+					<div className="px-5">
+						<div className="font-medium text-lg">
+							2022 - Present
+						</div>
+						<div>
+							<h2 className="font-semibold text-xl">
+								Universitas Negeri Malang
+							</h2>
+							<h3 className="text-md font-normal mb-3">
+								S1 Teknik Informatika | Computer Science
+							</h3>
+							<div className="grid gap-4 mb-4 grayscale hover:grayscale-0 transition-all ease duration-300">
+								<Image
+									src={Me4}
+									width={400}
+									height={225}
+									alt="University"
+									className="rounded-lg"
+									style={{
+										aspectRatio: "16/9",
+										objectFit: "cover",
+										width: "100%",
+									}}
+								/>
+							</div>
+							<div className="flex items-center gap-2">
+								<p className="text-justify">
+									Aspiring to be a software engineer, I am
+									currently pursuing a bachelor&rsquo;s degree
+									in computer science at Universitas Negeri
+									Malang. Fascinated by the world of
+									technology, I am eager to learn and explore
+									new things in the field of computer science.
+								</p>
+							</div>
+							{/* add gpa in a style */}
+							<div className="flex flex-wrap gap-2 mt-4 text-sm">
+								<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
+									GPA: 3.9 out of 4
+								</div>
+							</div>
+						</div>
+					</div>
+					<div className="flex flex-col justify-start ">
+            <h2 className="font-semibold text-xl mt-7">
+              Achievements
+            </h2>
+            <p className="text-md font-normal mb-3 md:mb-12">
+              Some of my achievements during my study.
+            </p>
+						<div className="flex items-center gap-4 mb-4">
+							<div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground">
+								<FontAwesomeIcon
+									icon={faMedal}
+									className="text-white h-5 w-5"
+								/>
+							</div>
+							<div>
+								<h3 className="font-medium">
+									3rd place (Bronze Medal)
+								</h3>
+								<p className="text-sm">
+									Student Digital Innovation Competition | Jun
+									2024
+								</p>
+							</div>
+						</div>
+						<div className="flex items-center gap-4 mb-4">
+							<div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground">
+								<FontAwesomeIcon
+									icon={faMedal}
+									className="text-white h-5 w-5"
+								/>
+							</div>
+							<div>
+								<h3 className="font-medium">
+									3rd place (Bronze Medal)
+								</h3>
+								<p className="text-sm">
+									Fesmaro UI/UX Design | Jun
+									2024
+								</p>
+							</div>
+						</div>
+						<div className="flex items-center gap-4 mb-5">
+							<div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground">
+								<FontAwesomeIcon
+									icon={faMedal}
+									className="text-white h-5 w-5"
+								/>
+							</div>
+							<div>
+								<h3 className="font-medium">Finalist</h3>
+								<p className="text-sm">
+									National Student Science Week | Nov 2023
+								</p>
+							</div>
+						</div>
+						<div className="flex items-center gap-4 mb-5">
+							<div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground">
+								<FontAwesomeIcon
+									icon={faMedal}
+									className="text-white h-5 w-5"
+								/>
+							</div>
+							<div>
+								<h3 className="font-medium">
+									3rd place (Bronze Medal)
+								</h3>
+								<p className="text-sm">
+									FORKAFEST 3.0 Web Development competition | Jan 2023
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+	);
+}
+
+function GraduationCapIcon(props) {
+	return (
+		<svg
+			{...props}
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth="2"
+			strokeLinecap="round"
+			strokeLinejoin="round">
+			<path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z" />
+			<path d="M22 10v6" />
+			<path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5" />
+		</svg>
+	);
+}

app/about/(skills)/skills.jsx

@@ -6,8 +6,7 @@ export default function Skills() {
 					Skills and Expertise
 				</h2>
 				<p className="text-muted-foreground max-w-[800px] mx-auto">
-					Explore the web development, AI development, and design
+					Explore some skills I&apos;m proficient in to deliver high-quality
-					skills I&apos;m proficient in to deliver high-quality
 					solutions.
 				</p>
 			</div>
@@ -148,26 +147,6 @@ function ComputerIcon(props) {
 	);
 }
 
-function GraduationCapIcon(props) {
-	return (
-		<svg
-			{...props}
-			xmlns="http://www.w3.org/2000/svg"
-			width="24"
-			height="24"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			strokeWidth="2"
-			strokeLinecap="round"
-			strokeLinejoin="round">
-			<path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z" />
-			<path d="M22 10v6" />
-			<path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5" />
-		</svg>
-	);
-}
-
 function PackageIcon(props) {
 	return (
 		<svg

app/about/page.jsx

@@ -13,6 +13,7 @@ import Skills from "./(skills)/skills.jsx";
 import Tools from "./(skills)/tools.jsx";
 import Stack from "./(skills)/stack.jsx";
 import Experience from "./(experience)/experience.jsx";
+import Education from "./(education)/education.jsx";
 
 // images
 import Me1 from "@/public/img/me1.jpg";
@@ -272,6 +273,8 @@ export default function Page() {
 						<Tools />
 					</motion.div>
 				</div>
+
+				{/* experience */}
 				<div className="mt-16 flex flex-col justify-start items-center w-full pl-10 md:pl-32">
 					<div className="flex justify-center items-center flex-col my-5 self-start ">
 						<motion.div
@@ -304,8 +307,6 @@ export default function Page() {
 
 								type: "spring",
 							}}></motion.div>
-
-						{/* experience */}
 						<motion.h1
 							className="text-3xl font-bold mt-3"
 							initial={{
@@ -321,7 +322,7 @@ export default function Page() {
 
 								type: "spring",
 							}}>
-							Experience
+							Profesional Experience
 						</motion.h1>
 					</div>
 				</div>
@@ -346,6 +347,27 @@ export default function Page() {
 					</motion.div>
 				</div>
 
+				{/* Education */}
+				<div className="w-screen mx-auto container gap-10 p-10 grid grid-cols-1  my-10 ">
+					<motion.div
+						className="flex justify-center items-start flex-col mb-5 "
+						initial={{
+							opacity: 0,
+							x: -200,
+						}}
+						whileInView={{
+							opacity: 1,
+							x: 0,
+						}}
+						transition={{
+							delay: 0.5,
+
+							type: "spring",
+						}}>
+						<Education />
+					</motion.div>
+				</div>
+
 				<div className="min-h-[80vh] w-screen mx-auto container  p-10 grid grid-cols-1 mt-10 ">
 					<motion.div
 						className="flex justify-center items-center flex-col mb-5 "