백수 기념 포트 폴리오 제작~

• 으앙 내가 백수라니 >.<

가서 보자~

• ** 활용 기술 **
  • React, JSX, JavaScript ES6, SASS
  • 스토리보드 디자인
    • Adobe XD
  • CSS framework
    • Tailwind CSS
  • 버전 관리
    • GitHub
    • Sourcetree
  • 서브 이미지
    • Unsplash

일지

• 0일차 : 저장소 파기, 폴더 만들기, pug, sass, angularJS기반으로 생성, 고민

  딴거 도전?

• 1일차 : angularJS에서 리엑트로 변경! 리엑트 설치 및 리엑트 공부 및 실습! // 개꿀잼

  React를 계속 써보고 싶던차에 잘됐다 싶어서 변경. 은근 재미있네 angular의 양방향 바인드보단 단방향이라 뭔가 버벅이게 된다. ng-repeat이나 ng-click 처럼 간편하진 않다. 컴포넌트 별로 쉽게 자를 수 있는 부분은 편하다. React를 아직 잘 모르는 듯

• 2일차 : 인프런 강좌 전부 클리어 및 실습 여러가지 해봄. FIGMA 스토리보드부터 제작 시작

  아 몰라 일단 FIGMA로 디자인부터 ㄱㄱ

• 3일차
  • FIGMA보다 좀 더 간편한 Adobe XD로 변경.
  • 코딩 시작
• 4일차
  • 지구 모양 잡는 방식에 방향전환이 많이 이루어짐

    IMG tag -> background -> threeJS -> canvas, mask, blur를 이용하는 것이 제일 좋은 방식 같다. codepen에서 테스팅해봄.

  • React Hook을 배우자.

    노마드코더 강의로 공부중

  • 지구 만들고 코드 조금 손봄

    이제부터 속도가 좀 날뜻.

• 5일차 : 미디어쿼리, 지구 마스크 변경, Parallax 적용!

  이제 지구 다 했으니 내용이랑 첫 로딩 스크린 만들어야지

• 6일차 : 폴더구조 변경 계획, 로딩 이벤트 및 에니메이트 적용
• 7일차 : 여러 에니메이트 엑티브 적용, 어바웃 완성

  얼마 안남았다.

• 8일차 : mySkill, 포트폴리오, 풋터 완성

  myskill을 여권 도장 느낌을냄. 여행+탐험 하는 자의 스킬? 느낌. 포트폴리오는 parallax 스크롤로 좀더 우주 스럽게 표현함. 으.. 하루종일 걸림. 팝업 납음.

• 9일차 : 1.0 제작 완료

  팝업과 슬라이드 적용 1.0 런칭

• 10일차 : 1.0.1 반응형 수정 및 Works에 살아있는 URL은 새탭 링크 적용.
• 11일차 : 1.0.2 로딩 개선 및 스피너 적용

  고용량 이미지가 많아 최대 55초까지 로딩이 걸려서 이미지 압축, 사이즈 줄임. 로딩 스피너 적용