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 ( +
+
+ {`${title} { + 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, }, ];