GODRICH
#css애니메이션#버튼#로딩#전환효과#스크롤#대시보드#실전ui#디자인트렌드

프로젝트 포트폴리오 템플릿 9종 — 쇼케이스 섹션 모음

· Godrich · 9종 · 7분 읽기

랜딩 섹션페이지 템플릿CSS만랜딩 페이지포트폴리오

프로젝트 포트폴리오 템플릿은 그리드·케이스 스터디·경력·연락 폼 같은 개인 포트폴리오 페이지 구성 요소를 통째로 담은 코드 모음입니다. 랜딩 페이지에 바로 붙이는 히어로부터 쇼케이스 푸터까지, 아홉 개 중 하나는 탭을 누를 때마다 실제 탭 폭을 실측해 인디케이터를 옮깁니다.

소개 히어로01 project-intro-hero 프로젝트 그리드02 project-grid 케이스 상세 블록03 project-case-detail 기술 스택 칩04 project-skills-stack 경력 타임라인05 project-experience-timeline 추천사 인용06 project-quote 연락 폼07 project-contact-form 이력서 CTA08 project-resume-cta 쇼케이스 푸터09 project-footer

자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip

아홉 개는 방문자가 포트폴리오를 훑는 순서대로 놓았습니다. 먼저 누구인지 보여주고(히어로), 작업물을 분류해서 보여주고(프로젝트 그리드), 한 작업을 깊게 설명하고(케이스 상세), 다룰 수 있는 기술을 나열하고(기술 스택), 걸어온 경력을 보여주고(경력 타임라인), 남이 한 말로 신뢰를 더하고(추천사), 연락할 방법을 주고(연락 폼), 이력서를 내려받게 하고(이력서 CTA), 마지막으로 더 볼 곳을 안내합니다(쇼케이스 푸터). 얼굴 사진·실제 프로젝트 스크린샷 자리는 이 사이트의 먹·파랑·크림 토큰만으로 그린 도형 플레이스홀더이고, 파일만 갈아 끼우면 레이아웃은 그대로 남습니다.

01소개 히어로

히어로 섹션 디자인의 구성

배경에 깔린 원 세 개가 서로 다른 궤적으로 계속 떠다니고, 그 위에 워드마크(도형 플레이스홀더)·헤드라인·부제·CTA 두 개가 겹치지 않게 자리 잡습니다.

소개 히어로
새 창에서 열기

01 · 소개 히어로 — 측정 누적면적 31.004% · 움직인 프레임 18/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

transformopacityaria-pressed

제안받기 버튼은 진짜다

오른쪽 "새 프로젝트 제안받기" 버튼은 누를 때마다 상태와 아이콘 채움이 실제로 바뀝니다.

.ih__orb--1 { animation: ih-float-a 2s ease-in-out infinite; }
@keyframes ih-float-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate($sp-10, -$sp-8) scale(1.5); }
}
.ih__avail-btn[aria-pressed="true"] {
  background: rgba(255, 247, 230, .12);
  border-color: $subject-cream;
}
.ih__avail-btn[aria-pressed="true"] .ih__avail-ic {
  opacity: 1;
  color: $color;
  transform: scale(1.2);
}

02프로젝트 그리드

포트폴리오 웹사이트 템플릿의 카드 목록을 분류로 거른다

위쪽 분류 탭(전체·웹·앱·디자인)을 클릭하면 먹색 인디케이터가 그 탭의 실제 폭·위치로 실제로 옮겨 가고, 다른 분류의 카드는 흐려집니다.

프로젝트 그리드
새 창에서 열기

02 · 프로젝트 그리드 — 측정 누적면적 14.028% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

getBoundingClientRecttranslateXclick

인디케이터는 실측으로 움직인다

인디케이터 위치는 짐작한 px가 아니라 클릭마다 getBoundingClientRect로 잰 값입니다.

function moveIndicator(tab) {
  var wrapBox = tab.parentElement.getBoundingClientRect();
  var box = tab.getBoundingClientRect();
  indicator.style.width = box.width + 'px';
  indicator.style.transform = 'translateX(' + (box.left - wrapBox.left) + 'px)';
}
tabs.forEach(function (tab) {
  tab.addEventListener('click', function () {
    root.classList.remove('is-demo');
    tabs.forEach(function (t) { t.setAttribute('aria-selected', 'false'); });
    tab.setAttribute('aria-selected', 'true');
    moveIndicator(tab);
    var cat = tab.getAttribute('data-cat');
    cards.forEach(function (card) {
      var show = cat === 'all' || card.getAttribute('data-cat') === cat;
      card.classList.toggle('is-hidden', !show);
    });
  });
});

