Front-end Developer
2024.01 ~ 운영 중
팀원
1명(기여도100%)
<aside>
💡
배포 : https://doyi-portfolio.vercel.app/
소스코드 : https://github.com/doyi0107/doyi_portfolio
</aside>
📑서비스 내용
개발자로서의 열정과 기술적 역량를 강조한 웹 포트폴리오
- 노션 이력서도 사용하고 있지만 프론트엔드 개발자로서 나만의 웹을 만들고 싶었음
- 소개 - 프로젝트 - 활동 순으로 표시
- github, notion은 하단에 계속 띄어둠
- 강사님과 코치님께 포트폴리오 피드백을 받고 계속 수정 중에 있음
🏷️담당 역할
- 디자인,기획부터, 개발 배포까지 본인이 직접 참여
- 웹 표준/접근성 고려
- 직접 디자인한 웹 페이지를 마크업하여 웹 표준을 준수하고 웹 접근성을 고려하며 진행
- 사용자 인터랙션 강화 : 스크롤 유도 가이드와 가로 스크롤 애니메이션을 통해 몰입감 있는 사용자 경험 제공
- 가로 스크롤 애니메이션: 세로 스크롤 위치에 따라 요소의 가로 위치를 동적으로 조정하여 자연스러운 화면 이동 연출
- 스크롤 유도 가이드: 스크롤 위치에 따라 상단과 하단 여부를 감지해 상태를 관리하며, 사용자의 스크롤 동작에 맞춘 UI 반응으로 자연스러운 탐색을 유도
💡 회고
개발 회고
- 성능 최적화
- 문제 : LightHouse 성능 평가에서 Performance0점
- 원인
- CSS에서 반복된 코드, 안 쓰는 Font들로 인한 초기 로딩 속도 저하,
- 잦은 animation, overflow:hidden과 같은 속성들이 레이아웃 리플로우를 유발
- 해결
- Coverage이용해 사용하지 않는 css코드 삭제
- 이미지 파일 AVIF 및 WebP로 교체
- CSS Minifier 이용해 css 중복 코드 개선
- Webpack을 사용한 css축소 (mini-css-extract-plugin 패키지 설치)