포트폴리오 Experience 만들기 | react-vertical-timeline-component

 

 

 

 

➜ header 시작

➜ header 완성

➜ intro

➜ About Me

➜ Projects

➜ Skills

➜ Experience

➜ Contact

➜ Footer

➜ Vercel 배포

 

 

Experience 컴포넌트

export default function Experience() {
  const { ref } = useSectionInView("Experience");
  const { theme } = useTheme();

 

Experience 컴포넌트는 useSectionInView 훅을 사용하여 해당 섹션이 화면에 나타날 때의 상태를 추적한다.
useTheme 훅을 사용하여 테마 정보를 가져와서 어떤 테마인지에 따라 스타일을 조정한다.

 

 

 

  return (
    <section
      id="experience"
      ref={ref}
      className="scroll-mt-28 mb-28 sm:mb-40 min-w-[50rem]"
    >
      <SectionHeading>My experience</SectionHeading>
      <VerticalTimeline lineColor="">

 

섹션을 나타내는 section 태그로 감싸고,

반응형 css를 설정한다.

 

반응형

 

        {experiencesData.map((item, index) => (
          <React.Fragment key={index}>
            <VerticalTimelineElement
              contentStyle={{
                background:
                  theme === "light" ? "#f3f4f6" : "rgba(255, 255, 255, 0.05)",
                boxShadow: "none",
                border: "1px solid rgba(0, 0, 0, 0.05)",
                textAlign: "left",
                padding: "1.3rem 2rem",
              }}
              contentArrowStyle={{
                borderRight:
                  theme === "light"
                    ? "0.4rem solid #9ca3af"
                    : "0.4rem solid rgba(255, 255, 255, 0.5)",
              }}
              date={item.date}
              dateClassName="ml-[1rem] mr-[1rem]"
              icon={item.icon}
              iconStyle={{
                background:
                  theme === "light" ? "white" : "rgba(255, 255, 255, 0.15)",
                fontSize: "1.5rem",
              }}
            >
              <h3 className="font-semibold capitalize">{item.title}</h3>
              <p className="font-normal !mt-0">{item.location}</p>
              <p className="!mt-1 !font-normal text-gray-700 dark:text-white/75">
                {item.description}
              </p>
            </VerticalTimelineElement>
          </React.Fragment>
        ))}
      </VerticalTimeline>
    </section>
  );
}

 

 

경험 데이터를 매핑하여 각 경험을 나타내는 VerticalTimelineElement를 생성한다.
각 VerticalTimelineElement는 경험의 날짜, 아이콘, 제목, 위치 및 설명을 포함한 컨텐츠를 가지고 있다.
theme을 기반으로 한 스타일 조정이 이루어져 있어, 밝은 테마와 어두운 테마 간에 스타일이 달라진다.