Meagan Fisher Couldwell이라는 웹 개발자의 개인 페이지 owltastic을 클론코딩 해보았다.
개인적으로 모던한 디자인에 독특한 글꼴이 특징인 멋진 페이지라고 생각한다.
사용한 라이브러리
- styled-components
- recoil
- react-icons
- gh-pages
초안
이번 프로젝트는 간단했고, 이미 완성된 페이지를 보고 했기에 초안은 미리 작성하지 않고 진행했다.
주요 기능
- flex,grid와 같은 컨테이너 구조 공부 : 컨테이너의 구조를 잡는 건 매번 힘든 일인 것 같다. div 박스를 몇 개나 만들지, flex 구조로 진행할지, grid 구조로 진행할지 등등.. 이번 프로젝트에서 조금 공부가 된 듯하다.
- 백그라운드 이미지 삽입 : 거의 모든 섹션에 background-image가 삽입된다. 특히, 하나의 태그에 여러 개의 이미지가 삽입된다는 점과 각 이미지의 위치를 left, right 등으로 조정 가능하다는 것을 배웠다.
- 마우스 호버시 이미지 스크롤링 : 이전에 포스팅 한 글과 겹친다. keyframes와 transform, overflow 등을 적재적소에 사용해 아름다운 애니메이션 효과를 만들 수 있었다.
완성본
https://mediumryan.github.io/owltastic/
Owltastic by ryan
mediumryan.github.io
참고
A Twitter for My Sister
Non-techies find the @ and # symbols on Twitter don’t make much sense. So the company had to figure out a way to keep the site running for people who are more technologically adept and rely on these symbols but also work seamlessly for those who think th
archive.nytimes.com
'코딩 리뷰 > [React]' 카테고리의 다른 글
| [React] Toyota 클론코딩 리뷰 (0) | 2023.11.09 |
|---|---|
| [React] Ximena Vengoechea 클론코딩 리뷰 (0) | 2023.11.08 |
| [React] 모멘텀 앱 리마스터 (0) | 2023.10.03 |
| [React] 포트폴리오 만들기 (0) | 2023.09.13 |
| [React] 영화 목록 + 검색기능 (0) | 2023.05.30 |