🎯 2025 年軟體工程師體驗營 | 最終任務

北新 7 組 - 個人品牌網站 (團隊協作)

🔧 使用技術與工具

類 別	技 術
前端技術	HTML、CSS、JavaScript
響應式設計	CSS Media Queries
圖示庫	Bootstrap Icons
動畫套件	AOS.js
網頁字型	Google Fonts - Noto Sans TC（思源黑體 - 繁體中文）
串接服務	Google Analytics 4 (GA4)

---

🧱 網站檔案結構

• css

  • all.css：由 VSCode 裡的 Live Sass Server 自動編譯而成

• img

  • favicon.ico：網頁 Logo

• js

  • all.js：自行撰寫的 JS 程式碼 → 改這邊

• scss

  • all.scss：import 下面的六個 scss 檔案
  • _variable.scss：變數設定(如需要可調整)
  • _reset.scss：Meyerweb CSS Reset
  • _layout.scss：各頁面共用元件及區塊樣式(如需要可調整)
  • _index.scss：首頁樣式 → 改這邊
  • _blog.scss：部落格列表樣式 → 改這邊
  • _blogDetail.scss：部落格文章樣式 → 改這邊

• index.html：網站首頁 → 改這邊

• blog.html：部落格列表頁 → 改這邊

• blogDetail.html：部落格文章頁 → 改這邊

📈 串接服務

• 整合 Google Analytics 4 (GA4) 追蹤網站瀏覽資料，並驗證 GA 成功接收資料

💡 備註說明

• 本網站依據 🎨 六角學院 Figma 設計稿 製作，並進行網頁結構優化與樣式排版調整。
• index.html 預設為首頁，建議不要任意修改 index.html 的檔案名稱。
• .gitignore 是用來忽略掉不該上傳到 GitHub 的檔案（例如 .DS_Store），請不要移除它。

---