2ByungJun/NuxtJS_demo

🔥 NuxtJS를 이용한 데모 포트폴리오

🌈Nuxt_Demo(개발임시 중단)

부제

• 포트폴리오 (이병준)

인원

• 1명

개발기간

• 2020년 04월 9일 ~ 2020년 04월 13일(개발임시중단)

  임시 중단 사유

  • nuxtJS의 config 설정 부분에 어려움을 겪고 있음.
  • 호환이 안되는 npm이 있음.
  • css로만 레이아웃을 설정중에 있는데 레이아웃을 먼저 잡고 개발을 진행해야할 것으로 생각됨.

개발스택

• Vue.js, Nuxt.js, JavaScript, Bootstrap vue

담당업무

• 퍼블리싱 및 개발(100%)

---

👀 Comment

why? nuxtJ.S

기존 Vue.js의 SPA()에서의 단점인 SEO(Search Engine Optimization)을 띄어나게 해줄 SSR(Server Side Rendering)을 권장하고 있으며 리액트의 next.js를 기반으로한 nuxt.js를 사용하고자 합니다.

💎 Dependencies

• bootstrap: "^4.6.0"
• bootstrap-icons: "^1.4.1"
• bootstrap-vue: "^2.21.2"
• core-js: "^3.9.1"
• nuxt: "^2.15.3"

💬 구현단계

• 레이아웃 구현
• Header, Footer 구현
• 스크롤 위치 이동 기능 추가 Header
• 미디어 쿼리 이용하여 반응형 적용
• 모바일용 햄버거 버튼 추가
• 모바일용 햄버거 버튼 액션
• 슬라이드 애니메이션 액션

HOME

• Home Background 반응형 이미지 추가
• Text Fan-IN OUT 액션
• 모바일 테스트

ABOUT

• ABOUT UI 구현

SKILL

• SKILL UI 카드 그리드 형태 구현
• SKILL 카드 애니메이션 툴팁 추가

PROJECT

• PROJECT UI 카드 그리드 형태 구현
• PROJECT 이미지 오버레이 위의 설명 형태 추가
• PROJECT 디테일 추가

AWS

• AWS S3 배포 자동화
• AWS CodeDeploy
• AWS EC2 배포