경력 포트폴리오 웹사이트
세 가지 입력(이력서, 프로필 사진, LinkedIn 프로필 URL)으로 세련된 원페이지 포트폴리오를 구축합니다. 디자인은 고정되어 있으며 이미 완성되었습니다(애니메이션 네트워크 배경, 글자별 이름 표시, 타이핑 역할군, 스태킹 케이스 스터디 카드, 클릭 시 경력 타임라인을 강조하는 스킬, 라이트/다크 모드, 모바일 레이아웃). 여러분의 작업은 콘텐츠입니다: 이력서를 읽고, content.json 하나를 작성하고, 빌드 스크립트를 실행하세요.
이 스킬의 파일:
assets/template.html: 완성된 디자인입니다. 일반적인 사용 시에는 편집하지 마세요.scripts/build.py:content.json과 사진을 하나의 HTML 파일로 병합합니다.references/content-schema.md: 모든 필드, 길이 가이드 및 아이콘 이름이 있습니다.examples/sample-content.json: 완전한 작동 예제입니다.
1. 세 가지 입력 수집
한 번에 함께, 누락된 항목을 요청하세요:
- 이력서: 모든 형식(PDF, DOCX, 텍스트, 붙여넣기). 필수.
- 사진: 조명이 좋고 정면을 바라본 헤드샷. 선택 사항이며, 없으면 초상화에 이니셜이 표시됩니다.
- LinkedIn URL: 연락처 링크에 사용됩니다.
처음에 다른 것은 요청하지 마세요. LinkedIn 페이지는 일반적으로 자동 읽기를 차단하므로 URL을 데이터 소스가 아닌 링크로 취급하세요. 이력서가 진실의 원천입니다. 프로필을 읽을 수 있고 사실이 추가된다면 사용하세요.
2. 이력서를 읽고 페르소나 찾기
이력서 전체를 읽으세요. 그런 다음, 아무것도 작성하기 전에 통합된 페르소나를 결정하세요: 가장 최근 직함뿐만 아니라 그 사람이 가졌던 모든 주요 역할을 포함하는 하나의 정체성입니다. 예: "온보딩을 설계하고, 데이터 기반 CS 운영을 진행하며, 참여도 높은 팀을 만드는 고객 성공 리더" ("CS 책임자" 대신). 사람들은 한 가지 역할에 대한 사이트보다 자신의 경력을 관통하는 흐름을 원하는 경우가 많습니다.
다음을 선택하세요:
- 그들이 가져오는 4–8개의 정체성(타이핑 라인이 됨)
- 역할 전반에 걸친 일관된 흐름(리더십 헤드라인과 기둥이 됨)
- 명확한 문제, 행동 및 결과가 있는 3–5개의 스토리(사례 연구)
- 모든 명시된 숫자(통계, 게이지, 하이라이트)
- 도구, 플랫폼, 자격증, 교육
3. content.json 작성
references/content-schema.md를 따르고 examples/sample-content.json의 형태를 반영하세요. 규칙:
- 이력서에 있는 사실만 사용하세요. 지표, 고용주, 날짜, 팀 규모 또는 결과를 절대 꾸며내지 마세요. 사례 연구에 명시된 결과가 없으면 결과를 질적으로 설명하세요. 게이지는 실제 명시된 백분율에만 사용하세요.
- 1인칭, 간결하고 자신감 있게. 짧은 문장, 과장된 용어(버즈워드) 사용 금지, "열정적인", "결과 중심" 또는 "역동적인"과 같은 표현 금지.
- 길이 가이드를 준수하세요. 긴 텍스트는 레이아웃의 리듬을 깨뜨립니다.
- 스킬은 실제 역할 ID를 가리켜야 하며, 각 스킬은 이력서에 표시된 모든 역할에 매핑되어야 합니다.
- 경력 역할은 최신순으로 정렬하고, 현재 역할은
current: true로 표시하세요. - 상대방이 포함하라고 하지 않는 한
contact.phone은 비워 두세요.
작업 디렉토리에 content.json으로 저장하세요.
4. 빌드
python3 <skill-dir>/scripts/build.py --content content.json --photo <photo-path> --out portfolio.html
Pillow (pip install pillow)는 사진을 자르고 압축합니다. 없으면 사진이 그대로 삽입됩니다. 모든 ERROR를 수정하고 각 WARNING을 읽고 의도적인 경우가 아니면 수정하세요.
5. 확인
브라우저를 열거나 스크린샷을 찍을 수 있다면 데스크탑과 휴대폰 너비에서 히어로를 보고, 전체 페이지를 한 번 스크롤하고, 다크 모드를 전환해 보세요. 사진 자르기가 얼굴을 보여주는지(person.photoPosition 조정), 텍스트가 넘치지 않는지 확인하세요. 그렇지 않으면 길이 가이드에 맞춰 content.json을 다시 읽으세요.
6. 전달
- 아티팩트나 웹 페이지를 게시할 수 있다면
portfolio.html을 비공개로 게시하고 링크를 제공하며, 언제 공유할지 선택할 수 있다고 설명하세요. - 그렇지 않으면 파일을 보내세요.
그런 다음 간단히 알려주세요:
- 어떤 페르소나를 기준으로 사이트를 구축했는지(방향을 바꿀 수 있도록)
- 어떤 카피 변경이든 요청할 수 있으며 다시 빌드해 줄 것임을
- 공유 방법: 아티팩트 링크를 게시/공유하거나 단일 파일을 GitHub Pages 또는 Netlify Drop에 무료로 호스팅한 후 LinkedIn 프로필의 Featured 섹션에 링크를 추가하세요.
편집
카피 변경의 경우 content.json을 편집하고 다시 빌드하세요. 빌드된 HTML을 직접 편집하지 마세요. 디자인 변경(색상, 글꼴, 섹션)은 assets/template.html에서 수행하고 /*__PORTFOLIO_DATA__*/null, "/*__PHOTO__*/", __TITLE__, __DESCRIPTION__ 플레이스홀더를 그대로 유지하세요.