Skip to content

Commit 1c352bb

Browse files
sa-fw-ansa-fw-an
committed
Change work section
1 parent 95f2c81 commit 1c352bb

File tree

1 file changed

+21
-105
lines changed

1 file changed

+21
-105
lines changed

‎src/sections/Experience.jsx‎

Lines changed: 21 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
/* eslint-disable react/no-unknown-property */
21
import { Suspense, useState, useRef, useEffect } from "react";
32
import { Canvas } from "@react-three/fiber";
43
import { OrbitControls } from "@react-three/drei";
@@ -15,27 +14,20 @@ const WorkExperience = () => {
1514

1615
useEffect(() => {
1716
const observer = new IntersectionObserver(
18-
([entry]) => {
19-
if (entry.isIntersecting) {
20-
setIsVisible(true);
21-
}
22-
},
17+
([entry]) => setIsVisible(entry.isIntersecting),
2318
{ threshold: 0.1 },
2419
);
2520

26-
if (sectionRef.current) {
27-
observer.observe(sectionRef.current);
28-
}
29-
21+
if (sectionRef.current) observer.observe(sectionRef.current);
3022
return () => observer.disconnect();
3123
}, []);
3224

33-
const handleExperienceHover = (index, animation) => {
25+
const handleHover = (index, animation) => {
3426
setActiveExperience(index);
3527
setAnimationName(animation.toLowerCase());
3628
};
3729

38-
const handleExperienceLeave = () => {
30+
const handleLeave = () => {
3931
setActiveExperience(null);
4032
setAnimationName("idle");
4133
};
@@ -46,9 +38,7 @@ const WorkExperience = () => {
4638
<section ref={sectionRef} className="c-space my-20" id="work">
4739
<div className="w-full text-white-600">
4840
<p
49-
className={`head-text transform transition-all duration-1000 ${
50-
isVisible ? "translate-y-0 opacity-100" : "translate-y-8 opacity-0"
51-
}`}
41+
className={`head-text transform transition-all duration-1000 ${isVisible ? "translate-y-0 opacity-100" : "translate-y-8 opacity-0"}`}
5242
>
5343
My Work Experience
5444
</p>
@@ -60,7 +50,6 @@ const WorkExperience = () => {
6050
<spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
6151
<directionalLight position={[10, 10, 10]} intensity={1} />
6252
<OrbitControls enableZoom={false} maxPolarAngle={Math.PI / 2} />
63-
6453
<Suspense fallback={<CanvasLoader />}>
6554
<Developer
6655
position-y={-3}
@@ -73,43 +62,25 @@ const WorkExperience = () => {
7362

7463
<div className="work-content">
7564
<div className="sm:py-10 py-5 sm:px-5 px-2.5">
76-
{workExperiences.map((item, index) => (
65+
{[...workExperiences].reverse().map((item, index) => (
7766
<div
7867
key={item.name}
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-
`}
68+
onClick={() => handleHover(index, item.animation)}
69+
onPointerOver={() => handleHover(index, item.animation)}
70+
onPointerOut={handleLeave}
71+
className={`work-content_container group relative overflow-hidden transform transition-all duration-500 ease-out ${isVisible ? "translate-x-0 opacity-100" : "translate-x-8 opacity-0"} ${isActive(index) ? "scale-105 z-10" : "scale-100"}`}
9072
style={{ transitionDelay: `${index * 100}ms` }}
9173
>
9274
<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-
`}
75+
className={`absolute inset-0 bg-gradient-to-r from-white-600/5 via-transparent to-white-600/5 transition-opacity duration-500 ${isActive(index) ? "opacity-100" : "opacity-0 group-hover:opacity-100"}`}
9876
/>
9977

10078
<div className="flex flex-col h-full justify-start items-center py-2 relative z-10">
10179
<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-
`}
80+
className={`work-content_logo relative transition-all duration-500 transform ${isActive(index) ? "scale-110 shadow-2xl shadow-white/10" : "scale-100 group-hover:scale-105"}`}
10681
>
10782
<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-
`}
83+
className={`absolute -inset-1 rounded-xl bg-gradient-to-br from-white-600/20 to-white-400/20 blur-md transition-opacity duration-500 ${isActive(index) ? "opacity-100" : "opacity-0 group-hover:opacity-60"}`}
11384
/>
11485
<img
11586
className="w-full h-full relative z-10 rounded-lg"
@@ -119,62 +90,35 @@ const WorkExperience = () => {
11990
</div>
12091

12192
<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-
`}
93+
className={`work-content_bar relative transition-all duration-500 ${isActive(index) ? "bg-gradient-to-b from-white-600 to-white-400 shadow-lg shadow-white/20" : ""}`}
12694
>
12795
<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-
`}
96+
className={`absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1 w-3 h-3 rounded-full border-2 transition-all duration-500 ${isActive(index) ? "bg-white-600 border-white-600 scale-125 shadow-lg shadow-white/30" : "bg-white-500 border-white-500 scale-100"}`}
13797
/>
13898
</div>
13999
</div>
140100

141101
<div className="sm:p-5 px-2.5 py-5 relative z-10">
142102
<p
143-
className={`
144-
font-bold text-white-800 text-xl mb-3 transition-all duration-300
145-
${isActive(index) ? "text-white-600" : ""}
146-
`}
103+
className={`font-bold text-white-800 text-xl mb-3 transition-all duration-300 ${isActive(index) ? "text-white-600" : ""}`}
147104
>
148105
{item.name}
149106
</p>
150107

151108
<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-
`}
109+
className={`text-sm mb-5 flex flex-wrap items-center gap-2 transition-all duration-300 ${isActive(index) ? "text-white-600" : "text-white-500"}`}
156110
>
157111
<span className="font-semibold">{item.pos}</span>
158112
<span className="text-white-400">•</span>
159113
<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-
`}
114+
className={`px-3 py-1 rounded-full text-xs border transition-all duration-300 ${isActive(index) ? "bg-white-600/10 border-white-600/30 text-white-600" : "bg-white-400/5 border-white-400/20 text-white-400"}`}
168115
>
169116
{item.duration}
170117
</span>
171118
</div>
172119

173120
<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-
`}
121+
className={`leading-relaxed transition-all duration-500 ${isActive(index) ? "text-white-600" : "text-white-500 group-hover:text-white-600"}`}
178122
>
179123
{item.title}
180124
</p>
@@ -184,14 +128,7 @@ const WorkExperience = () => {
184128
{item.skills.map((skill, skillIndex) => (
185129
<span
186130
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-
`}
131+
className={`px-2 py-1 text-xs rounded-md border transition-all duration-300 ${isActive(index) ? "bg-white-600/10 border-white-600/30 text-white-600" : "bg-white-400/5 border-white-400/20 text-white-400 hover:bg-white-500/10"}`}
195132
style={{ transitionDelay: `${skillIndex * 50}ms` }}
196133
>
197134
{skill}
@@ -202,34 +139,13 @@ const WorkExperience = () => {
202139
</div>
203140

204141
<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-
`}
142+
className={`absolute inset-0 rounded-lg border transition-all duration-500 ${isActive(index) ? "border-white-600/40 shadow-xl shadow-white/5" : "border-transparent group-hover:border-white-400/20"}`}
213143
/>
214144
</div>
215145
))}
216146
</div>
217147
</div>
218148
</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>
233149
</div>
234150
</section>
235151
);

0 commit comments

Comments
 (0)