CH18 · 職涯與面試（前端視角）詳細 ROADMAP
計畫文件，不會被 Quartz 渲染。
回主 roadmap → frontend/ROADMAP.md
章節目標
本章只放前端特有的職涯主題——面試題庫、前端 portfolio、對標 roadmap.sh 的前端路徑、AI 時代的前端職涯策略、frontend 特有的 tech interview 模式。
通用職涯主題（Junior vs Senior、Tech Lead 能力、career guide）屬於 content/career/ 系列（已有 13 篇），不在本章。
🌱 基本介紹
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 01 | 前端職涯跟後端 / 全端差在哪 | 01-frontend-vs-other-career | 🌱 | 技能地圖差異、薪資分佈、晉升路徑、大廠 vs 新創對前端的需求差 |
| 02 | 好的前端工程師長什麼樣 | ⛔️ career/01-good-frontend-engineer | 🌿 | 跨系列 |
| 03 | Junior vs Senior | ⛔️ career/06-junior-vs-senior | 🌿 | 跨系列 |
❓ 為什麼需要
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 04 | 為什麼前端職涯規劃跟後端不一樣 | 04-why-frontend-career-different | 🌱 | 前端工具汰換快、設計感是技術之外的加分、產品直覺重要、framework 選擇深度 vs 廣度取捨 |
| 05 | 為什麼前端要有 Portfolio / Proto Repo | 05-why-portfolio-proto-repo | 🌱 | 前端是視覺工作，程式碼讀再多不如打開網站看、Proto repo 證明「我確實跑過這個技術」、Awesome repo 證明「我用過這些工具」、接 CH14 #46 走歪信號 |
| 06 | 為什麼 AI 時代前端職涯策略要重寫 | 06-why-rewrite-career-strategy-in-ai-era | 🌱 | 接 CH17 #10 歷史類比，Junior 衝擊最大、哪些技能變稀有（系統設計 / 架構 / a11y / DS / 商業邏輯）、哪些變 commodity（boilerplate code）、怎麼重新定位 |
🕰️ 演進
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 07 | 前端工程師角色演進史 | 07-frontend-role-evolution | 🌱 | Web Designer（切版）→ Frontend Developer（jQuery 時代）→ Frontend Engineer（SPA 時代）→ Fullstack JS（Next.js 時代）→ AI-augmented Frontend（2024+） |
| 08 | 前端面試題型演進 | 08-frontend-interview-evolution | 🌱 | 純 HTML/CSS 切版 → JS 題（closure / this / event loop）→ framework 深入 → 系統設計前端版 → AI + 前端整合題（2024+） |
🧠 知識型
職涯路徑
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 09 | 對標 roadmap.sh 的前端路徑 | 09-roadmap-sh-frontend | 🌱 | roadmap.sh 的前端 roadmap 分析、哪些該補、哪些過度、跟本系列 CH1–CH19 對照 |
| 10 | 前端 Junior → Mid → Senior → Staff 能力地圖 | 10-frontend-leveling | 🌱 | 每一級要會什麼、怎麼識別「還差什麼」、跟本系列章節的對應 |
| 11 | 前端走技術深度 vs 管理的分叉 | 11-tech-depth-vs-management | 🌱 | IC（Individual Contributor）到 Staff / Principal、Tech Lead / Engineering Manager，前端特有的兩條路 |
| 12 | 前端 Specialist 分支 | 12-frontend-specializations | 🌱 | Design System Engineer / Performance Engineer / A11y Specialist / DevEx Engineer / Frontend Infra，每個需要的技能跟需求 |
前端面試
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 13 | 前端面試流程總覽 | 13-frontend-interview-overview | 🌱 | 電話 screen → online coding → onsite（技術 + 系統設計 + 行為）→ offer、各段準備重點 |
| 14 | 前端 Coding 面試題庫 | 14-frontend-coding-questions | 🌱 | Debounce / Throttle / Deep Clone / Event Delegation / Promise 實作 / 發布訂閱 / Virtual DOM diff、GreatFrontend / FrontendLead 分類 |
| 15 | 前端系統設計題 | 15-frontend-system-design | 🌱 | 設計 Twitter feed / Google Docs / Instagram Story / Autocomplete 搜尋、components + state + API + performance + a11y 五軸評估 |
| 16 | 大廠前端面試差異 | 16-big-tech-frontend-interview | 🌱 | Meta / Google / Netflix / Airbnb / Stripe，每家重點、準備策略差異 |
| 17 | 行為面試（BQ）前端角度 | 17-behavioral-frontend | 🌱 | STAR 原則、常見前端情境題（跟設計師衝突、推動重構、解決 production 錯誤） |
Portfolio 與個人品牌
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 18 | 前端 Portfolio 設計 | 18-frontend-portfolio | 🌱 | 作品集要放什麼、不該放什麼、case study 深度、設計跟 code 的平衡 |
| 19 | Personal Website 該長什麼樣 | 19-personal-website | 🌱 | 作為前端工程師的個人網站標準、效能 / a11y / SEO 要全滿、選用的技術本身就是作品 |
| 20 | Awesome / Proto Repo 經營 | 20-awesome-proto-repos | 🌱 | 個人 awesome repo（用過的工具整理）、proto repo（技術驗證 sandbox）、怎麼跟履歷配合、如何讓面試官看到 |
| 21 | 個人品牌：Blog / Twitter / Conference | 21-personal-brand | 🌱 | 寫 blog / 發推特 / 參加 conf 的 ROI、哪些適合內向工程師、長期複利 |
長期成長
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 22 | 5 年 / 10 年前端工程師的差異 | 22-long-term-frontend-growth | 🌱 | 技術深度 vs 廣度、framework 迷戀 vs 原理掌握、跨領域整合能力 |
| 23 | AI 時代的前端職涯策略 | 23-ai-era-frontend-strategy | 🌱 | 接 CH17 #10，哪些技能 AI 不會取代（系統設計、架構判斷、跨 team 協作、商業理解、a11y 感知）、Junior 該怎麼 onboard、Senior 該怎麼 reskill |
🔧 小實作注意事項
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 24 | 自建個人 Awesome Repo | 24-build-awesome-repo | 🌱 | 格式範本、categorize 策略、每個 item 寫「我用過 / 何時值得用」 |
| 25 | 自建 Proto Repo | 25-build-proto-repo | 🌱 | 每個新技術建個 mini app 驗證、怎麼命名、如何累積 |
| 26 | 前端履歷撰寫 | 26-frontend-resume | 🌱 | 量化成果（效能提升 30%、bundle size 減半）、避免 buzzword、Senior / Junior 履歷差異 |
| 27 | 準備前端 Portfolio Site | 27-portfolio-site-setup | 🌱 | 技術選型、domain 規劃、內容結構、analytics 設計 |
| 28 | GreatFrontend / FrontendLead 練習路徑 | 28-gfe-flead-practice | 🌱 | 題庫使用策略、每週練習節奏、跟實際面試差異 |
💣 Anti-pattern
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 29 | 前端職涯 Anti-patterns | 29-frontend-career-anti-patterns | 🌱 | Portfolio 放公司 code、沒寫過的技術放履歷、追工具不學原理、只跟前端同事交流（應該多跟 PM / Designer / 後端聊）、拒絕行為面試（BQ 是必考）、走歪而不自知（連 CH14 #46） |
🧰 對應檢查工具
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 30 | 前端職涯工具 | 30-career-tooling | 🌱 | GreatFrontend / FrontendLead（面試練習）、LeetCode（演算法）、Frontend Masters / Epic React / Total TypeScript（學習）、Blind（匿名討論）、levels.fyi（薪資）、LinkedIn |
📎 補充
| # | 主題 | Slug | Stage | 大綱 |
|---|
| S01 | 前端遠距工作考量 | s01-frontend-remote-work | 🌱 | 時區、協作工具、孤獨感、效能評估、海外遠距機會 |
| S02 | 前端 Freelance / Consulting | s02-frontend-freelance | 🌱 | 接案定價、合約、Upwork / Toptal、個人品牌整合 |
| S03 | 前端轉其他角色（PM / Designer / DevRel） | s03-frontend-to-other-roles | 🌱 | 轉 PM / UX Designer / DevRel / Solutions Engineer，各自所需技能 |
章節進度統計
- 知識主題：30 + 3 補充 = 33 項
- 🌿 growing：2（跨系列）
- 🌱 seed：28
⚠️ 屬於 content/career/ 通用職涯系列（不在本章）
- 好的 Backend / Infra / Fullstack / Tech Lead Engineer（系列 01–05）
- Junior vs Senior 通用觀點
- 各種 career / learn-to-code / project management guides
跨系列連結
- →
content/career/ 通用職涯系列
- →
frontend/framework/ CH6 #37 Junior → Senior 框架路徑
- →
frontend/design-system/ CH14 #46 走歪信號自我檢視
- →
frontend/ai-assisted/ CH17 #10 框架淘汰 vs AI 淘汰歷史類比
- →
soft-skills/ 系列（前端工程師軟實力）
- →
portfolio/ 系列（專案 case study 呈現）