resume animation playing

umyeah · umyeah · commit 545765b22b2d · 2025-08-10T01:55:22.000-06:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@astrojs/react": "^4.3.0",
     "astro": "^5.2.3",
+    "framer-motion": "^12.23.12",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },
diff --git a/src/components/react/ResumeTimeline.css b/src/components/react/ResumeTimeline.css
@@ -27,6 +27,12 @@
 .resume-timeline__container {
   position: relative;
   padding-left: 0;
+  overflow: visible;
+}
+
+/* Allow for slide-in animations from outside the viewport */
+.timeline-item {
+  overflow: visible;
 }
 
 /* Timeline Item Layout */
@@ -314,6 +320,56 @@
   .content-card:hover {
     transform: none;
   }
+  
+  /* Disable all Framer Motion animations for users who prefer reduced motion */
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Enhanced Animation Support */
+.timeline-item {
+  /* Improve performance during animations */
+  will-change: transform, opacity;
+}
+
+.company-avatar {
+  /* Add subtle glow effect on hover for enhanced visual feedback */
+  transition: box-shadow 0.3s ease;
+}
+
+.company-avatar:hover {
+  box-shadow: 0 2px 12px rgba(var(--accent-rgb), 0.4),
+              0 4px 20px rgba(var(--accent-rgb), 0.2);
+}
+
+/* Smooth transforms for better animation performance */
+.content-card,
+.company-avatar,
+.timeline-line {
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+}
+
+/* Enhanced hover states that work with Framer Motion */
+.content-card {
+  transition: box-shadow 0.3s ease;
+  position: relative;
+}
+
+.content-card:hover {
+  /* Enhanced shadow for better depth perception */
+  box-shadow: 0 6px 20px rgba(var(--gray), 0.25), 
+              0 12px 40px rgba(var(--gray), 0.15),
+              0 0 0 1px rgba(var(--accent-rgb), 0.1);
+}
+
+/* Enhanced hover effect styling - backdrop removed for better readability */
+.timeline-item:hover .content-card {
+  position: relative;
+  z-index: 1000;
 }
 
 /* Focus States for Accessibility */
diff --git a/src/components/react/ResumeTimeline.tsx b/src/components/react/ResumeTimeline.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { motion, useInView } from 'framer-motion';
 import { resumeEvents, type ResumeEvent } from '../../data/resumeEvents';
 import './ResumeTimeline.css';
 
@@ -11,9 +12,13 @@ interface ResumeTimelineItemProps {
   event: ResumeEvent;
   isFirst: boolean;
   isLast: boolean;
+  index: number;
 }
 
