審計與數據分析作品集
單頁式求職作品集・中英雙語
作品
工作室剛成立，先放上我們替自己做的網站：兩個個人網站，還有你正在看的這個工作室網站和它背後的訂單後台。每個作品都附上技術重點和實際畫面；滑鼠移到縮圖上，可以看到整頁。
01
審計與數據分析作品集
求職用的單頁式作品集。學歷、研究專案、經歷和技能整理在同一頁，招募方往下滑就能看完重點，也能直接下載履歷。
- 對象
- 符立恒（Fu Lap Hang, Ivan）
會計與金融畢業生 - 類型
- 單頁式個人網站
- 使用技術
- HTML、CSS、JavaScript、Tableau、GitHub Pages
技術重點
- 中英雙語切換同一頁直接切換中文和英文，訪客的選擇會記在瀏覽器裡，下次打開還是同一種語言。
- 深色模式一鍵切換淺色和深色，選擇同樣會被記住。
- 嵌入 Tableau 互動報表用 Tableau 官方的嵌入套件，把超過 22 萬筆組屋資料的互動分析直接放進頁面。
- 底部快速導覽導覽列固定在畫面底部，滑到哪裡都能一鍵跳到學歷、研究、履歷和聯絡方式。
- 履歷 PDF 下載招募方不用離開頁面，就能直接下載履歷。
- 免主機費純靜態網頁放在 GitHub Pages，不需要另外租主機。
02
會計與金融研究個人網站
同時給招募方和研究所審查委員看的個人網站。首頁說明能力與研究重點，另有研究報告、完整履歷和一頁式履歷。
- 對象
- 趙于楨（Yu-Chen Chao）
會計與金融畢業生 - 類型
- 多頁式個人網站
- 使用技術
- HTML、CSS、JavaScript、Python、GitHub Pages
技術重點
- 依讀者安排的多頁架構招募方第一眼看到學歷和履歷下載，審查委員則在研究頁讀完整的研究報告。
- 中英雙語與翻譯檢查英文寫在網頁裡、中文放在獨立的翻譯檔，再用 Python 腳本檢查每段文字都有翻譯、沒有過期的譯文。
- 一頁式 A4 履歷專為列印設計的版面，直接列印或存成 PDF 剛好一頁；下載用的履歷 PDF 也由腳本自動產生。
- 逐步導讀研究結果研究頁用分步驟的圖表，帶讀者一段一段看懂研究發現。
- 深色模式跟隨系統預設跟著電腦或手機的深淺色設定，也可以手動切換。
- 不用框架、不用建置純靜態網頁，檔案打開就能用，放在 GitHub Pages。
03
工作室官網與訂單後台
你正在看的這個網站。客戶從網站送出詢價，資料直接存進資料庫，我們在後台追蹤每一張單從詢價到交付的進度。
- 對象
- TechStarterWeb Consulting（本站）
- 類型
- 工作室官網＋詢價管理後台
- 使用技術
- Astro、Cloudflare Workers、D1、Access、OpenCC
- 客戶填表繁體、簡體、英文三種版本
- 檢查與防垃圾伺服器檢查欄位、擋掉機器人
- 存進資料庫每一筆詢價都留下來，不會漏單
- 後台處理只有指定的 Email 能登入
- 追蹤進度詢價 → 報價 → 簽約 → 製作 → 交付
後台截圖使用範例資料。
技術重點
- 三種語言繁體是原稿，簡體版在建置時用 OpenCC 自動轉換，英文版另外撰寫；第一次來的訪客會依瀏覽器語言自動導向。
- 詢價直接進資料庫表單送出後，伺服器先檢查欄位、擋掉機器人，再存進 Cloudflare D1 資料庫，不會淹沒在信箱裡。
- 訂單後台依狀態篩選、搜尋，寫內部備註，每一次狀態變更都留下紀錄。
- 內建流量統計後台直接看每日造訪、熱門頁面、訪客從哪裡來和詢價轉換率；不用 cookie，也不存 IP。
- 後台登入保護用 Cloudflare Access 限定指定的 Email 才能登入，伺服器再驗證一次登入憑證。
- 各地習慣的聯絡方式WhatsApp、微信、LINE、小紅書都能選；簡體版預設微信，英文版預設 WhatsApp。
- 推上 GitHub 就自動上線內容改好推上 GitHub，Cloudflare 會自動建置並更新網站。