feat: enhance education section

app/about/components/education.jsx

@@ -1,7 +1,15 @@
 import Image from "next/image";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faMedal } from "@fortawesome/free-solid-svg-icons";
+import {
-import { motion } from "framer-motion";
+	faMedal,
+	faGraduationCap,
+	faTrophy,
+	faAward,
+	faChevronDown,
+	faChevronUp,
+} from "@fortawesome/free-solid-svg-icons";
+import { motion, AnimatePresence } from "framer-motion";
+import { useState } from "react";
 import Me4 from "@/public/image/me4.jpeg";
 
 function Wrapper({ children }) {
@@ -11,16 +19,17 @@ function Wrapper({ children }) {
 				className="flex justify-center items-start flex-col mb-5"
 				initial={{
 					opacity: 0,
-					x: -200,
+					y: 50,
 				}}
 				whileInView={{
 					opacity: 1,
-					x: 0,
+					y: 0,
 				}}
 				transition={{
-					delay: 0.5,
+					delay: 0.3,
-
+					duration: 0.8,
 					type: "spring",
+					stiffness: 100,
 				}}>
 				{children}
 			</motion.div>
@@ -29,23 +38,97 @@ function Wrapper({ children }) {
 }
 
 export default function Education() {
+	const [isExpanded, setIsExpanded] = useState(false);
+
+	const achievementsByYear = {
+		2025: [
+			{
+				icon: faMedal,
+				title: "1st place (Gold Medal)",
+				subtitle: "Fesmaro IT Business Competition",
+				date: "Apr 2025",
+				color: "from-yellow-400 to-orange-500",
+			},
+		],
+		2024: [
+			{
+				icon: faTrophy,
+				title: "Special Award | Gold Medal | Incubation Opportunity",
+				subtitle: "Indonesia Inventor Day 2024 (IID)",
+				date: "Aug 2024",
+				color: "from-yellow-400 to-orange-500",
+			},
+			{
+				icon: faMedal,
+				title: "3rd place (Bronze Medal)",
+				subtitle: "Student Digital Innovation Competition (LIDM)",
+				date: "Jun 2024",
+				color: "from-amber-600 to-yellow-600",
+			},
+			{
+				icon: faMedal,
+				title: "3rd place (Bronze Medal)",
+				subtitle: "Fesmaro UI/UX Design",
+				date: "Jun 2024",
+				color: "from-amber-600 to-yellow-600",
+			},
+		],
+		2023: [
+			{
+				icon: faAward,
+				title: "Finalist",
+				subtitle: "36th National Student Science Week (PIMNAS)",
+				date: "Nov 2023",
+				color: "from-blue-500 to-purple-600",
+			},
+			{
+				icon: faMedal,
+				title: "3rd place (Bronze Medal)",
+				subtitle: "FORKAFEST 3.0 Web Development competition",
+				date: "Jan 2023",
+				color: "from-amber-600 to-yellow-600",
+			},
+		],
+	};
+
+	// Flatten all achievements into a single array for easier limiting
+	const allAchievements = Object.entries(achievementsByYear)
+		.sort(([a], [b]) => parseInt(b) - parseInt(a))
+		.flatMap(([year, achievements]) =>
+			achievements.map((achievement) => ({ ...achievement, year }))
+		);
+
+	const visibleAchievements = isExpanded
+		? allAchievements
+		: allAchievements.slice(0, 4);
+	const hasMoreAchievements = allAchievements.length > 4;
+
 	return (
 		<Wrapper>
 			<section className="grid gap-8 md:gap-12">
-				<div className="text-center space-y-2">
+				{" "}
+				{/* Header */}
+				<motion.div
+					className="text-center space-y-2"
+					initial={{ opacity: 0, y: 30 }}
+					whileInView={{ opacity: 1, y: 0 }}
+					transition={{ duration: 0.6 }}>
 					<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>
+				</motion.div>
-				<div className="grid gap-8 md:gap-12">
+				{/* Main Content */}
-					<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+				<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-						<div className="px-5">
+					{/* Education Section - Left */}
-							<div className="font-medium text-lg">
+					<motion.div
-								2022 - Present
+						className="px-5"
-							</div>
+						initial={{ opacity: 0, x: -50 }}
+						whileInView={{ opacity: 1, x: 0 }}
+						transition={{ duration: 0.8, delay: 0.2 }}>
+						<div className="font-medium text-lg mb-4">2022 - Present</div>
 						<div>
 							<h2 className="font-semibold text-xl">
 								Universitas Negeri Malang
@@ -84,115 +167,110 @@ export default function Education() {
 							</div>
 							<div className="flex items-center gap-2">
 								<p className="text-justify">
-										Aspiring to be a software engineer, I am
+									Aspiring to be a software engineer, I am currently pursuing a
-										currently pursuing a bachelor&rsquo;s
+									bachelor's degree in computer science at Universitas Negeri
-										degree in computer science at
+									Malang. Fascinated by the world of technology, I am eager to
-										Universitas Negeri Malang. Fascinated by
+									learn and explore new things in the field of computer science.
-										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>
+					</motion.div>{" "}
-						<div className="flex flex-col justify-start px-5 md:px-0">
+					{/* Achievements Section - Right */}
-							<h2 className="font-semibold text-xl mt-7">
+					<motion.div
-								Achievements
+						className="flex flex-col justify-start px-5 md:px-0"
-							</h2>
+						initial={{ opacity: 0, x: 50 }}
-							<p className="text-md font-normal mb-3 md:mb-12">
+						whileInView={{ opacity: 1, x: 0 }}
+						transition={{ duration: 0.8, delay: 0.4 }}>
+						<h2 className="font-semibold text-xl mt-7">Achievements</h2>
+						<p className="text-md font-normal mb-3 md:mb-6">
 							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">
+						{/* Achievements Container with transparent bottom effect */}
+						<div className="relative">
+							<div className="space-y-4">
+								{/* Show visible achievements */}
+								<AnimatePresence>
+									{visibleAchievements.map((achievement, index) => (
+										<motion.div
+											key={`${achievement.year}-${index}`}
+											className="group"
+											initial={{ opacity: 0, y: 20 }}
+											animate={{ opacity: 1, y: 0 }}
+											exit={{ opacity: 0, y: -20 }}
+											transition={{ duration: 0.5, delay: index * 0.05 }}>
+											{/* Year indicator for first achievement of each year */}
+											{index === 0 ||
+											visibleAchievements[index - 1]?.year !==
+												achievement.year ? (
+												<div className="flex items-center gap-3 mb-3 mt-2">
+													<div className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
+														<span className="text-xs font-bold text-gray-600">
+															{achievement.year}
+														</span>
+													</div>
+													<div className="flex-1 h-px bg-gradient-to-r from-gray-300 to-transparent"></div>
+												</div>
+											) : null}
+
+											{/* Glassmorphism achievement card with monochrome to color effect */}
+											<div className="bg-white/20 backdrop-blur-md border border-white/30 rounded-2xl p-4 shadow-lg hover:bg-white/30 transition-all duration-300 hover:shadow-xl grayscale hover:grayscale-0">
+												<div className="flex items-center gap-4">
+													<div
+														className={`aspect-square w-10 rounded-full bg-gradient-to-r ${achievement.color} flex items-center justify-center text-primary-foreground transition-all duration-300`}>
 														<FontAwesomeIcon
-										icon={faMedal}
+															icon={achievement.icon}
 															className="text-white h-5 w-5"
 														/>
 													</div>
 													<div>
-									<h3 className="font-medium">
+														<h3 className="font-medium">{achievement.title}</h3>
-										Special Award | Gold Medal | Incubation
+														<p className="text-sm">{achievement.subtitle}</p>
-										Opportunity
+														<div className="text-xs text-gray-500 mt-1">
-									</h3>
+															{achievement.date}
-									<p className="text-sm">
-										Indonesia Inventor Day 2024 (IID) | Aug
-										2024
-									</p>
 														</div>
 													</div>
-							<div className="flex items-center gap-4 mb-4">
+												</div>
-								<div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground">
+											</div>
+										</motion.div>
+									))}
+								</AnimatePresence>
+							</div>
+
+							{/* Transparent bottom overlay when not expanded */}
+							{!isExpanded && hasMoreAchievements && (
+								<div className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-stale-300 via-stale/70 to-transparent pointer-events-none"></div>
+							)}
+
+							{/* Expand/Collapse Button */}
+							{hasMoreAchievements && (
+								<motion.div
+									className="flex justify-center mt-6"
+									initial={{ opacity: 0 }}
+									animate={{ opacity: 1 }}
+									transition={{ delay: 0.5 }}>
+									<button
+										onClick={() => setIsExpanded(!isExpanded)}
+										className="flex items-center gap-2 px-6 py-3 bg-white/30 backdrop-blur-md border border-white/40 rounded-full hover:bg-white/40 transition-all duration-300 text-sm font-medium shadow-lg hover:shadow-xl">
+										<span>
+											{isExpanded
+												? `Show Less`
+												: `Show ${allAchievements.length - 4} More`}
+										</span>
 										<FontAwesomeIcon
-										icon={faMedal}
+											icon={isExpanded ? faChevronUp : faChevronDown}
-										className="text-white h-5 w-5"
+											className="h-3 w-3 transition-transform duration-300"
 										/>
+									</button>
+								</motion.div>
+							)}
 						</div>
-								<div>
+					</motion.div>
-									<h3 className="font-medium">
-										3rd place (Bronze Medal)
-									</h3>
-									<p className="text-sm">
-										Student Digital Innovation Competition
-										(LIDM) | 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">
-										36th National Student Science Week
-										(PIMNAS) | 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>
 		</Wrapper>