2021 年可以說是 NFT 大爆發的一年了，除了名人相繼創立自己的 NFT，也有各式各樣的商業模式和額外賦能不停的被開發出來；像是主打邊玩邊賺的 (Play-to-Earn，P2E) GameFi 項目「Axie Infinity」、擁有即可兌換一天一碗且連續七天雞肉飯的「元宇宙第一雞肉飯」...

創作

職場產業

國際

設計

專案設計 & 開發日誌

Ray C的沙龍

Zipcy Collector｜自動儲存 8,888 張 Zipcy's SuperNormal NFT 圖片

去年看到 Astro 剛發布時所宣稱的「用較少的 JavaScript 打造極速網站」就對這樣的框架產生興趣，那時雖然也試玩了一下，不過因為遇到一些開發初期的 bug 放棄研究。直到近期拿過去使用 petite-vue 開發的專案 — HTML Reserved Colors 來透過 Astr...

音樂藝文

學習

Astro Color Picker｜使用框架 Astro 打造的色票複製工具

我始終認為，設計與開發是一體兩面，設計本是為開發而存在，開發也是為了完成設計，兩者相輔相成、互相影響。因此在網站首頁中，使用建築圖與對設計和開發的解釋，表現自己在前端學習上，執著於兼顧清晰的設計與流暢的開發；網站設計上，我以報紙風格做為基礎，使用噪點填充背景以實現擬似紙張的質感，加入平滑滾動與...

Ray Chang Space｜支援 Markdown 內容管理系統的作品集網站

2022 年 1 月的一個假日，閒逛於誠品書局，看到了皮特·蒙德里安 (Piet Mondrian) 的周邊商品 – 蒙德里安變色馬克杯 (Mondrian Color Changing Mug) 和 蒙德里安收納包，其簡潔優雅的藝術風格立刻攫住我的目光。經調查得知，身為印象派/幾何抽象畫派先...

文化生活

Infinite Mondrian Art｜無限生成的蒙德里安色塊

以前就想過要做一個展示電影的頁面，這次使用 Vue 3 搭配 GSAP，並結合自己收藏的 46 部藍光電影所做成的 API 做串接，達成能夠橫向捲動的電影購物頁面。實作上，除了藉由 CSS 屬性 `relative` 搭配 GSAP 來調整元素的 `left` 值來實現橫向捲動的功能，另外在點...

電影戲劇

Horizontal Scrolling Theater｜互動效果豐富的橫向捲動電影院

2020 下半年在全世界仍受到冠狀病毒肆虐期間，吉卜力工作室在官網四次公開合計 24 部動畫作品、共 1,178 張高畫質劇照，表示在未觸法的情形之下可自由下載使用，並且還會持續釋出過去動畫作品的劇照。由於官網的劇照呈現方式不太友好，也未在移動裝置上做排版優化，加上分批公開的作品劇照未整合在一...

Ghibli Gallery｜重新設計吉卜力工作室作品相簿

我並非這美術設計的原創，不過得益於 Instagram 上 @uixperience 的作品參考，才實現了這優雅計算機的外觀。在互動的部分，我讓按鍵在按下時減少陰影，並加深按鍵背景的顏色，這樣就像是真的被按了下去一樣；另外，在顯示計算結果的部分，透過 JS 增減 CSS class 的方式隨時...

Vanilla Calculator｜立即顯示結果的優雅計算機

一開始的版本是和 Todo MVC 類似的簡易待辦事項清單，由於本身的使用需求，不斷調整和優化 Todo 清單的外觀與功能，如使用 SortableJS 做出拖拉排序、結合 LocalStorage 做出儲存機制、Markdown link 語法的支持，以及對 XSS 跨網站指令程式碼的防禦處...

Draggable To-Do List｜可拖曳的待辦事項清單

這次的專案為六角學院在 2021 年疫情期間舉辦的「程式體驗營」最終作業，其中使用了最近接觸的 Vite 作為專案開發和打包的工具，以及因為對 Utility-First CSS 頗感興趣，將 Tailwind 納入專案並初次使用它做開發...

Vite Todo｜使用 Vite 和 Tailwind 打造的待辦事項清單

雖然知道可以透過 HTML 的 red, white, black 等顏色單字而非色票 (color code) 來使用顏色，一直以來開發上都是在找好適合的顏色後，使用 Sass 將色票紀錄到變數再做使用，不過最近接觸到 w3schools 的 HTML Color Names 才知道有將近...

HTML Reserved Colors｜可用於設計和幫助開發的色票複製工具

嗯... 就把專案設計和開發的紀錄放在這邊吧！