feat(motion): add scroll reveals and micro-interactions

src/components/SkillsSection.tsx

@@ -29,7 +29,7 @@ export const SkillsSection: React.FC = () => {
     <section id="skills" className={styles.skillsSection}>
       <div className="content-container">
         {/* Section Header */}
-        <div className="section-header">
+        <div className="section-header" data-reveal="soft">
           <span className="section-eyebrow">SKILLS & TOOLS</span>
           <div className="section-title-wrap">
             <h2 className="section-title">The Stack Behind the Work...</h2>
@@ -38,7 +38,7 @@ export const SkillsSection: React.FC = () => {
         </div>
 
         {/* Main Card Container */}
-        <div className={styles.mainCard} aria-live="polite">
+        <div className={styles.mainCard} aria-live="polite" data-reveal="scale">
           {/* Section: Skills */}
           <div className={styles.skillsBlock}>
             <span className={styles.cardEyebrow}>SKILLS</span>
@@ -97,7 +97,11 @@ export const SkillsSection: React.FC = () => {
         </div>
 
         {/* Filter Tabs Under Card */}
-        <div className={styles.filterTabsRow} aria-label="Choose skill discipline">
+        <div
+          className={styles.filterTabsRow}
+          aria-label="Choose skill discipline"
+          data-reveal="soft"
+        >
           {filterTabs.map((tab) => {
             const isActive = activeFilter === tab.id;
             return (