已推出網站開發2026

Mining Hair網站

營運中髮廊網站的設計及全端開發。以攝影為主的介面結合響應式版面、動態圖庫及Next.js可編輯內容系統。

客戶專案
已上線網站

產品體驗

我們設計並開發Mining Hair官方網站，現正營運中。首頁採滿版照片、粗體文字與共用導覽。Next.js和React組織頁面；Tailwind CSS提供符合視窗的版面、分層元素及隨畫面縮放的字體。下方截圖展示介紹、移動圖庫、影像檔案庫及互動評論場景的實作。

關於區塊：肖像、分層文字及黏附版面 — 關於 — Next.js Image顯示肖像，Tailwind CSS結合黏附視窗、分層文字及響應字體。訪客捲動時，影像與文字在區塊中移動。

照片卡片水平移動的Gallery Snippets區塊 — Gallery Snippets — GSAP讓複製的卡片軌道連續循環，版面改變時重算距離。CSS轉場於滑鼠停留或鍵盤焦點切換卡片照片；選取卡片開啟該圖庫分類。

Mining Hair網站圖庫網格及分類導覽 — 圖庫 — React管理分類選取，每頁載入12張影像。Tailwind CSS安排響應網格，Next.js Image搭配載入佔位及停留轉場。

含插畫全景及角色控制的Street Notes評論區塊 — Street Notes — CSS黏附視窗將插畫場景保持於畫面。分層背景與角色按鈕構成介面，可切換街道、移動場景及開啟評論。

你可以做什麼

首頁與關於：響應字體、分層照片及黏附區塊版面。
Gallery Snippets：GSAP循環、影像轉場及篩選圖庫連結。
圖庫：分類篩選、分頁載入及響應影像網格。
Street Notes：含角色按鈕與場景導覽的插畫全景。
內容管理：行內文字編輯、影像上傳及伺服器儲存。

如何運作

伺服器準備初次顯示的核心內容，再與客戶端內容狀態共享。編輯要求經伺服器API，Prisma將區塊內容存入PostgreSQL。Redis快取讀取結果；儲存區塊會清除相關快取，使後續讀取更新內容。

隱私與本機營運方式

公開瀏覽與內容編輯職責分開。編輯控制出現於管理員模式，儲存API也檢查管理員工作階段。交付包含訪客設計及營運者內容流程。

發佈狀態

網站於mininghair.com上線。此處影像是營運網站的截圖。本案例介紹實作、架構及設計。

繼續探索

Review Scout

用於儲存Amazon評論、比較產品，並返回各項結果背後原始評論的Chrome擴充功能。評論資料留在你的瀏覽器中。

Abyss Survivor: Cyber Rogue

Android太空生存遊戲。閃避敵艦、在每輪遊戲中升級武器，並於任務間打造艦隊。已在Google Play推出。