Work

Vue

[Vue animation pate clone]

• source

- 사용언어: vue cli, scss
- 설명: vue router를 이용하여 페이지 전환시 에니메이션 효과
       이전 화면으로 돌아갈때 확대이미지가 원래 위치로 돌아가는 효과

[playstation store 반응형]

• source

- 사용언어: html, scss, javascript, Vue(CLI), vuex, axios, json-server
- 설명:
    - 기존의 플레이스테이션 스토어 반응형으로 변경
    - vuex를 이용하여 제품상태 관리
    - 위시리스트 담은 후 위시리스트 페이지 전환이 아닌 모달팝업으로 위시리스트 상태 파악 되도록 변경

폭스바겐 아테온 마이크로 사이트

- 사용언어: html, css, javascript
- Plugin: anime.js, jquery, rangeslider, clipboard.js
- JSFramework: Vue(CDN)
- Api: swagger
- 설명:
    - 마우스 좌우 드래그 하여 파노라아 이미지 효과 구현
    - ios에서 touch move시 스프라이트 애니메이션이 되지 않아 각각 이미지 교체 방식으로 모션 구현
    - 이미지 교체 방식이다 보니 drag할경우 계속 request되는 이슈가 있어 해당 색상 클릭시 이미지를 다운받아 놓는 형식으로 변경
    - 컬러 박스 클릭시 fade animation 이용하여 색상전환

U+ 그림그리기 이벤트

• source

- 사용언어: html, css, javascript
- Plugin: drawing board, jquery,
- JSFramework: Vue(CDN)
- Api: swagger
- 설명:
    - 개인 인증 후 9가지 주제선택 후 canvas에 그림그린 후 바로 그림 응모하기
    - mobile only
    - canvas 이미지 저장 시 용량 문제로 인해 그려진 canvas의 반만한 크기의 캔버스에 다시 이미지를 그려서 저장

[todo]

• source ````
• 사용언어: vue-cli, vuex, express, node.js, html, scss
• 설명: session을 이용한 login / logout 구현 file read/write을 이용한 데이터 입출력 XMLHttpRequest를 이용한 api 구현 ````

연락처 관리 앱

- vuex, vue-router, axios
- quick start vue event-bus를 이용한 연락처 관리앱 예제를 vuex, vue-router로 변경

캡슐투도어 ms

- 사용언어: html, css, javascript, jquery
- 설명:
    - 반응형 이벤트 페이지
    - service, capsule to door, membership, lounge,
      event 페이지 반응형 작업

링컨자동차 코리아 technology

• github
• link

- 설명: 개인 반응형 포트폴리오