feat: refactor experience and education

app/about/(experience)/experience.jsx

@@ -0,0 +1,105 @@
+export default function Experience() {
+	return (
+		<section className="grid gap-8 md:gap-12">
+			<div className="relative after:absolute after:inset-y-2 after:w-1 after:bg-gray-700 after:left-[-4px] md:after:left-1 lg:after:left-2 xl:after:left-3 grid gap-8 md:gap-12 pl-6 md:pl-8">
+				<div className="grid gap-4 relative">
+					<div className="aspect-square w-5 bg-black rounded-full absolute left-0 translate-x-[-29.5px] z-10" />
+					<div className="font-medium text-lg">2023 - Present</div>
+					<div>
+						<h3 className="font-semibold text-xl text-black">
+							PT Hafdzamedia Teknologi Aplikasi
+						</h3>
+						<h4 className=" font-light text-md mb-4">
+							Fullstack Web Developer | Part-time
+						</h4>
+						<p className="text-justify">
+							Responsible for building and maintaining scalable
+							web applications using the latest technologies.
+							Collaborated with cross-functional teams to deliver
+							high-quality solutions that meet business
+							requirements.
+						</p>
+						<div className="flex flex-wrap gap-2 mt-4 text-sm">
+							<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
+								React
+							</div>
+							<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
+								Next.js
+							</div>
+							<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
+								Laravel
+							</div>
+							<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
+								MySql
+							</div>
+						</div>
+					</div>
+				</div>
+				<div className="grid gap-4 relative">
+					<div className="aspect-square w-5 bg-black rounded-full absolute left-0 translate-x-[-29.5px] z-10" />
+					<div className="font-medium text-lg">2024 - Present</div>
+					<div>
+						<h3 className="font-semibold text-xl text-black">
+							Outlier
+						</h3>
+						<h4 className=" font-light text-md mb-4">
+							AI Trainer | Freelance
+						</h4>
+						<p className="text-justify">
+							Crafted and refined chatbot prompts using prompt
+							engineering and RLHF techniques to improve the AI
+							responses in English and Indonesian, leading to more
+							accurate and contextually relevant interactions.
+						</p>
+
+						<div className="flex flex-wrap gap-2 mt-4 text-sm">
+							<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
+								Generative AI
+							</div>
+							<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
+								Prompt Engineering
+							</div>
+							<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
+								Problem Solving
+							</div>
+						</div>
+					</div>
+				</div>
+				<div className="grid gap-4 relative">
+					<div className="aspect-square w-5 bg-black rounded-full absolute left-0 translate-x-[-29.5px] z-10" />
+					<div className="font-medium text-lg">2023 - Present</div>
+					<div>
+						<h3 className="font-semibold text-xl text-black">
+							Self-Employed
+						</h3>
+						<h4 className=" font-light text-md mb-4">
+							Web Developer | Freelance
+						</h4>
+						<p className="text-justify">
+							Specialized in crafting innovative solutions using
+							Laravel and Next.js, enhancing client satisfaction
+							and project efficiency. Contributed expertise in
+							both frontend and backend development during
+							collaborative team projects, leading to successful
+							project completions
+						</p>
+						<div className="flex flex-wrap gap-2 mt-4 text-sm">
+							<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
+								React
+							</div>
+							<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
+								Next.js
+							</div>
+							<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
+								Laravel
+							</div>
+							<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
+								MySql
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+	);
+}

app/about/(skills)/skills.jsx

@@ -87,24 +87,7 @@ function CodepenIcon(props) {
 		</svg>
 	);
 }
-function AwardIcon(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="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526" />
-			<circle cx="12" cy="8" r="6" />
-		</svg>
-	);
-}
 
 function BarChartIcon(props) {
 	return (

app/about/page.jsx

@@ -12,6 +12,7 @@ import Quote from "./(quote)/quote.jsx";
 import Skills from "./(skills)/skills.jsx";
 import Tools from "./(skills)/tools.jsx";
 import Stack from "./(skills)/stack.jsx";
+import Experience from "./(experience)/experience.jsx";
 
 // images
 import Me1 from "@/public/img/me1.jpg";
@@ -303,6 +304,8 @@ export default function Page() {
 
 								type: "spring",
 							}}></motion.div>
+
+						{/* experience */}
 						<motion.h1
 							className="text-3xl font-bold mt-3"
 							initial={{
@@ -318,11 +321,12 @@ export default function Page() {
 
 								type: "spring",
 							}}>
-							Education &amp; Experience
+							Experience
 						</motion.h1>
 					</div>
 				</div>
-				<div className="w-screen mx-auto container gap-10 p-10 grid grid-cols-1 md:grid-cols-2 my-10 ">
+
+				<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={{
@@ -338,59 +342,7 @@ export default function Page() {
 
 							type: "spring",
 						}}>
-						<h2 className="text-2xl font-bold mb-3">
+						<Experience />
-							Education | Universitas Negeri Malang
-						</h2>
-						<h3 className="text-md font-medium mb-3 text-gray-500">
-							Teknik Informatika | 2022 - Now
-						</h3>
-						<p className="pl-3 text-gray-500  relative text-justify">
-							<span className="before:border-s-2 before:absolute before:left-0 before:top-0 before:h-full before:border-gray-400 before:block before:w-2 before:content-'' "></span>
-							I&rsquo;m currently in my third semester at
-							Universitas Negeri Malang, majoring in Informatics
-							Engineering. This journey has been nothing short of
-							exhilarating, filled with countless opportunities to
-							learn and grow. With a steadfast dedication to my
-							studies, I&rsquo;ve achieved a commendable GPA of
-							3.93. Throughout my academic journey, I&rsquo;ve
-							delved into various facets of computer science,
-							honing my skills in web development, programming,
-							and problem-solving.
-						</p>
-					</motion.div>
-					<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",
-						}}>
-						<h2 className="text-2xl font-bold mb-3">
-							Experience | Freelance Web Developer
-						</h2>
-						<h3 className="text-md font-medium mb-3 text-gray-500">
-							Fullstack Web Developer | 2023 - Now
-						</h3>
-						<p className="pl-3 text-gray-500 relative text-justify">
-							<span className="before:border-s-2 before:absolute before:left-0 before:top-0 before:h-full before:border-gray-400 before:block before:w-2 before:content-'' "></span>
-							My experience extends across various technologies,
-							with a primary focus on Next.js and Laravel.
-							I&rsquo;ve successfully completed three projects
-							using Next.js and Laravel. What sets me apart is my
-							ability to adapt to different project requirements.
-							Whether working collaboratively as part of a team or
-							independently, I ensure that each project I
-							undertake meets high-quality standards and fulfills
-							the unique needs of clients.
-						</p>
 					</motion.div>
 				</div>