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

src/pages/WorkExperience.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 
 const WORK_EXPERIENCES = [
     {
@@ -138,8 +139,16 @@ export default function WorkExperience() {
                         }}>All Jobs</span>
                     </div>
 
+                    <AnimatePresence mode="popLayout">
                         {filteredExperiences.map((experience, index) => (
-                        <div key={`${experience.company}-${experience.period}`} style={{
+                            <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)",
@@ -148,11 +157,8 @@ export default function WorkExperience() {
                                     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}
@@ -178,8 +184,9 @@ export default function WorkExperience() {
                                         ))}
                                     </ul>
                                 </div>
-                        </div>
+                            </motion.div>
                         ))}
+                    </AnimatePresence>
                 </div>
             </div>
         </div>