03케이스 상세 블록

결과 패널과 카운트업

"결과 보기"를 누르면 패널이 실제로 펼쳐지며 전환율·제작 기간·트래픽 증가 숫자 세 개가 0에서 목표값까지 올라갑니다.

케이스 상세 블록
새 창에서 열기

03 · 케이스 상세 블록 — 측정 누적면적 0.461% · 움직인 프레임 17/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

requestAnimationFramemax-heightclick

악센트 바는 늘 돈다

카드 위 악센트 바는 클릭 여부와 상관없이 항상 스캔 동작을 반복합니다.

function countUp() {
  if (hasCounted) return;
  hasCounted = true;
  var startTime = performance.now();
  var duration = 900;
  function easeOut(t) { return 1 - Math.pow(1 - t, 3); }
  function tick(now) {
    var t = Math.min(1, (now - startTime) / duration);
    var e = easeOut(t);
    nums.forEach(function (el) {
      var target = Number(el.getAttribute('data-target'));
      var suffix = el.getAttribute('data-suffix');
      el.textContent = Math.round(target * e) + suffix;
    });
    if (t < 1) requestAnimationFrame(tick);
  }
  requestAnimationFrame(tick);
}

04기술 스택 칩

여덟 개 칩이 끊김 없이

도형으로 그린 기술 칩 여덟 개(실제 로고 아님)가 한 줄로 이어져 끊김 없이 흘러갑니다.

기술 스택 칩
새 창에서 열기

04 · 기술 스택 칩 — 측정 누적면적 8.058% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

translateX(-50%)animation-play-statepointerenter

올리면 그 자리에서 멈춘다

커서를 올리거나 옆 버튼을 눌러 두면 흐름이 그 자리에서 멈춥니다.

// 트랙 자체엔 gap 을 쓰지 않는다 — 항목마다 margin-right 로 간격을 준다
.sk__track { display: flex; width: max-content; animation: sk-scroll 13s linear infinite; }
.sk__chip { flex: 0 0 auto; margin-right: $sp-5; }
@keyframes sk-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

05경력 타임라인

포트폴리오 사이트 템플릿의 타임라인 진행선이 채워진다

세로선 위 경력 네 지점(프로젝트 A 리드·프로젝트 B 참여·프로젝트 C 인턴·전공 수료)을 클릭하면 그 지점까지 진행선이 scaleY로 실제로 채워집니다.

경력 타임라인
새 창에서 열기

05 · 경력 타임라인 — 측정 누적면적 0.51% · 움직인 프레임 8/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

scaleYclickaria-current

설명 문단도 함께 바뀐다

바로 위 설명 문단은 그 경력 시점의 내용으로 갈아 끼워집니다.

stops.forEach(function (btn) {
  btn.addEventListener('click', function () {
    root.classList.remove('is-demo');
    var i = Number(btn.getAttribute('data-i'));
    root.setAttribute('data-active', String(i));
    root.querySelector('.et__fill').style.transform = 'scaleY(' + ((i + 1) / stops.length) + ')';
    stops.forEach(function (s) { s.removeAttribute('aria-current'); });
    btn.setAttribute('aria-current', 'step');
    desc.textContent = careerNotes[i];
  });
});

06추천사 인용

세 장이 어긋나게 겹친다

추천사 카드 세 장이 살짝 어긋난 채 겹쳐 쌓여 있습니다.

추천사 인용
새 창에서 열기

06 · 추천사 인용 — 측정 누적면적 0.188% · 움직인 프레임 16/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

transformclickaria-live

맨 앞이 맨 뒤로

"다음 후기"를 클릭하면 맨 앞 카드가 실제로 맨 뒤로 넘어가며 순서가 바뀌고, 큰 인용부호 장식이 계속 흔들립니다.

function render() {
  cards.forEach(function (card, i) { card.setAttribute('data-order', String(i)); });
  status.textContent = cards[0].querySelector('.pq__who').textContent + ' 후기를 보는 중';
}
next.addEventListener('click', function () {
  root.classList.remove('is-demo');
  cards.push(cards.shift());
  render();
});

07연락 폼

보내기 전에 값을 검사한다

