UniPortfolio - 大學申請作品集系統

專案簡介

UniPortfolio 是專為高中生申請大學設計的作品集展示系統，幫助學生以專業、現代化的方式呈現自己的學習歷程、競賽成果、專案經驗與個人特質。透過簡單的設定檔修改，即可快速建立一個完整的個人作品集網站。

這個系統提供：

• 零技術門檻：只需修改一個設定檔，無需編程基礎
• 專業設計：現代化的 UI/UX，給審查教授留下深刻印象
• 完整呈現：時間軸經歷、獲獎紀錄、技能展示、專案詳情
• 響應式設計：完美支援手機、平板、電腦各種裝置

為什麼做這個專案？

在台灣的大學申請制度中，學習歷程檔案和個人作品集扮演著越來越重要的角色。然而，許多高中生面臨以下困境：

• 技術門檻高：想做個人網站但不會寫程式
• 平台限制多：使用現成平台缺乏客製化與專業感
• 呈現不夠好：PDF 檔案無法展現互動性和設計美感
• 維護不易：每次更新都很麻煩，難以保持最新狀態

UniPortfolio 的設計理念是：

• 極簡操作：只需修改一個 constants.ts 設定檔，所有內容立即更新
• 專業呈現：精心設計的時間軸、卡片佈局、專案詳情頁
• 突顯優勢：幫助學生有效展現個人特質、競賽成果與專案經驗
• 教育價值：讓學生理解「內容為王」的重要性，而非被技術門檻困住

主要功能

Hero 區塊 - 第一印象

• 個人資訊展示：姓名、學校、主標題（例如：「你好，我是林XX」）
• 自我介紹：簡潔有力的個人簡介文字
• 核心特質標籤：展現個人特質（如：自主學習、跨領域整合、邏輯分析）
• 目標科系：清楚標示申請的學系方向

經歷與活動 - 時間軸呈現

• 視覺化時間軸：以優雅的時間軸方式展示學習歷程
• 經歷詳情：包含年份、組織/活動名稱、擔任角色、具體描述
• 交錯佈局：桌面版左右交錯顯示，視覺層次豐富
• 響應式設計：手機版自動調整為單欄佈局

獲獎紀錄 - 成就展示

• 卡片式設計：每個獎項以精美卡片呈現
• 完整資訊：獎項名稱、頒發單位、獲獎年份、名次
• 證明查看：點擊可開啟 Lightbox 查看獎狀或證書圖片
• 分類清晰：與技能區塊並列，一目了然

專業技能 - 能力呈現

• 分類管理：按類別組織技能（程式語言、開發工具、語言能力等）
• 標籤展示：每項技能以標籤形式呈現
• 互動效果：Hover 時有視覺回饋
• 彈性擴充：可自由新增類別與技能項目

專案作品集 - 深度展示

• 專案篩選：可依類別篩選專案（專題研究、競賽獲獎、志工服務等）
• 卡片預覽：封面圖、標題、類別、標籤一覽
• 詳情頁面：點擊後開啟 Modal 展示完整內容
• 內容自由穿插：支援文字段落與圖片自由混合排列
• 反思區塊：特別設計的「反思與成長」區塊，強調個人成長
• 外部連結：可連結至 GitHub、Demo 網站等外部資源

使用者體驗優化

• 平滑捲動：點擊導航列可平滑滾動到對應區塊
• 捲動監聽：自動高亮當前所在區塊的導航項目
• 行動版選單：手機版提供漢堡選單
• Lightbox 圖片查看：點擊證書圖片可全螢幕查看
• 背景鎖定：開啟 Modal 時防止背景滾動

系統特色

1. 零技術門檻：只需修改 constants.ts 一個檔案，填入個人資料即可完成
2. 設定檔驅動：所有內容（姓名、經歷、專案、技能）都在設定檔中統一管理
3. 豐富的內容類型：支援時間軸、卡片、標籤、圖文混排等多種展示方式
4. 專業視覺設計：精心設計的間距、配色、動畫效果
5. 完全響應式：手機、平板、桌機完美適配
6. 高效能：使用 Vite 構建，載入速度極快
7. 現代化技術：React 19、TypeScript 5.8 最新版本
8. 易於部署：可部署至 Cloudflare Pages、Vercel、Netlify 等平台

設計特色

極簡操作流程

使用者只需修改一個設定檔，填入個人資料，系統自動生成完整的專業作品集網站。不需要任何程式基礎，就像填寫表單一樣簡單。

智慧內容管理

• 彈性內容編排：專案內容可自由穿插文字與圖片，完全依照需求調整
• 自動分類系統：專案會自動依類別分組，並生成篩選功能
• 即時更新：修改設定檔後，網站內容立即更新

專業視覺呈現

