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 { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
const WORK_EXPERIENCES = [ const WORK_EXPERIENCES = [
{ {
@@ -138,48 +139,54 @@ export default function WorkExperience() {
}}>All Jobs</span> }}>All Jobs</span>
</div> </div>
{filteredExperiences.map((experience, index) => ( <AnimatePresence mode="popLayout">
<div key={`${experience.company}-${experience.period}`} style={{ {filteredExperiences.map((experience, index) => (
marginBottom: "30px", <motion.div
padding: "20px", layout
backgroundColor: "rgba(152, 116, 116, 0.1)", key={`${experience.company}-${experience.period}`}
borderRadius: "10px", initial={{ opacity: 0, x: -20 }}
border: "1px solid rgba(255, 255, 255, 0.2)", animate={{ opacity: 1, x: 0 }}
display: "flex", exit={{ opacity: 0, x: -20 }}
gap: "20px", transition={{ duration: 0.3 }}
alignItems: "flex-start", style={{
animation: "slideInFromLeft 0.6s ease-out forwards", marginBottom: "30px",
// 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) padding: "20px",
animationDelay: `${index * 0.2}s`, // Faster stagger for filtered list backgroundColor: "rgba(152, 116, 116, 0.1)",
opacity: 0 borderRadius: "10px",
}}> border: "1px solid rgba(255, 255, 255, 0.2)",
{experience.image && ( display: "flex",
<img gap: "20px",
src={experience.image} alignItems: "flex-start",
alt={experience.company} }}
style={{ >
width: "120px", {experience.image && (
height: "120px", <img
objectFit: "cover", src={experience.image}
borderRadius: "8px", alt={experience.company}
flexShrink: 0 style={{
}} width: "120px",
/> height: "120px",
)} objectFit: "cover",
<div style={{ flex: 1 }}> borderRadius: "8px",
<h2 style={{ margin: "0 0 5px 0", fontSize: "clamp(16px, 2vw, 24px)" }}>{experience.company}</h2> flexShrink: 0
<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) => ( <div style={{ flex: 1 }}>
<li key={idx} style={{ fontSize: "clamp(10px, 1.2vw, 16px)", marginBottom: "8px", opacity: 0.9 }}> <h2 style={{ margin: "0 0 5px 0", fontSize: "clamp(16px, 2vw, 24px)" }}>{experience.company}</h2>
{item} <p style={{ margin: "0 0 5px 0", fontSize: "clamp(12px, 1.5vw, 18px)", fontStyle: "italic", opacity: 0.9 }}>{experience.position}</p>
</li> <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" }}>
</ul> {experience.description.map((item, idx) => (
</div> <li key={idx} style={{ fontSize: "clamp(10px, 1.2vw, 16px)", marginBottom: "8px", opacity: 0.9 }}>
</div> {item}
))} </li>
))}
</ul>
</div>
</motion.div>
))}
</AnimatePresence>
</div> </div>
</div> </div>
</div> </div>