GitHub 포트폴리오 웹페이지 구축 계획

프로젝트 개요

sigco3111의 GitHub 저장소(134개)를 카테고리별로 분류하고, 각 저장소의 핵심 정보를 한눈에 볼 수 있는 네비게이션 웹페이지.

저장소

• GitHub: sigco3111/github-portfolio (비공개)
• 로컬 계획서: ~/Desktop/project/work/ai/github-portfolio/PLAN.md

기술 스택

• 프레임워크: Next.js (App Router)
• 스타일: Tailwind CSS (다크 테마)
• 배포: Vercel
• 데이터: 정적 JSON (gh CLI로 수집, GitHub Actions로 주 1회 갱신)

현황 분석

• 총 134개 저장소 (공개 122 / 비공개 12)
• 설명 있는 저장소: 19개 / 누락: 115개 → 자동 보완 필요
• Fork: 0개 (전부 원본)

카테고리 분류 (6개)

• 🎮 게임: ~58개 — 2048, Tetris, wordle, gostop, stock-game, candy-crush-saga, wobbly-tower, democracy4-lite, xcom-lite 등
• 📊 대시보드: ~22개 — github-board, mac-board, steam-board, world-data-map, commodity-dashboard 등
• 🤖 AI/자동화: ~21개 — hermes_bot, icbm2-knowledge-graph, ai-image-generator, ubob 시리즈 등
• 🛠 유틸리티: ~29개 — DevCanvas, core-image-converter, svg-converter, KakaoSplit, upbit 등
• 🌐 웹사이트: ~4개 — blog, pages, rzweb, ubobtest

각 저장소 표시 정보

기본 (GitHub API 자동 수집)

• 저장소명 / 설명
• 주요 언어 + 언어 비중 바
• ⭐ Stars / 🍴 Forks
• 최근 업데이트
• 최신 릴리스 (있는 경우)
• 라이선스 / 🔒 비공개 여부
• GitHub 링크 / 라이브 데모 링크 (비공개는 데모 링크 없음)

자동 보완 (ICBM2가 직접 추가)

• 설명 누락분: 저장소명 + README/언어 기반으로 한국어 설명 자동 생성 → GitHub API로 일괄 업데이트

UI 디자인 방향

• AI 스타일 배제 — 클래식 개발자 포트폴리오 느낌
• 다크 테마 베이스 (VS Code / GitHub Dark 느낌)
• 색상: 진한 네이비 배경 + 민트/사이언 블루 포인트
• 카드 레이아웃 (Grid)
• 상단 고정: 검색바 + 카테고리 탭 + 언어 필터
• 좌측 사이드바: 카테고리 네비게이션 + 저장소 수
• 언어 컬러는 GitHub 공식 언어 컬러 사용
• 폰트: 시스템 폰트 (SF Mono, Menlo 계열)
• 반응형 (모바일: 1열, 태블릿: 2열, 데스크톱: 3-4열)

구현 단계 (6단계)

1단계: 데이터 수집 + 설명 보완

• gh CLI로 전체 134개 메타데이터 JSON 생성
• 설명 누락 115개에 대해 README 스캔 + 이름 분석으로 한국어 설명 자동 생성
• gh api로 GitHub 저장소 설명 일괄 업데이트

2단계: Next.js 프로젝트 초기화

• create-next-app (App Router + Tailwind)
• 다크 테마 CSS 작성
• 레이아웃: 헤더 + 사이드바 + 메인 그리드

3단계: 저장소 카드 컴포넌트

• 언어 컬러 도트 + 비중 바
• Stars/Forks/Updated 뱃지
• 비공개 잠금 아이콘
• 데모 링크 버튼 (비공개 제외)

4단계: 필터/검색

• 카테고리 탭 필터
• 검색바 (이름+설명 대상)
• 언어 필터 드롭다운
• 정렬 (업데이트순, Stars순, 이름순)

5단계: 통계 섹션

• 전체 언어 분포 도넛 차트
• 저장소 총계 / 카테고리별 비율
• 월별 생성 트렌드 바 차트

6단계: 배포 + 자동화

• Vercel 배포
• GitHub Actions: 주 1회 데이터 자동 갱신

주의사항

• 세션 중단 가능성 → PLAN.md와 GitHub 레포에 항상 백업
• 비공개 저장소는 데모 링크 없이 표시
• 카테고리 분류는 데이터 수집 후 실제 저장소 기반으로 재조정 필요