Ray C的沙龍
首頁
短篇奇幻收錄
專案設計 & 開發日誌
關於
專案設計 & 開發日誌
11
公開內容
嗯... 就把專案設計和開發的紀錄放在這邊吧!
全部
全部內容
免費與付費
最新發佈優先
Ray 🌿
2023/01/14
Pokédex|寶可夢圖鑑
在 Instagram 看到有人分享在日本操作機器、製作寶可夢客製化衣服的貼文,聯想起先前在網上閱讀到關於 Pokémon API 的文章,一時興起也使用 PokeAPI 仿刻貼文中機器的操作介面。然而在開發過程中,發現連續抓取 905 份寶可夢資料...
#
寶可夢
#
開發
#
程式
7
留言
Ray 🌿
2022/04/03
Astro Color Picker|使用框架 Astro 打造的色票複製工具
去年看到 Astro 剛發布時所宣稱的「用較少的 JavaScript 打造極速網站」就對這樣的框架產生興趣,那時雖然也試玩了一下,不過因為遇到一些開發初期的 bug 放棄研究。直到近期拿過去使用 petite-vue 開發的專案 — HTML Reserved Colors 來透過 Astr...
#
設計
#
平面設計
#
程式設計
5
留言
Ray 🌿
2022/03/25
Zipcy Collector|自動儲存 8,888 張 Zipcy's SuperNormal NFT 圖片
2021 年可以說是 NFT 大爆發的一年了,除了名人相繼創立自己的 NFT,也有各式各樣的商業模式和額外賦能不停的被開發出來;像是主打邊玩邊賺的 (Play-to-Earn,P2E) GameFi 項目「Axie Infinity」、擁有即可兌換一天一碗且連續七天雞肉飯的「元宇宙第一雞肉飯」...
#
NFT
#
元宇宙
#
藝術
20
留言
Ray 🌿
2022/03/25
Infinite Mondrian Art|無限生成的蒙德里安色塊
2022 年 1 月的一個假日,閒逛於誠品書局,看到了皮特·蒙德里安 (Piet Mondrian) 的周邊商品 – 蒙德里安變色馬克杯 (Mondrian Color Changing Mug) 和 蒙德里安收納包,其簡潔優雅的藝術風格立刻攫住我的目光。經調查得知,身為印象派/幾何抽象畫派先...
#
設計
#
平面設計
#
程式設計
2
留言
Ray 🌿
2022/03/25
HTML Reserved Colors|可用於設計和幫助開發的色票複製工具
雖然知道可以透過 HTML 的 red, white, black 等顏色單字而非色票 (color code) 來使用顏色,一直以來開發上都是在找好適合的顏色後,使用 Sass 將色票紀錄到變數再做使用,不過最近接觸到 w3schools 的 HTML Color Names 才知道有將近...
#
設計
#
程式設計
#
產品設計
2
留言
Ray 🌿
2022/03/25
Horizontal Scrolling Theater|互動效果豐富的橫向捲動電影院
以前就想過要做一個展示電影的頁面,這次使用 Vue 3 搭配 GSAP,並結合自己收藏的 46 部藍光電影所做成的 API 做串接,達成能夠橫向捲動的電影購物頁面。實作上,除了藉由 CSS 屬性 `relative` 搭配 GSAP 來調整元素的 `left` 值來實現橫向捲動的功能,另外在點...
#
設計
#
平面設計
#
程式設計
喜歡
留言
Ray 🌿
2022/03/25
Ray Chang Space|支援 Markdown 內容管理系統的作品集網站
我始終認為,設計與開發是一體兩面,設計本是為開發而存在,開發也是為了完成設計,兩者相輔相成、互相影響。因此在網站首頁中,使用建築圖與對設計和開發的解釋,表現自己在前端學習上,執著於兼顧清晰的設計與流暢的開發;網站設計上,我以報紙風格做為基礎,使用噪點填充背景以實現擬似紙張的質感,加入平滑滾動與...
#
程式
#
設計
#
平面設計
3
留言
Ray 🌿
2022/03/25
Ghibli Gallery|重新設計吉卜力工作室作品相簿
2020 下半年在全世界仍受到冠狀病毒肆虐期間,吉卜力工作室在官網四次公開合計 24 部動畫作品、共 1,178 張高畫質劇照,表示在未觸法的情形之下可自由下載使用,並且還會持續釋出過去動畫作品的劇照。由於官網的劇照呈現方式不太友好,也未在移動裝置上做排版優化,加上分批公開的作品劇照未整合在一...
#
設計
#
平面設計
#
程式設計
喜歡
留言
Ray 🌿
2022/03/25
Vite Todo|使用 Vite 和 Tailwind 打造的待辦事項清單
這次的專案為六角學院在 2021 年疫情期間舉辦的「程式體驗營」最終作業,其中使用了最近接觸的 Vite 作為專案開發和打包的工具,以及因為對 Utility-First CSS 頗感興趣,將 Tailwind 納入專案並初次使用它做開發...
#
設計
#
程式設計
#
產品設計
喜歡
留言
Ray 🌿
2022/03/25
Vanilla Calculator|立即顯示結果的優雅計算機
我並非這美術設計的原創,不過得益於 Instagram 上 @uixperience 的作品參考,才實現了這優雅計算機的外觀。在互動的部分,我讓按鍵在按下時減少陰影,並加深按鍵背景的顏色,這樣就像是真的被按了下去一樣;另外,在顯示計算結果的部分,透過 JS 增減 CSS class 的方式隨時...
#
設計
#
平面設計
#
產品設計
2
留言