diff --git a/src/assets/2014 (2).png b/src/assets/2014 (2).png
new file mode 100644
index 0000000..b151cee
Binary files /dev/null and b/src/assets/2014 (2).png differ
diff --git a/src/assets/2014 (3).png b/src/assets/2014 (3).png
new file mode 100644
index 0000000..8086a8c
Binary files /dev/null and b/src/assets/2014 (3).png differ
diff --git a/src/assets/2014.png b/src/assets/2014.png
new file mode 100644
index 0000000..c05e93e
Binary files /dev/null and b/src/assets/2014.png differ
diff --git a/src/assets/2016 (2).png b/src/assets/2016 (2).png
new file mode 100644
index 0000000..4c964d8
Binary files /dev/null and b/src/assets/2016 (2).png differ
diff --git a/src/assets/2016.png b/src/assets/2016.png
new file mode 100644
index 0000000..2dc3b04
Binary files /dev/null and b/src/assets/2016.png differ
diff --git a/src/assets/2017 (2).png b/src/assets/2017 (2).png
new file mode 100644
index 0000000..30979ab
Binary files /dev/null and b/src/assets/2017 (2).png differ
diff --git a/src/assets/2017 (3).png b/src/assets/2017 (3).png
new file mode 100644
index 0000000..3d30a3f
Binary files /dev/null and b/src/assets/2017 (3).png differ
diff --git a/src/assets/2017.png b/src/assets/2017.png
new file mode 100644
index 0000000..26f66bc
Binary files /dev/null and b/src/assets/2017.png differ
diff --git a/src/assets/2022.png b/src/assets/2022.png
new file mode 100644
index 0000000..73006ab
Binary files /dev/null and b/src/assets/2022.png differ
diff --git a/src/assets/2023 (2).png b/src/assets/2023 (2).png
new file mode 100644
index 0000000..14d042d
Binary files /dev/null and b/src/assets/2023 (2).png differ
diff --git a/src/assets/2023.png b/src/assets/2023.png
new file mode 100644
index 0000000..8edc3b4
Binary files /dev/null and b/src/assets/2023.png differ
diff --git a/src/assets/2024.png b/src/assets/2024.png
new file mode 100644
index 0000000..a843601
Binary files /dev/null and b/src/assets/2024.png differ
diff --git a/src/assets/2025 (2).png b/src/assets/2025 (2).png
new file mode 100644
index 0000000..f693dbf
Binary files /dev/null and b/src/assets/2025 (2).png differ
diff --git a/src/assets/2025 (3).png b/src/assets/2025 (3).png
new file mode 100644
index 0000000..6f46667
Binary files /dev/null and b/src/assets/2025 (3).png differ
diff --git a/src/assets/2025 (4).png b/src/assets/2025 (4).png
new file mode 100644
index 0000000..d9b9602
Binary files /dev/null and b/src/assets/2025 (4).png differ
diff --git a/src/assets/2025 (5).png b/src/assets/2025 (5).png
new file mode 100644
index 0000000..249ba6d
Binary files /dev/null and b/src/assets/2025 (5).png differ
diff --git a/src/assets/2025 (6).png b/src/assets/2025 (6).png
new file mode 100644
index 0000000..80f85ae
Binary files /dev/null and b/src/assets/2025 (6).png differ
diff --git a/src/assets/2025.png b/src/assets/2025.png
new file mode 100644
index 0000000..e147323
Binary files /dev/null and b/src/assets/2025.png differ
diff --git a/src/components/AchievementCard.jsx b/src/components/AchievementCard.jsx
index bcea277..3d37d0b 100644
--- a/src/components/AchievementCard.jsx
+++ b/src/components/AchievementCard.jsx
@@ -1,7 +1,89 @@
-import { Calendar, Award, TrendingUp } from "lucide-react";
+import {
+ Calendar,
+ Award,
+ TrendingUp,
+ ChevronLeft,
+ ChevronRight,
+} from "lucide-react";
import { useState, useEffect } from "react";
-const AchievementCard = ({ title, description, year, isLeft, index }) => {
+const ImageCarousel = ({ images, title }) => {
+ const [currentIndex, setCurrentIndex] = useState(0);
+
+ const nextImage = () => {
+ setCurrentIndex((prevIndex) =>
+ prevIndex === images.length - 1 ? 0 : prevIndex + 1,
+ );
+ };
+
+ const prevImage = () => {
+ setCurrentIndex((prevIndex) =>
+ prevIndex === 0 ? images.length - 1 : prevIndex - 1,
+ );
+ };
+
+ if (!images || images.length === 0) return null;
+
+ return (
+
+
+

{
+ e.target.style.display = "none";
+ }}
+ />
+
+
+ {/* Navigation arrows - only show if multiple images */}
+ {images.length > 1 && (
+ <>
+
+
+
+ {/* Image indicators */}
+
+ {images.map((_, index) => (
+
+ >
+ )}
+
+ );
+};
+
+const AchievementCard = ({
+ title,
+ description,
+ year,
+ isLeft,
+ index,
+ images,
+}) => {
const [isVisible, setIsVisible] = useState(false);
const [isHovered, setIsHovered] = useState(false);
@@ -63,6 +145,9 @@ const AchievementCard = ({ title, description, year, isLeft, index }) => {
+ {/* Image Carousel Section */}
+
+
{/* Year badge with enhanced styling */}
diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx
index 33fa643..07d9ce2 100644
--- a/src/components/Timeline.jsx
+++ b/src/components/Timeline.jsx
@@ -185,6 +185,7 @@ const Timeline = () => {
year={achievement.year}
isLeft={true}
index={index}
+ images={achievement.images}
/>
)}
@@ -254,6 +255,7 @@ const Timeline = () => {
year={achievement.year}
isLeft={false}
index={index}
+ images={achievement.images}
/>
)}
@@ -276,6 +278,7 @@ const Timeline = () => {
year={achievement.year}
isLeft={true}
index={index}
+ images={achievement.images}
/>
diff --git a/src/config/achievement.js b/src/config/achievement.js
index 75ab6ac..3d84640 100644
--- a/src/config/achievement.js
+++ b/src/config/achievement.js
@@ -1,3 +1,35 @@
+// Import all year-based images
+import img2014 from "../assets/2014.png";
+import img2014_2 from "../assets/2014 (2).png";
+import img2014_3 from "../assets/2014 (3).png";
+import img2016 from "../assets/2016.png";
+import img2016_2 from "../assets/2016 (2).png";
+import img2017 from "../assets/2017.png";
+import img2017_2 from "../assets/2017 (2).png";
+import img2017_3 from "../assets/2017 (3).png";
+import img2022 from "../assets/2022.png";
+import img2023 from "../assets/2023.png";
+import img2023_2 from "../assets/2023 (2).png";
+import img2024 from "../assets/2024.png";
+import img2025 from "../assets/2025.png";
+import img2025_2 from "../assets/2025 (2).png";
+import img2025_3 from "../assets/2025 (3).png";
+import img2025_4 from "../assets/2025 (4).png";
+import img2025_5 from "../assets/2025 (5).png";
+import img2025_6 from "../assets/2025 (6).png";
+
+// Organize images by year
+const yearImages = {
+ 2014: [img2014, img2014_2, img2014_3],
+ 2016: [img2016, img2016_2],
+ 2017: [img2017, img2017_2, img2017_3],
+ 2022: [img2022],
+ 2023: [img2023, img2023_2],
+ 2024: [img2024],
+ 2025: [img2025, img2025_2, img2025_3, img2025_4],
+ "2025a": [img2025_5, img2025_6],
+};
+
const achievementsData = [
{
id: 1,
@@ -7,6 +39,7 @@ const achievementsData = [
year: "2021",
category: "HPVC",
rank: "3rd Global",
+ images: yearImages["2021"] || null,
},
{
id: 2,
@@ -16,6 +49,7 @@ const achievementsData = [
year: "2022",
category: "HPVC",
rank: "2nd Global",
+ images: yearImages["2022"] || null,
},
{
id: 3,
@@ -24,6 +58,7 @@ const achievementsData = [
year: "2023",
category: "Design",
rank: "9th Global",
+ images: yearImages["2023"] || null,
},
{
id: 4,
@@ -33,6 +68,7 @@ const achievementsData = [
year: "2024",
category: "XRC",
rank: "1st Place",
+ images: yearImages["2024"] || null,
},
{
id: 5,
@@ -42,6 +78,7 @@ const achievementsData = [
year: "2025",
category: "HPVC",
rank: "3rd Overall",
+ images: yearImages["2025"] || null,
},
{
id: 6,
@@ -51,6 +88,7 @@ const achievementsData = [
year: "2019",
category: "HPVC",
rank: "13th Overall",
+ images: yearImages["2019"] || null,
},
{
id: 7,
@@ -60,6 +98,7 @@ const achievementsData = [
year: "2017",
category: "HPVC",
rank: "20th Place",
+ images: yearImages["2017"] || null,
},
{
id: 8,
@@ -69,6 +108,7 @@ const achievementsData = [
year: "2016",
category: "HPVC",
rank: "2nd Design",
+ images: yearImages["2016"] || null,
},
{
id: 9,
@@ -77,6 +117,7 @@ const achievementsData = [
year: "2015",
category: "HPVC",
rank: "Best Innovation",
+ images: yearImages["2015"] || null,
},
{
id: 10,
@@ -86,6 +127,7 @@ const achievementsData = [
year: "2014",
category: "HPVC",
rank: "Best Analysis",
+ images: yearImages["2014"] || null,
},
{
id: 11,
@@ -95,6 +137,7 @@ const achievementsData = [
year: "2025",
category: "Design",
rank: "2nd Overall",
+ images: yearImages["2025a"] || null,
},
];