포트폴리오 Skills 만들기 | Framer Motion 애니메이션

 

 

 

 

➜ header 시작

➜ header 완성

➜ intro

➜ About Me

➜ Projects

➜ Skills

➜ Experience

➜ Contact

➜ Footer

➜ Vercel 배포

 

 

Framer Motion 애니메이션 설정

const fadeInAnimationVariants = {
  initial: {
    opacity: 0,
    y: 100,
  },
  animate: (index: number) => ({
    opacity: 1,
    y: 0,
    transition: {
      delay: 0.05 * index,
    },
  }),
};

 

initial

애니메이션이 시작할 때의 상태. opacity는 0으로 설정되어 투명한 상태로 시작하고, y는 100으로 설정되어 아래로 이동한 상태로 시작.

 

animate

애니메이션 동작 중의 상태. 여기에서는 opacity를 1로 설정하여 페이드 인되고, y를 0으로 설정하여 이동하지 않은 상태로 표현.

 

transition

애니메이션의 부드러운 전환을 설정. 여기에서는 delay를 사용하여 각 항목에 지연을 줌.

 

 

 

Skills 컴포넌트

return (
  <section
    id="skills"
    ref={ref}
    className="max-w-[53rem] scroll-mt-28 text-center sm:mb-40"
  >

 

Skills 컴포넌트는 useSectionInView 훅을 사용하여 해당 섹션이 화면에 나타날 때의 상태를 추적한다.

반응형

 

  {skillsData.map((skill, index) => (
    <motion.li
      className="bg-white borderBlack rounded-xl px-5 py-3 dark:bg-white/10 dark:text-white/80"
      key={index}
      variants={fadeInAnimationVariants}
      initial="initial"
      whileInView="animate"
      viewport={{
        once: true,
      }}
      custom={index}
    >
      {skill}
    </motion.li>
  ))}
</ul>

 

스킬 데이터를 매핑하여 각 스킬을 나타내는 리스트를 생성한다.
motion.li를 사용하여 각 항목에 Framer Motion 애니메이션을 적용한다.

variants, initial, whileInView 등의 속성을 사용하여 애니메이션 효과를 설정한다.

 

 

 

 

Certificates 섹션

Skills 섹션과 동일하지만 데이터만 다르게 받아와 뿌려준다.