iT邦幫忙

2025 iThome 鐵人賽

DAY 27
0
自我挑戰組

《運用通勤時間打造線上履歷作品集:30 天 Nuxt 自我挑戰》系列 第 27

Day 27 最後的 UI 打磨(字體、間距、對齊、設計一致性)

  • 分享至 

  • xImage
  •  
  • [v] 可視寬度左右邊的padding

  • [v] 設計理念的 btn 顏色跑掉,btn 字體大小
    參考文件:https://vuetifyjs.com/en/api/v-btn/,發現有props - size 可以使用,就不用手動調整文字大小了

  • [v] CIS 顏色對比度
    Lighthouse 有提示我顏色對比度不夠,參考文件:https://color.adobe.com/zh/create/color-contrast-analyzer,可以知悉對比率

  • [v] 英文字體要粗一點

  • [v] favIcon
    放在 /public 中,記得更改 nuxt.config.ts 的 icon href

  • [v] 自我介紹圖片

  • [v] 作品集區域封面

  • [v] github api 重新連接

  • [v] contact dialog toolbar

  • [v] 聯絡我可否發出email

  • [ ] EmailJs 設定網域?
    Account > Security > Domains 可以設定,但要 upgrade 帳號Q

  • [v] 解掉 Warning
    https://ithelp.ithome.com.tw/upload/images/20251010/20178581df23kjc8ac.png
    GPT 說是因為用 Nuxt(或 Vue SSR) 時,畫面初次是由伺服器產生靜態 HTML,當伺服器輸出的結構和前端執行的不一樣時,就會出現警告。
    原因是因為 NavBar 有判斷手機版才會出現 menu icon 和 drawer….但伺服器端不知道….

    <ClientOnly>
    	<Navbar />
    </ClientOnly>
    

    因為這個導覽列屬於「前端互動 UI(非 SEO 關鍵內容)」,所以用最簡單的方式解。

  • [v] nuxt.config.ts 更新上部署網址


上一篇
Day 26 整合設計理念 PDF 頁面
系列文
《運用通勤時間打造線上履歷作品集:30 天 Nuxt 自我挑戰》27
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言