/agentic-portfolio — 모든 GitHub 사용자를 위한 무료 LLM 기반 에이전틱 포트폴리오 구축하기
이 스킬은 agentic-portfolio 앱(Next.js 15 App Router + CopilotKit + /free-llm 생존 체인)을 스캐폴딩합니다. 참조 구현체는 github.com/wjlgatech/agentic-portfolio이며, 템플릿으로 클론한 후 대상 사용자를 위해 content/ 데이터를 다시 채웁니다. 모든 개인 정보는 데이터로 처리되며, 앱 코드는 그대로 재사용 가능합니다.
0. 입력 및 사전 요구사항
- GitHub 로그인 (예:
wjlgatech). 비공개 저장소 및 하이라이트를 위해서는gh auth status를 실행하세요 — 사용자는repo스코프로 인증되어야 합니다. 공개 저장소만 사용하는 경우 인증이 필요 없습니다. node >= 18,npm,gh,python3.
1. 최근 12개월간 활동 저장소 가져오기
SINCE=$(python3 -c "import datetime as d;print((d.date.today()-d.timedelta(days=365)).isoformat())")
gh api -X GET 'user/repos?per_page=100&sort=pushed&affiliation=owner' --paginate \
--jq ".[] | select(.pushed_at >= \"$SINCE\") | {name,private,fork,lang:.language,desc:.description,pushed:.pushed_at[0:10],stars:.stargazers_count,url:.html_url}" \
> repos.ndjson
# 다른 사용자의 공개 저장소: gh api "users/<login>/repos?per_page=100&sort=pushed" ...
포크(fork: true)와 메타 저장소(dotfiles, 기존 portfolio)는 제외합니다.
2. content/projects.json으로 정리하기
각 유지할 저장소에 대해 {name, category, highlight, featured, private, language, stars, pushed, url}를 출력합니다:
- Category — 작은 그룹으로 분류합니다 (예: 에이전틱 OS · 프레임워크 및 도구 · AI 제품 · 신앙/가족 · 오픈 지식); 사용자의 실제 작업에 맞는 이름을 선택합니다.
- highlight — IP-안전한 한 줄 설명입니다. 비공개 저장소의 경우: 높은 수준의 설명만 포함하고 **
url: null**로 설정합니다 (내부 정보를 링크하거나 노출하지 마십시오). - featured — 기본 보기를 위해 약 15-18개의 가장 강력한 저장소에 플래그를 지정합니다.
3. content/profile.ts 및 content/portfolio.yaml 채우기
profile.ts: 이름, 태그라인, 미션, 가치, 좋아하는 것, 그리고 12X 미래 실천법(12가지 복합 훈련법)을 포함합니다. 사용자의 약력과 저장소 테마를 바탕으로 작성하며, 사용자가 직접 편집할 수 있음을 명확히 표시합니다.portfolio.yaml: 제어 표면 — 섹션 순서/가시성/레이블, 테마, 그리고 게시글 목록을 포함합니다 (처음에는 비어 있음). 소유자는 에이전트와 대화하여 게시글을 추가하거나 직접 수동으로 채울 수 있습니다. LinkedIn은 인증이 필요하므로 사용자에게 게시물을 붙여넣도록 요청하거나, 공개 게시글 URL을 받아 WebFetch를 통해 가져옵니다.- 배포 시
PORTFOLIO_OWNER_TOKEN을 설정하여 소유자만 에이전트 편집을 적용할 수 있도록 합니다 (방문자는 읽기 전용). 설정되지 않으면 = 제한 없는 로컬 개발 환경입니다.
4. 앱 코드 — 템플릿에서 복사, 재작성 금지
재사용 가능한 부분(모든 사용자에게 동일):
app/page.tsx,app/layout.tsx,app/globals.cssapp/api/copilotkit/route.ts+lib/llm.ts(무료 LLM 체인 — 서버 측에서만 키 사용)components/Copilot.tsx,components/Projects.tsx,components/Articles.tsx- 구성 파일:
package.json(Next.js를 패치된 15.x로 고정),tailwind.config.ts,tsconfig.json,postcss.config.mjs,.env.example
5. 검증 및 배포
npm install && npm run build # 푸시 전 반드시 GREEN이어야 함
gh repo create <login>/<repo-name> --public --source=. --remote=origin --push
그런 다음 Vercel에 배포합니다 (저장소 임포트 → 무료 키 하나 추가, 예: NVIDIA_API_KEY → 배포).
가드레일
- 비공개 IP를 절대 노출하지 마십시오. 비공개 저장소: 하이라이트만 제공하고
url: null로 설정합니다. - 키는 서버 측에서만 유지합니다.
app/api/copilotkit/route.ts만 LLM 키를 읽습니다. - 무료 티어 우선.
lib/llm.ts의 순서를 NIM → Groq → Gemini → 유료로 유지합니다. - 푸시 전에 빌드가 GREEN이어야 합니다. 빌드 상태를 정직하게 보고합니다.
- 저장소 푸시는 사용자가 "생성 및 푸시"를 요청하지 않는 한 사람이 게이트합니다.