實習與求職加分秘技

作為學生，在課程上必定累積了很多的課堂報告、專案、程式作業…，當你有很多產出時，便很難用精簡的字句中表達所有的概念，那我們要怎麼在找工作的時候，簡明扼要地呈現過去的所有經歷呢？

這時候「作品集」就會派上用場啦！

對於找工作而言，作品集就像是你在申請大學時的備審資料，能夠很好的展現你的經歷和特質。今天就讓我們來回顧當天講者的分享，了解他在大學期間是如何透過完善作品集，找到三份實習與兩份兼職工作的吧！

---

一、前言

| 為什麼要做作品集

作品集可以進一步幫你展現你的：

• 細部專業能力：履歷上空間有限，運用作品集能夠展現更完整、更客觀的依據給審核者參考。
• 問題解決能力：用作品集去佐證「你想要解決什麼問題（How）」、「用了哪些方法（Why）」，整體可以使用「要解決的問題 → 思考過程 → 採用方案 → 產生的影響」的架構撰寫。
• 更多人格特質：間接呈現「我會關注什麼樣的議題」，並且透露「我會在發現問題點後付諸實際行動」。

『在求職時，你這個人就是個「品牌」，而作品集是你包裝你自己的最好機會』

透過製作作品集，我們會希望 HR 跟主管會對我們的專案和作品產生好奇，除了提前讓他們更進一步的了解自己的背景，也營造直接在面試時開啟討論自身經歷的機會。

| 製作作品集的方法

任何適合整理成線上格式或是平面檔案的作品，都可以製作成作品集！如果沒有靈感的話，你可以前往各類求職平臺、LinkedIn，或是各路大神的部落格等管道借鑑、參考。

| 作品集，為什麼我用 GitHub

1. 科技圈生態的普遍性

就科技業/軟體工程業而言，GitHub 是開發者最常用的平臺，同時也支援主流的程式語言，像是 Python、C++ 等，你可以想像成一個用來它是一個存放專案程式碼和相關文件的雲端大倉庫，也是開發/工程師界的社群平臺。

『在一個圈子內，要用對的工具和別人溝通』

根據官方公開數據，GitHub 於 2023 年 1 月突破了一億名跨國用戶註冊。

2. 展示專業/跨領域技能 GitHub 是一個開發者常用的平臺，展示作品集於此能直接表現你的專業技能。它不僅僅是一個代碼存放的地方，還可以用來展示你的工作流程、版本控制能力，以及協作經驗。同時 GitHub 提供完整的版本歷史，讓潛在的雇主或合作者可以看到你如何處理問題、改善代碼，甚至是解決錯誤的過程，進一步展示你的問題解決能力。

3. 個人品牌建立 GitHub 只須一個連結即可分享給 HR、面試官或社群同伴，且無需額外上傳其他相關文件。你也可以透過 GitHub Pages 將作品集製作成靜態網站（下文也會簡單教學），同時根據需求展示你累積的專業方向及多樣性（e.g. #AI、#UI/UX、#前端開發、#後端架構...等），進一步強化個人品牌、提升專業形象。

---

二、直接上手實作！

| GitHub 基本操作

1. 建立帳號

讓我們先從建立帳號開始——在進入 GitHub 官網後，點擊右上角的「Sign up」（若已有帳號，可點擊「Sign in」登入）。

⚠️GitHub 在登入、登出時，皆會要求雙因子驗證，因此建議大家可以先在手機下載行動版 APP 使用（相關設定可參考此網站）。

2. Github DashBoard 介面概覽

登入帳號後，你會看到以下頁面：

該頁面可劃分為三大區域——

(1)【左側區域】專案和儲存庫

• Top repositories：這邊會顯示你最常用的儲存庫（Repositories，簡稱 Repo），或從這邊新增一個新的 Repo。

(2)【中間區域】新手功能導覽、專案更新消息：這部分的功能偏重於初學者快速上手，並提供進階用戶探索更多工具和功能的機會。

• Learn with a tutorial project：提供教學項目引導，包含但不限於 Introduction to GitHub（快速上手 GitHub）、GitHub Pages（透過 GitHub 建立網站或部落格）、Code with Copilot（使用 Copilot 幫助撰寫程式碼）、Hello GitHub Actions（展示工作流程）...等項目。
• Start writing code：提供創建新儲存庫的選項，直接輸入儲存庫名稱後，即可開始新的專案。
• Introduce yourself with a profile README：這個功能可以讓你創建你的個人簡介（即 READMD.md 檔案），方便公司主管或面試官快速了解你的相關背景和專業技能。

(3)【右側區域】學習資源

• GitHub Copilot：它是你寫程式的超級好幫手，效率 UPUP！

