✨ framer motion used at about page

.stylelintrc.json

@@ -15,6 +15,7 @@
     "property-no-unknown": true,
     "scss/at-rule-no-unknown": true,
     "scss/selector-no-redundant-nesting-selector": true,
-    "max-nesting-depth": 3
+    "max-nesting-depth": 3,
+    "selector-class-pattern": null
   }
 }

src/components/pages/about-me/experienceCard/index.module.scss

@@ -1,14 +1,21 @@
 @use '~/styles/utils.scss';
 @use '~/styles/mixins' as *;
 
+.card-section {
+  height: 100vh;
+  scroll-snap-align: start;
+  padding-top: 80px;
+
+  @include sp {
+    padding-top: 20px;
+  }
+}
+
 .card-wrapper {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  height: 100vh;
-  scroll-snap-align: start;
-  padding-top: 80px;
   font-size: 2rem;
 
   @include sp {
@@ -51,26 +58,35 @@
 
   > .border {
     position: absolute;
-    top: 14rem;
+    top: 6rem;
     left: 23rem;
     width: calc(95% - 26rem);
-    height: calc(60% + 26rem);
-    max-height: 60%;
+    height: 0;
     border-top: 2px solid utils.$color-pink;
     border-right: 2px solid utils.$color-pink;
+    transition: all 2s ease;
 
     @include sp {
       top: 10rem;
     }
+
+    &.-in-view {
+      height: calc(60% + 26rem);
+      max-height: 70%;
+    }
   }
 
   > .end-year {
     position: absolute;
     top: calc(60% + 16rem);
     right: 0;
+    height: 0;
+    overflow: hidden;
+    transition: all 1s ease;
+    transition-delay: 0.5s;
 
-    @include sp {
-      top: calc(60% + 10rem);
+    &.-in-view {
+      height: 200px;
     }
   }
 }

src/components/pages/about-me/experienceCard/index.tsx

@@ -1,49 +1,65 @@
+'use client';
+import { useRef } from 'react';
+
 import classNames from 'classnames';
+import { useInView } from 'framer-motion';
 import Link from 'next/link';
 
 import { ImageWithLoading } from '~/components/common/image/imageWithLoading';
 import { Experience } from '~/types/Resume';
 
-// import { useTranslation } from 'next-i18next';
 import styles from './index.module.scss';
 
 type Props = {
   experience: Experience;
 };
 
 export const ExperienceCard = ({ experience }: Props) => {
-  // const { t } = useTranslation('common');
+  const cardRef = useRef<HTMLDivElement>(null);
+
+  const inView = useInView(cardRef);
 
   return (
-    <div className={styles['card-wrapper']}>
-      <h2 className={styles['year']}>{experience.startYear}</h2>
-      {experience.imagePath && (
-        <div className={styles['image']}>
-          <ImageWithLoading src={experience.imagePath} alt={experience.name} />
+    <section className={styles['card-section']}>
+      <div className={styles['card-wrapper']} ref={cardRef}>
+        <h2 className={styles['year']}>{experience.startYear}</h2>
+        {experience.imagePath && (
+          <div className={styles['image']}>
+            <ImageWithLoading
+              src={experience.imagePath}
+              alt={experience.name}
+            />
+          </div>
+        )}
+        {experience.url ? (
+          <Link
+            className={styles['name']}
+            href={experience.url}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {experience.name}
+          </Link>
+        ) : (
+          <p className={styles['name']}>{experience.name}</p>
+        )}
+        <div className={styles['details']}>
+          <p>{experience.department}</p>
+          {experience.degree && <p>{experience.degree}</p>}
         </div>
-      )}
-      {experience.url ? (
-        <Link
-          className={styles['name']}
-          href={experience.url}
-          target="_blank"
-          rel="noopener noreferrer"
+        <div
+          className={classNames(styles['border'], inView && styles['-in-view'])}
+        />
+        <div
+          className={classNames(
+            styles['year'],
+            styles['end-year'],
+            inView && styles['-in-view'],
+          )}
         >
-          {experience.name}
-        </Link>
-      ) : (
-        <p className={styles['name']}>{experience.name}</p>
-      )}
-      <div className={styles['details']}>
-        <p className={styles['detail']}>{experience.department}</p>
-        {experience.degree && (
-          <p className={styles['detail']}>{experience.degree}</p>
-        )}
+          {experience.endYear}
+        </div>
       </div>
-      <div className={styles['border']} />
-      <h2 className={classNames(styles['year'], styles['end-year'])}>
-        {experience.endYear}
-      </h2>
-    </div>
+    </section>
   );
 };