把自己的經歷做成一個可以探索的RPG小鎮!!
請先安裝 Node.js 的 LTS 版本，接著在終端機進入專案目錄：
cd "C:\Users\Angus\Desktop\angus_website - 複製"
npm install
npm run dev看到啟動成功訊息後，在瀏覽器開啟：
http://localhost:3000
如果 Windows PowerShell 顯示「已停用指令碼執行」，可以改用：
npm.cmd install
npm.cmd run dev停止開發伺服器時，在終端機按 Ctrl + C。
部署前可以執行正式建置檢查：
npm run build
npm start若 PowerShell 阻擋 npm：
npm.cmd run build
npm.cmd start大多數使用者只需要修改以下檔案：
| 檔案 | 用途 |
|---|---|
data/siteConfig.ts |
網站標題、描述、網址、SEO 關鍵字、語系與 Open Graph 圖片 |
data/profile.ts |
姓名、英文姓名、自我介紹、頭貼、喜歡的文字、職稱與專長 |
data/sections.ts |
RPG 建築、各區標題、專案、研究、程式平台與成就 |
data/contactLinks.ts |
社群連結、Email 與 CV 路徑 |
public/avatar-placeholder.png |
預設頭貼圖片 |
public/og-image.png |
分享網站連結時顯示的社群預覽圖 |
public/cv/ |
放置公開履歷 PDF 的資料夾 |
data/dev.ts、data/ai.ts 等較小的檔案是為了相容既有元件而保留的 exports。新的個人內容應集中寫在 data/sections.ts。
直接替換：
public/avatar-placeholder.png
也可以在 data/profile.ts 修改 avatar，指向 public/ 底下的其他圖片：
avatar: "/your-avatar.png"如果將 avatar 設為空字串，網站會保留空白的圓形頭貼框。
模板不包含任何真實履歷。請把自己的 PDF 放入：
public/cv/
例如：
public/cv/my-cv.pdf
接著修改 data/contactLinks.ts：
cv: {
label: "CV",
href: "/cv/my-cv.pdf",
iconSrc: "/assets/contact/cv.svg"
}部署前請換成自己的檔案或移除 CV 入口。
public/og-image.png 不會直接顯示在首頁或 README。它會在網站連結分享到 Discord、LINE、Facebook、Slack、X 等平台時，作為連結卡片預覽圖。
直接替換以下檔案即可：
public/og-image.png
如果使用其他檔名，請同步修改 data/siteConfig.ts：
ogImage: "/your-og-image.png"建議使用接近 1200 × 630 的橫向圖片。
在 data/sections.ts 修改 sections，即可調整：
- Coding Arena 的介紹與外部平台
- Dev Workshop 的專案
- Research Lab 的研究或技術實驗
- Trophy Hall 的成就與里程碑
同一個檔案中的 rpgSections 可以調整：
- 建築名稱
- 地圖座標
x、y - 建築圖片
- 互動範圍
- Inspect Panel 類型
- 建築是否啟用
除非你也要修改對應的 Inspect Panel 元件，否則建議保留既有的 layoutType 值。
- 將新的建築圖片放進
public/assets/，例如：
public/assets/my-building.png
- 開啟
data/sections.ts，在rpgSections找到要替換的建築，修改imageSrc：
{
id: "development",
title: sections.development.title,
imageSrc: "/assets/my-building.png",
// 其他設定保持不變
}imageSrc 從 public/ 的下一層開始寫，因此不要包含 public。例如檔案位於 public/assets/my-building.png，路徑應寫成 /assets/my-building.png。
建議使用 PNG 或 WebP，並選擇背景透明、主體置中、四周保留適量空白的圖片。若圖片在地圖上太大或太小，可以調整同一筆建築資料中的尺寸：
spriteWidth: 140,
spriteHeight: 140,更換圖片後不需要修改角色移動或互動邏輯，但請保留建築原本的 id、layoutType 與 interactionRadius，除非你確定也要改變該建築的行為。
- 將專案建立成 Git repository，並推送到 GitHub、GitLab 或 Bitbucket。
- 登入 Vercel 並選擇 Add New Project。
- 匯入 repository。
- 保留 Vercel 自動偵測到的 Next.js 設定並部署。
- 部署完成後，把
data/siteConfig.ts的siteUrl改成正式網址。 - 再部署一次，讓 sitemap、Open Graph 與 canonical URL 使用正確網址。
進入：
Vercel → Project → Settings → Domains
加入自己的網域，並按照 Vercel 提供的說明設定 DNS。完成後，將 data/siteConfig.ts 的 siteUrl 更新成完整的 HTTPS 網址：
siteUrl: "https://your-domain.com"Google Search Console 等服務的驗證檔案與個人網域綁定，請只加入自己申請的新驗證檔，不要沿用其他人的驗證檔。
本專案採用 MIT License。你可以自由使用、修改與發布，但請保留授權聲明。