-const ResumeTimelineItem: React.FC<ResumeTimelineItemProps> = ({ event, isFirst, isLast }) => {
+const ResumeTimelineItem: React.FC<ResumeTimelineItemProps> = ({ event, isFirst, isLast, index }) => {
+  const ref = React.useRef(null);
+  const isInView = useInView(ref, { once: true, margin: "-20%" });
+
   const formatDateRange = (startDate: string, endDate: string | null) => {
     const formatDate = (dateString: string) => {
       const [year, month] = dateString.split('-');
@@ -34,51 +39,117 @@ const ResumeTimelineItem: React.FC<ResumeTimelineItemProps> = ({ event, isFirst,
       .substring(0, 2);
   };
 
+  // Determine slide direction based on index (odd/even)
+  const isOdd = index % 2 === 1;
+  const slideX = isOdd ? -400 : 400; // Odd slides from left, even slides from right (using large fixed values for SSR compatibility)
+
   return (
-    <div className={`timeline-item ${isFirst ? 'timeline-item--first' : ''} ${isLast ? 'timeline-item--last' : ''}`}>
+    <motion.div 
+      ref={ref}
+      className={`timeline-item ${isFirst ? 'timeline-item--first' : ''} ${isLast ? 'timeline-item--last' : ''}`}
+      initial={{ opacity: 0, x: slideX, scale: 0.95 }}
+      animate={isInView ? { opacity: 1, x: 0, scale: 1 } : { opacity: 0, x: slideX, scale: 0.95 }}
+      transition={{ duration: 0.6, ease: "easeOut" }}
+    >
       <div className="timeline-connector">
-        <div className="company-avatar">
+        <motion.div 
+          className="company-avatar"
+          initial={{ scale: 0, rotate: -180 }}
+          animate={isInView ? { scale: 1, rotate: 0 } : { scale: 0, rotate: -180 }}
+          transition={{ type: "spring", stiffness: 200, damping: 10, delay: 0.2 }}
+        >
           <span className="company-avatar__initials">
             {getCompanyInitials(event.company)}
           </span>
-        </div>
-        {!isLast && <div className="timeline-line"></div>}
+        </motion.div>
+        {!isLast && (
+          <motion.div 
+            className="timeline-line"
+            initial={{ scaleY: 0, opacity: 0 }}
+            animate={isInView ? { scaleY: 1, opacity: 1 } : { scaleY: 0, opacity: 0 }}
+            transition={{ duration: 0.8, ease: "easeOut", delay: 0.5 }}
+            style={{ originY: 0 }}
+          ></motion.div>
+        )}
       </div>
       
-      <div className="content-card">
+      <motion.div 
+        className="content-card"
+        initial={{ opacity: 0, x: 60, scale: 0.95 }}
+        animate={isInView ? { opacity: 1, x: 0, scale: 1 } : { opacity: 0, x: 60, scale: 0.95 }}
+        transition={{ duration: 0.5, ease: "easeOut", delay: 0.3 }}
+      >
         <div className="content-card__header">
           <div className="content-card__title-section">
-            <h3 className="job-title">{event.title}</h3>
-            <div className="company-info">
+            <motion.h3 
+              className="job-title"
+              initial={{ opacity: 0 }}
+              animate={isInView ? { opacity: 1 } : { opacity: 0 }}
+              transition={{ delay: 0.5, duration: 0.3 }}
+            >
+              {event.title}
+            </motion.h3>
+            <motion.div 
+              className="company-info"
+              initial={{ opacity: 0 }}
+              animate={isInView ? { opacity: 1 } : { opacity: 0 }}
+              transition={{ delay: 0.6, duration: 0.3 }}
+            >
               <span className="company-name">{event.company}</span>
               <span className="company-location">{event.location}</span>
-            </div>
+            </motion.div>
           </div>
-          <div className="date-range">
+          <motion.div 
+            className="date-range"
+            initial={{ opacity: 0 }}
+            animate={isInView ? { opacity: 1 } : { opacity: 0 }}
+            transition={{ delay: 0.7, duration: 0.3 }}
+          >
             {formatDateRange(event.startDate, event.endDate)}
-          </div>
+          </motion.div>
         </div>
         
-        <div className="description">
+        <motion.div 
+          className="description"
+          initial={{ opacity: 0 }}
+          animate={isInView ? { opacity: 1 } : { opacity: 0 }}
+          transition={{ delay: 0.8, duration: 0.4 }}
+        >
           {event.description.split('\n\n').map((paragraph, index) => {
             // Check if this paragraph starts with a position title
             const positionMatch = paragraph.match(/^([^:]+):/);
             if (positionMatch) {
               const [fullMatch, positionTitle] = positionMatch;
               const description = paragraph.substring(fullMatch.length).trim();
               return (
-                <div key={index} className="position-section">
+                <motion.div 
+                  key={index} 
+                  className="position-section"
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 10 }}
+                  transition={{ delay: 0.9 + index * 0.1, duration: 0.3 }}
+                >
                   <h4 className="position-title">{positionTitle}</h4>
                   <p className="position-description">{description}</p>
-                </div>
+                </motion.div>
               );
             } else {
-              return <p key={index} className="position-description">{paragraph}</p>;
+              return (
+                <motion.p 
+                  key={index} 
+                  className="position-description"
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 10 }}
+                  transition={{ delay: 0.9 + index * 0.1, duration: 0.3 }}
+                >
+                  {paragraph}
+                </motion.p>
+              );
             }
           })}
-        </div>
-      </div>
-    </div>
+        </motion.div>
+      </motion.div>
+    </motion.div>
   );
 };
 
@@ -99,6 +170,7 @@ const ResumeTimeline: React.FC<ResumeTimelineProps> = ({
           <ResumeTimelineItem
             key={event.id}
             event={event}
+            index={index}
             isFirst={index === 0}
             isLast={index === events.length - 1}
           />
