[v] 可視寬度左右邊的padding [v] 設計理念的 btn 顏色跑掉，btn 字體大小參考文件：https://vuetifyjs.com/...
身為台北小小公司的小小社畜，每天花近3個小時通勤，好不容易（真的好不容易）這段時間可以常駐台北，省去大把通勤時間，要拿來做什麼呢？不可能都拿來滑手機、追劇吧，身...
設定這麼多 SEO的內容，那 google 真的就可以搜尋到我的網站了嗎？哇～我發現沒有耶～以下可以確認： 1. 網站可以公開訪問 是公開的不需要登入的網站，g...
昨天已經安裝了 sass 和 sass-loader，這兩個就是 Nuxt/Vue 專案使用 SCSS（Sass）的必要套件。 在 /assets/scss 資...
這一個月來我做了什麼： 前置規劃 思考整體資訊架構、CIS 色彩、UI 排版 Figma - 從線稿到 mockup 單一專案作品集呈現，想要傳遞的內容 &g...
每個 project-card 都需要以下資訊： 我希望「上次更新時間」能隨著 GitHub repo 的 commit 更新而自動同步。當我每次推送新版本（p...
在 Github 部署後每一次都要手動 npm run generate 和 npm run deploy 才會部署上線，但其實也可設定 GitHub Acti...
今天的挑戰聚焦在 Contact 區塊，除了排版之外，也開始進入表單設計。版面配置延續整體風格：電腦版使用 雙欄式，手機版則轉為 單欄垂直排列，確保在不同裝置上...
首先，要先確保電腦有裝環境有 node.js，要 20.x 或更新才可以安裝 nuxt （當不同專案使用不同的 node 版本時，可以用 nvm 來切換 nod...
本來就一直想要做一個屬於自己的作品集網站，剛好趁著這次鐵人賽的機會和挑戰，用 30 天的時間把它實現！ 但最難的其實不是寫程式，而是從「草稿」開始。要先規劃 U...
很常聽到前後端在講一些關於部署上線的專有詞彙，今天想把這些詞彙定義整理起來。 本機開發程式碼專案→打包→部署上線 我在 Nuxt 或 Vue 專案裡寫了很多東...
這個功能是：使用者按下送出表單後，可以自動將內容寄送到我的 email ，以便收到新訊息通知。通常會透過後端提供整合 api 來串接實作，但我不會後端，所以希望...
此專案會使用 vuetify UI 套件去改寫各個元件，今天要做的元件是 Header。 官方文件：https://vuetifyjs.com/en/compo...
在 Projects 區塊中，每個專案都會以卡片形式展示。隨著專案數量逐漸增加，若全部一口氣呈現，區塊會過於冗長，影響閱讀體驗。為了避免這種狀況，設計上加入了展...
目標 打造一個線上履歷作品集網站，讓面試官能快速理解我的定位、技能、專案成果與聯絡方式，同時透過設計細節展現專業感。 內容架構 個人資料、學經歷 → 定位...
今天的目標是完成 技能區塊 (Skills Section) 的設計，呼應 Intro 中「故事 + 技能」的定位，讓讀者能更快掌握我的專業輪廓。 層次化分類...
網站裡圖片往往是最佔空間的資源，如果沒有處理，會拖慢載入速度、影響使用體驗。透過壓縮、Lazy Loading、自適應尺寸等方式，不僅能加快網頁載入，也能減少流...
目標：希望在google 搜尋我的名字時，可以出現我的作品集網站。 1. SEO 基本觀念 SEO（Search Engine Optimization）：...
昨天已建立的 skills.vue 檔案，並做好上半部的 work experience 和 softskills，今天是 Skills Section 的第二...
今天要完成 Project Section 的區塊，跟昨天的 Hardskills 建立元件的概念差不多。 主要切分成最外層的 project.vue （父元...
Day 15 的挑戰 focus 在 全站 RWD 檢查與微調。依序測試桌機、平板與手機版本，針對排版、字體、圖片大小與互動細節進行調整，確保在不同螢幕尺寸下都...
規劃 Intro Section 作為網站進入後的第一個重點區塊。此區塊主要透過簡短的自我介紹與背景故事，快速讓使用者理解我是誰、我的專業定位與核心價值。 1....
可以在正式上線的網頁中，按 F12 > Lighthouse，讓他對網頁進行效能檢查。檢查結果會有以下分類： 1. Performance 效能...
在表單設計裡，輸入框是最常出現的元件，但它同時也有許多變化，例如文字、數字、日期、多行文字等等。如果每一種情境都獨立寫一份程式碼，不僅會造成重複，更難以維護。這...
還記得在前段有設計 project-card 元件嗎？ 卡片上顯示專案名稱、我在其中所擔任的角色，並搭配設計概念與產品網址按鈕。角色定位以 hashtag 標...
記得在 project-card 上設計了兩個按鈕嗎？一個是「設計理念」，另一個是「產品網址」。希望「設計理念」按鈕點擊後，直接打開我在 Day 18 準備的內...
主要針對navbar進行微微動畫的設計： 1. 點擊 navbar 的 item，可以描點至該區塊 在navbar 的 item 加上點擊事件，並為每個區塊元件...
除了重複的區塊可以抽成元件外，最小的組成單元常見就是按鈕，它有很多不同的狀態，透過抽離成獨立元件，能確保整體介面的一致性與邏輯可維護性。 常見的基礎元件包含：...
huahaubuhau
iThome鐵人賽
看影片追技術