프론트엔드 취업을 위한 포트폴리오 웹 페이지입니다.
- 마우스 이벤트, 옵저버 패턴을 적용하였습니다.
- firebase를 이용하여 서버에서 데이터를 받아오도록 하였습니다.
| 스크롤 이동 | 애니메이션 효과 | 이메일 컨택 |
|---|---|---|
 |
 |
 |
| Main | About |
|---|---|
 |
 |
| canvas 학습 후에 만들어본 효과입니다. canvas animation으로 Hill을 만들었으며, mouse event로 text 효과를 주었습니다. |
framer motion을 적용해보고 싶어 만들어본 효과입니다. 다양한 속성들을 적용해보며 framer motion을 학습했습니다. |
| Skill | Project | Contact |
|---|---|---|
 |
 |
 |
| 옵저버를 이용하여 Skill 섹션이 관측될때마다 애니메이션이 발동되도록 하였습니다. | translate3d 속성을 이용하여 3D 카드 효과를 적용한 섹션입니다. | email.js를 이용하여 메일 전송이 가능하도록 구현한 섹션입니다. alert, loading, confetti 등을 이용하여 메일 전송 상태를 사용자에게 전달하여, UX를 향상시키고자 하였습니다. |
| Next.js | TypeScript | Recoil | Firebase | Styled-component | MUI |
|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 |