이름·이메일을 넣고 보내기를 누르면 실제로 값을 검사합니다.

연락 폼
새 창에서 열기

07 · 연락 폼 — 측정 누적면적 0.917% · 움직인 프레임 7/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

focusstroke-dashoffsetsubmit

빠진 칸이 알려주는 법

빠진 칸은 짧게 흔들리며 포커스를 받고, 통과하면 제출 버튼에 체크가 그려집니다.

form.addEventListener('submit', function (e) {
  e.preventDefault();
  var hasName = name.value.trim().length > 0;
  var isEmailValid = /^\S+@\S+\.\S+$/.test(email.value);
  if (!hasName) {
    shakeField(name);
    name.focus({ preventScroll: true });
    status.textContent = '이름을 입력해 주세요.';
    return;
  }
  if (!isEmailValid) {
    shakeField(email);
    email.focus({ preventScroll: true });
    status.textContent = '올바른 이메일을 입력해 주세요.';
    return;
  }
  form.classList.add('is-done');
  status.textContent = '메시지를 보냈습니다.';
});

08이력서 CTA

진행바가 채워진 뒤

"PDF 내려받기"를 누르면 버튼 안 진행바가 실제로 채워진 뒤 화살표 아이콘이 체크로 바뀌고, 잠시 뒤 원래 상태로 되돌아갑니다.

이력서 CTA
새 창에서 열기

08 · 이력서 CTA — 측정 누적면적 0.111% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

scaleXsetTimeoutstroke-dashoffset

클릭 전에는 화살표가 튄다

클릭 전에는 화살표가 계속 살짝 튑니다.

btn.addEventListener('click', function () {
  if (isBusy) return;
  isBusy = true;
  btn.classList.add('is-loading');
  status.textContent = '준비 중';
  setTimeout(function () {
    btn.classList.remove('is-loading');
    btn.classList.add('is-done');
    status.textContent = '다운로드 완료';
    setTimeout(function () {
      btn.classList.remove('is-done');
      status.textContent = '';
      isBusy = false;
    }, 1600);
  }, 900);
});

09쇼케이스 푸터

정규식으로 형식을 가린다

이메일 칸에 주소를 넣고 구독을 누르면 정규식으로 실제 형식을 가려냅니다. 올바르면 체크가 그려지며 완료 문구가 뜨고, 틀리면 칸이 좌우로 짧게 떨립니다.

쇼케이스 푸터
새 창에서 열기

09 · 쇼케이스 푸터 — 측정 누적면적 0.583% · 움직인 프레임 7/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

submitstroke-dashoffsetclick

아래 링크 세 묶음

그 아래엔 쇼케이스·연락·팔로우 세 묶음의 링크가 고정돼 있습니다.

form.addEventListener('submit', function (e) {
  e.preventDefault();
  var ok = /^\S+@\S+\.\S+$/.test(input.value);
  if (ok) {
    form.classList.add('is-done');
    status.textContent = '구독 완료 — 새 프로젝트를 메일로 보내드립니다.';
  } else {
    input.classList.remove('is-shake');
    void input.offsetWidth;
    input.classList.add('is-shake');
    status.textContent = '올바른 이메일을 입력해 주세요.';
  }
});

어디서 깨지는가 — 함정

네 번 걸렸다

아홉 개를 만드는 동안 실제로 네 번 걸렸습니다.

썸네일이 캔버스를 넘었다

첫 번째는 프로젝트 그리드(02)였습니다. 썸네일을 44px로 두고 탭 여백도 넉넉하게 잡았더니, 카드 두 줄과 탭 줄을 합친 세로 길이가 480×300 캔버스를 넘어서 렌더 화면에 스크롤바가 생겼습니다. 썸네일을 30px로 줄이고 탭 여백·그리드 간격을 좁히자 스크롤바 없이 한 화면에 들어왔습니다.

옅은 장식은 측정되지 않는다

두 번째는 케이스 상세 블록(03)이었습니다. 처음엔 "결과 보기" 버튼 둘레에 얇은 테두리 링을 옅게 펄스시켰는데, 프레임 사이 변화량이 작아 23장 중 4장에서만 움직임으로 잡혔습니다. 카드 상단에 굵은 악센트 바를 두고 scaleX로 크게 스캔시키자 17장으로 늘었습니다. 밝기 차이가 작은 장식은 실측값도 작게 나온다는 뜻입니다.

