포트폴리오 디자인

포트폴리오 디자인은(는) 무엇을 하나요?

이 스킬은 누구나 하나의 특정 포트폴리오 디자인을 새롭게 제작합니다. 디자인은 고정되어 있으며 이미 최적화되어 있습니다. 당신의 작업은 해당 인물의 자료를 수집하고, 적절한 어조로 카피를 작성하며, 사이트를 생성하고, 작동을 확인한 후 승인을 받으면 배포하는 것입니다.

모든 것은 이 스킬 폴더에 있습니다:

경로	설명
template/assets/	사이트의 CSS, JavaScript 모듈, 폰트 및 벤더 라이브러리(GSAP, Lenis)입니다. 사람마다 절대 편집하지 않음: 빌드가 복사하고 테마를 적용합니다.
scripts/build.mjs	portfolio.json을 완성된 정적 사이트로 변환합니다. Node 18+, 의존성 없음.
scripts/prepare_photos.py	초상화를 잘라내고(배경 제거) About 사진을 정사각형으로 만듭니다.
scripts/discover_github.mjs	GitHub 사용자의 공개 리포지토리를 README 태그라인 및 배너 이미지와 함께 나열하여 프로젝트를 선택합니다.
scripts/snapshot_github.mjs	아카이브가 참조할 공개 리포지토리 목록을 저장합니다.
scripts/render_images.py	공유 카드(og.jpg)와 터치 아이콘을 렌더링합니다.
scripts/serve.py	빌드된 사이트의 로컬 미리보기 서버입니다.
scripts/qa/run_all.py	브라우저 품질 게이트입니다. 통과할 때까지 빌드는 완료되지 않습니다.
examples/portfolio.example.json	가상 인물의 완전한 구성 파일(예제 이미지 포함).
reference/	구성 스키마, 인터뷰 스크립트, 디자인 시스템, 카피 규칙, QA 게이트, 배포 가이드입니다.

아래 명령에서 scripts/...는 이 스킬의 폴더를 의미하며(실행 시 절대 경로 사용) portfolio/...는 작업 디렉토리에 있는 해당 인물의 프로젝트 폴더입니다.

구성을 작성하기 전에 reference/config-schema.md를 읽고, 카피를 작성하기 전에 reference/copywriting.md를 읽으십시오.

기본 규칙

• 명확한 동의 없이 공개되지 않습니다. 해당 인물이 특정 단계를 승인할 때까지 git push, 배포, 리포지토리 생성을 하지 마십시오. 로컬에서 빌드하고 미리보는 것은 괜찮습니다.
• 개인정보 보호. 공개 GitHub 데이터만 사용됩니다(두 GitHub 스크립트 모두 의도적으로 인증되지 않은 API를 호출합니다). 아카이브가 공개되기 전에 표시될 공개 리포지토리 목록을 보여주고 숨길 항목을 물어보십시오. 페이지에 전화번호, 주소 또는 비공개 리포지토리를 절대 넣지 마십시오(해당 인물이 요청하지 않는 한).
• 사진은 해당 인물의 소유입니다. 프로젝트 폴더 내부의 사본으로 작업하십시오. 해당 인물이 승인한 사이트 외부에 업로드하지 마십시오.
• 디자인이 제품입니다. 해당 인물이 막연한 것을 요청한다고 해서 섹션을 추가하거나, 폰트를 바꾸거나, 컴포넌트 스타일을 변경하지 마십시오. 콘텐츠, 테마 프리셋, 마스코트 및 카피를 조정하십시오. 구조적인 변경을 원하면 비용을 말하고 먼저 확인하십시오.
• 카피는 작성되는 것이지 채워지는 것이 아닙니다. 해당 인물의 노트는 원자재입니다. 모든 줄을 그들의 어조로 초안을 작성하고, 길이 제한을 지키며, 최종 버전을 빌드하기 전에 그들에게 보여주십시오.

워크플로우

1. 도구 체인 확인

node --version          # 18 이상
python --version        # 3.10 이상
python -m pip install playwright pillow numpy
python -m playwright install chromium

초상화 배경 제거에는 python -m pip install "rembg[cpu]"가 필요합니다(첫 실행 시 약 1GB 모델 다운로드). 이것이 불가능하면 이미 투명 배경이 있는 초상화를 요청하고 --no-cutout을 사용하십시오.

해당 인물과 프로젝트 폴더를 합의하십시오(기본값: 현재 디렉토리의 ./portfolio/). 레이아웃:

portfolio/
  portfolio.json      # 당신이 작성할 구성 파일
  photos/             # 해당 인물의 원본 사진(절대 그대로 게시되지 않음)
  work/               # 프로젝트 배너 및 스크린샷
  site/               # 빌드 출력: 배포되는 폴더

2. 인터뷰

reference/interview.md를 따르십시오. 10개의 짧은 라운드로 진행되며, 합리적인 옵션이 있는 모든 선택(테마, 마스코트, 강조할 리포지토리, 히어로에 넣을 링크)에 대해 AskUserQuestion을 사용합니다. 자유 형식 자료(바이오 노트, 프로젝트 설명)는 일반 텍스트로 요청합니다. 한 번에 한 라운드씩 질문하고, 작성하기 싫은 내용은 초안을 제안하십시오.

영역 순서:

