enfer.studio

網站設計與架設 · 2026

會動的網站

從設計到上線一手包辦:互動作品集、Shopify 商店,還有在背後撐起整個生意的工具。用拍片的眼光做網站:動態、字體,還有那些人們還沒注意到、就先感覺到的小細節。

做過作品集與品牌官網、Shopify 商店、網頁 App 技術HTML/CSS/JS、WebGL、Shopify Liquid、Cloudflare 包含設計、架設、文案、網域與主機設定 上線中這個網站 · trabear.com
01

enfer studio

作品集 · 從零打造 · 就是你正在看的這個網站

enfer studio home page with an LED-wall hero
enfer studio on a phone

網站本身就像它展示的作品。作品集影片透過即時運算的 LED 牆效果播放,會跟著游標反應;開場把字標變成 LED 燈點,再擴散到整個螢幕。

每個作品滑過就有預覽、往下捲就播放的起飛片段、可以拖動比較的商品圖、中英雙語,還有一步步填的詢價表單,送出幾秒內就推播到我手機。大影片只在網路快的時候才載入。

02

TRABEAR 商店

Shopify · 主題客製 · trabear.com ↗

TRABEAR Shopify home page
TRABEAR store on a phone
TRABEAR collection page with consistent product photos

一個古著品牌,從空白的 Shopify 帳號做到正式開店:品牌配色、logo、跑馬燈公告列、drop 頁面,還有每張照片風格一致的商品牆。

以 Shopify 的 Horizon 主題為底、直接改程式碼,店主之後要上新品、改價格、加商品,都不用碰任何一行程式。

03

TRABEAR 概念頁

首頁概念 · 即時生成 WebGL · 打開實際示範 ↗

TRABEAR concept landing page with a flowing line sculpture

品牌早期的一個方向:安靜、雜誌感的頁面,一座細線構成的雕塑在字標後面漂浮、摺疊。

形狀是即時生成的,會跟著游標走,所以每次打開都不一樣。打開示範頁,動一動滑鼠看看。

04

Shopify 案例頁

單頁案例 · 雜誌式排版 · case.trabear.com ↗

A one-page case study about building the TRABEAR store

一頁長篇,交代這家店是怎麼做出來的:負責什麼、用什麼平台和技術、花了多久,大部分交給截圖來說。

刻意用跟品牌本身不同的風格(松綠、冷色紙張、報紙襯線字),讓這頁讀起來像製作者的筆記,而不是廣告。

05

TRABEAR OS

網頁 App · 內部工具 · 不公開

Brand library screen
品牌素材庫
Brand colours screen
品牌顏色
Content results screen
貼文成效

品牌的後台:庫存與成本、Shopify/Grailed/eBay/Depop 的上架狀態、由買家訊息自動產生的待辦、每週報告,還有品牌素材庫,可以像 App 一樣裝在手機上。

架在 Cloudflare Workers 上,有資料庫和照片儲存,需要登入。這裡只放不含營業資料的畫面。