如果要使用此功能的話，需要支付 10 美元/月或 100 美元/年的費用，但但但… 經過驗證的學生和已建立的開源專案所有者，都可以免費申請 GitHub 教育版，享有免費的資源！詳細申請流程可以參考此網站。

| 建立第一個 GitHub Repository

1. 剛剛提了那麼多次，但到底什麼是 Repo？

在 GitHub 上，Repo 是 Repository（儲存庫）的簡稱，它是一個專門用來儲存和管理專案的空間。

• Repo 就像是一個「資料夾」，裡面可以集中存放專案的程式碼、文件、圖片等所有相關檔案。
• 它支援版本控制，使用「Git」來追蹤每次的修改（有點類似自動出現數份備份資料），讓你可以追蹤檔案的歷史變更紀錄，並在有需要時回溯到任何一個過去的版本，這對於工程師來說格外重要。
• 每個 Repo 都有一個專屬連結，其他開發者可以在獲得權限後參與專案，對想要分享或協作專案的使用者來說十分方便。

2. 建立新的 Repository

• 在 Dashboard 點擊左上角的綠色「NEW」按鈕，跳轉到新的頁面。

• 設定儲存庫細節：

- Repository Name：自定義儲存庫的唯一識別名稱，若顯示綠色，代表 GitHub 檢查後認證可用。

- Description (optional)：你可以幫儲存庫做一些簡短的介紹，說明此儲存庫的用途或內容。雖然此欄位非必填，但一般還是建議填寫，以便自己和協作者能快速了解你的專案。

- Public / Private：設定 Public 能讓所有人看到你的儲存庫內容，但只有被你授權的人才能提交（commit）程式碼進去；若設定 Private，則只有被授權的人才能檢視和提交內容。

＊因為這次的目的是要製作一個作品集，所以我們選擇「Public」。

- Add a README file：若勾選，系統會自動為儲存庫生成一個基本的 README.md 檔案（若剛開始建置儲存庫，建議勾選此選項）。

README.md 通常用來描述專案目標、使用方式、環境設定等資訊，支援 Markdown 語法。

- Add .gitignore：提供 .gitignore 模板選項，你可以選擇要忽略的檔案類型（例如：Python 模板會忽略 .pyc 檔案或虛擬環境目錄），基本上作品集用不太到這個功能。

- Choose a license：設定專案的授權條款（e.g. MIT、GPL…等），以決定其他人可以如何使用、修改和分發你的程式碼，此項目預設為 None，基本上作品集也用不太到這個功能。

3. Repo 的功能

(1) 上方導覽列

• 管理專案程式碼（Code）：預設顯示儲存庫的主分支（branch）和檔案結構，可以檢視、編輯和下載儲存庫內的檔案，或使用「Go to file」搜尋檔案功、Add file 新增檔案。
• 追蹤與分配待解決問題（Issues）：用於追蹤和管理專案中的問題（Bug、改進建議等），可讓開發者記錄需要解決的問題，並分配給特定人員。
• 協作開發並審核代碼（Pull Requests）：用於協作開發，允許團隊成員提出代碼修改請求，經審核後可合併到主分支。
• 自動化測試（Actions）：提供 CI/CD（持續整合與部署）的自動化流程配置，例如測試與部署專案。
• 查看整體專案（Projects）：提供看板工具，適合用來進行專案管理和規劃工作進度。
• 專案相關說明（Wiki）：提供一個空間，用於撰寫專案相關的詳細文件，例如指南、API 說明等。
• 確保專案安全（Security）：提供安全掃描工具，檢查專案中是否有漏洞，並提供改進建議。
• 專案健檢資料（Insights）：提供專案的數據分析，例如貢獻者活動、提交記錄等，幫助了解專案健康狀況。
• 其他設定（Settings）：配置儲存庫的相關設定，例如權限、Webhook、分支規則等。

(2) 主要區域

• Branch：顯示當前分支（例如 main），可切換或建立新分支。
• Tags：用於標記專案的特定版本，例如釋出穩定版本時。
• Commit 記錄：顯示最近的提交記錄（例如：Initial commit），可追蹤每次提交的更動。
• README：顯示 README.md 檔案的內容，通常用於介紹專案的基本資訊。是儲存庫首頁的一部分，有助於其他開發者快速了解專案。
• About：包括專案描述（例如：今天的練習）。提供「README」、「Activity」（活動紀錄）連結，以及專案的基本統計資訊（星標、觀看者、分支數）。
• Releases：用於發布特定版本，方便使用者下載穩定版本的程式碼。
• Packages：用於管理專案中的軟體套件或庫，可以直接發布到 GitHub Packages。

(3) 右上方按鈕們

