reactjs portfolio

React-Portfolio 앱

개인 포트폴리오 페이지 www.fdaviz.com 내장 React.

건축 과정

1. 노드 js를 사용하여 새로운 React 앱을 설치했습니다.

2. VanillaJS 포트폴리오 버전을 마이그레이션하여 새로운 React 응용 프로그램으로 마이그레이션했습니다.

3. 첫 번째 접근 방식은 라이브러리를 사용하여 자신의 것을 만드는 데 시간이 많이 걸렸기 때문에 애니메이션을 만드는 것이 었습니다. 이런 이유로, 나는 wow.js와 animate.css 라이브러리를 사용하기로 결정했습니다.

4. 응용 프로그램에서 구성 요소 참조를 관리하기 위해 반응 소품을 사용하고 구성 요소 세부 정보를 공유하여 SmoothScroll을 생성하여 내 코드를 설계했습니다.

5. 대부분의 페이지는 내 CSS3 Flex-Box 코드가있는 모달 갤러리를 제외하고는 부트 스트랩을 사용합니다.

6. 갤러리 프로젝트를 위해 다른 모달을 만들고 React 이벤트 처리기를 사용하여 각 프로젝트 모달을 보여줄 수 있습니다.

7. 이 양식은 백엔드 제출에 formsfree.io를 사용합니다.

8. 나는 무료로 사용할 수있는 Unsplash의 이미지와 Flaticon의 아이콘을 자유롭게 사용할 수있었습니다.

9. 페이지 상단에 놀라운 애니메이션 배경을 만들고 싶었으므로 Codepen.io의 도움을 사용하여 코드를 웹 사이트에 조정했습니다.

해결하는 데 시간이 걸린 도전

1. Wow.js + animate.css를 구현하는 것은 처음에는 어려웠지만 그만한 가치가있었습니다. 앱에서 작동하는 데 시간이 걸리지 만 자신의 라이브러리를 구축하는 것보다 시간이 덜 걸립니다.

2. 다른 구성 요소 간의 높이, 오프셋 탑 등과 같은 DOM 구성 요소 세부 사항을 공유하는 것은 반응 Ref가 상위 컨테이너의 ID와 일치해야했기 때문에 약간 어려웠습니다. 알아내는 데 오랜 시간이 걸렸습니다.

3. Bootstrap을 잠시 동안 사용한 후 Flex-Box와 같은 CSS3 트릭과 @keyframes + 애니메이션을 사용하는 방법을 다시 배워야했습니다.

NPMS 업데이트

1. 부트 스트랩 호환에 SASS를 사용하기 위해 제거 된 노드 싱 (Node-Sass) 라이브러리를 제거했습니다.

결론

React-Portfolio-Website를 방문하고 시간을내어 읽어 주셔서 감사합니다!