網站又改版啦～這次首頁變成一座可以逛的小島
關於這篇筆記
又改版了
上次改成 Astro 的時候說 這次改完後應該不會再改了…吧
嗯…果然還是改了 啊哈哈哈哈
起因
回頭看看自己的首頁…一直都是文章列表 XD
之前的待辦事項還寫著「首頁內容 (目前先用文章列表撐下場面)」，結果這一撐就撐了三年 囧
剛好這幾年做了一些 side project，App、小遊戲、小工具都有，用列表排一排總覺得少了點什麼
想說首頁乾脆來做個可以玩的吧，那就整個打掉重做，反正舊的都還在 git 裡 怕什麼(?
要做成什麼樣子
一開始做出來的版本比較像是一般的作品集網頁，可是我想要的是滿版、像遊戲那樣可以走來走去探索的 3D 啊…
後來就決定做成一座小島，有種逛進我個人小世界的感覺，作品在工坊、文章在筆記屋、鐵人賽有頒獎台，朋友的部落格就插個路標在海邊
然後一定要有一些小互動，像是走到長椅旁邊可以坐下來休息一下，不然只是走來走去也蠻無聊的
不過也不是每個人都想玩，所以歡迎卡上還是有留「看作品」、「讀筆記」可以直接點進去，不用逛一圈才找得到文章
頁仔誕生記
既然要走來走去，就需要一個角色
因為這裡一直都是在寫筆記嘛，所以就做了一隻書頁精靈，叫頁仔
第一版出來的時候，頭整個就像一片吐司 笑死 XDD
接著頭上加了迴紋針、包包改斜背，加完又覺得包包已經有了 迴紋針就拿掉，改成頭頂的紙折一個角
結果最麻煩的就是這個折角…
跑步的時候折角要飄起來，但做出來一直都很死板，完全沒有紙在飄的感覺，改了好幾次都不對
後來找到一篇 Page Curl Shader 的文章寫得蠻好的，才終於把它弄得比較像一張紙捲起來
中間還一度想說改成動森那種風格好了，改完…嗯 太圓了 反而沒有紙的感覺，又改回來 QQ
還有手腳比例、包包被腿吃掉、鞋子跟腳分家… 一堆小細節一直喬，做角色真的好難啊
內頁也要改
首頁改完後點進文章，整個風格差太多了，很突兀
所以內頁也一起改了，首頁是拿來玩的，文章頁就安靜一點 好好讀文章就好
深色模式有留著，順便跟小島的晚上綁在一起，筆記頁切深色，回首頁小島也會變晚上，燈籠還會亮起來 嘿嘿
404 頁也放了頁仔，原本是想做那種崩潰抱頭的感覺，結果手一直抱不到頭… 改了 N 次 XD
跟 AI 一起做
這次整個都是跟 AI 一起做的，先用 Codex 討論方向、畫頁仔、做出雛型，後面再用 Claude Code 修細節
不過一開始就有先講好，AI 是來幫忙的，這個專案最後還是要我自己看得懂、自己改得動才行
所以要用 TypeScript、都用 Tailwind 了就不要再一直寫死 CSS、常改的文字都放在 src/data/ 裡，以後要改字就不用跑去翻 3D 的程式了
說真的 code 交給 AI 寫很快，但頁仔可不可愛、走起路來順不順，還是只能自己一直看一直嫌 XD
使用技術
Astro 7、Three.js、Tailwind CSS v4、TypeScript
Astro 也順便從 5 直接跳到 7，舊的漫畫風版型、用不到的元件也一併清掉了
這次改完應該…不會再改了吧 XDDD
有空的話，歡迎到首頁陪頁仔逛逛～
留言