|
| 1 | +# GitProfile - 한글 사용 설명서 |
| 2 | + |
| 3 | +<p align="center"> |
| 4 | + <h4 align="center">GitHub 사용자라면 누구나 쉽게 만드는 자동 포트폴리오 빌더!</h4> |
| 5 | +</p> |
| 6 | + |
| 7 | +**GitProfile**은 GitHub 아이디만 입력하면 자동으로 멋진 포트폴리오 웹사이트를 생성해주는 도구입니다. 코딩 경험이 없어도 몇 분 만에 나만의 포트폴리오를 만들고, GitHub Pages를 통해 무료로 웹에 공개할 수 있습니다. |
| 8 | + |
| 9 | +--- |
| 10 | + |
| 11 | +## 📋 목차 |
| 12 | + |
| 13 | +- [설치 및 실행](#-설치-및-실행) |
| 14 | + - [로컬 환경에서 실행하기](#로컬-환경에서-실행하기) |
| 15 | + - [GitHub Pages에 배포하기 (권장)](#github-pages에-배포하기-권장) |
| 16 | +- [내 정보로 꾸미기 (커스터마이징)](#-내-정보로-꾸미기-커스터마이징) |
| 17 | + - [GitHub 사용자명 설정](#github-사용자명-설정) |
| 18 | + - [테마 설정](#테마-설정) |
| 19 | + - [소셜 링크](#소셜-링크) |
| 20 | + - [기술 스택](#기술-스택) |
| 21 | + - [경력 사항](#경력-사항) |
| 22 | + - [학력 사항](#학력-사항) |
| 23 | + - [자격증 / 수료증](#자격증--수료증) |
| 24 | + - [프로젝트](#프로젝트) |
| 25 | + - [블로그 포스트](#블로그-포스트) |
| 26 | +- [Google Analytics](#google-analytics) |
| 27 | + |
| 28 | +--- |
| 29 | + |
| 30 | +## 🛠 설치 및 실행 |
| 31 | + |
| 32 | +### 로컬 환경에서 실행하기 |
| 33 | + |
| 34 | +내 컴퓨터에서 직접 실행하여 결과를 확인하는 방법입니다. |
| 35 | + |
| 36 | +**사전 준비:** [Node.js](https://nodejs.org)가 설치되어 있어야 합니다. |
| 37 | + |
| 38 | +1. **패키지 설치** (처음 한 번만 실행하면 됩니다.) |
| 39 | + |
| 40 | + ```bash |
| 41 | + npm install |
| 42 | + ``` |
| 43 | + |
| 44 | +2. **개발 서버 실행** |
| 45 | + |
| 46 | + ```bash |
| 47 | + npm run dev |
| 48 | + ``` |
| 49 | + |
| 50 | +3. 브라우저에서 아래 주소로 접속합니다. |
| 51 | + |
| 52 | + ``` |
| 53 | + http://localhost:5173/gitprofile/ |
| 54 | + ``` |
| 55 | + |
| 56 | +> 파일을 수정하고 저장하면 브라우저에 즉시 반영됩니다! |
| 57 | +
|
| 58 | +--- |
| 59 | + |
| 60 | +### GitHub Pages에 배포하기 (권장) |
| 61 | + |
| 62 | +GitHub에서 내 포트폴리오를 무료로 공개하는 방법입니다. |
| 63 | + |
| 64 | +1. **이 저장소를 Fork** 합니다. |
| 65 | +2. **저장소 이름을 변경** 합니다. |
| 66 | + - `내아이디.github.io` 형식으로 바꾸면 → `https://내아이디.github.io` 에서 확인 가능 |
| 67 | + - `portfolio` 등 다른 이름으로 바꾸면 → `https://내아이디.github.io/portfolio` 에서 확인 가능 |
| 68 | +3. 저장소의 **Actions 탭**으로 이동하여 **Workflows를 활성화** 합니다. |
| 69 | +4. `gitprofile.config.ts` 파일에서 `base` 값을 변경합니다. |
| 70 | + - `내아이디.github.io` 저장소라면: `base: '/'` |
| 71 | + - `portfolio` 등 다른 저장소라면: `base: '/portfolio/'` |
| 72 | +5. 변경 사항을 **commit** 하면 자동으로 배포됩니다. (Actions 탭에서 진행 상황을 확인할 수 있습니다.) |
| 73 | + |
| 74 | +--- |
| 75 | + |
| 76 | +## 🎨 내 정보로 꾸미기 (커스터마이징) |
| 77 | + |
| 78 | +모든 설정은 **`gitprofile.config.ts`** 파일 하나에서 관리합니다. |
| 79 | + |
| 80 | +### GitHub 사용자명 설정 |
| 81 | + |
| 82 | +**가장 중요한 설정입니다.** 이 값을 내 GitHub 아이디로 바꾸면 프로필 사진, 자기소개 등이 자동으로 불러와집니다. |
| 83 | + |
| 84 | +```ts |
| 85 | +// gitprofile.config.ts |
| 86 | +const CONFIG = { |
| 87 | + github: { |
| 88 | + username: 'chip-cookie', // ← 여기를 내 GitHub 아이디로 변경 |
| 89 | + }, |
| 90 | +}; |
| 91 | +``` |
| 92 | + |
| 93 | +--- |
| 94 | + |
| 95 | +### 테마 설정 |
| 96 | + |
| 97 | +총 37가지 테마 중 원하는 것을 기본값으로 지정할 수 있습니다. |
| 98 | + |
| 99 | +```ts |
| 100 | +themeConfig: { |
| 101 | + defaultTheme: 'nord', // 기본 테마 (예: 'light', 'dark', 'synthwave', 'retro' 등) |
| 102 | + disableSwitch: false, // true로 설정하면 테마 전환 버튼이 숨겨짐 |
| 103 | +}, |
| 104 | +``` |
| 105 | + |
| 106 | +**사용 가능한 테마 목록:** |
| 107 | +`light`, `dark`, `cupcake`, `bumblebee`, `emerald`, `corporate`, `synthwave`, `retro`, `cyberpunk`, `valentine`, `halloween`, `garden`, `forest`, `aqua`, `lofi`, `pastel`, `fantasy`, `wireframe`, `black`, `luxury`, `dracula`, `nord`, `sunset` 등 |
| 108 | + |
| 109 | +--- |
| 110 | + |
| 111 | +### 소셜 링크 |
| 112 | + |
| 113 | +사용하는 소셜 서비스 계정 정보를 입력합니다. 비워두면 해당 아이콘이 숨겨집니다. |
| 114 | + |
| 115 | +```ts |
| 116 | +social: { |
| 117 | + linkedin: '내-링크드인-아이디', |
| 118 | + x: '내-트위터-아이디', |
| 119 | + instagram: '내-인스타그램-아이디', |
| 120 | + github: '', // GitHub는 위의 username에서 자동으로 가져옵니다 |
| 121 | + youtube: '', // 예: 'pewdiepie' |
| 122 | + medium: '내-미디엄-아이디', |
| 123 | + dev: '내-dev.to-아이디', |
| 124 | + email: 'my@email.com', |
| 125 | + website: 'https://my-website.com', |
| 126 | + // ... 그 외 다수 |
| 127 | +}, |
| 128 | +``` |
| 129 | + |
| 130 | +--- |
| 131 | + |
| 132 | +### 기술 스택 |
| 133 | + |
| 134 | +내가 보유한 기술을 배열 형태로 입력합니다. 비워두면 섹션 전체가 숨겨집니다. |
| 135 | + |
| 136 | +```ts |
| 137 | +skills: ['JavaScript', 'React.js', 'Python', 'Git', 'Docker'], |
| 138 | +``` |
| 139 | + |
| 140 | +--- |
| 141 | + |
| 142 | +### 경력 사항 |
| 143 | + |
| 144 | +업무 경력을 입력합니다. 비워두면 섹션 전체가 숨겨집니다. |
| 145 | + |
| 146 | +```ts |
| 147 | +experiences: [ |
| 148 | + { |
| 149 | + company: '회사 이름', |
| 150 | + position: '직책 / 직무', |
| 151 | + from: '2022년 3월', |
| 152 | + to: '현재', |
| 153 | + companyLink: 'https://회사홈페이지.com', |
| 154 | + }, |
| 155 | +], |
| 156 | +``` |
| 157 | + |
| 158 | +--- |
| 159 | + |
| 160 | +### 학력 사항 |
| 161 | + |
| 162 | +학력 정보를 입력합니다. 비워두면 섹션 전체가 숨겨집니다. |
| 163 | + |
| 164 | +```ts |
| 165 | +educations: [ |
| 166 | + { |
| 167 | + institution: '대학교 이름', |
| 168 | + degree: '컴퓨터공학과 학사', |
| 169 | + from: '2018', |
| 170 | + to: '2022', |
| 171 | + }, |
| 172 | +], |
| 173 | +``` |
| 174 | + |
| 175 | +--- |
| 176 | + |
| 177 | +### 자격증 / 수료증 |
| 178 | + |
| 179 | +보유 자격증이나 수료증을 입력합니다. 비워두면 섹션 전체가 숨겨집니다. |
| 180 | + |
| 181 | +```ts |
| 182 | +certifications: [ |
| 183 | + { |
| 184 | + name: '정보처리기사', |
| 185 | + body: '한국산업인력공단', |
| 186 | + year: '2022년 6월', |
| 187 | + link: 'https://example.com', |
| 188 | + }, |
| 189 | +], |
| 190 | +``` |
| 191 | + |
| 192 | +--- |
| 193 | + |
| 194 | +### 프로젝트 |
| 195 | + |
| 196 | +#### GitHub 프로젝트 (자동) |
| 197 | + |
| 198 | +내 GitHub 저장소를 별점순 또는 최신순으로 자동으로 보여줍니다. |
| 199 | + |
| 200 | +```ts |
| 201 | +projects: { |
| 202 | + github: { |
| 203 | + display: true, |
| 204 | + mode: 'automatic', // 'automatic' 또는 'manual' |
| 205 | + automatic: { |
| 206 | + sortBy: 'stars', // 'stars' 또는 'updated' |
| 207 | + limit: 8, // 보여줄 최대 프로젝트 수 |
| 208 | + }, |
| 209 | + }, |
| 210 | +}, |
| 211 | +``` |
| 212 | + |
| 213 | +#### GitHub 프로젝트 (수동 선택) |
| 214 | + |
| 215 | +특정 저장소만 직접 지정하여 보여줄 수 있습니다. |
| 216 | + |
| 217 | +```ts |
| 218 | +projects: { |
| 219 | + github: { |
| 220 | + mode: 'manual', |
| 221 | + manual: { |
| 222 | + projects: ['chip-cookie/my-project1', 'chip-cookie/my-project2'], |
| 223 | + }, |
| 224 | + }, |
| 225 | +}, |
| 226 | +``` |
| 227 | + |
| 228 | +#### 외부 프로젝트 |
| 229 | + |
| 230 | +GitHub 외의 다른 플랫폼이나 개인 서버에 있는 프로젝트를 소개할 수 있습니다. |
| 231 | + |
| 232 | +```ts |
| 233 | +projects: { |
| 234 | + external: { |
| 235 | + header: '나의 프로젝트', |
| 236 | + projects: [ |
| 237 | + { |
| 238 | + title: '프로젝트 이름', |
| 239 | + description: '프로젝트 설명을 입력하세요.', |
| 240 | + imageUrl: 'https://이미지URL.jpg', |
| 241 | + link: 'https://프로젝트링크.com', |
| 242 | + }, |
| 243 | + ], |
| 244 | + }, |
| 245 | +}, |
| 246 | +``` |
| 247 | + |
| 248 | +--- |
| 249 | + |
| 250 | +### 블로그 포스트 |
| 251 | + |
| 252 | +Medium 또는 dev.to 계정이 있으면 최근 블로그 글을 자동으로 불러올 수 있습니다. |
| 253 | + |
| 254 | +```ts |
| 255 | +blog: { |
| 256 | + source: 'dev', // 'medium' 또는 'dev' |
| 257 | + username: '내-블로그-아이디', |
| 258 | + limit: 3, // 표시할 글 수 (최대 10) |
| 259 | +}, |
| 260 | +``` |
| 261 | + |
| 262 | +--- |
| 263 | + |
| 264 | +## Google Analytics |
| 265 | + |
| 266 | +방문자 통계를 확인하려면 Google Analytics ID를 입력합니다. 사용하지 않으려면 비워두세요. |
| 267 | + |
| 268 | +```ts |
| 269 | +googleAnalytics: { |
| 270 | + id: 'G-XXXXXXXXXX', // GA4 태그 ID |
| 271 | +}, |
| 272 | +``` |
| 273 | + |
| 274 | +--- |
| 275 | + |
| 276 | +## 💡 자주 묻는 질문 |
| 277 | + |
| 278 | +**Q. 사이트가 제대로 안 보여요.** |
| 279 | +A. `gitprofile.config.ts`의 `base` 값이 올바른지 확인하세요. GitHub Pages 설정에서 **Source**가 **GitHub Actions**로 설정되어 있는지도 확인하세요. (Settings → Pages → Build and deployment) |
| 280 | + |
| 281 | +**Q. 변경 사항이 반영이 안 돼요.** |
| 282 | +A. `main` 브랜치에 commit 후 GitHub Actions 탭에서 배포 진행 상황을 확인해보세요. |
| 283 | + |
| 284 | +--- |
| 285 | + |
| 286 | +> 이 프로젝트의 원본은 [arifszn/gitprofile](https://github.com/arifszn/gitprofile)입니다. |
0 commit comments