2023-Portfolio

2023 포트폴리오 - 반응형 웹사이트
배포주소 : https://jeongwon.site/

💼 작업기간

1인 제작
2023.08월 말 ~ 2023.09.16 (약 3주)

⚙ 개발환경

JavaScript(ES6)
HTML5
SCSS

📌 주요기능

✔ 비주얼

• 타이틀 : AOS, vivus 라이브러리를 이용해 모션 추가

• svg 스크롤 이벤트 : 속도에 따라 transformY 바꾸기
  
  

✔ 프로젝트

• 아이템 필터링

  • getAttribute를 사용해 클릭된 버튼의 data-filter속성을 읽은 후, 해당 필터 값을 저장
  • 
    

• 필터 버튼 클릭 시, 투명도 조절

  • scss
    
    
  • js
    
    
  • 버튼 클릭 시, .project_area에 fade-out 클래스 추가
  • setTimeout을 이용해 250ms 뒤에 fade-out 클래스 삭제

• ( 앨범형 / 리스트형 ) 보기 방식 변경
  

  • data-view로 데이터 속성값 지정
  • getAttribute를 사용해 클릭된 버튼의 "data-view"속성을 읽은 후, 해당 필터 값을 저장
  • view가 "list"면 클래스 list 추가, 그렇지 않으면 클래스 list 삭제

• 모바일형 필터 버튼
  

  • 768px 이하일 경우, mb_mobile로 전환
  • 라벨에 클릭한 옵션의 텍스트로 교체

✔ 전체

• 페이지 키컬러 변경 이벤트
  
  
  • setProperty()를 이용해 기존 css 속성을 새로운 css 속성으로 설정
  • css에 transition을 주어 부드럽게 전환