Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Resolve #10
메인 페이지의 UI 재구성 작업을 진행했습니다.
우선적으로 UI는 크게 두가지 구성 요소로 나뉩니다.
애니메이션
사용자의 관심을 유도할 수 있게 가장 상단엔 타이핑 애니메이션 요소를 배치했습니다.
Hello, World!
Text를 타이핑 하는 느낌을 줄 수 있도록 애니메이션을 제작했습니다.전체 텍스트를 요소를 하나로 묶은 이후,
::before
요소를 사용해>
구성 요소를 추가해 오로지 시각적인 내용을 추가했습니다.텍스트의 타이핑 애니메이션과 상관 없이, 항상 요소 맨 뒤에서 커서처럼 깜빡이는 애니메이션이 생길 수 있도록
::after
요소를 사용해 애니메이션을 추가했습니다.타이핑 애니메이션 되고자 하는 각각의 텍스트 요소들은 개별의 요소로 선택할 수 있어야 하기 때문에, 타이핑 대상의 문구를 따로 관리한 뒤 배열로 변환 이후 각 텍스트를
span
tag로 래핑해 렌더할 수 있도록 했습니다.각 텍스트는 0.3초마다 타이핑 애니메이션이 이뤄집니다.
프로젝트 이력
회사 목록과 그에 해당하는 프로젝트 목록의 경우, 따로 파일로 관리하여 참조 후 렌더하고 있습니다.
파일 위치는
src/assets/data/resume.ts
입니다.