HuanEnzie/cinematic-portfolio

시네마틱 포트폴리오

원페이지 포트폴리오, 어두운 톤, 에디터 및 VFX 아티스트의 포트폴리오에서 영감을 받았습니다: 인물 사진 뒤에 거대한 글자가 흐릿하게 자리 잡고, 그 앞에 이름이 표시되며, 두 가지 색상(흰색과 강조 색상)의 제목이 있습니다. 페이지 진입 시 30개의 에이전트가 각 블록을 구성하는 효과( agent-build-effect 스킬, template/vendor/ 에 포함)가 있습니다.

template/
  index.html        페이지 프레임, 수정 불필요
  data.js           모든 콘텐츠, 이 파일만 수정
  styles.css        인터페이스; 색상은 변수 또는 data.js의 `accent`로 변경
  portfolio.js      data.js에서 페이지를 구성한 후 에이전트 효과 시작
  vendor/           agent-build.js + .css
  assets/           배경 제거된 인물 사진 + 스킬 카드 이미지 (예시: 어두운/빨간색 계열 6개 이미지)
scripts/cutout.py   인물 사진 배경 제거 (rembg)
references/image-prompts.md   동일한 스타일의 카드 이미지 프롬프트

프로세스

1. 작업 전 충분한 정보 수집

한 번에 간결하게 질문하며, 사용자가 아직 제공하지 않은 정보를 수집합니다:

• 크게 표시할 짧은 이름 (한 단어가 가장 좋음), 전체 이름, 직함, 소개 문구.
• 인물 사진: 무릎 위 또는 전신 사진, 배경이 너무 복잡하지 않고 약간 비스듬히 선 사진. 실제 사진이나 3D 이미지 모두 가능.
• 홍보하고 싶은 3~6개의 역량 또는 프로젝트 (이름, 설명, 기술). 실제 프로젝트와 링크가 있는 경우 카드의 href를 설정합니다.
• 경력 (직장, 학력), 기술, 작업 프로세스, 인용문.
• 수상 또는 언론 보도 (없으면 해당 섹션 전체 제거).
• 연락처: 이메일, 지역, 클릭 유도 버튼.
• 페이지 언어, 강조 색상 (기본값 빨간색 #ff3b30), 배경 흐릿 글자 (기본값 PORTFOLIO).

숫자, 상 또는 언론 보도를 허위로 작성하지 마십시오. 사용자가 없는 항목은 data.js에서 제거하면 페이지에서 자동으로 해당 부분이 사라집니다.

2. 템플릿 복사

template/ 디렉터리 전체를 사용자가 원하는 위치 (예: ./my-portfolio/)로 복사합니다. 스킬 내 원본 템플릿은 수정하지 마십시오.

3. 인물 사진 배경 제거

pip install rembg pillow
python -I <skill>/scripts/cutout.py original-photo.jpg my-portfolio/assets/photo.webp

기본 모델은 isnet-general-use로 가볍습니다 (~180 MB, 한 번 다운로드). RAM이 충분한 경우에만 birefnet-portrait 모델을 시도하십시오. 이 모델은 약 1 GB이며 1440px 이미지에서 메모리가 부족할 수 있습니다. 회색 배경에서 한 번 확인합니다 (PIL로 회색 배경을 합성한 후 이미지를 읽습니다). 머리카락, 안경 및 손에 든 물건이 유지되어야 합니다. hero.photo를 assets/photo.webp로 설정합니다.

4. 스킬 카드 이미지

기본적으로 6개의 어두운/빨간색 이미지가 제공됩니다 (에이전트, 자동화, 웹, 챗봇, 스프레드시트, 비디오). 카드 내용과 일치하면 재사용할 수 있습니다. 별도의 이미지를 원하면 references/image-prompts.md를 참조하십시오: 스타일의 끝부분을 유지하고 주제만 변경합니다. 강조 색상을 변경하면 프롬프트의 색상 코드도 변경하십시오. 대량으로 이미지를 생성하기 전에 사용자에게 먼저 문의하십시오 (계정 한도 소모).

일치하는 이미지가 없으면 해당 카드의 image를 생략합니다. 카드는 이미지 없이도 여전히 잘 표시됩니다. 내용이 다른 두 카드에 동일한 이미지를 사용하지 마십시오.

5. data.js 작성

• hero.name: 한 단어, 자동으로 대문자 처리됩니다. 이름이 7자를 초과하면 .pf-name에서 크기를 줄입니다.
• hero.stats: 실제 숫자만 기록합니다 (역량 수, 경력 연수, 기술 수 등).
• 섹션 제목은 title (흰색)과 accent (강조 색상)로 구성됩니다. 두 부분은 짧고 강력하게 읽히도록 합니다: "Not just code." / "Solutions that run."
• agents.labels: 페이지 언어에 맞게 번역합니다. 예를 들어 한국어의 경우: { status: "{agents} 에이전트 · {edits} 수정", building: "페이지 구성 중", done: "구성 완료", skip: "건너뛰기" }.
• 텍스트는 textContent를 통해 삽입되므로 HTML을 삽입할 수 없습니다 (의도적이며 안전합니다).

6. 확인 (숫자 먼저, 이미지 나중에)

브라우저에서 직접 index.html을 열거나 (file:// 실행 가능) 정적 서버를 실행합니다. Playwright를 사용하여 1440×900 및 390×844 해상도에서 ?agents와 함께 확인합니다:

({
  sections: document.querySelectorAll(".pf-section").length,
  overflowX: document.documentElement.scrollWidth > innerWidth,   // false여야 함
  photo: document.querySelector(".pf-photo img")?.naturalWidth,    // > 0
  waiting: document.querySelectorAll('[data-ab="wait"]').length,   // 스크롤 완료 후 0
})

window.scrollTo로 600px씩 스크롤하고 각 단계에서 약 1초 대기한 후 waiting이 0이 되고 콘솔 오류가 없는지 확인합니다. 각 해상도에서 하나의 히어로 이미지를 캡처하여 시각적 평가를 수행합니다. 주의: 소개 문구가 인물을 가리지 않아야 하며, 모바일에서는 얼굴이 글자에 가려지지 않아야 합니다.

7. 온라인 배포

디렉터리는 정적 웹입니다: Netlify Drop으로 드래그 앤 드롭, vercel deploy, GitHub Pages 또는 Cloudflare Pages. 빌드가 필요하지 않습니다.

기존 Next.js / React 프로젝트에 통합

styles.css를 재사용하고 :root를 .pf로 변경합니다. 렌더링 부분을 서버 컴포넌트로 다시 작성하고 클래스 이름은 그대로 유지합니다. agent-build-effect 스킬의 AgentBuild.tsx를 사용하여 portfolio.js와 동일한 targets 목록으로 효과를 연결합니다. Next 버전 작업 시 발생한 사항:

• 고정 헤더: 페이지 margin-top을 헤더 높이만큼 음수로 설정하여 히어로가 헤더 아래로 들어가도록 합니다.
• next/image에 fill을 사용하는 경우 상위 컨테이너에 position: relative가 필요합니다. 그렇지 않으면 이미지가 페이지 전체를 덮습니다.
• Anton 폰트에는 한국어 문자 집합이 없습니다. 필요한 경우 Latin, Latin-ext, Vietnamese 서브셋을 모두 다운로드하여 직접 호스팅합니다.
• Turbopack 개발 서버는 sed를 사용한 CSS 변경을 놓칠 수 있습니다. 편집 도구로 수정하거나 파일을 다시 저장하면 인식됩니다.