• Pin：可將儲存庫釘選到個人頁面最上方，方便快速存取。
• Unwatch：可設置是否接收此儲存庫的通知。
• Fork：將該儲存庫複製到自己的帳戶，用於進一步修改或擴展。
• Star：可標記該儲存庫為你感興趣的專案。

4. 上傳你的程式作品吧！

這個環節中，沒有程式碼的人也可以練習哦～

Step 0. 下載檔案（自己有程式碼的人可以跳過）

• 進入此 Google Colab 連結，點進左上角的「檔案」，下載 .ipynb 檔。

Step 1. 新增檔案至 Repo

• 首先，在剛剛建立的儲存庫介面上點選 Add file，選擇 Upload files。

＊補充：你也可以使用 Git 工具，將檔案 Push 到儲存庫。

• 接著，選擇 choose your files，並從本地端上傳檔案，等待綠色的進度條完成後，會看到下方的畫面。

• 最後，選擇綠色的 Commit changes 按鈕，將檔案上傳至你的儲存庫中。

Step 2. 刪除不必要的檔案

• 確保儲存庫中只有專案相關的檔案，如果有不需要的檔案或測試檔案（如臨時檔案、備份檔案等），可以直接刪除。

建議：此時可新增 .gitignore 檔案，過濾掉不必要的檔案（如 log、編譯後檔案等）。

Step 3. 編輯檔案中的程式碼

如果你發現程式碼上傳的內容有錯，你可以使用 GitHub 的內建編輯器修改檔案，或在本地編輯後重新提交（Commit）——這邊我們示範操作前者。

• 首先，點擊你剛剛上傳的檔案。

• 點擊程式碼窗格的右上角的那支筆（Edit this file）。

• 完成修改後，點擊綠色按鈕 Commit changes ，提交你最新修改的內容。

Step 4. 確認檔案內容無誤

檢查每個檔案的內容，確保程式碼沒有語法錯誤或缺失部分。

Step 5. 編輯 README 檔案

檔案中可記錄專案的關鍵資訊，像是：這個專案功能與目標、你是如何運行或安裝的、系統需求或開發工具、協作者資訊或聯絡方式...等，透過完善 README.md 的內容，能讓你的專案內容更加清楚且吸引人。

5. 使用 GitHub Actions 追蹤更新狀況

• 進入儲存庫的 Actions 分頁：打開儲存庫，點擊上方的 Actions。
• 選擇工作流程模板：在 Actions 頁面中，選擇一個合適的模板（例如 Simple workflow 或 Set up a workflow yourself），開始設定。
• 建立工作流程檔案：GitHub Actions 使用 .yml 檔案作為配置檔案，存放於儲存庫的 .github/workflows 資料夾下。

---

三、讓自己脫穎而出 — 部署 GitHub Pages

| 啟用 GitHub Pages 初體驗

Step 1. 進入 Repo 的 Settings。

Step 2. 在左側選單中找到 Pages（或直接搜尋「Pages」）。

Step 3. Build and deployment：在這邊的 branch 的下方，選擇 main 分支（如果有 /docs 資料夾，也可以指定它作為來源），最後點擊 Save 按鈕。

Step 4. 過了幾分鐘後，Aciton 會顯示你已經完成部署（有一個綠色勾勾，紅色就代表有問題）。

這時候剛剛 setting/Pages 的地方會顯示 GitHub Pages 網址連結，例如：

https://<你的GitHub帳號>.github.io/<儲存庫名稱>/

點進去之後，你就會看到改好的 README 說明內容變成網頁的形式了。

| 試試 Boostrap 建構靜態網站

1. 認識網頁基本組成

網頁的架構大概可以區分為「前端」與「後端」（詳細說明歡迎查看雲端工作坊回顧文）：所謂「前端」指的是展現給終端使用者的介面，故通常需要進行 UI（User Interface，使用者介面）與 UX（User Experience，使用者體驗）的優化；與之對應的「後端」則是在伺服器上面執行的代碼，提供各種網頁功能的運行基礎。

其中，前端會至少用到的程式語言通常包含這三種：

• HTML（房子的框架）：負責網站的結構。
• CSS（房子的裝潢）：提供樣式（例如顏色、字體、佈局排版等）。
• JavaScript（房子的生命）：負責互動功能（例如下拉式選單、模態視窗等）。

2. 簡單介紹 Boostrap（部分資料來源於 Wiki）

Bootstrap 是一組用於網站和網路應用程式開發的開源前端框架，提供字體排印、表單、按鈕、導航及其他各種元件與擴充套件，旨在使動態網頁和 Web 應用的開發更加容易。

你只須在網路上選擇一個免費且喜歡的 Bootstrap 模板稍作修改，並部署到 GitHub Pages，就可以輕鬆、快速地建立一個專業、美觀且功能強大的作品集靜態網站！

3. Boostrap 的特色

