Bayda77/digital-resume-FE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added animate presence usage in the work experience page for the toggle switch

Browse Source
This commit is contained in:
Bayda77
2026-01-13 00:33:12 -06:00
parent 4019d4cb10
commit 4291c2fd9e
1 changed files with 49 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/pages/WorkExperience.tsx
View File

@@ -1,4 +1,5 @@
import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
const WORK_EXPERIENCES = [
{
@@ -138,48 +139,54 @@ export default function WorkExperience() {
}}>All Jobs</span>
</div>
{filteredExperiences.map((experience, index) => (
<div key={`${experience.company}-${experience.period}`} style={{
marginBottom: "30px",
padding: "20px",
backgroundColor: "rgba(152, 116, 116, 0.1)",
borderRadius: "10px",
border: "1px solid rgba(255, 255, 255, 0.2)",
display: "flex",
gap: "20px",
alignItems: "flex-start",
animation: "slideInFromLeft 0.6s ease-out forwards",
// Reset key when filtering to re-trigger animation cleanly, or just use index if that's preferred strictly for list stability (though re-animating feels nicer for a filter change usually, let's keep it simple with unique key first)
animationDelay: `${index * 0.2}s`, // Faster stagger for filtered list
opacity: 0
}}>
{experience.image && (
<img
src={experience.image}
alt={experience.company}
style={{
width: "120px",
height: "120px",
objectFit: "cover",
borderRadius: "8px",
flexShrink: 0
}}
/>
)}
<div style={{ flex: 1 }}>
<h2 style={{ margin: "0 0 5px 0", fontSize: "clamp(16px, 2vw, 24px)" }}>{experience.company}</h2>
<p style={{ margin: "0 0 5px 0", fontSize: "clamp(12px, 1.5vw, 18px)", fontStyle: "italic", opacity: 0.9 }}>{experience.position}</p>
<p style={{ margin: "0 0 15px 0", fontSize: "clamp(11px, 1.2vw, 16px)", opacity: 0.8 }}>{experience.period}</p>
<ul style={{ margin: 0, paddingLeft: "20px" }}>
{experience.description.map((item, idx) => (
<li key={idx} style={{ fontSize: "clamp(10px, 1.2vw, 16px)", marginBottom: "8px", opacity: 0.9 }}>
{item}
</li>
))}
</ul>
</div>
</div>
))}
<AnimatePresence mode="popLayout">
{filteredExperiences.map((experience, index) => (
<motion.div
layout
key={`${experience.company}-${experience.period}`}
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -20 }}
transition={{ duration: 0.3 }}
style={{
marginBottom: "30px",
padding: "20px",
backgroundColor: "rgba(152, 116, 116, 0.1)",
borderRadius: "10px",
border: "1px solid rgba(255, 255, 255, 0.2)",
display: "flex",
gap: "20px",
alignItems: "flex-start",
}}
>
{experience.image && (
<img
src={experience.image}
alt={experience.company}
style={{
width: "120px",
height: "120px",
objectFit: "cover",
borderRadius: "8px",
flexShrink: 0
}}
/>
)}
<div style={{ flex: 1 }}>
<h2 style={{ margin: "0 0 5px 0", fontSize: "clamp(16px, 2vw, 24px)" }}>{experience.company}</h2>
<p style={{ margin: "0 0 5px 0", fontSize: "clamp(12px, 1.5vw, 18px)", fontStyle: "italic", opacity: 0.9 }}>{experience.position}</p>
<p style={{ margin: "0 0 15px 0", fontSize: "clamp(11px, 1.2vw, 16px)", opacity: 0.8 }}>{experience.period}</p>
<ul style={{ margin: 0, paddingLeft: "20px" }}>
{experience.description.map((item, idx) => (
<li key={idx} style={{ fontSize: "clamp(10px, 1.2vw, 16px)", marginBottom: "8px", opacity: 0.9 }}>
{item}
</li>
))}
</ul>
</div>
</motion.div>
))}
</AnimatePresence>
</div>
</div>
</div>