Skip to content

Commit 6fdb166

Browse files
sa-fw-ansa-fw-an
committed
Refine work section
1 parent 0a0d556 commit 6fdb166

File tree

1 file changed

+174
-17
lines changed

1 file changed

+174
-17
lines changed

‎src/sections/Experience.jsx‎

Lines changed: 174 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* eslint-disable react/no-unknown-property */
2-
import { Suspense, useState } from "react";
2+
import { Suspense, useState, useRef, useEffect } from "react";
33
import { Canvas } from "@react-three/fiber";
44
import { OrbitControls } from "@react-three/drei";
55

@@ -9,15 +9,49 @@ import { workExperiences } from "../constants/work.js";
99

1010
const WorkExperience = () => {
1111
const [animationName, setAnimationName] = useState("idle");
12+
const [activeExperience, setActiveExperience] = useState(null);
13+
const [isVisible, setIsVisible] = useState(false);
14+
const sectionRef = useRef();
1215

13-
const handleAnimationChange = (animation) => {
16+
useEffect(() => {
17+
const observer = new IntersectionObserver(
18+
([entry]) => {
19+
if (entry.isIntersecting) {
20+
setIsVisible(true);
21+
}
22+
},
23+
{ threshold: 0.1 },
24+
);
25+
26+
if (sectionRef.current) {
27+
observer.observe(sectionRef.current);
28+
}
29+
30+
return () => observer.disconnect();
31+
}, []);
32+
33+
const handleExperienceHover = (index, animation) => {
34+
setActiveExperience(index);
1435
setAnimationName(animation.toLowerCase());
1536
};
1637

38+
const handleExperienceLeave = () => {
39+
setActiveExperience(null);
40+
setAnimationName("idle");
41+
};
42+
43+
const isActive = (index) => activeExperience === index;
44+
1745
return (
18-
<section className="c-space my-20" id="work">
46+
<section ref={sectionRef} className="c-space my-20" id="work">
1947
<div className="w-full text-white-600">
20-
<p className="head-text">My Work Experience</p>
48+
<p
49+
className={`head-text transform transition-all duration-1000 ${
50+
isVisible ? "translate-y-0 opacity-100" : "translate-y-8 opacity-0"
51+
}`}
52+
>
53+
My Work Experience
54+
</p>
2155

2256
<div className="work-container">
2357
<div className="work-canvas">
@@ -42,37 +76,160 @@ const WorkExperience = () => {
4276
{workExperiences.map((item, index) => (
4377
<div
4478
key={item.name}
45-
onClick={() => handleAnimationChange(item.animation)}
46-
onPointerOver={() => handleAnimationChange(item.animation)}
47-
onPointerOut={() => setAnimationName("idle")}
48-
className="work-content_container group"
79+
onClick={() => handleExperienceHover(index, item.animation)}
80+
onPointerOver={() =>
81+
handleExperienceHover(index, item.animation)
82+
}
83+
onPointerOut={handleExperienceLeave}
84+
className={`
85+
work-content_container group relative overflow-hidden
86+
transform transition-all duration-500 ease-out
87+
${isVisible ? "translate-x-0 opacity-100" : "translate-x-8 opacity-0"}
88+
${isActive(index) ? "scale-105 z-10" : "scale-100"}
89+
`}
90+
style={{ transitionDelay: `${index * 100}ms` }}
4991
>
50-
<div className="flex flex-col h-full justify-start items-center py-2">
51-
<div className="work-content_logo">
92+
<div
93+
className={`
94+
absolute inset-0 bg-gradient-to-r from-white-600/5 via-transparent to-white-600/5
95+
transition-opacity duration-500
96+
${isActive(index) ? "opacity-100" : "opacity-0 group-hover:opacity-100"}
97+
`}
98+
/>
99+
100+
<div className="flex flex-col h-full justify-start items-center py-2 relative z-10">
101+
<div
102+
className={`
103+
work-content_logo relative transition-all duration-500 transform
104+
${isActive(index) ? "scale-110 shadow-2xl shadow-white/10" : "scale-100 group-hover:scale-105"}
105+
`}
106+
>
107+
<div
108+
className={`
109+
absolute -inset-1 rounded-xl bg-gradient-to-br from-white-600/20 to-white-400/20 blur-md
110+
transition-opacity duration-500
111+
${isActive(index) ? "opacity-100" : "opacity-0 group-hover:opacity-60"}
112+
`}
113+
/>
52114
<img
53-
className="w-full h-full"
115+
className="w-full h-full relative z-10 rounded-lg"
54116
src={item.icon}
55117
alt={item.name}
56118
/>
57119
</div>
58120

59-
<div className="work-content_bar" />
121+
<div
122+
className={`
123+
work-content_bar relative transition-all duration-500
124+
${isActive(index) ? "bg-gradient-to-b from-white-600 to-white-400 shadow-lg shadow-white/20" : ""}
125+
`}
126+
>
127+
<div
128+
className={`
129+
absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1
130+
w-3 h-3 rounded-full border-2 transition-all duration-500
131+
${
132+
isActive(index)
133+
? "bg-white-600 border-white-600 scale-125 shadow-lg shadow-white/30"
134+
: "bg-white-500 border-white-500 scale-100"
135+
}
136+
`}
137+
/>
138+
</div>
60139
</div>
61140

62-
<div className="sm:p-5 px-2.5 py-5">
63-
<p className="font-bold text-white-800">{item.name}</p>
64-
<p className="text-sm mb-5">
65-
{item.pos} -- <span>{item.duration}</span>
141+
<div className="sm:p-5 px-2.5 py-5 relative z-10">
142+
<p
143+
className={`
144+
font-bold text-white-800 text-xl mb-3 transition-all duration-300
145+
${isActive(index) ? "text-white-600" : ""}
146+
`}
147+
>
148+
{item.name}
66149
</p>
67-
<p className="group-hover:text-white transition-all ease-in-out duration-500">
150+
151+
<div
152+
className={`
153+
text-sm mb-5 flex flex-wrap items-center gap-2 transition-all duration-300
154+
${isActive(index) ? "text-white-600" : "text-white-500"}
155+
`}
156+
>
157+
<span className="font-semibold">{item.pos}</span>
158+
<span className="text-white-400">•</span>
159+
<span
160+
className={`
161+
px-3 py-1 rounded-full text-xs border transition-all duration-300
162+
${
163+
isActive(index)
164+
? "bg-white-600/10 border-white-600/30 text-white-600"
165+
: "bg-white-400/5 border-white-400/20 text-white-400"
166+
}
167+
`}
168+
>
169+
{item.duration}
170+
</span>
171+
</div>
172+
173+
<p
174+
className={`
175+
leading-relaxed transition-all duration-500
176+
${isActive(index) ? "text-white-600" : "text-white-500 group-hover:text-white-600"}
177+
`}
178+
>
68179
{item.title}
69180
</p>
181+
182+
{item.skills && (
183+
<div className="flex flex-wrap gap-2 mt-4">
184+
{item.skills.map((skill, skillIndex) => (
185+
<span
186+
key={skill}
187+
className={`
188+
px-2 py-1 text-xs rounded-md border transition-all duration-300
189+
${
190+
isActive(index)
191+
? "bg-white-600/10 border-white-600/30 text-white-600"
192+
: "bg-white-400/5 border-white-400/20 text-white-400 hover:bg-white-500/10"
193+
}
194+
`}
195+
style={{ transitionDelay: `${skillIndex * 50}ms` }}
196+
>
197+
{skill}
198+
</span>
199+
))}
200+
</div>
201+
)}
70202
</div>
203+
204+
<div
205+
className={`
206+
absolute inset-0 rounded-lg border transition-all duration-500
207+
${
208+
isActive(index)
209+
? "border-white-600/40 shadow-xl shadow-white/5"
210+
: "border-transparent group-hover:border-white-400/20"
211+
}
212+
`}
213+
/>
71214
</div>
72215
))}
73216
</div>
74217
</div>
75218
</div>
219+
220+
<div
221+
className={`
222+
text-center mt-8 transform transition-all duration-1000 delay-500
223+
${isVisible ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0"}
224+
`}
225+
>
226+
<div className="inline-flex items-center space-x-4 px-6 py-3 rounded-full bg-white-400/5 border border-white-400/20">
227+
<span className="text-white-500 text-sm">Total Experience:</span>
228+
<span className="text-white-600 font-bold text-lg">
229+
{workExperiences.length} Companies
230+
</span>
231+
</div>
232+
</div>
76233
</div>
77234
</section>
78235
);

0 commit comments

Comments
 (0)