resume-to-personal-site은(는) 무엇을 하나요?
이력서를 프리미엄 개인 웹사이트로 변환합니다: 포지셔닝, 히어로 섹션, 비주얼 시스템, GPT 이미지 에셋, 반응형 React + 모션 — HTML로 조판된 이력서가 아닙니다.
개요
이 스킬은 기존 이력서(예: resume.pdf 또는 resume.json)를 완전한 기능을 갖춘 개인 웹사이트로 변환합니다. 출력물은 단순한 HTML 이력서가 아니라, 다음을 포함한 프리미엄급 포트폴리오 사이트입니다:
- 포지셔닝 전략: 사용자의 전문 분야와 핵심 가치를 명확히 전달하는 메시징
- 히어로 섹션: 강력한 첫인상을 남기는 대형 애니메이션 헤더
- 비주얼 시스템: 통일된 색상, 타이포그래피, 여백 시스템
- GPT 이미지 에셋: DALL·E 또는 Stable Diffusion을 이용한 맞춤형 일러스트/배경 생성
- 반응형 React + 모션: 모든 기기에서 최적화된 경험을 제공하는 React(Framer Motion) 기반 인터랙티브 UI
사용 방법
- 이력서 파일을 준비합니다 (PDF, JSON, 텍스트 등).
- AI 에이전트에게 이력서 파일 경로와 디자인 방향성(예: "기술 스타트업 분위기", "미니멀한 포트폴리오")을 제공합니다.
- 에이전트가 자동으로 다음을 수행합니다:
- 이력서 데이터 추출 및 구조화
- 포지셔닝 문구 생성
- 디자인 시스템 설계
- GPT 이미지 프롬프트 작성 및 에셋 생성 요청
- React 프로젝트 스캐폴딩 및 컴포넌트 개발
- 최종 웹사이트 배포 (선택 사항)
지원 플랫폼
- Claude Code
- Cursor
- Codex
- 기타 AI 에이전트 (적절한 파일 시스템 및 API 접근 권한 필요)
파일 구조 (출력 예시)
my-personal-site/
├── public/
│ └── images/ # GPT 생성 이미지 에셋
├── src/
│ ├── components/ # React 컴포넌트
│ │ ├── Hero.jsx
│ │ ├── About.jsx
│ │ ├── Experience.jsx
│ │ ├── Skills.jsx
│ │ └── Contact.jsx
│ ├── styles/
│ │ └── theme.js # 디자인 시스템 (색상, 폰트, 간격)
│ ├── data/
│ │ └── resume.json # 추출된 이력서 데이터
│ └── App.jsx
├── package.json
└── README.md
환경 변수
| 변수명 | 설명 | 필수 여부 |
|---|---|---|
OPENAI_API_KEY | GPT 이미지 생성을 위한 API 키 | 예 (이미지 생성 시) |
RESUME_PATH | 이력서 파일 경로 | 예 |
주의 사항
- 이력서에 포함된 개인 정보(전화번호, 이메일 등)가 웹사이트에 표시되므로 공개를 원하지 않는 정보는 제거하십시오.
- GPT 이미지 생성은 추가 API 비용이 발생할 수 있습니다.
- 생성된 사이트는 완전히 사용자 정의 가능하며, 이후 수동으로 편집할 수 있습니다.
라이선스
MIT