fix: smooth carousel transitions with sync mode and reduced slide distance

Change AnimatePresence from mode="wait" (jerk/gap between slides) to
mode="sync" (simultaneous enter/exit). Reduce slide distance from 300px
to 150px and use Material Design easing curve for smoother motion.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: davidagustin

src/components/Projects.tsx

@@ -166,9 +166,9 @@ const CarouselView: React.FC<{
   const pageProjects = projects.slice(pageIndex, pageIndex + columns);
 
   const variants = {
-    enter: (d: number) => ({ x: d > 0 ? 300 : -300 }),
-    center: { x: 0 },
-    exit: (d: number) => ({ x: d > 0 ? -300 : 300 }),
+    enter: (d: number) => ({ x: d > 0 ? 150 : -150, opacity: 0 }),
+    center: { x: 0, opacity: 1 },
+    exit: (d: number) => ({ x: d > 0 ? -150 : 150, opacity: 0 }),
   };
 
   const gridClass =
@@ -201,15 +201,15 @@ const CarouselView: React.FC<{
 
         {/* Cards Grid */}
         <div className={`overflow-hidden rounded-xl ${columns === 1 ? 'min-h-[420px]' : 'min-h-[480px]'}`}>
-          <AnimatePresence mode="wait" custom={direction}>
+          <AnimatePresence mode="sync" custom={direction}>
             <motion.div
               key={pageIndex}
               custom={direction}
               variants={variants}
               initial="enter"
               animate="center"
               exit="exit"
-              transition={{ duration: 0.3, ease: 'easeInOut' }}
+              transition={{ duration: 0.25, ease: [0.4, 0, 0.2, 1] }}
               className={`grid ${gridClass} gap-6`}
             >
               {pageProjects.map((project) => (