🏆 第五章：打造吸睛的開發者履歷 (Portfolio)

你的網站上線了，程式碼也放上 GitHub 了。但如果一個外包案主，或是一個面試官點進你的 GitHub 專案，看到的是空空如也的說明欄位。他們會覺得這只是一個「無聊的玩具專案」，然後在 3 秒內關掉網頁。

在 Vibe Coding 的時代，「程式碼本身已經不是唯一價值，『如何展示與包裝你的系統』才是高價值的體現！」

GitHub 提供了一個非常強大的功能：Markdown (簡稱 MD) 文件排版系統。透過編寫 .md 檔案，你可以把冰冷的程式碼倉庫，變成一個充滿圖片、動圖、徽章與架構圖的專業展示中心。

這堂課，我們將用 5 個絕佳的 Prompt，帶你打造出價值 5 萬元的接案門面！

🏠 第一步：解鎖 GitHub 的隱藏彩蛋 (個人首頁)

你知道 GitHub 有一個隱藏版功能嗎？只要你建立一個「名稱跟你的帳號一模一樣」的 Repository，裡面的 README.md 就會變成你整個 GitHub 的個人首頁大看板！

💡 Vibe Prompt 實戰 1：請 AI 幫你設計首頁自介

[!IMPORTANT] 請複製以下 Prompt 傳送給 AI：

我剛剛在 GitHub 建立了一個與我帳號同名的 Repository (用來做 Profile README)。 請幫我用 Markdown 語法設計一個吸睛的開發者個人首頁。 我的資料： 名字：Vibe Tutor 技能：JavaScript, React, Astro, Python, CrewAI, Supabase 特色：擅長使用 Vibe Coding (AI 輔助開發) 快速打造商業級 SaaS 系統。 需求： 1. 使用一些活潑的 Emoji。 2. 加入 GitHub 統計徽章 (GitHub Stats Card) 的 Markdown 圖片語法範例。 3. 加入技能圖示 (使用 shields.io 徽章)。 請直接給我完整的 markdown 原始碼，讓我可以直接複製貼上。

🤖 AI 生成的專業 Markdown 原始碼：

# Hi there 👋 I'm Vibe Tutor! 🚀

**「不寫死板的程式碼，只打造會賺錢的系統。」**

我是一名熱衷於 **Vibe Coding (AI 輔助開發)** 的全端開發者。我擅長利用 AI 工具，將商業思維轉化為實際運作的 SaaS 平台。從前端絕美介面到後端資料庫整合，我能以 10 倍速交付高品質的專案。

## 🛠️ Tech Stack & Tools

