Skip to content

Achievements #42

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sidd233 merged 2 commits into from
Aug 13, 2025
Merged

Achievements #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
aee683c
Updated
AishwaryJhunjhunwala Aug 11, 2025
d87ca12
Restored from stash
AishwaryJhunjhunwala Aug 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added src/assets/achievementimg.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 9 additions & 29 deletions src/components/AchievementCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,30 @@
import { Calendar } from "lucide-react";

const AchievementCard = ({
title,
description,
image,
date,
isLeft,
index,
}) => {
const AchievementCard = ({ title, description, year, isLeft, index }) => {
return (
<div
className={`flex items-center w-full mb-16 ${isLeft ? "justify-start" : "justify-end"}`}
data-index={index}
style={{ animationDelay: `${index * 200}ms` }}
>
<div
className={`
w-full max-w-md bg-gradient-card rounded-2xl shadow-card hover:shadow-card-hover
w-full max-w-md rounded-2xl shadow-lg hover:shadow-xl border border-gray-200
transition-all duration-500 hover:scale-105 group cursor-pointer
${isLeft ? "animate-slide-in-left" : "animate-slide-in-right"}
bg-white hover:border-blue-300
`}
>
{/* Image */}
<div className="relative overflow-hidden rounded-t-2xl">
<img
src={image}
alt={title}
className="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110"
/>
<div className="absolute inset-0 bg-primary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>

{/* Content */}
<div className="p-6">
<div className="flex items-center text-muted text-sm mb-3">
<div className="flex items-center text-gray-500 text-sm mb-3">
<Calendar className="h-4 w-4 mr-2" />
<span className="font-medium">{date}</span>
<span className="font-medium">{year}</span>
</div>

<h3 className="text-xl font-bold text-foreground mb-3 group-hover:text-primary transition-colors duration-300">
<h3 className="text-xl font-bold mb-3 group-hover:texT-[#0B2044] transition-colors duration-300">
{title}
</h3>
<p className="text-gray-700 leading-relaxed">{description}</p>

<p className="text-muted ">{description}</p>

{/* Decorative element */}
<div className="mt-4 h-1 w-16 bg-gradient-primary rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div className="mt-4 h-1 w-16 bg-blue-900 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
</div>
</div>
Expand Down
53 changes: 33 additions & 20 deletions src/components/Achievements.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ export default function Achievements() {
const navigate = useNavigate();

return (
<div className="px-4 md:px-12 py-8 max-w-screen-xl mx-auto">
<div className="md:mb-48 mb-12">
<h2 className="text-3xl font-bold text-blue-900 mb-4">
<div className="px-4 md:px-12 py-10 max-w-screen-xl mx-auto">
<div style={{ marginBottom: "12rem" }}>
<h2 className="text-3xl font-bold text-[#0B2044] mb-4">
Our Achievements
</h2>
<p className="text-gray-700 mb-6 max-w-3xl">
Expand All @@ -20,7 +20,7 @@ export default function Achievements() {
</p>
<button
className="bg-white text-blue-800 border border-blue-800 px-4 py-2 rounded hover:bg-blue-50 md:mb-12"
onClick={() => navigate("/achievementpage")}
onClick={() => navigate("/achievements")}
>
View All Achievements &gt;
</button>
Expand All @@ -31,25 +31,38 @@ export default function Achievements() {
<div className="md:hidden absolute left-2 top-0 h-full w-1 bg-black z-0"></div>

<div className="flex flex-col md:flex-row items-start md:items-center justify-between relative z-10 md:mb-60">
{achievementsData.map((item, index) => (
<div
key={index}
className={`w-full md:w-1/4 px-4 md:mb-0 flex md:flex-col items-start md:items-center relative`}
>
<div className="absolute md:static left-0 md:left-auto top-2 md:top-auto md:mb-4 transform -translate-y-1/2 md:translate-y-1/2 w-4.5 h-4.5 bg-black border-2 border-white rounded-full z-20"></div>

{achievementsData
.filter((item) => item.id <= 5)
.map((item, index) => (
<div
className={`bg-white p-4 rounded-md w-full max-w-xs md:mt-0 md:absolute ${
index % 2 === 0
? "md:top-1/2 md:translate-y-6 self-start"
: "md:bottom-1/2 md:-translate-y-6 self-end"
}`}
key={index}
className={`w-full md:w-1/4 px-4 md:mb-0 flex md:flex-col items-start md:items-center relative`}
>
<h3 className="font-bold text-lg text-black">{item.title}</h3>
<p className="text-sm text-gray-600 mt-2">{item.description}</p>
<div className="absolute md:static left-0 md:left-auto top-2 md:top-auto md:mb-4 transform -translate-y-1/2 md:translate-y-1/2 w-4.5 h-4.5 bg-black border-2 border-white rounded-full z-20"></div>

<div
className={`bg-white p-4 rounded-md w-full max-w-xs md:mt-0 md:absolute ${
index % 2 === 0
? "md:top-1/2 md:translate-y-6 self-start"
: "md:bottom-1/2 md:-translate-y-6 self-end"
}`}
>
<h3 className="font-bold text-lg text-black">{item.year}</h3>
<h4
className="text-sm text-black decoration-4"
style={{ display: "inline" }}
>
{item.title}:{" "}
</h4>
<p
className="text-sm text-gray-700"
style={{ display: "inline" }}
>
{item.description}
</p>
</div>
</div>
</div>
))}
))}
</div>
</div>
</div>
Expand Down
135 changes: 58 additions & 77 deletions src/components/Timeline.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,98 +28,79 @@ const Timeline = () => {
}, []);

return (
<section
id="achievements"
className="bg-gradient-to-br from-background to-muted/30"
>
<section id="achievements" className=" min-h-screen py-12">
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
{/* Header */}
<div style={{ marginBottom: "7rem" }}>
<h2 className="text-3xl text-center font-bold text-blue-900 mb-4">
Our Achievements
</h2>
<p className="text-gray-700 text-center mb-6 max-w-3xl">
ASME NIT Rourkela excels in fostering innovation and leadership
through workshops, competitions, and expert lectures. Recognized for
achievements in events like the Student Design Challenge and HPVC,
the chapter addresses real-world problems with engineering
creativity. Their STEM outreach initiatives further enhance their
impact, solidifying their reputation for excellence in mechanical
engineering.
</p>
</div>
{/* Timeline */}
<div className="relative" ref={timelineRef}>
<div className="grid grid-cols-9 gap-2">
{achievementsData.map((achievement, index) => (
<div key={achievement.id} className="contents">
{/* Left card */}
<div
className={`col-span-4 ${index % 2 === 0 ? "flex justify-end" : ""} hidden md:flex`}
>
{index % 2 === 0 && (
<div className="w-full max-w-md">
<AchievementCard
title={achievement.title}
description={achievement.description}
image={achievement.image}
date={achievement.date}
isLeft={true}
index={index}
/>
</div>
)}
</div>
{/* Timeline line and dot */}
<div className="col-span-1 flex flex-col items-center relative">
{/* Vertical line */}
<div className="w-1 bg-gray-300 h-full absolute top-0 left-1/2 -translate-x-1/2 z-0"></div>
{achievementsData
.sort((a, b) => parseInt(a.year) - parseInt(b.year))
.map((achievement, index) => (
<div key={achievement.id} className="contents">
{/* Left card */}
<div
className={`col-span-4 ${index % 2 === 0 ? "flex justify-end" : ""} hidden md:flex`}
>
{index % 2 === 0 && (
<div className="w-full max-w-md">
<AchievementCard
title={achievement.title}
description={achievement.description}
year={achievement.year}
isLeft={true}
index={index}
/>
</div>
)}
</div>

{/* Timeline line and dot */}
<div className="col-span-1 hidden md:flex flex-col items-center relative">
{/* Vertical line */}
<div className="w-1 bg-gray-300 h-full absolute top-0 left-1/2 -translate-x-1/2 z-0"></div>

{/* Timeline dot */}
<div className="z-10">
<div
className={`w-4 h-4 rounded-full border-background bg-yellow-500 border-2 border-white transition-all duration-500
${
{/* Timeline dot */}
<div className="z-10 relative">
<div
className={`w-4 h-4 rounded-full border-2 border-white transition-all duration-700 ${
visibleDots.has(index)
? "bg-timeline-dot-active shadow-glow animate-glow-pulse"
: "bg-timeline-dot"
}
`}
></div>
? "bg-[#0B2044] shadow-lg shadow-blue-900/50 scale-125"
: "bg-gray-400"
}`}
></div>
</div>
</div>
</div>
{/* Right card */}
<div
className={`col-span-4 ${index % 2 !== 0 ? "flex justify-start" : ""} hidden md:flex`}
>
{index % 2 !== 0 && (

{/* Right card */}
<div
className={`col-span-4 ${index % 2 !== 0 ? "flex justify-start" : ""} hidden md:flex`}
>
{index % 2 !== 0 && (
<div className="w-full max-w-md">
<AchievementCard
title={achievement.title}
description={achievement.description}
year={achievement.year}
isLeft={false}
index={index}
/>
</div>
)}
</div>

{/* Mobile view */}
<div className="col-span-9 flex justify-center md:hidden">
<div className="w-full max-w-md">
<AchievementCard
title={achievement.title}
description={achievement.description}
image={achievement.image}
date={achievement.date}
isLeft={false}
year={achievement.year}
isLeft={true}
index={index}
/>
</div>
)}
</div>
{/* Mobile view: single column, card below dot/line */}
<div className="col-span-9 flex justify-center md:hidden">
<div className="w-full max-w-md">
<AchievementCard
title={achievement.title}
description={achievement.description}
image={achievement.image}
date={achievement.date}
isLeft={true}
index={index}
/>
</div>
</div>
</div>
))}
))}
</div>
</div>
</div>
Expand Down
74 changes: 49 additions & 25 deletions src/config/achievement.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,48 +1,72 @@
const achievementsData = [
{
id: 1,
title: "Name",
title: "HPVC",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
image:
"https://images.unsplash.com/photo-1593376853899-fbb47a057fa0?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cm9ib3RzfGVufDB8fDB8fHww",
date: "December 2023",
"Secured 3rd Position Globally in Critical Design Review and 1st Position among Indian Colleges.",
year: "2021",
},
{
id: 2,
title: "Name",
title: "HPVC",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
image:
"https://images.unsplash.com/photo-1593376853899-fbb47a057fa0?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cm9ib3RzfGVufDB8fDB8fHww",
date: "December 2023",
"2nd Position Globally in Critical Design and 3rd Position in Innovation- BlueStreak 9.0.",
year: "2022",
},
{
id: 3,
title: "Name",
title: "IAM-3D",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
image:
"https://images.unsplash.com/photo-1593376853899-fbb47a057fa0?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cm9ib3RzfGVufDB8fDB8fHww",
date: "December 2023",
"Secured 2nd Position Overall, Team BlueStreak 3.0 (FPV Drone Project) and 9th Place Globally in 2022.",
year: "2023",
},
{
id: 4,
title: "Name",
title: "ASME XRC 2024",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
image:
"https://images.unsplash.com/photo-1593376853899-fbb47a057fa0?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cm9ib3RzfGVufDB8fDB8fHww",
date: "December 2023",
"Team BlueBirds Secured 1st Position in Extended Reality Challenge For Sustainable innovations in ocean cleanup.",
year: "2024",
},
{
id: 5,
title: "Name",
title: "HPVC",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
image:
"https://images.unsplash.com/photo-1593376853899-fbb47a057fa0?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cm9ib3RzfGVufDB8fDB8fHww",
date: "December 2023",
"Team BlueStreak 11.0 Secured 3rd Position in Design Presentation, The Best Innovation Award, 3rd Position in Drag Race and 3rd Position Overall in e-HPVC.",
year: "2025",
},
{
id: 6,
title: "HPVC",
description:
"Secured 9th in Endurance and 13th Overall in E-Fest Asia Pacific",
year: "2019",
},
{
id: 7,
title: "HPVC",
description:
"Secured 20th in men's endurance race and 24th in female drag race out of 43 teams, HPVC ASIA PACIFIC.",
year: "2017",
},
{
id: 8,
title: "HPVC",
description:
"Secured 2nd Position in design event and 9th in overall, HPVC ASIA PACIFIC VIT VELLORE.",
year: "2016",
},
{
id: 9,
title: "HPVC",
description: "Highest Innovation Score, HPVC India at DTU.",
year: "2015",
},
{
id: 10,
title: "HPVC",
description:
"First International Participation at HPVC East, University of Central Florida and Highest marks in Analysis Section, HPV India at IIT Delhi.",
year: "2014",
},
];

Expand Down
Loading
Loading