카드가 박스를 넘쳤다

세 번째는 추천사 인용(06)이었습니다. 카드 더미를 담는 박스 높이를 128px로 잡았는데, 실제 카드 내용(큰 인용부호·2줄 문구·이름·안쪽 여백)이 그보다 커서 뒤 카드 문구가 앞 카드 테두리 밖으로 흘러나와 "다음 후기" 버튼과 겹쳐 보였습니다. 박스 높이를 164px로 늘리고 인용부호 크기를 줄이자 겹침이 사라졌습니다.

장식이 없으면 0으로 잡힌다

네 번째는 연락 폼(07)이었습니다. 이 항목은 모든 동작이 제출 이벤트뿐이라 처음엔 상시 재생되는 장식이 하나도 없었고, 그 결과 자동 렌더에서 애니메이션이 전혀 잡히지 않았습니다. 다른 항목처럼 제출 버튼에 은은한 글로우 펄스를 넣고 나서야 움직임이 측정됐습니다. 위 네 함정을 전부 고친 최신 코드는 pcbj2jd9 로 여는 zip 안에 그대로 들어 있습니다.

접근성

장식만 끄고 상태는 남긴다

모션을 줄이도록 설정한 브라우저(prefers-reduced-motion: reduce)에서는 아홉 개 모두 장식용 움직임만 끄고 결과 상태는 그대로 보여줍니다 — 경력 진행선은 채워진 모습 그대로, 프로젝트 그리드는 걸러진 모습 그대로 남고 케이스 상세의 카운트업 숫자는 정보라서 값을 지우지 않습니다.

탭과 단계 알림

프로젝트 그리드(02)는 role="tablist"와 aria-selected로 탭 상태를 전달하고, 경력 타임라인(05)은 aria-current="step"으로 지금 보는 지점을 알립니다. 이 MDN Element.getBoundingClientRect() 문서는 프로젝트 그리드(02)의 인디케이터가 왜 짐작한 px 대신 실측값을 쓰는지 설명합니다.

포커스는 제자리에서 옮긴다

추천사(06)는 aria-roledescription="carousel"과 결과 문구용 role="status"를 함께 쓰고, 연락 폼(07)은 이름·이메일이 비었을 때 그 칸으로 focus({ preventScroll: true })를 옮겨 화면을 제자리에 둔 채 포커스만 이동시킵니다. 이 밖에 랜딩·이메일 섹션 템플릿을 더 찾는다면 템플릿 카테고리를 훑어보시고, 데모를 만든 사람이 궁금하면 소개 페이지에서 확인할 수 있습니다.

FAQ

포트폴리오 갤러리에 실제 프로젝트 사진이나 로고를 써도 되나요?

네, 오히려 그걸 전제로 짰습니다. 썸네일·아바타·워드마크 자리를 실제 파일로 바꿔 넣어도 크기·정렬은 그대로 유지됩니다. 플레이스홀더 도형은 demo-tokens.scss에 정의된 먹·파랑·크림 색만 쓰고, 캔버스마다 다른 무대 배경(옐로·오렌지 등)은 별도 토큰이라 두 색 체계가 겹칠 일이 없습니다.

React 버전은 CSS 버전과 뭐가 다른가요?

동작은 같습니다. 활성 탭·펼침 상태·카드 순서 같은 값은 useState로 관리하고, 변수 3개(duration·easing·color)는 props로 받아 CSS 변수(--duration --easing --color)로 넘깁니다. 프로젝트 그리드(02)의 인디케이터는 useEffect와 getBoundingClientRect로 마운트 직후 위치를 한 번 재고, 클릭 때마다 같은 방식으로 다시 잽니다.

연락 폼과 이력서 CTA는 실제로 메일을 보내거나 파일을 받나요?

검증·포커스 이동·진행바·체크 표시는 전부 실제 상태 변화입니다. 다만 두 데모 모두 연결된 실제 서버나 파일이 없어서, 지금 상태로는 메일이 실제로 발송되거나 PDF가 실제로 내려받아지지는 않습니다. 실제로 쓸 때는 연락 폼의 제출 핸들러에 API 호출을, 이력서 CTA의 진행 완료 시점에 실제 href를 연결하면 나머지 검증·애니메이션 로직은 그대로 재사용할 수 있습니다.

압축 비밀번호를 입력하세요

비밀번호는 이 글 본문 안에 있습니다. 읽다 보면 나옵니다.