• 快速建立響應式網站：不用太深入的的設計知識，就能快速建立兼容不同螢幕尺寸的網站（例如：個人作品集、企業官網），對初學者十分友善。
• 加速開發過程：節省設計和編寫基礎樣式的時間。
• 簡化 UI 設計：內建常見 UI 元件（例如：卡片、進度條、標籤...等）。
• 開源，讚：Bootstrap 是完全開源的，你可以免費使用並自訂設計。

| 連結 Boostrap 網站與 GitHub 專案

Step 1. 選擇 Bootstrap 模板

1. 進入「Bootstrap free template」網站。

2. 下載一個適合你作品集風格的模板，通常該模板會包含以下檔案：

• index.html（主要 HTML 檔案）：你可以使用任何文字編輯器（如 VS Code），根據自身需求更改網站標題、文字描述、圖片等內容。

<!---修改範例--->

<title>My Bootstrap Site</title>
<h1>歡迎來到我的個人網站！</h1>
<p>這是我的第一個 Bootstrap 網頁，超炫砲！</p>

• css/（樣式表）：如果想調整樣式，你可以編輯模板內的 css 檔案。

/\*修改範例（在 style.css 中添加下列程式碼）\*/

body {
`    `background-color: #f0f8ff;
}
h1 {
`    `color: #ff5733;
}

• js/（JavaScript）：也可以進一步編輯程式碼，增加網站互動功能。
• img/（圖片資料夾）：記得將模板內的圖片替換成你的作品圖片，確保檔案名稱一致，或更新 HTML 中的圖片路徑。

Step 2. 準備 GitHub Pages

1. 建立新的 Repo

• 前往 GitHub，建立一個新的公開儲存庫（可隨意命名，例如：my-first-site）。
• 確保新增 README.md 檔案以初始化儲存庫。

2. 上傳模板檔案

• 解壓縮下載下來的模板檔案。

• 將模板檔案（如 index.html、css、js、img）全部上傳到你儲存庫的根目錄中。

Step 3. 部署至 GitHub Pages

• 點進儲存庫介面上方工具列最右邊的「Settings」。
• 前往 Pages、選擇 main 分支作為 Pages 來源，然後儲存。
• 此時點選 Action，可以進一步確認部署的情況，在部署完成後，GitHub 便會提供你的網站網址：

Step 4. 驗證網站

• 打開 GitHub Pages 提供的網址，檢查網站是否顯示正確、所有樣式和功能是否正常運作。

Step 5. 進階美化與功能擴展（自由選用）

1. 引入更多 Bootstrap 元素：可以參考該份 Bootstrap 元件文件 添加更多元素（如導航列、卡片、按鈕）。新增按鈕範例如下：

<button type="button" class="btn btn-primary">點我試試看！</button>

2. 範例應用情境：假設選擇了一個「個人作品集」模板，完成後：

• 你的網站首頁會展示你的個人介紹。
• 導航列可讓訪客快速瀏覽「關於我」、「專案」和「聯繫方式」等頁面。
• 會有按鈕連結導向你的 LinkedIn 或 GitHub Profile。

---

四、把自己當成一個品牌吧

| 如果不想寫程式碼，你可以…

**1. 使用 Google Site****

• 簡單的介面，非常直覺。
• 編輯器與 Word 檔案很像，完全沒難度。
• 免費！誰都可以使用，只需要有 Google 帳號即可。
• 不需要寫程式就能建置網站，任何人都可以快速上手。
• 響應式網站，不放過任何裝置，不管是手機、平板、電腦。
• 可自訂網址，網站架好，是有一組缺乏識別度的網址，可以需要自行買，然後再設定。
• 如果會寫程式碼，可以參考此網站，試著自行編輯 HTML 與 Javascript，讓你的版面更豐富！

2. 使用架網站工具

除了自己動手 DIY，現在也有很多線上架設網站的工具，像是 Wix、Wordpress...等，大家可以根據個人的喜好或需求去做進一步的選擇。

| 還有其他的方法讓你更有競爭力嗎？

『在追求理想職涯的路上，除了必須提升實力，也需要讓別人對你有興趣，你的實力才會有用武之地。』

**1. 經營 LinkedIn****

• 建立你的工作形象
• 參考更多跟你相同背景的前輩的職涯經歷
• 建立 connection 後，獲得可以詢問相關職業的機會

**2. 經營 Medium****

• 記錄你的學習時刻
• 梳理你的學習路徑與邏輯
• 它也是一種作品集的呈現

如果各位喜歡這篇文章，請不吝於給我們拍手，慰勞一下行銷組的肝（X）

關注 GDG on Campus NTPU，最新消息不漏接 💡 IG：@gdg.ntpu threads：@gdg.ntpu FB：Google Developer Groups on Campus NTPU