정적인 페이지에 숨을 불어넣었다 (Day 7)

어제 만든 포트폴리오 사이트는 기능적으로는 다 됐지만, 솔직히 좀 밋밋했어요. 오늘은 새 섹션을 추가하는 대신, 있는 화면을 "살아있는" 느씸으로 다듬는 데만 집중했어요.

1. 스티키 네비게이션

스크롤해도 항상 상단에 떠 있는 네비게이션 바를 추가했어요. 로고("KODEX.") + Projects·Devlog 앵커 링크 + GitHub 링크. backdrop-blur를 줘서 스크롤할 때 뒤 콘텐츠가 살짝 비치게 만들었어요.

2. 스크롤 리빌 애니메이션

섹션이나 카드가 화면에 들어올 때 서서히 떠오르며 나타나게 만들었어요.
IntersectionObserver로 요소가 뷰포트에 들어오는 순간을 감지하고, Tailwind 트랜지션으로 opacity-0 → opacity-100, translate-y-4 → translate-y-0을 처리하는 Reveal 컴포넌트를 하나 만들어서 재사용했어요.

const observer = new IntersectionObserver(
  ([entry]) => {
    if (entry.isIntersecting) {
      setVisible(true);
      observer.disconnect();
    }
  },
  { threshold: 0.15 }
);

프로젝트 카드, 데브로그 항목은 순서대로 살짝씩 딜레이를 줘서 하나씩 순차적으로 나타나게 했어요. 라이브러리 없이 이 정도는 충분히 만들 수 있더라고요.

3. Hero 섹션 디테일

• 배경에 은은한 민트색 glow(블러 처리한 원형 그라디언트)
• "지금 만들고 있어요" 상태 배지에 pulsing 도트 애니메이션 = animate-ping으로 신호를 보내는 듯한 느낌
• 기술 스택 pill(Python · TypeScript · Gemini API · Next.js · Figma) 추가

4. 카드 호버 효과

프로젝트 카드는 호버하면 살짝 위로 떠오르고 테두리가 민트색으로 바뀌어요. 데브로그 항목은 호버하면 화살표가 오른쪽으로 살짝 이동해요. 작은 디테일이지만 클릭 가능한 요소라는걸 훨씬 분명하게 해줘요.

오늘까지 진행 상황

Phase 3 포트폴리오 사이트는 이제 기능 + 애니메이션까지 다듬어진 상태예요. tsc --noEmit으로 타입 에러 없는 것까지 확인했어요.

다음 계획

이제 진짜 배포할 차례예요. GitHub 레포로 분리해서 푸시하고, Vercel에 연결할 예정이에요.