個人接案網站 - SpencerKu

專案概述

這是我的個人接案網站（也就是您現在看到的這個網站！）。設計目標是建立專業形象、清楚展示我的服務內容與價格，並讓有興趣合作的客戶能輕鬆聯絡我。

網站包含首頁、自我介紹、作品集、透明的價格方案、接案流程說明，以及方便的線上聯絡表單。

為什麼做這個網站？

身為資管系學生，我想透過接案來賺取學費，同時累積實務經驗。但在開始接案前，我發現：

• 沒有一個地方能完整展示我的能力
• 潛在客戶無法了解我能做什麼、怎麼收費
• 聯絡方式散落在各處，不夠專業

因此我決定親自設計開發一個專業的接案網站。這個網站本身就是我技術能力的最好證明——如果我連自己的網站都做不好，怎麼幫客戶做好呢？

網站特色

舒適的深色模式

網站預設使用深色主題，對眼睛更友善，特別適合長時間瀏覽。當然，您也可以切換到淺色模式，網站會記住您的偏好。

手機、平板、電腦都好看

無論您用什麼裝置瀏覽，網站都會自動調整版面，提供最佳的閱讀體驗：

• 手機：單欄排列，觸控友善，按鈕夠大好按
• 平板：兩欄排列，充分利用螢幕空間
• 電腦：多欄排列，資訊一目了然

容易被 Google 找到

網站經過完整的 SEO（搜尋引擎優化）：

• 每個頁面都有獨特的標題和描述
• 提供網站地圖（sitemap）給搜尋引擎
• 使用結構化資料，讓 Google 更了解網站內容
• 在社群媒體分享時，會顯示漂亮的預覽卡片

作品集管理系統

我可以隨時新增、修改或隱藏作品：

• 想展示新作品？寫一篇文章就能發布
• 作品還沒完成？先設定為「不公開」
• 想調整順序？修改數字就能重新排列

這讓我能持續更新作品集，展示最新的能力。

清楚的資訊呈現

我特別注重資訊的清晰度：

• 價格方案：依服務類型分類，一目了然
• 接案流程：6 個步驟說明，讓您知道合作會怎麼進行
• 技能展示：用視覺化方式呈現我會的技術
• 聯絡表單：填寫需求、預算、聯絡方式，24 小時內回覆

遇到的挑戰

1. 設計風格的平衡

挑戰：作為學生接案，既要看起來專業，又不能太過度包裝。

解決方式：選擇現代極簡風格，誠實展示學習歷程。用柔和的漸層色和簡單的動畫增加質感，但不會太花俏。重點放在「展示潛力」而非「假裝很資深」。

2. 頁面載入速度

挑戰：網站內容多，如何確保載入速度夠快？

解決方式：

• 圖片自動壓縮成 WebP 格式（檔案小很多）
• 頁面預先生成，不用等伺服器計算
• 只載入需要的內容，其他延遲載入

結果：首頁在 2 秒內就能完整載入（業界標準是 3 秒）

3. 手機版體驗優化

挑戰：電腦版看起來很好，但手機版文字太大、內容太擠。

解決方式：針對不同螢幕尺寸，仔細調整文字大小、間距、按鈕尺寸。在手機上測試了 10 幾次，確保每個頁面都好用。

成果與收穫

網站功能

• 6 個主要頁面（首頁、關於、作品、價格、流程、聯絡）
• 5 種服務類型的完整價格方案
• 作品集展示系統
• 深色/淺色模式切換
• 響應式設計（支援所有裝置）
• SEO 優化完整

個人學習

這個專案讓我學到：

1. 設計思維：不是做得越炫越好，而是要「好用」
2. 用戶體驗：站在客戶角度思考，他們想看什麼？怎麼找資訊最快？
3. 細節重要性：一個按鈕的顏色、一段文字的大小，都會影響使用感受
4. 持續改進：網站不是做完就結束，要根據反饋不斷優化

最重要的是，我學到**「簡潔勝過複雜」**。一開始我想做很多動畫特效，後來發現乾淨、快速、易懂的介面才是最好的。

客戶可以看到什麼？

當您瀏覽這個網站時，可以清楚了解：

• 我能做什麼：網站開發、雲端部署、伺服器管理、LINE Bot、Flutter App
• 怎麼收費：透明的價格方案，從 $6,000 到 $60,000，依專案規模而定
• 需要多久：每個方案都標示開發時間，讓您能評估時程
• 怎麼聯絡：Email、LINE 或填寫線上表單，24 小時內回覆
• 過往作品：實際案例展示，證明我的能力

持續更新中

這個網站會持續改進，未來計畫：

• 加入流量分析，了解訪客習慣
• 優化聯絡表單，提升回覆效率
• 製作更精美的社群分享圖
• 加入部落格，分享技術學習筆記
• 持續優化視覺設計

這個網站不只是我的作品集，更是我持續學習與成長的證明。