Skip to content

Commit aa10597

Browse files
sidd233sidd233
authored
Merge branch 'main' into main
2 parents 50316e1 + 49259f0 commit aa10597

6 files changed

Lines changed: 168 additions & 152 deletions

File tree

‎src/assets/achievementimg.jpg‎

677 KB
Loading

‎src/components/AchievementCard.jsx‎

Lines changed: 9 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,30 @@
11
import { Calendar } from "lucide-react";
22

3-
const AchievementCard = ({
4-
title,
5-
description,
6-
image,
7-
date,
8-
isLeft,
9-
index,
10-
}) => {
3+
const AchievementCard = ({ title, description, year, isLeft, index }) => {
114
return (
125
<div
136
className={`flex items-center w-full mb-16 ${isLeft ? "justify-start" : "justify-end"}`}
7+
data-index={index}
148
style={{ animationDelay: `${index * 200}ms` }}
159
>
1610
<div
1711
className={`
18-
w-full max-w-md bg-gradient-card rounded-2xl shadow-card hover:shadow-card-hover
12+
w-full max-w-md rounded-2xl shadow-lg hover:shadow-xl border border-gray-200
1913
transition-all duration-500 hover:scale-105 group cursor-pointer
20-
${isLeft ? "animate-slide-in-left" : "animate-slide-in-right"}
14+
bg-white hover:border-blue-300
2115
`}
2216
>
23-
{/* Image */}
24-
<div className="relative overflow-hidden rounded-t-2xl">
25-
<img
26-
src={image}
27-
alt={title}
28-
className="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110"
29-
/>
30-
<div className="absolute inset-0 bg-primary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
31-
</div>
32-
33-
{/* Content */}
3417
<div className="p-6">
35-
<div className="flex items-center text-muted text-sm mb-3">
18+
<div className="flex items-center text-gray-500 text-sm mb-3">
3619
<Calendar className="h-4 w-4 mr-2" />
37-
<span className="font-medium">{date}</span>
20+
<span className="font-medium">{year}</span>
3821
</div>
39-
40-
<h3 className="text-xl font-bold text-foreground mb-3 group-hover:text-primary transition-colors duration-300">
22+
<h3 className="text-xl font-bold mb-3 group-hover:texT-[#0B2044] transition-colors duration-300">
4123
{title}
4224
</h3>
25+
<p className="text-gray-700 leading-relaxed">{description}</p>
4326

44-
<p className="text-muted ">{description}</p>
45-
46-
{/* Decorative element */}
47-
<div className="mt-4 h-1 w-16 bg-gradient-primary rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
27+
<div className="mt-4 h-1 w-16 bg-blue-900 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
4828
</div>
4929
</div>
5030
</div>

‎src/components/Achievements.jsx‎

Lines changed: 32 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ export default function Achievements() {
55
const navigate = useNavigate();
66

77
return (
8-
<div className="px-4 md:px-12 py-8 max-w-screen-xl mx-auto">
9-
<div className="md:mb-48 mb-12">
10-
<h2 className="text-3xl font-bold text-blue-900 mb-4">
8+
<div className="px-4 md:px-12 py-10 max-w-screen-xl mx-auto">
9+
<div style={{ marginBottom: "12rem" }}>
10+
<h2 className="text-3xl font-bold text-[#0B2044] mb-4">
1111
Our Achievements
1212
</h2>
1313
<p className="text-gray-700 mb-6 max-w-3xl">
@@ -31,25 +31,38 @@ export default function Achievements() {
3131
<div className="md:hidden absolute left-2 top-0 h-full w-1 bg-black z-0"></div>
3232

3333
<div className="flex flex-col md:flex-row items-start md:items-center justify-between relative z-10 md:mb-60">
34-
{achievementsData.map((item, index) => (
35-
<div
36-
key={index}
37-
className={`w-full md:w-1/4 px-4 md:mb-0 flex md:flex-col items-start md:items-center relative`}
38-
>
39-
<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>
40-
34+
{achievementsData
35+
.filter((item) => item.id <= 5)
36+
.map((item, index) => (
4137
<div
42-
className={`bg-white p-4 rounded-md w-full max-w-xs md:mt-0 md:absolute ${
43-
index % 2 === 0
44-
? "md:top-1/2 md:translate-y-6 self-start"
45-
: "md:bottom-1/2 md:-translate-y-6 self-end"
46-
}`}
38+
key={index}
39+
className={`w-full md:w-1/4 px-4 md:mb-0 flex md:flex-col items-start md:items-center relative`}
4740
>
48-
<h3 className="font-bold text-lg text-black">{item.title}</h3>
49-
<p className="text-sm text-gray-600 mt-2">{item.description}</p>
41+
<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>
42+
43+
<div
44+
className={`bg-white p-4 rounded-md w-full max-w-xs md:mt-0 md:absolute ${
45+
index % 2 === 0
46+
? "md:top-1/2 md:translate-y-6 self-start"
47+
: "md:bottom-1/2 md:-translate-y-6 self-end"
48+
}`}
49+
>
50+
<h3 className="font-bold text-lg text-black">{item.year}</h3>
51+
<h4
52+
className="text-sm text-black decoration-4"
53+
style={{ display: "inline" }}
54+
>
55+
{item.title}:{" "}
56+
</h4>
57+
<p
58+
className="text-sm text-gray-700"
59+
style={{ display: "inline" }}
60+
>
61+
{item.description}
62+
</p>
63+
</div>
5064
</div>
51-
</div>
52-
))}
65+
))}
5366
</div>
5467
</div>
5568
</div>

‎src/components/Timeline.jsx‎

Lines changed: 58 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -28,98 +28,79 @@ const Timeline = () => {
2828
}, []);
2929

3030
return (
31-
<section
32-
id="achievements"
33-
className="bg-gradient-to-br from-background to-muted/30"
34-
>
31+
<section id="achievements" className=" min-h-screen py-12">
3532
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
36-
{/* Header */}
37-
<div style={{ marginBottom: "7rem" }}>
38-
<h2 className="text-3xl text-center font-bold text-blue-900 mb-4">
39-
Our Achievements
40-
</h2>
41-
<p className="text-gray-700 text-center mb-6 max-w-3xl">
42-
ASME NIT Rourkela excels in fostering innovation and leadership
43-
through workshops, competitions, and expert lectures. Recognized for
44-
achievements in events like the Student Design Challenge and HPVC,
45-
the chapter addresses real-world problems with engineering
46-
creativity. Their STEM outreach initiatives further enhance their
47-
impact, solidifying their reputation for excellence in mechanical
48-
engineering.
49-
</p>
50-
</div>
51-
{/* Timeline */}
5233
<div className="relative" ref={timelineRef}>
5334
<div className="grid grid-cols-9 gap-2">
54-
{achievementsData.map((achievement, index) => (
55-
<div key={achievement.id} className="contents">
56-
{/* Left card */}
57-
<div
58-
className={`col-span-4 ${index % 2 === 0 ? "flex justify-end" : ""} hidden md:flex`}
59-
>
60-
{index % 2 === 0 && (
61-
<div className="w-full max-w-md">
62-
<AchievementCard
63-
title={achievement.title}
64-
description={achievement.description}
65-
image={achievement.image}
66-
date={achievement.date}
67-
isLeft={true}
68-
index={index}
69-
/>
70-
</div>
71-
)}
72-
</div>
73-
{/* Timeline line and dot */}
74-
<div className="col-span-1 flex flex-col items-center relative">
75-
{/* Vertical line */}
76-
<div className="w-1 bg-gray-300 h-full absolute top-0 left-1/2 -translate-x-1/2 z-0"></div>
35+
{achievementsData
36+
.sort((a, b) => parseInt(a.year) - parseInt(b.year))
37+
.map((achievement, index) => (
38+
<div key={achievement.id} className="contents">
39+
{/* Left card */}
40+
<div
41+
className={`col-span-4 ${index % 2 === 0 ? "flex justify-end" : ""} hidden md:flex`}
42+
>
43+
{index % 2 === 0 && (
44+
<div className="w-full max-w-md">
45+
<AchievementCard
46+
title={achievement.title}
47+
description={achievement.description}
48+
year={achievement.year}
49+
isLeft={true}
50+
index={index}
51+
/>
52+
</div>
53+
)}
54+
</div>
55+
56+
{/* Timeline line and dot */}
57+
<div className="col-span-1 hidden md:flex flex-col items-center relative">
58+
{/* Vertical line */}
59+
<div className="w-1 bg-gray-300 h-full absolute top-0 left-1/2 -translate-x-1/2 z-0"></div>
7760

78-
{/* Timeline dot */}
79-
<div className="z-10">
80-
<div
81-
className={`w-4 h-4 rounded-full border-background bg-yellow-500 border-2 border-white transition-all duration-500
82-
${
61+
{/* Timeline dot */}
62+
<div className="z-10 relative">
63+
<div
64+
className={`w-4 h-4 rounded-full border-2 border-white transition-all duration-700 ${
8365
visibleDots.has(index)
84-
? "bg-timeline-dot-active shadow-glow animate-glow-pulse"
85-
: "bg-timeline-dot"
86-
}
87-
`}
88-
></div>
66+
? "bg-[#0B2044] shadow-lg shadow-blue-900/50 scale-125"
67+
: "bg-gray-400"
68+
}`}
69+
></div>
70+
</div>
8971
</div>
90-
</div>
91-
{/* Right card */}
92-
<div
93-
className={`col-span-4 ${index % 2 !== 0 ? "flex justify-start" : ""} hidden md:flex`}
94-
>
95-
{index % 2 !== 0 && (
72+
73+
{/* Right card */}
74+
<div
75+
className={`col-span-4 ${index % 2 !== 0 ? "flex justify-start" : ""} hidden md:flex`}
76+
>
77+
{index % 2 !== 0 && (
78+
<div className="w-full max-w-md">
79+
<AchievementCard
80+
title={achievement.title}
81+
description={achievement.description}
82+
year={achievement.year}
83+
isLeft={false}
84+
index={index}
85+
/>
86+
</div>
87+
)}
88+
</div>
89+
90+
{/* Mobile view */}
91+
<div className="col-span-9 flex justify-center md:hidden">
9692
<div className="w-full max-w-md">
9793
<AchievementCard
9894
title={achievement.title}
9995
description={achievement.description}
100-
image={achievement.image}
101-
date={achievement.date}
102-
isLeft={false}
96+
year={achievement.year}
97+
isLeft={true}
10398
index={index}
10499
/>
105100
</div>
106-
)}
107-
</div>
108-
{/* Mobile view: single column, card below dot/line */}
109-
<div className="col-span-9 flex justify-center md:hidden">
110-
<div className="w-full max-w-md">
111-
<AchievementCard
112-
title={achievement.title}
113-
description={achievement.description}
114-
image={achievement.image}
115-
date={achievement.date}
116-
isLeft={true}
117-
index={index}
118-
/>
119101
</div>
120102
</div>
121-
</div>
122-
))}
103+
))}
123104
</div>
124105
</div>
125106
</div>

‎src/config/achievement.js‎

Lines changed: 49 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,72 @@
11
const achievementsData = [
22
{
33
id: 1,
4-
title: "Name",
4+
title: "HPVC",
55
description:
6-
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
7-
image:
8-
"https://images.unsplash.com/photo-1593376853899-fbb47a057fa0?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cm9ib3RzfGVufDB8fDB8fHww",
9-
date: "December 2023",
6+
"Secured 3rd Position Globally in Critical Design Review and 1st Position among Indian Colleges.",
7+
year: "2021",
108
},
119
{
1210
id: 2,
13-
title: "Name",
11+
title: "HPVC",
1412
description:
15-
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
16-
image:
17-
"https://images.unsplash.com/photo-1593376853899-fbb47a057fa0?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cm9ib3RzfGVufDB8fDB8fHww",
18-
date: "December 2023",
13+
"2nd Position Globally in Critical Design and 3rd Position in Innovation- BlueStreak 9.0.",
14+
year: "2022",
1915
},
2016
{
2117
id: 3,
22-
title: "Name",
18+
title: "IAM-3D",
2319
description:
24-
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
25-
image:
26-
"https://images.unsplash.com/photo-1593376853899-fbb47a057fa0?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cm9ib3RzfGVufDB8fDB8fHww",
27-
date: "December 2023",
20+
"Secured 2nd Position Overall, Team BlueStreak 3.0 (FPV Drone Project) and 9th Place Globally in 2022.",
21+
year: "2023",
2822
},
2923
{
3024
id: 4,
31-
title: "Name",
25+
title: "ASME XRC 2024",
3226
description:
33-
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
34-
image:
35-
"https://images.unsplash.com/photo-1593376853899-fbb47a057fa0?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cm9ib3RzfGVufDB8fDB8fHww",
36-
date: "December 2023",
27+
"Team BlueBirds Secured 1st Position in Extended Reality Challenge For Sustainable innovations in ocean cleanup.",
28+
year: "2024",
3729
},
3830
{
3931
id: 5,
40-
title: "Name",
32+
title: "HPVC",
4133
description:
42-
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
43-
image:
44-
"https://images.unsplash.com/photo-1593376853899-fbb47a057fa0?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cm9ib3RzfGVufDB8fDB8fHww",
45-
date: "December 2023",
34+
"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.",
35+
year: "2025",
36+
},
37+
{
38+
id: 6,
39+
title: "HPVC",
40+
description:
41+
"Secured 9th in Endurance and 13th Overall in E-Fest Asia Pacific",
42+
year: "2019",
43+
},
44+
{
45+
id: 7,
46+
title: "HPVC",
47+
description:
48+
"Secured 20th in men's endurance race and 24th in female drag race out of 43 teams, HPVC ASIA PACIFIC.",
49+
year: "2017",
50+
},
51+
{
52+
id: 8,
53+
title: "HPVC",
54+
description:
55+
"Secured 2nd Position in design event and 9th in overall, HPVC ASIA PACIFIC VIT VELLORE.",
56+
year: "2016",
57+
},
58+
{
59+
id: 9,
60+
title: "HPVC",
61+
description: "Highest Innovation Score, HPVC India at DTU.",
62+
year: "2015",
63+
},
64+
{
65+
id: 10,
66+
title: "HPVC",
67+
description:
68+
"First International Participation at HPVC East, University of Central Florida and Highest marks in Analysis Section, HPV India at IIT Delhi.",
69+
year: "2014",
4670
},
4771
];
4872

0 commit comments

Comments
 (0)