• 時間軸設計：經歷以視覺化時間軸呈現，清楚展現成長軌跡
• 卡片式佈局：獎項與專案以精美卡片展示，提升視覺吸引力
• 證書查看功能：獎項可附上證書圖片，點擊即可放大查看
• 專案詳情頁：每個專案都有獨立的展示空間，深度說明成果與反思

流暢使用體驗

• 一鍵導航：點擊選單可快速跳轉到各區塊
• 智慧高亮：自動標示目前瀏覽的區塊位置
• 行動裝置優化：手機瀏覽時自動調整版面與操作方式

設計挑戰與解決方案

在開發過程中，專注於解決使用者的實際需求：

1. 簡化操作門檻：如何讓完全不懂程式的人也能輕鬆建立專業作品集？透過單一設定檔設計，使用者只需填寫資料，無需理解技術細節
2. 彈性內容編排：如何讓專案內容呈現更生動？設計了文字與圖片自由混合的系統，使用者可依需求調整內容順序
3. 跨裝置體驗：如何在手機、平板、電腦上都能完美呈現？採用響應式設計，時間軸在不同裝置自動調整佈局
4. 視覺層次設計：如何讓內容清晰易讀又不失專業？精心設計間距、配色與動畫，打造舒適的瀏覽體驗
5. 效能與速度：如何確保網站快速載入？使用現代化工具優化，即使內容豐富也能瞬間開啟

適用對象

這個系統特別適合：

主要使用者

• 高中生：準備大學申請入學的學習歷程展示
• 大學生：整理專題、實習、競賽經驗
• 研究所申請者：展示研究成果與學術背景

其他適用情境

• 設計師：展示設計作品和專案案例
• 開發者：呈現程式專案和技術能力
• 創作者：任何需要展示成果的專業人士
• 教育工作者：協助學生建立作品集

使用場景

• 大學申請入學備審資料
• 甄選面試前的線上履歷
• 個人品牌建立
• 學習歷程檔案補充

系統架構

UniPortfolio 作品集系統
├──  展示介面
│   ├── 個人資訊區塊（Hero Section）
│   ├── 經歷時間軸（Experience Timeline）
│   ├── 獲獎紀錄與技能展示
│   ├── 專案作品集網格
│   ├── 專案詳情彈窗
│   └── 圖片放大查看功能
│
├──  內容設定
│   └── 單一設定檔（使用者只需修改此檔案）
│
└──  部署選項
    ├── Cloudflare Pages（目前使用）
    ├── Vercel
    ├── Netlify
    └── GitHub Pages

專案價值與影響

這個專案帶來的實質價值：

解決真實需求

• 降低門檻：讓不懂程式的高中生也能擁有專業作品集網站
• 提升效率：從構思到上線只需幾小時，不用數週學習建站
• 專業呈現：現代化設計提升個人形象，增加申請競爭力
• 持續更新：隨時可以新增或修改內容，保持最新狀態

教育意義

• 回歸本質：幫助學生專注於內容品質，而非技術障礙
• 展現優勢：透過結構化呈現，有效凸顯個人特質與成果
• 反思成長：特別設計的反思區塊，引導學生思考學習歷程

可擴展性

• 彈性客製：可依需求調整所有文字標籤與內容結構
• 多元應用：不只高中生，各階段求學或求職都能使用
• 易於部署：支援多種免費部署平台，零成本上線

實際應用

• 大學申請：作為備審資料的線上補充，展現完整學習歷程
• 面試輔助：提供給面試教授的參考連結，留下專業印象
• 個人品牌：建立個人數位形象，累積作品集

使用方式

三步驟快速上線

步驟 1：填寫個人資料

• 開啟專案中的設定檔
• 填入姓名、學校、自我介紹等基本資料
• 就像填寫線上表單一樣簡單

步驟 2：新增內容 設定檔包含以下區塊，依需求填寫：

• 個人資訊：姓名、學校、目標科系、個人特質
• 經歷時間軸：社團、競賽、志工等活動經歷
• 獲獎紀錄：各項得獎記錄（可附上證書圖片）
• 專業技能：程式語言、工具、語言能力等
• 專案作品：詳細說明每個專案的內容與反思

步驟 3：上線分享

• 使用免費部署平台（如 Cloudflare Pages）
• 一鍵發布，立即取得專屬網址
• 分享給教授、學校或寫在申請資料中

圖片處理

• 可使用網路圖片連結
• 或將圖片放入專案資料夾後引用
• 證書、獎狀、專案截圖都能輕鬆展示

持續更新

隨時可以回到設定檔修改內容，更新會立即反映在網站上，保持作品集的最新狀態。

聯絡方式

如果你是學校老師或輔導室，想為學生引進這套系統；或是教育單位想合作開發類似工具，歡迎聯絡我：contact@spencerku.me

我很樂意討論如何幫助更多學生用科技展現自己的優勢，順利邁向理想的升學目標！