1. 신원: 전체 이름, 사용하는 별명 또는 핸들, 짧은 직함, 이메일, 도시 및 국가(실시간 시계의 시간대), 언어.
2. 사진: 어깨 위 초상화(히어로 컷아웃) 및 About 섹션용 선택적 두 번째 사진.
3. 링크: 나열하려는 모든 프로필; 히어로 행에 2~4개 선택.
4. 히어로 및 About: 한 호흡으로 하는 일, 작업 방식에 대한 두 개의 짧은 단락.
5. 구축하는 것: 네 가지 작업 유형, 각각 한 단어, 설명 한 줄, 호버 애니메이션(agents, automation, context, launch, code, data, design).
6. 프로젝트: 최대 6개의 주요 프로젝트 및 최대 3개의 사이드 퀘스트. 먼저 discover_github.mjs를 실행하고 후보를 제안하십시오.
7. 아카이브: 모든 공개 리포지토리를 표시할지 여부와 숨길 항목.
8. 스택: 그룹화된 도구 목록 및 핏볼이 될 12~24개의 도구.
9. 프로세스, 연락처, 밴드: 세 가지 프로세스 단계, 연락처 라인, 두 개의 스크롤링 테이프 밴드.
10. 외관 및 추가 사항: 테마 프리셋, 마스코트(이름, 목소리 또는 끄기), 사이트 URL 및 호스팅 위치.

3. 프로젝트 자료 수집

node scripts/discover_github.mjs --user <github-user> --out portfolio/discovery.json
node scripts/discover_github.mjs --user <github-user> --out portfolio/discovery.json --download portfolio/work --repos RepoA,RepoB

첫 번째 실행은 공개 리포지토리를 README 태그라인, 이미지 및 라이브 링크와 함께 나열합니다. 두 번째 실행은 선택한 각 리포지토리의 첫 번째 README 이미지를 저장합니다. 각 주요 프로젝트에는 최소 하나의 미리보기 이미지가 필요합니다. 좋은 소스 순서: README 배너, 라이브 앱 스크린샷(1600x900에서 Playwright 사용), examples/assets/*.svg 스타일의 생성된 배너. 각 이미지를 확인하십시오: 스크린샷에 비밀 정보 없음, 흐릿함 없음, 와이드 형식(16:9 또는 유사).

4. 사진 준비

python scripts/prepare_photos.py --portrait portfolio/photos/portrait.jpg \
  --about portfolio/photos/about.jpg --about-gray --out portfolio/photos/out

결과를 열고 확인하십시오. 컷아웃은 가장자리가 깨끗해야 하고, 투명한 부분이 없어야 하며, 머리가 상단 근처에 있어야 합니다. About 사진이 얼굴을 잘못 자르면 --about-focus x,y(이미지의 0~1 분수)로 다시 실행하십시오. 구성의 person.photos.portrait 및 .about을 out/의 파일로 지정하십시오.

5. 구성 작성 및 빌드

portfolio/portfolio.json을 작성하십시오(스키마: reference/config-schema.md; 작동 예제: examples/portfolio.example.json). 내부 경로는 구성 파일을 기준으로 합니다. 그런 다음:

node scripts/build.mjs --config portfolio/portfolio.json --out portfolio/site
node scripts/snapshot_github.mjs --user <github-user> --site portfolio/site   # 아카이브가 켜져 있는 경우에만
python scripts/render_images.py --site portfolio/site

필수 필드가 누락되면 명확한 메시지와 함께 빌드가 중지됩니다. 알 수 없는 아이콘에 대한 경고는 해당 볼이 텍스트로 이름을 표시한다는 의미입니다. data/simple-icons.json에서 슬러그를 선택하거나 그대로 두십시오.

6. 미리보기

백그라운드에서 사이트를 제공하고 해당 인물에게 URL을 알려주십시오:

python scripts/serve.py --site portfolio/site --port 4321

python -m http.server 대신 이 서버를 사용하십시오: 기본 서버는 페이지가 한 번에 많은 파일을 요청할 때 연결을 끊어 무작위 QA 실패로 나타납니다. 또한 no-cache 헤더를 보내며(재빌드 시 새로고침에 반영됨) GitHub Pages와 같은 알 수 없는 경로에 404.html을 제공합니다.

7. 품질 게이트

python scripts/qa/run_all.py --url http://127.0.0.1:4321/ --out portfolio/qa

모든 검사가 통과해야 합니다(reference/quality-gates.md는 각각의 설명과 일반적인 실패를 수정하는 방법을 설명합니다). 그런 다음 직접 portfolio/qa/shots/의 스크린샷을 섹션별로, 데스크톱과 휴대폰에서 확인하십시오. 자동화된 검사는 충돌과 넘침을 잡아냅니다. 당신의 눈은 어색한 줄바꿈, 약한 이미지 및 잘못 읽히는 카피를 잡아냅니다. 수정, 재빌드, 재실행. 배포 전에 --full을 한 번 실행하십시오.

8. 해당 인물과 검토

히어로, About, 행, 프로젝트, 아카이브, 핏, 프로세스, 연락처, 마스코트 채팅을 통해 미리보기를 안내하십시오. 변경 사항을 수집하여 빌드된 파일이 아닌 구성에 적용하고, 재빌드하고 QA를 다시 실행하십시오.

9. 배포(명확한 동의 후에만)

reference/deploy.md를 따르십시오: GitHub Pages(사용자 사이트 또는 프로젝트 사이트), 사용자 정의 도메인 및 중요한 Cloudflare 설정. 배포 후 라이브 검사를 실행하십시오:

python scripts/qa/run_all.py --url https://their-domain/ --only smoke,live --out portfolio/qa-live

"이메일이 다시 쓰여지지 않음" 검사가 실패하면 Cloudflare의 이메일 주소 난독화가 켜져 있어 "Let's talk" 링이 깨지는 것입니다. 수정 방법은 reference/deploy.md에 있습니다.

나중에 변경하기

portfolio.json을 편집하고, 재빌드하고, QA를 다시 실행하고, 재배포하십시오. 각 빌드는 모든 자산에 새로운 ?v= 버전 문자열을 찍어 브라우저와 CDN이 수동 캐시 제거 없이 변경 사항을 가져옵니다.