From 570f53bbc696c5c132a7f00bfe4eaddc87df8ec2 Mon Sep 17 00:00:00 2001 From: Alvalens Date: Tue, 27 May 2025 13:18:35 +0700 Subject: [PATCH] feat: enhance education section --- app/about/components/education.jsx | 386 +++++++++++++++++------------ 1 file changed, 232 insertions(+), 154 deletions(-) diff --git a/app/about/components/education.jsx b/app/about/components/education.jsx index 2302f43..69059b5 100644 --- a/app/about/components/education.jsx +++ b/app/about/components/education.jsx @@ -1,26 +1,35 @@ import Image from "next/image"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faMedal } from "@fortawesome/free-solid-svg-icons"; -import { motion } from "framer-motion"; +import { + 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 }) { return ( -
+
{children} @@ -29,170 +38,239 @@ 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 (
-
+ {" "} + {/* Header */} +

Education

Get to know more about my educational background.

-
-
-
-
-
- 2022 - Present -
-
-

- Universitas Negeri Malang -

-

- S1 Teknik Informatika | Computer Science -

-
-
- University -
-
- University -
-
- University -
-
-
-

- Aspiring to be a software engineer, I am - currently pursuing a bachelor’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. -

-
- {/* add gpa in a style */} -
-
- GPA: 3.9 out of 4 -
-
-
-
-
-

- Achievements + + {/* Main Content */} +
+ {/* Education Section - Left */} + +
2022 - Present
+
+

+ Universitas Negeri Malang

-

- Some of my achievements during my study. -

-
-
- + S1 Teknik Informatika | Computer Science +

+
+
+ University
-
-

- Special Award | Gold Medal | Incubation - Opportunity -

-

- Indonesia Inventor Day 2024 (IID) | Aug - 2024 -

+
+ University +
+
+ University
-
-
- -
-
-

- 3rd place (Bronze Medal) -

-

- Student Digital Innovation Competition - (LIDM) | Jun 2024 -

-
+
+

+ Aspiring to be a software engineer, I am currently pursuing a + bachelor'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. +

-
-
- -
-
-

- 3rd place (Bronze Medal) -

-

- Fesmaro UI/UX Design | Jun 2024 -

-
-
-
-
- -
-
-

Finalist

-

- 36th National Student Science Week - (PIMNAS) | Nov 2023 -

-
-
-
-
- -
-
-

- 3rd place (Bronze Medal) -

-

- FORKAFEST 3.0 Web Development - competition | Jan 2023 -

+
+
+ GPA: 3.9 out of 4
-
+ {" "} + {/* Achievements Section - Right */} + +

Achievements

+

+ Some of my achievements during my study. +

+ + {/* Achievements Container with transparent bottom effect */} +
+
+ {/* Show visible achievements */} + + {visibleAchievements.map((achievement, index) => ( + + {/* Year indicator for first achievement of each year */} + {index === 0 || + visibleAchievements[index - 1]?.year !== + achievement.year ? ( +
+
+ + {achievement.year} + +
+
+
+ ) : null} + + {/* Glassmorphism achievement card with monochrome to color effect */} +
+
+
+ +
+
+

{achievement.title}

+

{achievement.subtitle}

+
+ {achievement.date} +
+
+
+
+ + ))} + +
+ + {/* Transparent bottom overlay when not expanded */} + {!isExpanded && hasMoreAchievements && ( +
+ )} + + {/* Expand/Collapse Button */} + {hasMoreAchievements && ( + + + + )} +
+