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