Una Liu · Dimflower 幽花
- Client
- Una Liu / Dimflower 幽花 (wedding & pre-wedding photographer, Taiwan)
- Year
- 2021–2023 (maintained to 2025)
- Role
- Design, front-end, WordPress back end, deployment (solo, freelance)
- Stack
- Nuxt 3, GSAP ScrollTrigger, Locomotive Scroll, Swiper, Plyr, headless WordPress
- Link
- unaliu.love
A wedding photographer's site has one job: let the photos carry the emotion and get out of the way. I designed and built the whole thing for Una, from layout and type to the WordPress back end and the server it runs on. The first version was designed in 2021; in 2022 I rebuilt it as a full Nuxt + headless WordPress site.
婚攝的網站只有一個任務：讓照片說話，介面不要搶戲。這個網站從版面、字體，到 WordPress 後台和主機部署，全部由我一個人設計和製作。第一版在 2021 年設計，2022 年再重新製作成完整的 Nuxt + headless WordPress 網站。
Stories as editorial spreads
Each wedding story reads like a magazine feature. The page uses opening quotes, full-bleed images, an epilogue and links to the stories before and after it. It also has its own video player, so films sit inside the story instead of in a YouTube embed.
每一場婚禮故事都像一篇雜誌專題：開場引言、滿版照片、後記，還能連到前後篇故事。影片用自己做的播放器嵌在故事裡，不是直接貼 YouTube。
Small interactions
• A custom cursor using mix-blend-mode: exclusion. It inverts against whatever photo it passes over and changes on hover. • Story cards come alive as they cross the centre of the screen, with separate trigger zones for desktop and mobile. ScrollTrigger is bridged to Locomotive Scroll so this works with smooth scrolling. • The loading screen waits for the images to load, so the first view is never half-loaded.
• 自訂游標用 mix-blend-mode: exclusion，經過照片時會反色，hover 時改變狀態。 • 故事卡片滑到畫面中央時才啟動，桌機和手機各有不同的觸發範圍。ScrollTrigger 和 Locomotive Scroll 接在一起，平滑捲動下也能正常運作。 • Loading 畫面會等圖片載完才結束，第一眼不會看到半載入的頁面。
Built to be run by the client
Packages are their own content type, so Una can update pricing without asking. The contact page has a booking form with a date picker.
方案是獨立的內容類型，Una 可以自己改價格，不用來問我。聯絡頁有附日期選擇的預約表單。