Figma -> React 프로젝트 원페이지 사이트 홈 퍼블리싱

Figma

피그마 디자인을 리액트로 퍼블리싱한 작업입니다.

깃허브 저장소 : https://github.com/jdy0120/frontendproject/tree/master/figmatoreact

GitHub - jdy0120/frontendproject

 

퍼블리싱 완성

 

 

Tilte를 이용해 움직이는 아이콘을 구현했습니다.

 

 

import styled from "styled-components";
import Tilt from "react-tilt";

const TiltWrapper = styled(Tilt)`
  width: 60%;
  @media (max-width: 670px) {
    display: none;
  }
`;

const Hero = () => {
  return (
    <TiltWrapper>
      <img src={image} alt="" />
    </TiltWrapper>
  );
};

 

styled-components를 사용했기 때문에 tilt라이브러리를 위 코드와 같이 사용했습니다.