![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)
![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
![Astro](https://img.shields.io/badge/Astro-FF5D01?style=for-the-badge&logo=astro&logoColor=white)
![Python](https://img.shields.io/badge/Python-3776AB?style=for-the-badge&logo=python&logoColor=white)
![Supabase](https://img.shields.io/badge/Supabase-3ECF8E?style=for-the-badge&logo=supabase&logoColor=white)

## 📊 My GitHub Stats

![Vibe Tutor's GitHub stats](https://github-readme-stats.vercel.app/api?username=YOUR_USERNAME&show_icons=true&theme=radical)

## 📬 聯絡我
- Email: your.email@example.com
- LinkedIn: [我的個人主頁](https://linkedin.com/in/yourprofile)

🔍 深度解析： 看到 shields.io 和 github-readme-stats 了嗎？這些都是開源社群最流行的酷東西！你不需要自己去找圖片連結，只要給 AI 關鍵字，它就會自動幫你產出帶有專業徽章 (Badge) 的排版。只要把 YOUR_USERNAME 換成你的帳號，你的首頁瞬間就變得超級專業！

📖 第二步：專案 README 的黃金架構

個人首頁搞定了，接下來是每個專案裡面的 README.md。一個會讓案主心動的專案介紹，必須包含以下三個核心：

這是什麼？解決了什麼痛點？ (商業價值)
畫面長怎樣？ (視覺衝擊)
怎麼把這個專案跑起來？ (技術實力)

💡 Vibe Prompt 實戰 2：極速生成專案說明書

我們不自己寫冗長的文件，讓 AI 根據我們的專案資料夾幫我們寫！

[!IMPORTANT] 請複製以下 Prompt 傳送給 AI：

我用 Astro 和 Supabase 開發了一個「露營定點地圖與資訊導購」網站。 專案具備以下功能：首頁動態排版、Leaflet 地圖整合、Supabase 會員登入。 請幫我寫一份極度專業、準備拿去面試用的專案 README.md。 內容必須包含： 1. 專案名稱與一句話標語 (使用 H1 與 H2) 2. 核心功能亮點 (Bullet points) 3. 系統架構與技術棧 (Tech Stack) 4. 本地端如何啟動 (Installation & Setup) (提示：包含 npm install 和 npm run dev) 5. 請預留一個 [放入專案截圖] 的位置。 請使用專業、自信的語氣。

🤖 AI 生成的專案 README 範例 (節錄)：

# 🏕️ Camping Map Explorer

> **「重新定義露營資訊搜集體驗：結合互動地圖與動態資料的高階導購平台」**

![專案截圖放置處 - 建議放入 GIF 動圖或絕美 UI 截圖]

## ✨ 核心亮點 (Key Features)
- **🌍 互動式露營地圖**：整合 Leaflet.js，視覺化呈現全台露營秘境。
- **🔐 尊榮會員系統**：基於 Supabase 打造安全無縫的註冊與登入體驗。
- **⚡ 極速頁面載入**：採用 Astro 靜態生成 (SSG) 架構，SEO 與效能滿分。

## 🚀 快速啟動 (Quick Start)

要將此專案運行於您的本地環境，請遵循以下步驟：

1. **複製專案**
```bash
git clone https://github.com/yourname/camping-map.git

安裝依賴套件

npm install

設定環境變數 請複製 .env.example 並更名為 .env，填入您的 Supabase 金鑰。
啟動開發伺服器

npm run dev


---

## 🎥 第三步：視覺衝擊！加入動圖 (GIF) 與影音

俗話說：「一張圖勝過千言萬語，一張 GIF 動圖勝過一萬行 Code。」
如果你的專案有超酷的 Framer Motion 動畫，或是流暢的打卡流程，你一定要錄成 GIF 放在 README 裡面！

### 💡 Vibe Prompt 實戰 3：如何在 Markdown 插入圖文？

如果你忘記了 Markdown 的圖片語法，直接問 AI。

> [!IMPORTANT]
> **請複製以下 Prompt 傳送給 AI：**
> 
> `我錄製了一段操作網站的 GIF 動圖，叫做 demo.gif，放在專案的 /public/images 資料夾下。`
> `請告訴我，在 README.md 裡面，我要怎麼寫 Markdown 語法才能把這張動圖顯示出來？`
> `請給我語法範例，並解釋括號的作用。`

**🤖 AI 的語法教學：**

```markdown
在 Markdown 中插入圖片或 GIF 的語法非常簡單：

![操作示範動圖](./public/images/demo.gif)

【語法解釋】：
1. `!`：驚嘆號是關鍵，代表這是一張「要顯示出來的圖片」，如果不加驚嘆號，它會變成一個點擊連結。
2. `[操作示範動圖]`：中括號裡面放的是「替代文字(Alt text)」。如果圖片掛了，會顯示這串字；對視障人士的報讀軟體也很有幫助。
3. `(./public/images/demo.gif)`：小括號裡面放的是「圖片的相對路徑」或「圖片的網址 URL」。

🤯 高階實戰：畫出讓面試官驚豔的架構圖 (Mermaid)

如果你面試的是資深工程師或架構師，只有截圖是不夠的。你需要一張**「系統架構圖」**。在過去，你需要用 PPT 或繪圖軟體慢慢拉框框。但現在，GitHub 支援一種叫做 Mermaid 的語法。你只要寫字，它就會自動幫你畫成流程圖！

💡 Vibe Prompt 實戰 4：一句話生成超專業架構圖

這絕對是 Vibe Coding 的殺手級應用！我們讓 AI 把邏輯變成圖表！

[!IMPORTANT] 請複製以下 Prompt 傳送給 AI：

我的專案架構如下： 1. 使用者 (User) 透過網頁前端 (React) 點擊 Line 登入。 2. 前端向 FastAPI 後端發送請求。 3. 後端打 API 去跟 Line 伺服器驗證身份。 4. 驗證成功後，後端把資料存入 Supabase 資料庫。 請幫我用 Mermaid 語法 (graph TD)，畫出這個系統的運作流程圖。 請將 Mermaid 程式碼包裝在 Markdown 的代碼區塊中。

🤖 AI 生成的架構圖程式碼：

```mermaid
graph TD
    A[🧑‍💻 使用者 User] -->|1. 點擊 Line 登入| B(💻 網頁前端 React)
    B -->|2. 發送登入請求| C{⚙️ FastAPI 後端}
    C -->|3. 驗證身份 Token| D[💬 Line 官方伺服器]
    D -->|回傳驗證成功| C
    C -->|4. 寫入會員資料| E[(🗄️ Supabase 資料庫)]
    E -->|回傳成功狀態| C
    C -->|發放登入憑證 (JWT)| B


**🔍 深度解析：**
把這段含有 `mermaid` 的代碼塊貼到你的 GitHub README 裡面，GitHub 會自動把它渲染成一張超美的流程圖！面試官看到這張圖，絕對會認為你是一個邏輯清晰、具備架構思維的高手！

---

## 📜 終極防護：授權條款 (License)

最後，如果你決定要把你的 Source Code 開源給全世界，你必須加上一份「授權條款 (License)」。
這可以保護你不會因為程式碼出錯而被別人提告，或是規範別人能不能拿你的程式碼去賺錢。

### 💡 Vibe Prompt 實戰 5：挑選與產生 License

> [!IMPORTANT]
> **請複製以下 Prompt 傳送給 AI：**
> 
> `我想把我的專案開源放在 GitHub 上。`
> `我的需求是：任何人都可以免費使用、修改，甚至拿去商業營利。`
> `但前提是，如果因為使用我的程式碼造成任何損失，我不負任何責任。`
> `請問哪一種開源授權條款最適合我？`
> `請告訴我條款名稱，並簡述如何在 GitHub 上加入這個 License 檔案。`

**🤖 AI 的法律顧問建議：**

```text
根據你的需求，最適合你的是 MIT License。
這是目前世界上最受歡迎、最寬鬆的開源授權條款。它的核心精神就是：「你想怎麼用就怎麼用，但出事了別找我。」

在 GitHub 上加入 MIT License 的最快方法：
1. 進入你的專案庫首頁。
2. 點擊 "Add file" -> "Create new file"。
3. 在檔名的地方輸入 "LICENSE" (全部大寫)。
4. 這時右邊會神奇地彈出一個 "Choose a license template" (選擇模板) 按鈕。
5. 點擊進去，在左側選擇 "MIT License"。
6. 檢查年份與你的名字無誤後，點擊 "Commit changes" 存檔即可！

✅ 課程總結：從 0 到 1，你已經準備好征服世界了！

恭喜你完成了這門 Git & GitHub 零基礎接案版 課程！

回顧一下我們走過的旅程：

基礎建設：學會了 git init、commit，了解存檔的重要性。
平行宇宙：學會了開分支開發，不再害怕弄壞主程式。
迎戰大魔王：學會用 AI 解讀並解決 Merge 衝突。
雲端部署：將程式碼推上雲端，並用 GitHub Pages 與 Actions 免費上線。
專業門面：用 Markdown 打造價值連城的專案 README 與架構圖。

這就是 Vibe Coding 的魅力！你不需要死背那些複雜的終端機指令、不需要查半天文件才知道怎麼畫流程圖。 只要你懂得「定義問題」、「下達精確的 Prompt」，AI 就會是你最強的打字員與架構師。

帶著這些知識，去迎接下一個更具挑戰性的商業專案吧！我們在「露營官方網站」或「Line 打卡系統」實戰見！