WebberUI
English

開發者作品集

個人/開發者作品集整站：Hero、精選專案、關於、技能、聯絡

Pro行銷portfolio7 個區段
看實機展示查看方案

安裝

npx webberui@latest add "https://webberui.com/r/developer-portfolio.json?t=<安裝 token>"

整頁原始碼會落在 app/templates/developer-portfolio/。也可以改用長效授權金鑰：在 components.json 的 registries 設定 Authorization: Bearer <key>，適合 CI 或多人共用的專案。使用範圍見授權條款。

包含的區段

同一套模板內的區段共用設計 token，所以抽換、重排之後配色、間距與動畫節奏仍然一致。可在區段組裝器裡挑選組合。

  1. 1

    導覽列與主視覺

    黏性導覽列搭配逐字浮現的標題、接案狀態徽章與雙行動按鈕，構成自足的作品集開場。

    hero
  2. 2

    精選專案

    六件代表作以漸層縮圖與模擬視窗呈現，滑過即展開說明、技術標籤與關鍵成效數字。

    gallery
  3. 3

    關於我

    人物色塊搭配浮動標籤與三段自述，並以四格數據總結年資、專案量與社群影響力。

    content
  4. 4

    技能與工具箱

    前端、後端與基礎設施三大類技能以進度條呈現熟練度，下方附上日常工具標籤雲。

    features
  5. 5

    經歷軌跡

    左右交錯的時間軸串起四段職涯，中軸線隨捲動漸進點亮並列出各階段亮點。

    timeline
  6. 6

    合作邀約

    帶光暈與網格背景的置中行動呼籲卡片，主打漸層標題與電子郵件聯絡按鈕。

    cta
  7. 7

    頁尾

    品牌標記與自我介紹，搭配導覽連結、社群連結與版權說明。

    footer

一套 React 開發者作品集模板：一頁包含主視覺、精選專案、關於我、技能、經歷時間軸與聯絡區。以 Next.js App Router、Tailwind CSS 與 Motion 製作，內容全部來自 page.tsx 裡的資料陣列。

適用情境

  • 前端或全端工程師的個人網站
  • 求職時附在履歷上的作品集
  • 接案開發者展示專案與聯絡方式的頁面
  • 設計工程師或技術顧問的個人品牌頁

拿到後要改哪裡

  1. 把 `PROJECTS` 陣列換成你的專案：標題、角色、年份、描述、技術標籤與成效數字；專案卡用 `gradient` 與 `MockWindow` 畫示意畫面，可改成你的截圖。
  2. 技能與熟練度在 `SKILL_CATEGORIES`（每項有 `level` 數值），工具清單在 `TOOLBOX`，經歷時間軸在 `EXPERIENCES`。
  3. 主視覺標語是 `HERO_LINE_1` 與 `HERO_LINE_2` 兩個陣列，「關於我」的數字在 `STATS`。
  4. 聯絡區的 `mailto:` 信箱與 `SOCIALS` 裡的 `#` 連結要換成你自己的信箱、GitHub 與社群網址。

收錄於開店套件

套件把這套模板連同相關元件、SEO 骨架與台灣在地欄位打包成一條安裝指令。

你拿到的是原始碼

不是 npm 套件、不是 zip 檔。安裝之後整頁的 TypeScript 原始碼就在你的 repo 裡，可以任意修改、無執行期相依、沒有到期失效機制——我們的網站故障不會影響你已上線的網站。

瀏覽其他 103 套模板 →