스타일링 고자의 몸부림 (8/12)

FastTurtle·2024년 8월 12일

기록 포트폴리오

개인프로젝트 - 포트폴리오 사이트

목록 보기

22/26

맨 마지막 기록 이후로, 주말에 시간이 남아서 first 화면의 스타일링을 시도했다.

일단 밋밋한 배경에 내 얼굴이 들어간 사진을 추가하고, 애니메이션을 진행했다.

처음에는 다른 포트폴리오의 애니메이션을 그대로 사용하려 했지만, 그래도 곧이곧대로 베끼는건 아닌 것 같아서 글자가 생기고 배경으로 빠진다는 컨셉만 참고했다.

나는 fade-in - 크기변화&배경화&상단이동 에서 영감을 받아
slide-in - 크기변화 없이 배경화를 선택했고, 폰트 사이즈를 극단적으로 키워 화면을 꽉 채우는 스타일링을 선택했다.

gpt의 도움을 받아 slide-in과 fade-out은 구현했지만, 문제는 각 애니메이션이 연결되지 않아 slide-in 이후 글자가 없어졌다 다시 생긴 이후 fade-out이 실행되었다.

오늘은 그걸 고치는걸 최우선적으로 진행했다.

오늘 한 일

first.tsx의 스타일링 전부
- 글자 애니메이션
- 하단 부분 바로이동 화살표 및 애니메이션
- 링크 추가
스킬 섹션 추가

애니메이션 이외

하단 화살표는 그냥 bounce를 keyframe으로 구현하고, 클릭 시 100vh 아래로 내려가게 함수를 만들고 연결하면 끝.

const scrollToNextSection = () => {
    window.scrollTo({
      top: window.innerHeight, // 100vh 아래로 이동
      behavior: 'smooth', // 부드럽게 이동
    });
  };

@keyframes bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(10px);
    }
  }
`;

링크 추가는 이 velog를 기존 스타일을 활용해서 버튼 하나를 추가하고 끝.

글자 애니메이션

일단 완성된 구조부터 기록하겠다.

<MainWrapper>
          <>
            <div className='mTitle'>
              {showStep1 && <p className={`main-title ${fadeOutTitle ? 'fade-out' : 'fade-slide'}`}>Front-end</p>}
              {showStep2 && <p className={`main-title ${fadeOutTitle ? 'fade-out' : 'fade-slide'}`}>Developer</p>}
            </div>
            <div className='mText'>
              {showText1 && <p className='main-text fade-in'>적응하는 개발자.</p>}
              {showText2 &&<p className='main-text fade-in'>백지웅입니다 :)</p>}
              {showText3 &&<p className='main-text fade-in'>프론트엔드 개발자를 목표로 노력중인 백지웅입니다.</p>}
            </div>
          </>
          
        </MainWrapper>

mTitle, mText
mTitle의 부분은 배경화(투명도 저하)가 되어야 하기 때문에, 앞쪽에 띄워질 mText부분과 분리할 필요성을 느껴 분리하였다.

showstep, showText
1. mTitle 슬라이드 인
2. mTitle 배경화 (rgba 255 255 255 0.3)
3. mText 한줄씩 fade-in
을 시간차를 두고 진행되게 하기 위해 useEffect로 조절되는 state다.

기타 과정
이걸 구현하면서 mText부분을 margin-bottom으로 줄 사이를 띄웠더니 두번째 줄부터 애니메이션 이후 margin이 적용되는 현상이 발생했는데, 별도 class 지정, 애니메이션 순서 조정 등 삽질하다가
margin-top으로 바꾸고 first-of-type:none 했더니 고쳐졌다.
그리고
투명화는 opacity가 왠진 모르겠는데 적용이 안되서 삽질하다가
rgba(255,255,255,0.3)으로 해결했다.