[{"data":1,"prerenderedAt":1646},["ShallowReactive",2],{"project-line-ordering-system":3,"related-line-ordering-system":213,"project-nav-line-ordering-system":828},{"id":4,"title":5,"body":6,"description":176,"extension":187,"meta":188,"navigation":190,"path":209,"seo":210,"stem":211,"__hash__":212},"projects/projects/line-ordering-system.md","LINE 點餐系統",{"type":7,"value":8,"toc":175},"minimark",[9,13,17,20,27,31,44,48,62,65,77,83,87,104,108,141,144,155,158],[10,11,12],"h2",{"id":12},"專案簡介",[14,15,16],"p",{},"這是一套給餐飲店使用的 LINE 點餐系統。顧客不需要下載新 App，只要打開 LINE 就能點餐；店家則可以在後台即時看訂單、改菜單、查營運數據。",[14,18,19],{},"我希望解決的是「接單混亂、資訊不同步、人工確認太花時間」這三個最常見問題。",[14,21,22],{},[23,24],"img",{"alt":25,"src":26},"LINE 點餐前台","/images/line-ordering-1.png",[10,28,30],{"id":29},"這套系統適合誰","這套系統適合誰？",[32,33,34,38,41],"ul",{},[35,36,37],"li",{},"便當店、自助餐、小吃店",[35,39,40],{},"飲料店、甜點店、咖啡店",[35,42,43],{},"想從電話接單改成線上接單的店家",[10,45,47],{"id":46},"可以幫店家解決什麼問題","可以幫店家解決什麼問題？",[32,49,50,53,56,59],{},[35,51,52],{},"尖峰時段不再靠人工抄單，降低漏單機率",[35,54,55],{},"顧客可自己查訂單狀態，減少重複詢問",[35,57,58],{},"菜單可即時更新，不用一直回覆「今天賣完了嗎」",[35,60,61],{},"每日營收與熱銷品一眼看懂，做決策更快",[10,63,64],{"id":64},"顧客使用流程",[66,67,68,71,74],"ol",{},[35,69,70],{},"在 LINE 開啟點餐頁面",[35,72,73],{},"選餐、加入購物車、填寫取餐資訊",[35,75,76],{},"送出訂單後，隨時查看最新狀態",[14,78,79],{},[23,80],{"alt":81,"src":82},"店家後台訂單看板","/images/line-ordering-2.png",[10,84,86],{"id":85},"店家後台可以做什麼","店家後台可以做什麼？",[32,88,89,92,95,98,101],{},[35,90,91],{},"用看板方式管理訂單進度（待確認、製作中、待取餐）",[35,93,94],{},"快速搜尋訂單與顧客電話",[35,96,97],{},"新增/修改菜單、調整價格、上傳餐點圖片",[35,99,100],{},"一鍵切換「上架中 / 已賣完 / 已下架」",[35,102,103],{},"查看營收趨勢與熱銷品排行",[10,105,107],{"id":106},"這套系統的實用特色白話版","這套系統的實用特色（白話版）",[32,109,110,117,123,129,135],{},[35,111,112,116],{},[113,114,115],"strong",{},"不怕重複送出","：顧客網路不穩重按，也不會重複出單",[35,118,119,122],{},[113,120,121],{},"尖峰更穩定","：高峰時段仍能維持有序接單",[35,124,125,128],{},[113,126,127],{},"狀態清楚","：店家與顧客看到同一份訂單進度",[35,130,131,134],{},[113,132,133],{},"通知可補發","：若通知一時失敗，系統會自動再試",[35,136,137,140],{},[113,138,139],{},"權限分工","：老闆和店員看到的功能不同，避免誤操作",[10,142,143],{"id":143},"成果與收穫",[32,145,146,149,152],{},[35,147,148],{},"完成「顧客點餐 + 店家管理」的可運作 MVP",[35,150,151],{},"將常見人工流程（接單、改單、查單）整理成標準化操作",[35,153,154],{},"建立可擴充的基礎，未來可再加會員、優惠、外送範圍與金流",[10,156,157],{"id":157},"可客製方向",[32,159,160,163,166,169,172],{},[35,161,162],{},"品牌色系與頁面風格",[35,164,165],{},"外送規則與服務範圍",[35,167,168],{},"會員機制與優惠活動",[35,170,171],{},"多分店管理",[35,173,174],{},"串接第三方支付",{"title":176,"searchDepth":177,"depth":177,"links":178},"",2,[179,180,181,182,183,184,185,186],{"id":12,"depth":177,"text":12},{"id":29,"depth":177,"text":30},{"id":46,"depth":177,"text":47},{"id":64,"depth":177,"text":64},{"id":85,"depth":177,"text":86},{"id":106,"depth":177,"text":107},{"id":143,"depth":177,"text":143},{"id":157,"depth":177,"text":157},"md",{"shortDesc":189,"published":190,"category":191,"tags":192,"projectType":198,"completedDate":199,"featured":190,"thumbnail":26,"links":200,"techStack":202,"order":208},"讓顧客在 LINE 就能快速點餐，店家用同一套後台管理訂單與菜單",true,"網頁應用",[193,194,195,196,197],"LINE 點餐","餐飲數位化","訂單管理","菜單管理","營運報表","個人專案","2026.04",{"demo":201,"github":201,"figma":201},null,[203,204,205,206,207],"LINE LIFF","React + TypeScript","Supabase","Tailwind CSS","Recharts",5,"/projects/line-ordering-system",{"title":5,"description":176},"projects/line-ordering-system","VKZdM5XqOryoUoWG0GzKuK76wWsJvrViiwUqVBIVmPs",[214,603],{"id":215,"title":216,"body":217,"description":176,"extension":187,"meta":584,"navigation":190,"path":599,"seo":600,"stem":601,"__hash__":602},"projects/projects/line-reservation-system.md","LINE 預約管理系統",{"type":7,"value":218,"toc":569},[219,221,228,231,245,249,252,255,260,280,286,290,334,340,346,349,381,384,387,419,422,425,457,460,463,495,498,501,504,521,524,544],[10,220,12],{"id":12},[14,222,223,224,227],{},"這是一個完整的預約管理系統，讓小型店家可以透過 ",[113,225,226],{},"LINE 聊天機器人"," 提供預約服務。客戶只要加 LINE 好友，就能在對話中輕鬆完成預約，不需要下載額外的 App 或註冊帳號。",[14,229,230],{},"系統分為兩個部分：",[32,232,233,239],{},[35,234,235,238],{},[113,236,237],{},"LINE Bot（給客戶用）","：透過對話完成預約、查詢、取消",[35,240,241,244],{},[113,242,243],{},"管理後台（給店家用）","：視覺化日曆、客戶管理、預約統計",[10,246,248],{"id":247},"為什麼做這個專案","為什麼做這個專案？",[14,250,251],{},"看到很多小店家還在用 Excel 表格或手寫記錄預約，不僅容易出錯，客戶也要打電話或傳訊息才能預約。而 LINE 是台灣最普及的通訊軟體，幾乎人人都有，所以決定開發一個結合 LINE 的預約系統，讓預約變得更簡單。",[10,253,254],{"id":254},"主要功能",[256,257,259],"h3",{"id":258},"給客戶的功能line-bot","給客戶的功能（LINE Bot）",[32,261,262,268,274],{},[35,263,264,267],{},[113,265,266],{},"簡單預約","：在 LINE 對話中選擇服務和時間就完成預約",[35,269,270,273],{},[113,271,272],{},"查詢預約","：隨時查看自己的預約記錄",[35,275,276,279],{},[113,277,278],{},"取消預約","：不能來的話可以直接在 LINE 取消",[14,281,282],{},[23,283],{"alt":284,"src":285},"LINE Bot 預約介面","/images/line-reservation-1.png",[256,287,289],{"id":288},"給店家的功能管理後台","給店家的功能（管理後台）",[32,291,292,298,304,310,316,322,328],{},[35,293,294,297],{},[113,295,296],{},"日曆檢視","：一眼看清所有預約，可以切換日、週、月檢視",[35,299,300,303],{},[113,301,302],{},"預約管理","：手動確定、取消預約",[35,305,306,309],{},[113,307,308],{},"客戶資料","：查看每位客戶的預約歷史和聯絡資訊",[35,311,312,315],{},[113,313,314],{},"服務設定","：管理提供的服務項目和時間長度",[35,317,318,321],{},[113,319,320],{},"時段管理","：設定哪些時段開放預約",[35,323,324,327],{},[113,325,326],{},"報到功能","：客戶到店時可以快速打卡報到",[35,329,330,333],{},[113,331,332],{},"數據統計","：查看預約數量、客戶人數等統計資料",[14,335,336],{},[23,337],{"alt":338,"src":339},"管理後台dashborad","/images/line-reservation-3.png",[14,341,342],{},[23,343],{"alt":344,"src":345},"管理後台日曆檢視","/images/line-reservation-2.png",[10,347,348],{"id":348},"系統特色",[66,350,351,357,363,369,375],{},[35,352,353,356],{},[113,354,355],{},"無需註冊","：客戶只要有 LINE 就能使用，不用記帳號密碼",[35,358,359,362],{},[113,360,361],{},"即時通知","：透過 LINE 自動發送預約確認",[35,364,365,368],{},[113,366,367],{},"防止衝突","：系統會自動檢查時段是否已被預約",[35,370,371,374],{},[113,372,373],{},"響應式設計","：手機、平板、電腦都能順暢使用後台",[35,376,377,380],{},[113,378,379],{},"資料安全","：使用 Token 認證，保護客戶資料",[10,382,383],{"id":383},"技術架構",[14,385,386],{},"這個系統使用現代化的前後端分離架構：",[32,388,389,395,401,407,413],{},[35,390,391,394],{},[113,392,393],{},"前端（管理後台）","：Vue.js 建構互動介面，Tailwind CSS 設計美觀外觀",[35,396,397,400],{},[113,398,399],{},"後端（API 服務）","：Laravel 處理商業邏輯和資料庫操作",[35,402,403,406],{},[113,404,405],{},"LINE 整合","：透過 LINE Messaging API 收發訊息",[35,408,409,412],{},[113,410,411],{},"資料庫","：MySQL 儲存所有預約和客戶資料",[35,414,415,418],{},[113,416,417],{},"日曆套件","：FullCalendar 提供專業的日曆顯示",[10,420,421],{"id":421},"遇到的挑戰",[14,423,424],{},"在開發過程中遇到幾個主要挑戰：",[66,426,427,433,439,445,451],{},[35,428,429,432],{},[113,430,431],{},"LINE Webhook 即時訊息處理","：需要快速回應 LINE 伺服器，避免逾時",[35,434,435,438],{},[113,436,437],{},"預約衝突檢查與時段管理","：確保同一時段不會被重複預約",[35,440,441,444],{},[113,442,443],{},"前後端分離的 Token 認證機制","：保護 API 安全",[35,446,447,450],{},[113,448,449],{},"管理後台的權限控制","：不同角色有不同操作權限",[35,452,453,456],{},[113,454,455],{},"客戶資料與預約記錄的關聯設計","：資料庫結構要設計得清楚易維護",[10,458,459],{"id":459},"開發心得",[14,461,462],{},"這是我第一個整合第三方服務（LINE API）的完整專案，過程中學到：",[66,464,465,471,477,483,489],{},[35,466,467,470],{},[113,468,469],{},"API 整合","：學會如何串接 LINE Messaging API，處理 Webhook 即時訊息",[35,472,473,476],{},[113,474,475],{},"前後端分離","：理解前端和後端如何透過 API 溝通",[35,478,479,482],{},[113,480,481],{},"資料庫設計","：規劃客戶、預約、服務等資料表的關聯",[35,484,485,488],{},[113,486,487],{},"狀態管理","：使用 Pinia 管理複雜的應用程式狀態",[35,490,491,494],{},[113,492,493],{},"使用者體驗","：思考如何讓非技術人員也能輕鬆操作系統",[14,496,497],{},"最大的挑戰是處理預約衝突和時區問題，需要仔細檢查每個時段的狀態，確保不會重複預約。另外，LINE Bot 的對話流程設計也花了不少時間，要讓對話感覺自然又能完成預約。",[10,499,500],{"id":500},"適用對象",[14,502,503],{},"這個系統適合：",[32,505,506,509,512,515,518],{},[35,507,508],{},"美容美髮沙龍",[35,510,511],{},"按摩 SPA 店家",[35,513,514],{},"健身教練",[35,516,517],{},"醫療診所",[35,519,520],{},"任何需要預約制的服務業",[10,522,523],{"id":523},"未來規劃",[32,525,526,529,532,535,538,541],{},[35,527,528],{},"整合電子支付與自動對帳",[35,530,531],{},"多店家版本（連鎖店管理）",[35,533,534],{},"客戶評價系統",[35,536,537],{},"更豐富的數據分析報表",[35,539,540],{},"自動化行銷訊息（生日優惠等）",[35,542,543],{},"SaaS訂閱化",[545,546,547,552,555,566],"blockquote",{},[14,548,549],{},[113,550,551],{},"聯絡方式",[14,553,554],{},"如果你對這個專案有興趣、想試用或合作，歡迎透過以下方式聯絡我：",[14,556,557,560,561],{},[113,558,559],{},"Email:"," ",[562,563,565],"a",{"href":564},"mailto:contact@spencerku.me","contact@spencerku.me",[14,567,568],{},"我很樂意分享更多專案細節，或討論如何將此系統應用於你的業務中。",{"title":176,"searchDepth":177,"depth":177,"links":570},[571,572,573,578,579,580,581,582,583],{"id":12,"depth":177,"text":12},{"id":247,"depth":177,"text":248},{"id":254,"depth":177,"text":254,"children":574},[575,577],{"id":258,"depth":576,"text":259},3,{"id":288,"depth":576,"text":289},{"id":348,"depth":177,"text":348},{"id":383,"depth":177,"text":383},{"id":421,"depth":177,"text":421},{"id":459,"depth":177,"text":459},{"id":500,"depth":177,"text":500},{"id":523,"depth":177,"text":523},{"shortDesc":585,"published":190,"category":191,"tags":586,"projectType":198,"completedDate":591,"featured":190,"thumbnail":339,"links":592,"techStack":593,"order":177},"透過 LINE 聊天機器人讓客戶輕鬆預約，搭配完整後台管理",[587,588,589,590,206],"LINE Bot","Vue.js","Laravel","FullCalendar","2025.11",{"demo":201,"github":201,"figma":201},[594,595,596,590,206,597,598],"Vue 3 + Vite","Laravel 12","LINE Messaging API","MySQL","Pinia (狀態管理)","/projects/line-reservation-system",{"title":216,"description":176},"projects/line-reservation-system","LxzAR4PvK-EVh6eSJZTm7JLASfnDiT8TTv9mAmQQP6A",{"id":604,"title":605,"body":606,"description":176,"extension":187,"meta":810,"navigation":190,"path":824,"seo":825,"stem":826,"__hash__":827},"projects/projects/meetfix.md","MeetFix - 會議與報修系統",{"type":7,"value":607,"toc":797},[608,610,613,616,642,644,647,649,652,666,669,680,683,694,696,734,736,739,750,752,754,759,761,783],[10,609,12],{"id":12},[14,611,612],{},"MeetFix 是一個讓大家「預約會議室」和「報修設備」都變得超簡單的網站。你不用懂電腦，也不用安裝 App，只要打開網頁，幾個步驟就能完成預約或報修。",[14,614,615],{},"這個系統分成幾種角色：",[32,617,618,624,630,636],{},[35,619,620,623],{},[113,621,622],{},"一般使用者","：可以預約會議室、報修設備",[35,625,626,629],{},[113,627,628],{},"場地管理員","：負責審核會議室預約",[35,631,632,635],{},[113,633,634],{},"維修人員","：負責處理報修單",[35,637,638,641],{},[113,639,640],{},"系統管理員","：可以管理所有人、會議室和統計資料",[10,643,248],{"id":247},[14,645,646],{},"很多公司、學校、店家，預約會議室還在用紙本或群組留言，設備壞掉也要打電話或傳訊息找人修，常常搞得很亂。MeetFix 就是要讓這些事情全部線上化，大家都能一目了然，省時又省力。",[10,648,254],{"id":254},[256,650,651],{"id":651},"會議室預約",[32,653,654,657,660,663],{},[35,655,656],{},"用日曆直接看空檔，選好時間就能預約",[35,658,659],{},"系統會自動幫你檢查有沒有撞時段",[35,661,662],{},"有些會議室需要管理員同意，線上就能審核",[35,664,665],{},"隨時查詢、取消自己的預約",[256,667,668],{"id":668},"設備報修",[32,670,671,674,677],{},[35,672,673],{},"遇到設備壞掉，線上填單，選地點、類型、簡單描述就好",[35,675,676],{},"可以傳照片，讓維修人員更快了解問題",[35,678,679],{},"報修進度一目了然，修好了也會通知你",[256,681,682],{"id":682},"管理後台",[32,684,685,688,691],{},[35,686,687],{},"管理員可以統一審核預約、管理所有報修",[35,689,690],{},"有統計圖表，隨時掌握預約和報修狀況",[35,692,693],{},"可以新增、編輯、刪除會議室和報修類型",[10,695,348],{"id":348},[66,697,698,704,710,716,722,728],{},[35,699,700,703],{},[113,701,702],{},"全部都在同一個網站","：不用再分好幾個系統或群組",[35,705,706,709],{},[113,707,708],{},"誰負責什麼一清二楚","：每個人有自己的權限和功能",[35,711,712,715],{},[113,713,714],{},"操作簡單，馬上有回應","：每個動作都有提示，不怕漏掉",[35,717,718,721],{},[113,719,720],{},"圖表看得懂","：預約和報修數量用圖表顯示，超直觀",[35,723,724,727],{},[113,725,726],{},"手機、平板、電腦都能用","：不管在哪裡都能操作",[35,729,730,733],{},[113,731,732],{},"不用安裝、不用懂技術","：打開網頁就能用",[10,735,421],{"id":421},[14,737,738],{},"在開發過程中，最大的挑戰是：",[66,740,741,744,747],{},[35,742,743],{},"讓不同角色（像是管理員、維修人員、一般使用者）都能用得順手",[35,745,746],{},"日曆功能要做得直覺，大家一看就懂",[35,748,749],{},"報修和預約流程要簡單，讓不懂電腦的人也會用",[10,751,500],{"id":500},[14,753,503],{},[32,755,756],{},[35,757,758],{},"公司、店家、學校、社區中心，只要有場地要預約、設備要報修，都能用！",[10,760,523],{"id":523},[32,762,763],{},[35,764,765,766],{},"未來會加入更多功能，像是：\n",[32,767,768,771,774,777,780],{},[35,769,770],{},"智慧小幫手（自動幫你填報修內容）",[35,772,773],{},"Email 或手機通知",[35,775,776],{},"報表匯出",[35,778,779],{},"行動版 App",[35,781,782],{},"多國語言支援",[545,784,785,789,794],{},[14,786,787],{},[113,788,551],{},[14,790,791,792],{},"有興趣、想試用或合作，歡迎直接 Email 給我：",[562,793,565],{"href":564},[14,795,796],{},"我很樂意分享更多細節，也可以討論怎麼讓你的生意更有效率！",{"title":176,"searchDepth":177,"depth":177,"links":798},[799,800,801,806,807,808,809],{"id":12,"depth":177,"text":12},{"id":247,"depth":177,"text":248},{"id":254,"depth":177,"text":254,"children":802},[803,804,805],{"id":651,"depth":576,"text":651},{"id":668,"depth":576,"text":668},{"id":682,"depth":576,"text":682},{"id":348,"depth":177,"text":348},{"id":421,"depth":177,"text":421},{"id":500,"depth":177,"text":500},{"id":523,"depth":177,"text":523},{"shortDesc":811,"published":190,"category":191,"tags":812,"projectType":198,"completedDate":591,"featured":190,"thumbnail":817,"links":818,"techStack":820,"order":576},"整合會議室預約與設施報修的綜合管理系統",[813,814,815,207,816],"React","TypeScript","Vite","Google Gemini AI","/images/meetfix-1.png",{"demo":819,"github":201,"figma":201},"https://meetfix.pages.dev/",[821,814,815,822,207,816,823],"React 19","React Router","Lucide React Icons","/projects/meetfix",{"title":605,"description":176},"projects/meetfix","Y0nSDzumD81c8Rcy274vyTkSr4eV84Q0TjW4sAmgsx0",{"prev":829,"next":201},{"id":830,"title":831,"body":832,"description":176,"extension":187,"meta":1627,"navigation":190,"path":1642,"seo":1643,"stem":1644,"__hash__":1645},"projects/projects/portfolio-manager.md","UniPortfolio - 大學申請作品集系統",{"type":7,"value":833,"toc":1590},[834,836,839,842,867,869,872,898,901,932,934,938,964,968,993,997,1023,1027,1053,1057,1095,1098,1130,1132,1184,1187,1190,1193,1196,1216,1219,1245,1248,1268,1271,1274,1305,1307,1310,1313,1333,1336,1362,1365,1379,1382,1391,1394,1397,1400,1425,1428,1448,1451,1470,1473,1493,1496,1499,1504,1515,1521,1538,1543,1554,1557,1568,1570,1573,1576],[10,835,12],{"id":12},[14,837,838],{},"UniPortfolio 是專為高中生申請大學設計的作品集展示系統，幫助學生以專業、現代化的方式呈現自己的學習歷程、競賽成果、專案經驗與個人特質。透過簡單的設定檔修改，即可快速建立一個完整的個人作品集網站。",[14,840,841],{},"這個系統提供：",[32,843,844,850,856,862],{},[35,845,846,849],{},[113,847,848],{},"零技術門檻","：只需修改一個設定檔，無需編程基礎",[35,851,852,855],{},[113,853,854],{},"專業設計","：現代化的 UI/UX，給審查教授留下深刻印象",[35,857,858,861],{},[113,859,860],{},"完整呈現","：時間軸經歷、獲獎紀錄、技能展示、專案詳情",[35,863,864,866],{},[113,865,373],{},"：完美支援手機、平板、電腦各種裝置",[10,868,248],{"id":247},[14,870,871],{},"在台灣的大學申請制度中，學習歷程檔案和個人作品集扮演著越來越重要的角色。然而，許多高中生面臨以下困境：",[32,873,874,880,886,892],{},[35,875,876,879],{},[113,877,878],{},"技術門檻高","：想做個人網站但不會寫程式",[35,881,882,885],{},[113,883,884],{},"平台限制多","：使用現成平台缺乏客製化與專業感",[35,887,888,891],{},[113,889,890],{},"呈現不夠好","：PDF 檔案無法展現互動性和設計美感",[35,893,894,897],{},[113,895,896],{},"維護不易","：每次更新都很麻煩，難以保持最新狀態",[14,899,900],{},"UniPortfolio 的設計理念是：",[32,902,903,914,920,926],{},[35,904,905,908,909,913],{},[113,906,907],{},"極簡操作","：只需修改一個 ",[910,911,912],"code",{},"constants.ts"," 設定檔，所有內容立即更新",[35,915,916,919],{},[113,917,918],{},"專業呈現","：精心設計的時間軸、卡片佈局、專案詳情頁",[35,921,922,925],{},[113,923,924],{},"突顯優勢","：幫助學生有效展現個人特質、競賽成果與專案經驗",[35,927,928,931],{},[113,929,930],{},"教育價值","：讓學生理解「內容為王」的重要性，而非被技術門檻困住",[10,933,254],{"id":254},[256,935,937],{"id":936},"hero-區塊-第一印象","Hero 區塊 - 第一印象",[32,939,940,946,952,958],{},[35,941,942,945],{},[113,943,944],{},"個人資訊展示","：姓名、學校、主標題（例如：「你好，我是林XX」）",[35,947,948,951],{},[113,949,950],{},"自我介紹","：簡潔有力的個人簡介文字",[35,953,954,957],{},[113,955,956],{},"核心特質標籤","：展現個人特質（如：自主學習、跨領域整合、邏輯分析）",[35,959,960,963],{},[113,961,962],{},"目標科系","：清楚標示申請的學系方向",[256,965,967],{"id":966},"經歷與活動-時間軸呈現","經歷與活動 - 時間軸呈現",[32,969,970,976,982,988],{},[35,971,972,975],{},[113,973,974],{},"視覺化時間軸","：以優雅的時間軸方式展示學習歷程",[35,977,978,981],{},[113,979,980],{},"經歷詳情","：包含年份、組織/活動名稱、擔任角色、具體描述",[35,983,984,987],{},[113,985,986],{},"交錯佈局","：桌面版左右交錯顯示，視覺層次豐富",[35,989,990,992],{},[113,991,373],{},"：手機版自動調整為單欄佈局",[256,994,996],{"id":995},"獲獎紀錄-成就展示","獲獎紀錄 - 成就展示",[32,998,999,1005,1011,1017],{},[35,1000,1001,1004],{},[113,1002,1003],{},"卡片式設計","：每個獎項以精美卡片呈現",[35,1006,1007,1010],{},[113,1008,1009],{},"完整資訊","：獎項名稱、頒發單位、獲獎年份、名次",[35,1012,1013,1016],{},[113,1014,1015],{},"證明查看","：點擊可開啟 Lightbox 查看獎狀或證書圖片",[35,1018,1019,1022],{},[113,1020,1021],{},"分類清晰","：與技能區塊並列，一目了然",[256,1024,1026],{"id":1025},"專業技能-能力呈現","專業技能 - 能力呈現",[32,1028,1029,1035,1041,1047],{},[35,1030,1031,1034],{},[113,1032,1033],{},"分類管理","：按類別組織技能（程式語言、開發工具、語言能力等）",[35,1036,1037,1040],{},[113,1038,1039],{},"標籤展示","：每項技能以標籤形式呈現",[35,1042,1043,1046],{},[113,1044,1045],{},"互動效果","：Hover 時有視覺回饋",[35,1048,1049,1052],{},[113,1050,1051],{},"彈性擴充","：可自由新增類別與技能項目",[256,1054,1056],{"id":1055},"專案作品集-深度展示","專案作品集 - 深度展示",[32,1058,1059,1065,1071,1077,1083,1089],{},[35,1060,1061,1064],{},[113,1062,1063],{},"專案篩選","：可依類別篩選專案（專題研究、競賽獲獎、志工服務等）",[35,1066,1067,1070],{},[113,1068,1069],{},"卡片預覽","：封面圖、標題、類別、標籤一覽",[35,1072,1073,1076],{},[113,1074,1075],{},"詳情頁面","：點擊後開啟 Modal 展示完整內容",[35,1078,1079,1082],{},[113,1080,1081],{},"內容自由穿插","：支援文字段落與圖片自由混合排列",[35,1084,1085,1088],{},[113,1086,1087],{},"反思區塊","：特別設計的「反思與成長」區塊，強調個人成長",[35,1090,1091,1094],{},[113,1092,1093],{},"外部連結","：可連結至 GitHub、Demo 網站等外部資源",[256,1096,1097],{"id":1097},"使用者體驗優化",[32,1099,1100,1106,1112,1118,1124],{},[35,1101,1102,1105],{},[113,1103,1104],{},"平滑捲動","：點擊導航列可平滑滾動到對應區塊",[35,1107,1108,1111],{},[113,1109,1110],{},"捲動監聽","：自動高亮當前所在區塊的導航項目",[35,1113,1114,1117],{},[113,1115,1116],{},"行動版選單","：手機版提供漢堡選單",[35,1119,1120,1123],{},[113,1121,1122],{},"Lightbox 圖片查看","：點擊證書圖片可全螢幕查看",[35,1125,1126,1129],{},[113,1127,1128],{},"背景鎖定","：開啟 Modal 時防止背景滾動",[10,1131,348],{"id":348},[66,1133,1134,1142,1148,1154,1160,1166,1172,1178],{},[35,1135,1136,1138,1139,1141],{},[113,1137,848],{},"：只需修改 ",[910,1140,912],{}," 一個檔案，填入個人資料即可完成",[35,1143,1144,1147],{},[113,1145,1146],{},"設定檔驅動","：所有內容（姓名、經歷、專案、技能）都在設定檔中統一管理",[35,1149,1150,1153],{},[113,1151,1152],{},"豐富的內容類型","：支援時間軸、卡片、標籤、圖文混排等多種展示方式",[35,1155,1156,1159],{},[113,1157,1158],{},"專業視覺設計","：精心設計的間距、配色、動畫效果",[35,1161,1162,1165],{},[113,1163,1164],{},"完全響應式","：手機、平板、桌機完美適配",[35,1167,1168,1171],{},[113,1169,1170],{},"高效能","：使用 Vite 構建，載入速度極快",[35,1173,1174,1177],{},[113,1175,1176],{},"現代化技術","：React 19、TypeScript 5.8 最新版本",[35,1179,1180,1183],{},[113,1181,1182],{},"易於部署","：可部署至 Cloudflare Pages、Vercel、Netlify 等平台",[10,1185,1186],{"id":1186},"設計特色",[256,1188,1189],{"id":1189},"極簡操作流程",[14,1191,1192],{},"使用者只需修改一個設定檔，填入個人資料，系統自動生成完整的專業作品集網站。不需要任何程式基礎，就像填寫表單一樣簡單。",[256,1194,1195],{"id":1195},"智慧內容管理",[32,1197,1198,1204,1210],{},[35,1199,1200,1203],{},[113,1201,1202],{},"彈性內容編排","：專案內容可自由穿插文字與圖片，完全依照需求調整",[35,1205,1206,1209],{},[113,1207,1208],{},"自動分類系統","：專案會自動依類別分組，並生成篩選功能",[35,1211,1212,1215],{},[113,1213,1214],{},"即時更新","：修改設定檔後，網站內容立即更新",[256,1217,1218],{"id":1218},"專業視覺呈現",[32,1220,1221,1227,1233,1239],{},[35,1222,1223,1226],{},[113,1224,1225],{},"時間軸設計","：經歷以視覺化時間軸呈現，清楚展現成長軌跡",[35,1228,1229,1232],{},[113,1230,1231],{},"卡片式佈局","：獎項與專案以精美卡片展示，提升視覺吸引力",[35,1234,1235,1238],{},[113,1236,1237],{},"證書查看功能","：獎項可附上證書圖片，點擊即可放大查看",[35,1240,1241,1244],{},[113,1242,1243],{},"專案詳情頁","：每個專案都有獨立的展示空間，深度說明成果與反思",[256,1246,1247],{"id":1247},"流暢使用體驗",[32,1249,1250,1256,1262],{},[35,1251,1252,1255],{},[113,1253,1254],{},"一鍵導航","：點擊選單可快速跳轉到各區塊",[35,1257,1258,1261],{},[113,1259,1260],{},"智慧高亮","：自動標示目前瀏覽的區塊位置",[35,1263,1264,1267],{},[113,1265,1266],{},"行動裝置優化","：手機瀏覽時自動調整版面與操作方式",[10,1269,1270],{"id":1270},"設計挑戰與解決方案",[14,1272,1273],{},"在開發過程中，專注於解決使用者的實際需求：",[66,1275,1276,1282,1287,1293,1299],{},[35,1277,1278,1281],{},[113,1279,1280],{},"簡化操作門檻","：如何讓完全不懂程式的人也能輕鬆建立專業作品集？透過單一設定檔設計，使用者只需填寫資料，無需理解技術細節",[35,1283,1284,1286],{},[113,1285,1202],{},"：如何讓專案內容呈現更生動？設計了文字與圖片自由混合的系統，使用者可依需求調整內容順序",[35,1288,1289,1292],{},[113,1290,1291],{},"跨裝置體驗","：如何在手機、平板、電腦上都能完美呈現？採用響應式設計，時間軸在不同裝置自動調整佈局",[35,1294,1295,1298],{},[113,1296,1297],{},"視覺層次設計","：如何讓內容清晰易讀又不失專業？精心設計間距、配色與動畫，打造舒適的瀏覽體驗",[35,1300,1301,1304],{},[113,1302,1303],{},"效能與速度","：如何確保網站快速載入？使用現代化工具優化，即使內容豐富也能瞬間開啟",[10,1306,500],{"id":500},[14,1308,1309],{},"這個系統特別適合：",[256,1311,1312],{"id":1312},"主要使用者",[32,1314,1315,1321,1327],{},[35,1316,1317,1320],{},[113,1318,1319],{},"高中生","：準備大學申請入學的學習歷程展示",[35,1322,1323,1326],{},[113,1324,1325],{},"大學生","：整理專題、實習、競賽經驗",[35,1328,1329,1332],{},[113,1330,1331],{},"研究所申請者","：展示研究成果與學術背景",[256,1334,1335],{"id":1335},"其他適用情境",[32,1337,1338,1344,1350,1356],{},[35,1339,1340,1343],{},[113,1341,1342],{},"設計師","：展示設計作品和專案案例",[35,1345,1346,1349],{},[113,1347,1348],{},"開發者","：呈現程式專案和技術能力",[35,1351,1352,1355],{},[113,1353,1354],{},"創作者","：任何需要展示成果的專業人士",[35,1357,1358,1361],{},[113,1359,1360],{},"教育工作者","：協助學生建立作品集",[256,1363,1364],{"id":1364},"使用場景",[32,1366,1367,1370,1373,1376],{},[35,1368,1369],{},"大學申請入學備審資料",[35,1371,1372],{},"甄選面試前的線上履歷",[35,1374,1375],{},"個人品牌建立",[35,1377,1378],{},"學習歷程檔案補充",[10,1380,1381],{"id":1381},"系統架構",[1383,1384,1389],"pre",{"className":1385,"code":1387,"language":1388},[1386],"language-text","UniPortfolio 作品集系統\n├──  展示介面\n│   ├── 個人資訊區塊（Hero Section）\n│   ├── 經歷時間軸（Experience Timeline）\n│   ├── 獲獎紀錄與技能展示\n│   ├── 專案作品集網格\n│   ├── 專案詳情彈窗\n│   └── 圖片放大查看功能\n│\n├──  內容設定\n│   └── 單一設定檔（使用者只需修改此檔案）\n│\n└──  部署選項\n    ├── Cloudflare Pages（目前使用）\n    ├── Vercel\n    ├── Netlify\n    └── GitHub Pages\n","text",[910,1390,1387],{"__ignoreMap":176},[10,1392,1393],{"id":1393},"專案價值與影響",[14,1395,1396],{},"這個專案帶來的實質價值：",[256,1398,1399],{"id":1399},"解決真實需求",[32,1401,1402,1408,1414,1419],{},[35,1403,1404,1407],{},[113,1405,1406],{},"降低門檻","：讓不懂程式的高中生也能擁有專業作品集網站",[35,1409,1410,1413],{},[113,1411,1412],{},"提升效率","：從構思到上線只需幾小時，不用數週學習建站",[35,1415,1416,1418],{},[113,1417,918],{},"：現代化設計提升個人形象，增加申請競爭力",[35,1420,1421,1424],{},[113,1422,1423],{},"持續更新","：隨時可以新增或修改內容，保持最新狀態",[256,1426,1427],{"id":1427},"教育意義",[32,1429,1430,1436,1442],{},[35,1431,1432,1435],{},[113,1433,1434],{},"回歸本質","：幫助學生專注於內容品質，而非技術障礙",[35,1437,1438,1441],{},[113,1439,1440],{},"展現優勢","：透過結構化呈現，有效凸顯個人特質與成果",[35,1443,1444,1447],{},[113,1445,1446],{},"反思成長","：特別設計的反思區塊，引導學生思考學習歷程",[256,1449,1450],{"id":1450},"可擴展性",[32,1452,1453,1459,1465],{},[35,1454,1455,1458],{},[113,1456,1457],{},"彈性客製","：可依需求調整所有文字標籤與內容結構",[35,1460,1461,1464],{},[113,1462,1463],{},"多元應用","：不只高中生，各階段求學或求職都能使用",[35,1466,1467,1469],{},[113,1468,1182],{},"：支援多種免費部署平台，零成本上線",[256,1471,1472],{"id":1472},"實際應用",[32,1474,1475,1481,1487],{},[35,1476,1477,1480],{},[113,1478,1479],{},"大學申請","：作為備審資料的線上補充，展現完整學習歷程",[35,1482,1483,1486],{},[113,1484,1485],{},"面試輔助","：提供給面試教授的參考連結，留下專業印象",[35,1488,1489,1492],{},[113,1490,1491],{},"個人品牌","：建立個人數位形象，累積作品集",[10,1494,1495],{"id":1495},"使用方式",[256,1497,1498],{"id":1498},"三步驟快速上線",[14,1500,1501],{},[113,1502,1503],{},"步驟 1：填寫個人資料",[32,1505,1506,1509,1512],{},[35,1507,1508],{},"開啟專案中的設定檔",[35,1510,1511],{},"填入姓名、學校、自我介紹等基本資料",[35,1513,1514],{},"就像填寫線上表單一樣簡單",[14,1516,1517,1520],{},[113,1518,1519],{},"步驟 2：新增內容","\n設定檔包含以下區塊，依需求填寫：",[32,1522,1523,1526,1529,1532,1535],{},[35,1524,1525],{},"個人資訊：姓名、學校、目標科系、個人特質",[35,1527,1528],{},"經歷時間軸：社團、競賽、志工等活動經歷",[35,1530,1531],{},"獲獎紀錄：各項得獎記錄（可附上證書圖片）",[35,1533,1534],{},"專業技能：程式語言、工具、語言能力等",[35,1536,1537],{},"專案作品：詳細說明每個專案的內容與反思",[14,1539,1540],{},[113,1541,1542],{},"步驟 3：上線分享",[32,1544,1545,1548,1551],{},[35,1546,1547],{},"使用免費部署平台（如 Cloudflare Pages）",[35,1549,1550],{},"一鍵發布，立即取得專屬網址",[35,1552,1553],{},"分享給教授、學校或寫在申請資料中",[256,1555,1556],{"id":1556},"圖片處理",[32,1558,1559,1562,1565],{},[35,1560,1561],{},"可使用網路圖片連結",[35,1563,1564],{},"或將圖片放入專案資料夾後引用",[35,1566,1567],{},"證書、獎狀、專案截圖都能輕鬆展示",[256,1569,1423],{"id":1423},[14,1571,1572],{},"隨時可以回到設定檔修改內容，更新會立即反映在網站上，保持作品集的最新狀態。",[1574,1575],"hr",{},[545,1577,1578,1582,1587],{},[14,1579,1580],{},[113,1581,551],{},[14,1583,1584,1585],{},"如果你是學校老師或輔導室，想為學生引進這套系統；或是教育單位想合作開發類似工具，歡迎聯絡我：",[562,1586,565],{"href":564},[14,1588,1589],{},"我很樂意討論如何幫助更多學生用科技展現自己的優勢，順利邁向理想的升學目標！",{"title":176,"searchDepth":177,"depth":177,"links":1591},[1592,1593,1594,1602,1603,1609,1610,1615,1616,1622],{"id":12,"depth":177,"text":12},{"id":247,"depth":177,"text":248},{"id":254,"depth":177,"text":254,"children":1595},[1596,1597,1598,1599,1600,1601],{"id":936,"depth":576,"text":937},{"id":966,"depth":576,"text":967},{"id":995,"depth":576,"text":996},{"id":1025,"depth":576,"text":1026},{"id":1055,"depth":576,"text":1056},{"id":1097,"depth":576,"text":1097},{"id":348,"depth":177,"text":348},{"id":1186,"depth":177,"text":1186,"children":1604},[1605,1606,1607,1608],{"id":1189,"depth":576,"text":1189},{"id":1195,"depth":576,"text":1195},{"id":1218,"depth":576,"text":1218},{"id":1247,"depth":576,"text":1247},{"id":1270,"depth":177,"text":1270},{"id":500,"depth":177,"text":500,"children":1611},[1612,1613,1614],{"id":1312,"depth":576,"text":1312},{"id":1335,"depth":576,"text":1335},{"id":1364,"depth":576,"text":1364},{"id":1381,"depth":177,"text":1381},{"id":1393,"depth":177,"text":1393,"children":1617},[1618,1619,1620,1621],{"id":1399,"depth":576,"text":1399},{"id":1427,"depth":576,"text":1427},{"id":1450,"depth":576,"text":1450},{"id":1472,"depth":576,"text":1472},{"id":1495,"depth":177,"text":1495,"children":1623},[1624,1625,1626],{"id":1498,"depth":576,"text":1498},{"id":1556,"depth":576,"text":1556},{"id":1423,"depth":576,"text":1423},{"shortDesc":1628,"published":190,"category":191,"tags":1629,"projectType":198,"completedDate":1632,"featured":190,"thumbnail":1633,"links":1634,"techStack":1636,"order":1641},"為高中生量身打造的申請入學作品集網站，展現個人特質、經歷與專案成果",[813,814,815,1630,1631],"Responsive Design","Education","2025.12","/images/portfolio-manager-1.png",{"demo":1635,"github":201,"figma":201},"https://portfolio-demo-c6m.pages.dev/",[821,1637,1638,1639,1640],"TypeScript 5.8","Vite 6.2","Lucide React","TailwindCSS 風格設計",4,"/projects/portfolio-manager",{"title":831,"description":176},"projects/portfolio-manager","0XFpArbwmSueGJ8Q6vjZZrd9xqBei_H2z0ngbM4xMTM",1775654729683]