[React] 포트폴리오 사이트 만들기

https://hshyeon.github.io/

Sohyeon Portfolio

주요 페이지

1. Intro : 초기 화면 페이지

타자기를 치는 듯한 애니메이션을 넣어 지루함을 줄였다.

 

2. About : 나에 대한 설명을 담았다.

 

3. Works : Slick를 이용해 작업한 내용을 담았다.

처음에는 유튜브만 보여주었는데, 너무 대충같이 보여서 프로젝트별 썸네일 이미지를 만들어 hover하면 유튜브가 보이도록 만들었다. 그냥 있으면 hover 안해줄까봐 마우스 아이콘도 넣어줌..ㅎㅎ

추후 해당 프로젝트에 대한 설명도 추가해서 보여줄 예정!

 

4. Header : 특정 앵커포인트로 이동할 때마다 active 되도록 설정, 깃허블 링크를 담았다.

---

사용 라이브러리

1. Fullpage.js

유료라고 해서 react-fullpage 라이브러리를 사용해보려고 했는데,

그 라이브러리는 전체 화면인 페이지만 호환되고, 특정 앵커포인트에서 다른 페이지로 튀는 에러가 있어서 Fullpage.js로 바꿔서 사용했다.

const credits: Credits = {
	enabled: true,
	label: "",
	position: "right",
};

유료라 워터마크가 있어야하지만 이런 식으로 라벨에 빈 문자열로 넣으면 티가 안나니까 이렇게 사용해도 나쁘지 않을 것 같다.

빈 문자열로 워터마크 변경한 사진

2. Slick

프로젝트를 보여주기 위해서 캐러셀 라이브러리를 사용했다. 근데 화면 너비 사이즈가 작아지면, 컨텐츠가 3개씩 겹쳐 보여서 깨지는 현상이 나타나서 아마 수정할 것 같다.

 

3. react-youtube

특정 유튜브 링크의 'v=' 뒤에 적혀있는 비디오아이디만 있으면 유튜브를 가져와서 재생할 수 있다.

유튜브 라이브러리 빼고 모든 라이브러리가 자바스크립트만 지원돼서 처음에 애먹었다.

https://autumn-dev.tistory.com/22

[React] full-page 라이브러리 TypeScript 지원 안되는 에러

 

---

해야할 일

1. 폰 화면에도 잘 보일 수 있도록 반응형 및 적응형으로 만들기

2. 프로젝트별 상세 설명 넣기

3. 컨텐츠를 더 넣거나, 애니메이션을 넣어 더 동적으로 만들기