← Back to CV ← 返回履歷

Vibe Coding Portfolio Vibe Coding 作品集

A collection of web applications built using cutting-edge AI coding tools, exploring modern interfaces and seamless user experiences. 利用最新 AI 開發工具(Vibe Coding)打造的一系列現代化網頁應用程式,專注於精緻介面與流暢的使用者體驗。

📌 PINNED PROJECT 📌 首選推薦作品
Stock Radar UI Screenshot

📈 Stock Radar 5299

A high-performance real-time stock market analysis dashboard. It features advanced 15-minute K-line qualifications, volume/price trends, and automated news feed integrations for rapid decision-making. 一款高效能的即時股市分析儀表板。具備進階的 15 分 K 線量價檢核邏輯、即時報價清單與自動化個股新聞整合,協助投資人做出迅速且準確的決策。

  • Real-time Qualification Logic: Instantly screens stocks meeting specific volume and red candle criteria. 即時篩選邏輯: 瞬間篩選出符合爆量與紅 K 條件的優質強勢標的。
  • Dynamic News Feeds: Automatically updates related financial news for each stock card during trading hours. 動態新聞推播: 在盤中自動為每一檔焦點個股更新最新相關的財經新聞與快訊。
  • Premium Dark Dashboard: Beautifully crafted dark mode layout engineered for professional financial screening. 深色專業面板: 專為長時間盯盤與專業財經分析所打造的高級深色視覺設計。
Next.js / React Zeabur Deployment Financial APIs Vibe Coding
View Live Application → 檢視實際應用程式 →
Food Roulette UI Screenshot

🎡 Food Roulette

A fun and engaging web application that solves the classic "what should we eat" dilemma by randomly selecting nearby restaurants using the Google Places API. 一款充滿趣味的網頁應用程式,透過 Google Places API 隨機為您挑選附近餐廳,解決「今天吃什麼」的世紀難題。

  • Location-Based: Fetches precise real-time nearby restaurants based on your location and chosen radius. 精準定位: 根據您目前所在位置與指定半徑,抓取即時的高精準附近餐廳資料。
  • Price Filtering: Allows you to filter options by price tiers to match your budget. 價格篩選: 允許用戶透過內建的價格標籤篩選符合預算的餐廳。
  • Interactive Roulette: Features a playful spinning wheel that randomly picks your next meal, ensuring a surprise every time. 互動轉盤: 具備吸睛的視覺化互動式輪盤,為每一次的用餐選擇帶來樂趣與期待感。
HTML5 / CSS3 Vanilla Javascript Google Places API Vibe Coding
View Live Application → 檢視實際應用程式 →
When2Meet Clone UI Screenshot

📅 When2Meet Clone (Meetly)

A sleek and modern scheduling tool that makes coordinating meetings effortless. Built with an intuitive drag-and-select grid and heatmap visualization to find the perfect time for everyone. 一款現代化且充滿質感的排程工具,讓會議協調變得毫不費力。具備直覺的拖曳選取網格與熱力圖視覺化功能,幫助團隊輕鬆找出最佳會議時間。

  • Interactive Time Grid: Drag and select available time slots smoothly across days and hours. 互動式時間網格: 支援流暢的滑鼠拖曳,快速選取跨日期與跨區段的可用時間。
  • Availability Heatmap: Visually identifies overlaps in group availability using dynamic color gradients. 可用性熱力圖: 利用動態的漸層色彩,視覺化呈現所有參與者的共同空閒時段。
  • Responsive Design: Optimized for both desktop and mobile views, ensuring easy scheduling on the go. 完美響應式設計: 針對電腦與手機全面優化,隨時隨地都能輕鬆進行排程。
HTML5 / CSS3 Vanilla Javascript UI/UX Design Vibe Coding
View Live Application → 檢視實際應用程式 →