포트폴리오 제작기

취업 준비를 위해 포트폴리오를 제작하게 되었다.일단 Figma를 이용해 간단한 디자인을 했다.가로형과 세로형을 모두 사용한 스크롤을 제작하고 싶다.한번의 스크롤로 다음 페이지로 이동하는 효과를 주고싶다.지금까지 한 프로젝트들이 들어가는 곳에는, 마우스를 올렸을 때 /

포트폴리오 웹페이지에 들어가면 처음 뵤여지게 될 페이지를 만들어 보자.버튼 생성가장 먼저 헤더에 들어가게 될 메뉴 버튼들을 만들었다.업로드중..그 뒤로

이번엔 자기소개 페이지를 제작해보자.이번 페이지는 정말 간단할 줄 알았다.간단한 자기소개를 채워넣는 페이지를 만들던 도중 li의 스타일이 보이지 않았다.ul의 스타일을 none으로 설정하고 li스타일을 커스텀으로 적용해도 동일했다.이 문제를 해결하기 위해 chat gp

이번엔 첫번째 페이지와 두번째 페이지를 스크롤시 가로로 이동하는 효과를 만들것이다.스크롤시 가로 이동 효과를 주기 위해 gsap라는 애니메이션 자바스크립트 라이브러리를 사용하였고, 그중에서도 scrollTrigger를 사용했다.사용한 코드의 일부분이다.생각처럼 잘 되지

프로젝트에 들어갈 정보들을 하드코딩해도 되지만, 전역 상태관리 라이브러리인 Recoil을 사용해보고 싶어서 포폴에 적용해 보았다npm install recoilRecoil을 적용하기 위해 최상위 컴포넌트에 <RecoilRoot>을 적용한다.간단히 말해서 전역상태를

이번엔 프로젝트 페이지다.일단 간단하게 틀을 만들어두고 hover애니메이션을 만든다.다음으로는 모달창이다.모달창이 열리는 조건은 프로젝트 클릭시 Recoil에 프로젝트 id를 저장하고, id가 존재할 때, 모달창이 열리게 했다.프로젝트 이미지나 모달창의 내용은 Reco