- Vue, javaScript, Scss 를 활용하여 스타벅스 메인 랜딩페이지를 클론
- scss를 활용해 스타일코드의 유지보수성을 높힌다.
- 다향한 javaScript 의 라이브러리를 활용해 애니메이션이 들어간 랜딩페이지를 구현
- 오픈그래프, 트위터 카드를 사용하여 웹페이지 접근성 향상
| Skill | Info | ✔ |
|---|---|---|
| HTML | 오픈그래프, 트위터 카드를 사용 | ✔ |
| aria-hidden, aria-label 을 활용한 정보취약계층 고려 | ✔ | |
| Vue2 | component 기반의 UI구성 | ✔ |
| SCSS | constants / mixins / modules 선언 | ✔ |
| layout / components 단위 UI 구축 | ✔ | |
| JavaScript | Swiper.js 를 활용한 carousel 구현 | ✔ |
| gsap.js 를 활용한 js단 애니메이션 처리 | ✔ | |
| scroll to plugin.js 를 활용한 뷰포트 최상단 이동 애니메이션 처리 | ✔ | |
| scroll magic.js 를 활용한 뷰포트 에 Hook을 걸어 애니메이션 처리 | ✔ |