關於將軍的首頁
這個部落格從設計到刻出整個網頁，花了我整整一個禮拜做出來的。 這次我使用 Next.js 搭配 Tailwind CSS 製作整個網站（雖然首頁幾乎都是手搓css），並且部落格的地方特別設計可以使用 MDX 撰寫， 讓文章可以用 Markdown 格式撰寫的同時，在有需要時也可以嵌入 React 組件。
在首頁的視覺效果中，~~可以看到一些頭皮屑在飛~~實際上是雪花效果，這部分是透過 react-snowfall 這個套件實作的，
主要只是作為背景裝飾，不會影響主要內容的閱讀。
npm i react-snowfall
另外在下方的資訊卡片中，有一個使用 WebGL 渲染的地球，雖然效能上不是很理想，但整體效果還在可以接受的範圍內，所以最後還是選擇保留下來。
npm i cobe
同一區塊的左下角資訊卡，顯示的是我實際累積的程式開發時間， 是最近 60 天內的 coding 時數（還是 45 天我忘了），他每個小時會自動更新一次， 可以很直觀的知道有沒有在偷卷。
在視覺風格上，我使用了帶有透明感與模糊效果的玻璃質感設計， 靈感主要來自 Apple（iOS 26 / macOS 26 系列）系統更新中常見的 UI 風格。 網站的主色調選擇紅色，就只是單純喜歡， 所以我將整個網站都圍繞這個配色去調整文字與光影層次。
關於將軍的部落格
這個部落格算是整個網站裡，互動和動態效果最多的地方。 除了主要內容以外，我在最不會被注意到的動態效果中花了最多時間。 可以看到頭貼下方的 bio 文字並不是固定的， 每隔一段時間就會自己換內容（我可能會心血來潮更新新的內容）。
在UI動態上，導覽列（navbar）也有做額外的行為處理。 在使用者往下滑動時，navbar會自動隱藏，減少畫面被佔用的空間ㄤ 而往上滑動則會再次顯示，確保操作時不需要特地拉回最上方。 這部分主要是透過監聽 scroll 行為，搭配簡單的狀態判斷來完成。
在頁面跳轉的體驗上，花了很多時間處理滾動位置的問題。 當從列表或其他頁面點進文章時， 畫面會自動捲動到對應的內容區塊附近， 同時也會避開固定的 navbar 高度， 避免標題或內容被導覽列遮住。
將軍頭貼
我知道一定有人對這個頭貼很有意見，所以教學來了：
下面就是我實際使用的日式將軍風格 prompt，可以把自己或是旁邊損友的照片和指令直接複製給 ChatGPT 生成。
prompt: Depict me wearing the costume of Emperor Hirohito from Japanese history, incorporating the clothing design seen in Mobile Legends. Create his signature pose, characterized by stark cinematic lighting and intense contrast.Captured with a slightly low, upward-facing angle that dramatizes the subject's jawline and neck, the composition evokes quiet dominance and sculptural elegance. The background is a deep, saturated crimson red, creating a bold visual clash with the model's luminous skin and dark wardrobe.Lighting is tightly directional, casting warm golden highlights on one side of the face while plunging the other into velvety shadow, emphasizing bone structure with almost architectural precision. The subject's expression is unreadable and cool-toned-eyes halt-lidded, lips relaxed-suggesting detachment or quiet defiance. The model wears a heavy wool or felt overcoat, its texture richly defined against the skin's smooth, dewy glow. Minimal retouching preserves skin texture and slight imperfections, adding realism.Editorial tension is created through close cropping, tonal control, and the almost oppressive intimacy of the camera's proximity. There are no props or accessories; the visual impact is created purelythrough light, shadow, color saturation, and posture-evoking high fashion, contemporary isolation, and hyper-modern masculinity. Make the face and hairstyle as similar as possible to the one in the photo. Make the costume highly detailed and realistic.Maintain the same hairstyle and color. and use similar colors and textures
講完了，下次見。