포트폴리오 사이트 스킬
전문 포트폴리오 웹사이트(히어로 섹션, 프로젝트 쇼케이스 그리드, 소개 섹션, 연락처 양식)를 생성합니다. 깔끔하고, 타이포그래피 중심이며, 미니멀합니다.
메타데이터
이름: portfolio-site 설명: 히어로, 프로젝트 쇼케이스, 소개, 연락처 섹션이 포함된 전문 포트폴리오 웹사이트를 생성합니다. 트리거 키워드: "포트폴리오", "개인 웹사이트", "개발자 포트폴리오", "크리에이티브 포트폴리오", "이력서 사이트"
입력 및 매개변수
| 매개변수 | 유형 | 필수 | 기본값 |
|---|---|---|---|
name | 문자열 | ✓ | — |
tagline | 문자열 | ✓ | — |
projects | 배열 | ✓ | — |
github_url | 문자열 | — | — |
linkedin_url | 문자열 | — | — |
email | 문자열 | — | — |
years_experience | 숫자 | — | 3 |
skills | 배열 | — | [] |
프로젝트 배열 항목:
{ title: string; description: string; tags: string[]; url?: string; image?: string }
필수 섹션 (순서대로)
- 탐색 — 이름(로고), 링크: 프로젝트 / 소개 / 연락처
- 히어로 — 이름, 태그라인, 한 줄 가치 제안, 소셜 링크(GitHub, LinkedIn, 이메일)
- 프로젝트 그리드 — 3열 반응형 그리드, 각 카드: 제목 + 설명 + 태그 + 링크
- 소개 — 2열: 왼쪽에 약력 텍스트, 오른쪽에 기술/통계
- 연락처 — 간단한 양식: 이름, 이메일, 메시지, 제출 버튼
- 바닥글 — 저작권 + 소셜 링크
디자인 규칙
- 단일 페이지, 완전 반응형
- 어두운 모드 기본값 (DESIGN.md의 어두운 모드 토큰 사용)
- 모든 링크는 새 탭에서 열림
- 외부 JS 라이브러리 없음
- 모든 CSS는
<style>블록 내 - 시맨틱 HTML5 (
<header>,<nav>,<main>,<section>,<footer>)
출력
단일 파일: index.html (자체 포함)
자체 점검
- 히어로 제목은 "환영합니다"가 아닌 이름입니다.
- 최소 4개의 프로젝트가 표시됩니다.
- 소셜 링크는 SVG 아이콘을 사용합니다 (이모지 없음).
- 모바일: 단일 열 그리드
- 연락처 양식에 깨진
action속성이 없습니다.