- 登入
- 註冊
Vibe 畫布範本：個人履歷 / Portfolio
把你的職涯與作品一頁完整呈現，編輯雜誌風格的個人履歷 / Portfolio。本篇提供完整 HTML 範本與客製 prompt，可用於自由接案、求職、顧問服務、個人品牌頁。
這個範本有 9 個主要區段：Hero（大頭照 + 大字名 + 4 個 meta：地點/語言/可接案時間/遠端）、About（含首字下沉）、Services（4 個服務 + 交期 + 價格區間）、Skills（分 3 群：Core / Tools / Methods）、Experience timeline、Education、Selected Work（4 個作品）、Recommendations（4 則推薦語）、Press & Awards。配色採暖色米白 + burnished gold accent。
這個範本適合什麼情境#
- 自由接案者作品集：設計師、工程師、文案、攝影師接案頁
- 求職用線上履歷：取代 PDF 履歷，連結直接寄給 HR
- 顧問服務介紹：個人顧問、教練的服務頁
- 個人品牌頁：講師、KOL、創作者的官方 about 頁
怎麼用：3 個步驟#
- 複製下方的 prompt + code，兩段一起貼進 Claude（或 ChatGPT、Gemini 等 AI 助手）
- 跟 AI 說你的品牌資訊：填上 prompt 裡每個
____對應的內容（公司名、定位、各區段文案） - 把 AI 回給你的完整 code 貼進 Vibe 畫布的 HTML 區塊，儲存後就是你的客製化版本
預估時間：複製 1 分鐘、跟 AI 對話 10-20 分鐘（取決於品牌資訊準備程度）、貼回 Vibe 畫布並調整 5-10 分鐘。第一次完整跑完約 30-40 分鐘。
複製 1：Prompt（給 Claude / AI 的指令）#
這段 prompt 已經寫好給 AI 看的所有規格與限制，你只需要把 ____ 填入你的內容，AI 就能準確改造模板。
完整 Prompt
請幫我把下面這個個人履歷 / Portfolio 模板改成我的版本（保留結構，只改文案）。
【請替換的內容】
- 中文名 / English Name（hero 大字）：____
- 職稱・一句話定位：____
- Tagline（2-3 句自我介紹）：____
- 4 個 meta tag（Based in / Languages / Availability / Remote）：____
- About（3 段）：第一段職涯總結、第二段擅長解決的問題、第三段目前狀態：____
- 4 個服務（名稱 + 一段描述 + 交期 + 價格區間）：____
- Skills 3 群（Core 主力技能 3 個、Tools 工具 6 個、Methods 方法論 4 個）：____
- 經歷 3 段（年份 + 職位 + 公司 + 2-3 個量化貢獻）：____
- 學歷 / 訓練 3 條（年份 + 學位 / 證照 + 學校 / 機構）：____
- 4 個精選作品（年份 + 客戶 + 角色 + 兩句描述）：____
- 4 則推薦語（內容 + 推薦人姓名 + 職稱 + 公司）：____
- 4 筆獎項與媒體（年份 + 標題 + 媒體 / 頒獎單位）：____
- Contact CTA 副標：____
【可選色票調整】
- 主色（accent，預設 burnished gold #a07334）：____
- 米白背景（paper，預設 #f8f4ec）：____
- 暗墨色（ink，預設 #1c1917）：____
【技術要求 - 嚴格遵守】
1. 保留所有 class 名稱前綴 .snrs-
2. 保留 RWD 斷點 880px
3. 不引入外部字體或 JS library
4. 圖片 src 保留 placehold.co 連結
5. 結構性 HTML 標籤保留
6. 所有 em 標籤保留（這是 hero / h2 / contact 的強調字）
【模板 code】複製 2：模板 Code（給 Claude 改的素材）#
完整 HTML 模板，包含所有 scoped CSS 與內容區塊。複製後跟 prompt 一起貼進 AI 對話。
完整模板 Code
<style>
.snrs-wrap *,.snrs-wrap *::before,.snrs-wrap *::after{box-sizing:border-box;}
.snrs-wrap{
--ink:#1c1917;
--ink-mid:#44403c;
--ink-soft:#78716c;
--paper:#f8f4ec;
--paper-deep:#f0eadd;
--line:#e6dccb;
--accent:#a07334;
--accent-deep:#7d5926;
--accent-soft:#d4b88a;
font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Segoe UI",Roboto,sans-serif;
color:var(--ink);
background:var(--paper);
line-height:1.75;
-webkit-font-smoothing:antialiased;
font-feature-settings:"kern","liga","calt";
}
.snrs-wrap a{color:inherit;text-decoration:none;}
.snrs-wrap em{font-style:normal;font-weight:700;color:var(--accent);}
.snrs-wrap img{display:block;max-width:100%;height:auto;}
.snrs-serif{font-family:Charter,"Iowan Old Style","Hoefler Text",Georgia,"Songti TC","Noto Serif TC",serif;letter-spacing:-.015em;font-feature-settings:"kern","liga","onum";}
.snrs-container{max-width:1080px;margin:0 auto;padding:0 32px;}
.snrs-eyebrow{font-size:12px;font-weight:600;letter-spacing:.18em;color:var(--accent);text-transform:uppercase;display:inline-block;}
/* ─── Hero ─────────────────────────────────────────── */
.snrs-hero{padding:128px 0 96px;border-bottom:1px solid var(--line);}
.snrs-hero-inner{display:grid;grid-template-columns:1fr 1.4fr;gap:72px;align-items:center;}
.snrs-avatar{aspect-ratio:4/5;border-radius:2px;overflow:hidden;background:linear-gradient(135deg,#d4b88a 0%,#a07334 100%);position:relative;}
.snrs-avatar img{width:100%;height:100%;object-fit:cover;}
.snrs-avatar::after{content:"";position:absolute;inset:0;border:1px solid rgba(0,0,0,.06);}
.snrs-name{font-size:80px;font-weight:500;line-height:1;margin:24px 0 20px;letter-spacing:-.03em;}
.snrs-name em{font-weight:700;color:var(--accent);}
.snrs-title{font-size:18px;color:var(--ink-mid);margin:0 0 28px;line-height:1.5;letter-spacing:.005em;}
.snrs-tagline{font-size:18px;color:var(--ink-soft);max-width:480px;margin:0 0 40px;line-height:1.7;border-left:2px solid var(--accent);padding-left:20px;}
.snrs-cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.snrs-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;letter-spacing:.02em;border:0;}
.snrs-wrap a.snrs-btn-primary{background:#1c1917;color:#f8f4ec;}
.snrs-wrap a.snrs-btn-primary:hover{background:#a07334;color:#f8f4ec;}
.snrs-wrap a.snrs-btn-link{color:#1c1917;background:transparent;padding:13px 4px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--line);}
.snrs-wrap a.snrs-btn-link:hover{text-decoration-color:var(--accent);color:#a07334;}
/* ─── Section base ─────────────────────────────────── */
.snrs-section{padding:104px 0;border-bottom:1px solid var(--line);}
.snrs-section-grid{display:grid;grid-template-columns:200px 1fr;gap:64px;align-items:start;}
.snrs-section-label{position:sticky;top:32px;}
.snrs-section-num{font-family:Charter,Georgia,serif;font-size:14px;color:var(--accent);letter-spacing:.05em;font-feature-settings:"onum";}
.snrs-section-eyb{display:block;margin-top:6px;font-size:12px;font-weight:600;letter-spacing:.18em;color:var(--ink-mid);text-transform:uppercase;}
.snrs-h2{font-size:42px;font-weight:500;letter-spacing:-.025em;margin:0 0 36px;line-height:1.15;}
.snrs-h2 em{font-weight:700;color:var(--accent);}
/* ─── About ────────────────────────────────────────── */
.snrs-about p{font-size:17px;color:var(--ink-mid);margin:0 0 18px;max-width:640px;line-height:1.85;}
.snrs-about p:first-of-type::first-letter{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:64px;float:left;line-height:.85;padding:8px 14px 0 0;color:var(--accent);font-weight:500;}
.snrs-about-tags{display:flex;flex-wrap:wrap;gap:24px 36px;margin-top:32px;padding-top:32px;border-top:1px solid var(--line);}
.snrs-about-tag{display:flex;flex-direction:column;}
.snrs-about-tag-lbl{font-size:11px;letter-spacing:.18em;color:var(--ink-soft);text-transform:uppercase;margin-bottom:6px;}
.snrs-about-tag-val{font-family:Charter,Georgia,serif;font-size:16px;color:var(--ink);font-weight:500;}
/* ─── Services ─────────────────────────────────────── */
.snrs-svc-list{}
.snrs-svc{padding:28px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:60px 1fr 160px;gap:28px;align-items:start;transition:background .2s ease;}
.snrs-svc:first-child{border-top:0;padding-top:0;}
.snrs-svc-num{font-family:Charter,Georgia,serif;font-size:13px;color:var(--accent);letter-spacing:.05em;padding-top:6px;font-feature-settings:"onum";}
.snrs-svc-name{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:22px;font-weight:500;color:var(--ink);margin:0 0 6px;letter-spacing:-.015em;line-height:1.3;}
.snrs-svc-desc{font-size:14px;color:var(--ink-mid);margin:0;line-height:1.7;}
.snrs-svc-meta{font-size:13px;color:var(--ink-soft);text-align:right;line-height:1.6;letter-spacing:.02em;padding-top:8px;}
.snrs-svc-price{display:block;font-family:Charter,Georgia,serif;color:var(--accent);font-size:15px;font-weight:500;margin-top:4px;font-feature-settings:"onum";}
/* ─── Skills ───────────────────────────────────────── */
.snrs-skills-tags{display:flex;flex-wrap:wrap;gap:8px;}
.snrs-tag{font-size:13px;padding:9px 18px;background:var(--paper);border:1px solid var(--line);border-radius:999px;color:var(--ink-mid);letter-spacing:.02em;transition:all .15s ease;}
.snrs-tag-primary{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:500;}
.snrs-skills-group{margin-bottom:32px;}
.snrs-skills-group:last-child{margin-bottom:0;}
.snrs-skills-h3{font-family:Charter,Georgia,serif;font-size:13px;color:var(--accent);margin:0 0 14px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;}
/* ─── Experience ───────────────────────────────────── */
.snrs-job{padding:32px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:140px 1fr;gap:32px;}
.snrs-job:first-child{border-top:0;padding-top:0;}
.snrs-job:last-child{padding-bottom:0;}
.snrs-job-period{font-family:Charter,Georgia,serif;font-size:15px;color:var(--ink-soft);font-feature-settings:"onum";letter-spacing:.02em;line-height:1.5;}
.snrs-job-period em{font-style:normal;color:var(--accent);}
.snrs-job-title{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:24px;font-weight:500;color:var(--ink);margin:0 0 4px;letter-spacing:-.015em;line-height:1.3;}
.snrs-job-company{font-size:14px;color:var(--ink-soft);margin:0 0 14px;letter-spacing:.02em;}
.snrs-job-company em{font-style:normal;color:var(--accent);}
.snrs-job-desc ul{padding-left:0;margin:0;list-style:none;}
.snrs-job-desc li{margin-bottom:10px;color:var(--ink-mid);font-size:15px;line-height:1.7;padding-left:18px;position:relative;}
.snrs-job-desc li::before{content:"—";position:absolute;left:0;color:var(--accent);}
/* ─── Education ────────────────────────────────────── */
.snrs-edu-list{}
.snrs-edu{padding:24px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:140px 1fr;gap:32px;align-items:baseline;}
.snrs-edu:first-child{border-top:0;padding-top:0;}
.snrs-edu-year{font-family:Charter,Georgia,serif;font-size:15px;color:var(--ink-soft);font-feature-settings:"onum";letter-spacing:.02em;}
.snrs-edu-degree{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:19px;color:var(--ink);font-weight:500;letter-spacing:-.015em;margin:0 0 4px;}
.snrs-edu-school{font-size:14px;color:var(--ink-soft);margin:0;}
/* ─── Portfolio ────────────────────────────────────── */
.snrs-port-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:48px;}
.snrs-port-item{}
.snrs-port-img{aspect-ratio:4/5;background:linear-gradient(135deg,#d4b88a 0%,#a07334 100%);border-radius:2px;overflow:hidden;margin-bottom:20px;position:relative;transition:transform .3s ease;}
.snrs-port-item:hover .snrs-port-img{transform:translateY(-4px);}
.snrs-port-img img{width:100%;height:100%;object-fit:cover;}
.snrs-port-img::after{content:"";position:absolute;inset:0;border:1px solid rgba(0,0,0,.06);}
.snrs-port-num{font-family:Charter,Georgia,serif;font-size:13px;color:var(--accent);letter-spacing:.05em;}
.snrs-port-title{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:22px;font-weight:500;color:var(--ink);margin:8px 0 6px;letter-spacing:-.015em;}
.snrs-port-meta{font-size:13px;color:var(--ink-soft);margin:0 0 10px;letter-spacing:.02em;}
.snrs-port-desc{font-size:15px;color:var(--ink-mid);margin:0;line-height:1.7;}
/* ─── Recommendations ──────────────────────────────── */
.snrs-rec-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
.snrs-rec{padding-left:24px;border-left:2px solid var(--accent);}
.snrs-rec-quote{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:19px;color:var(--ink);line-height:1.6;margin:0 0 24px;letter-spacing:-.005em;}
.snrs-rec-author{display:flex;align-items:center;gap:14px;}
.snrs-rec-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#d4b88a 0%,#a07334 100%);display:flex;align-items:center;justify-content:center;color:var(--paper);font-family:Charter,Georgia,serif;font-size:17px;font-weight:500;}
.snrs-rec-name{font-weight:500;font-size:15px;letter-spacing:-.005em;}
.snrs-rec-role{color:var(--ink-soft);font-size:13px;letter-spacing:.02em;margin-top:2px;}
/* ─── Press / Awards ───────────────────────────────── */
.snrs-press-list{}
.snrs-press{padding:20px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:80px 1fr auto;gap:24px;align-items:center;}
.snrs-press:first-child{border-top:0;padding-top:0;}
.snrs-press-year{font-family:Charter,Georgia,serif;font-size:14px;color:var(--accent);letter-spacing:.05em;font-feature-settings:"onum";}
.snrs-press-title{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:17px;color:var(--ink);font-weight:500;letter-spacing:-.005em;line-height:1.4;}
.snrs-press-source{font-size:13px;color:var(--ink-soft);letter-spacing:.02em;}
/* ─── Contact CTA ──────────────────────────────────── */
.snrs-contact{text-align:center;padding:128px 0;background:var(--ink);color:var(--paper);}
.snrs-contact .snrs-eyebrow{color:#d4b88a;}
.snrs-contact h2{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:60px;font-weight:500;margin:18px 0 20px;letter-spacing:-.025em;line-height:1.1;}
.snrs-contact h2 em{font-weight:700;color:#d4b88a;}
.snrs-contact p{color:rgba(248,244,236,.75);margin:0 auto 36px;max-width:520px;font-size:17px;line-height:1.7;}
.snrs-wrap .snrs-contact a.snrs-btn-primary{background:#f8f4ec;color:#1c1917;}
.snrs-wrap .snrs-contact a.snrs-btn-primary:hover{background:#d4b88a;color:#1c1917;}
.snrs-contact-meta{margin-top:40px;padding-top:32px;border-top:1px solid rgba(248,244,236,.15);font-size:13px;color:rgba(248,244,236,.55);letter-spacing:.05em;display:flex;gap:32px;justify-content:center;flex-wrap:wrap;}
@media(max-width:880px){
.snrs-hero{padding:80px 0 72px;}
.snrs-hero-inner{grid-template-columns:1fr;gap:40px;}
.snrs-avatar{max-width:280px;}
.snrs-name{font-size:54px;}
.snrs-h2,.snrs-contact h2{font-size:32px;}
.snrs-section{padding:72px 0;}
.snrs-section-grid{grid-template-columns:1fr;gap:24px;}
.snrs-section-label{position:static;}
.snrs-port-grid,.snrs-rec-grid{grid-template-columns:1fr;gap:32px;}
.snrs-job,.snrs-edu{grid-template-columns:1fr;gap:8px;}
.snrs-svc{grid-template-columns:1fr;gap:8px;}
.snrs-svc-meta{text-align:left;}
.snrs-press{grid-template-columns:1fr;gap:6px;}
.snrs-container{padding:0 24px;}
}
</style>
<div class="snrs-wrap">
<!-- HERO -->
<section class="snrs-hero">
<div class="snrs-container">
<div class="snrs-hero-inner">
<div class="snrs-avatar">
<img src="https://placehold.co/400x500/d4b88a/7d5926?text=Portrait" alt="個人形象照">
</div>
<div>
<span class="snrs-eyebrow">Portfolio · 2026</span>
<h2 class="snrs-name snrs-serif">你的中文名<br><em>English Name</em></h2>
<p class="snrs-title">職稱・一句話定位你的工作軸線</p>
<p class="snrs-tagline">兩到三句話介紹你是誰、你能解決什麼問題、誰跟你合作會獲得什麼。</p>
<div class="snrs-cta-row">
<a href="mailto:[email protected]" class="snrs-btn snrs-btn-primary">寄信給我 →</a>
<a href="#" class="snrs-btn snrs-btn-link">下載 PDF 履歷</a>
<a href="#" class="snrs-btn snrs-btn-link">LinkedIn</a>
</div>
</div>
</div>
</div>
</section>
<!-- 01 ABOUT -->
<section class="snrs-section">
<div class="snrs-container">
<div class="snrs-section-grid">
<div class="snrs-section-label">
<div class="snrs-section-num">01</div>
<span class="snrs-section-eyb">About</span>
</div>
<div class="snrs-about">
<h2 class="snrs-h2 snrs-serif">關於我</h2>
<p>第一段：你的職涯總結，3-5 年的工作主軸是什麼，過去做過什麼類型的專案。寫得越具體越有說服力，避免抽象的形容詞堆疊。</p>
<p>第二段：你最擅長解決什麼問題、合作起來最順的客戶類型是哪種、你的工作風格。</p>
<p>第三段：你目前的狀態（接案中、開放遠端工作、特定領域感興趣）。</p>
<div class="snrs-about-tags">
<div class="snrs-about-tag"><span class="snrs-about-tag-lbl">Based in</span><span class="snrs-about-tag-val">Taipei, TW</span></div>
<div class="snrs-about-tag"><span class="snrs-about-tag-lbl">Languages</span><span class="snrs-about-tag-val">中／英</span></div>
<div class="snrs-about-tag"><span class="snrs-about-tag-lbl">Availability</span><span class="snrs-about-tag-val">2026 Q3 起接案</span></div>
<div class="snrs-about-tag"><span class="snrs-about-tag-lbl">Remote</span><span class="snrs-about-tag-val">全球時區</span></div>
</div>
</div>
</div>
</div>
</section>
<!-- 02 SERVICES -->
<section class="snrs-section">
<div class="snrs-container">
<div class="snrs-section-grid">
<div class="snrs-section-label">
<div class="snrs-section-num">02</div>
<span class="snrs-section-eyb">Services</span>
</div>
<div>
<h2 class="snrs-h2 snrs-serif">我提供的<em>服務</em></h2>
<div class="snrs-svc-list">
<div class="snrs-svc">
<div class="snrs-svc-num">01</div>
<div>
<h3 class="snrs-svc-name">服務一：服務名稱</h3>
<p class="snrs-svc-desc">兩句話說明這個服務涵蓋什麼、適合什麼類型的客戶、典型的交付內容。</p>
</div>
<div class="snrs-svc-meta">交期 4-6 週<span class="snrs-svc-price">NT$ 80,000 起</span></div>
</div>
<div class="snrs-svc">
<div class="snrs-svc-num">02</div>
<div>
<h3 class="snrs-svc-name">服務二：服務名稱</h3>
<p class="snrs-svc-desc">兩句話說明這個服務涵蓋什麼、適合什麼類型的客戶、典型的交付內容。</p>
</div>
<div class="snrs-svc-meta">交期 2-3 週<span class="snrs-svc-price">NT$ 35,000 起</span></div>
</div>
<div class="snrs-svc">
<div class="snrs-svc-num">03</div>
<div>
<h3 class="snrs-svc-name">服務三：服務名稱</h3>
<p class="snrs-svc-desc">兩句話說明這個服務涵蓋什麼、適合什麼類型的客戶、典型的交付內容。</p>
</div>
<div class="snrs-svc-meta">月顧問制<span class="snrs-svc-price">NT$ 25,000／月</span></div>
</div>
<div class="snrs-svc">
<div class="snrs-svc-num">04</div>
<div>
<h3 class="snrs-svc-name">服務四：服務名稱</h3>
<p class="snrs-svc-desc">兩句話說明這個服務涵蓋什麼、適合什麼類型的客戶、典型的交付內容。</p>
</div>
<div class="snrs-svc-meta">時數計費<span class="snrs-svc-price">NT$ 3,500／小時</span></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 03 SKILLS -->
<section class="snrs-section">
<div class="snrs-container">
<div class="snrs-section-grid">
<div class="snrs-section-label">
<div class="snrs-section-num">03</div>
<span class="snrs-section-eyb">Skills</span>
</div>
<div>
<h2 class="snrs-h2 snrs-serif">擅長的<em>技能與工具</em></h2>
<div class="snrs-skills-group">
<h3 class="snrs-skills-h3">Core capabilities</h3>
<div class="snrs-skills-tags">
<span class="snrs-tag snrs-tag-primary">主力技能 1</span>
<span class="snrs-tag snrs-tag-primary">主力技能 2</span>
<span class="snrs-tag snrs-tag-primary">主力技能 3</span>
</div>
</div>
<div class="snrs-skills-group">
<h3 class="snrs-skills-h3">Tools & technology</h3>
<div class="snrs-skills-tags">
<span class="snrs-tag">工具 / 技術 1</span>
<span class="snrs-tag">工具 / 技術 2</span>
<span class="snrs-tag">工具 / 技術 3</span>
<span class="snrs-tag">工具 / 技術 4</span>
<span class="snrs-tag">工具 / 技術 5</span>
<span class="snrs-tag">工具 / 技術 6</span>
</div>
</div>
<div class="snrs-skills-group">
<h3 class="snrs-skills-h3">Methods & frameworks</h3>
<div class="snrs-skills-tags">
<span class="snrs-tag">方法論 1</span>
<span class="snrs-tag">方法論 2</span>
<span class="snrs-tag">方法論 3</span>
<span class="snrs-tag">方法論 4</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 04 EXPERIENCE -->
<section class="snrs-section">
<div class="snrs-container">
<div class="snrs-section-grid">
<div class="snrs-section-label">
<div class="snrs-section-num">04</div>
<span class="snrs-section-eyb">Experience</span>
</div>
<div>
<h2 class="snrs-h2 snrs-serif">經歷</h2>
<div class="snrs-job">
<div class="snrs-job-period"><em>2024</em><br>– 現在</div>
<div>
<h3 class="snrs-job-title">職位名稱</h3>
<p class="snrs-job-company">公司名 <em>·</em> 全職 / 自由接案</p>
<div class="snrs-job-desc">
<ul>
<li>具體工作內容 1：協助 3 個品牌建置電商，平均轉換率提升 18%</li>
<li>具體工作內容 2：用量化結果寫，不要寫負責什麼</li>
<li>具體工作內容 3：3-5 點為宜</li>
</ul>
</div>
</div>
</div>
<div class="snrs-job">
<div class="snrs-job-period"><em>2022</em><br>– 2024</div>
<div>
<h3 class="snrs-job-title">職位名稱</h3>
<p class="snrs-job-company">公司名</p>
<div class="snrs-job-desc">
<ul>
<li>具體工作內容 1</li>
<li>具體工作內容 2</li>
</ul>
</div>
</div>
</div>
<div class="snrs-job">
<div class="snrs-job-period"><em>2020</em><br>– 2022</div>
<div>
<h3 class="snrs-job-title">職位名稱</h3>
<p class="snrs-job-company">公司名</p>
<div class="snrs-job-desc">
<ul>
<li>具體工作內容</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 05 EDUCATION -->
<section class="snrs-section">
<div class="snrs-container">
<div class="snrs-section-grid">
<div class="snrs-section-label">
<div class="snrs-section-num">05</div>
<span class="snrs-section-eyb">Education</span>
</div>
<div>
<h2 class="snrs-h2 snrs-serif">學歷與訓練</h2>
<div class="snrs-edu-list">
<div class="snrs-edu">
<div class="snrs-edu-year">2018 — 2020</div>
<div>
<h3 class="snrs-edu-degree">碩士．系所名稱</h3>
<p class="snrs-edu-school">學校名稱 | 研究主題或論文題目（一句話）</p>
</div>
</div>
<div class="snrs-edu">
<div class="snrs-edu-year">2014 — 2018</div>
<div>
<h3 class="snrs-edu-degree">學士．系所名稱</h3>
<p class="snrs-edu-school">學校名稱 | 主修方向（一句話）</p>
</div>
</div>
<div class="snrs-edu">
<div class="snrs-edu-year">2023</div>
<div>
<h3 class="snrs-edu-degree">證照或進修課程名稱</h3>
<p class="snrs-edu-school">頒發機構 | 含國際證照、線上專修班</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 06 SELECTED WORK -->
<section class="snrs-section">
<div class="snrs-container">
<div class="snrs-section-grid">
<div class="snrs-section-label">
<div class="snrs-section-num">06</div>
<span class="snrs-section-eyb">Selected Work</span>
</div>
<div>
<h2 class="snrs-h2 snrs-serif">精選作品</h2>
<div class="snrs-port-grid">
<div class="snrs-port-item">
<div class="snrs-port-img"><img src="https://placehold.co/440x550/d4b88a/7d5926?text=Project+I" alt="作品 1"></div>
<div class="snrs-port-num">Work · 01</div>
<h3 class="snrs-port-title">作品名稱</h3>
<p class="snrs-port-meta">2025 | 客戶名 | 角色</p>
<p class="snrs-port-desc">兩句話講這個專案的目標與你的具體貢獻。</p>
</div>
<div class="snrs-port-item">
<div class="snrs-port-img"><img src="https://placehold.co/440x550/c4ad8e/7d5926?text=Project+II" alt="作品 2"></div>
<div class="snrs-port-num">Work · 02</div>
<h3 class="snrs-port-title">作品名稱</h3>
<p class="snrs-port-meta">2024 | 客戶名 | 角色</p>
<p class="snrs-port-desc">兩句話講這個專案的目標與你的具體貢獻。</p>
</div>
<div class="snrs-port-item">
<div class="snrs-port-img"><img src="https://placehold.co/440x550/d4b88a/7d5926?text=Project+III" alt="作品 3"></div>
<div class="snrs-port-num">Work · 03</div>
<h3 class="snrs-port-title">作品名稱</h3>
<p class="snrs-port-meta">2024 | 客戶名 | 角色</p>
<p class="snrs-port-desc">兩句話講這個專案的目標與你的具體貢獻。</p>
</div>
<div class="snrs-port-item">
<div class="snrs-port-img"><img src="https://placehold.co/440x550/c4ad8e/7d5926?text=Project+IV" alt="作品 4"></div>
<div class="snrs-port-num">Work · 04</div>
<h3 class="snrs-port-title">作品名稱</h3>
<p class="snrs-port-meta">2023 | 客戶名 | 角色</p>
<p class="snrs-port-desc">兩句話講這個專案的目標與你的具體貢獻。</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 07 RECOMMENDATIONS -->
<section class="snrs-section">
<div class="snrs-container">
<div class="snrs-section-grid">
<div class="snrs-section-label">
<div class="snrs-section-num">07</div>
<span class="snrs-section-eyb">Recommendations</span>
</div>
<div>
<h2 class="snrs-h2 snrs-serif">合作過的人<em>怎麼說</em></h2>
<div class="snrs-rec-grid">
<div class="snrs-rec">
<p class="snrs-rec-quote">具體推薦語：跟 [姓名] 合作三個月，最大的收穫是 [量化結果]。她／他最強的地方是 [具體能力]。</p>
<div class="snrs-rec-author">
<div class="snrs-rec-avatar">王</div>
<div><div class="snrs-rec-name">王經理</div><div class="snrs-rec-role">XX 公司 行銷主管</div></div>
</div>
</div>
<div class="snrs-rec">
<p class="snrs-rec-quote">具體推薦語：跟 [姓名] 合作三個月，最大的收穫是 [量化結果]。她／他最強的地方是 [具體能力]。</p>
<div class="snrs-rec-author">
<div class="snrs-rec-avatar">陳</div>
<div><div class="snrs-rec-name">陳總監</div><div class="snrs-rec-role">YY 設計工作室 創辦人</div></div>
</div>
</div>
<div class="snrs-rec">
<p class="snrs-rec-quote">具體推薦語：跟 [姓名] 合作三個月，最大的收穫是 [量化結果]。她／他最強的地方是 [具體能力]。</p>
<div class="snrs-rec-author">
<div class="snrs-rec-avatar">李</div>
<div><div class="snrs-rec-name">李董</div><div class="snrs-rec-role">ZZ 顧問公司 執行長</div></div>
</div>
</div>
<div class="snrs-rec">
<p class="snrs-rec-quote">具體推薦語：跟 [姓名] 合作三個月，最大的收穫是 [量化結果]。她／他最強的地方是 [具體能力]。</p>
<div class="snrs-rec-author">
<div class="snrs-rec-avatar">張</div>
<div><div class="snrs-rec-name">張小姐</div><div class="snrs-rec-role">AA 品牌 產品經理</div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 08 PRESS / AWARDS -->
<section class="snrs-section">
<div class="snrs-container">
<div class="snrs-section-grid">
<div class="snrs-section-label">
<div class="snrs-section-num">08</div>
<span class="snrs-section-eyb">Press & Awards</span>
</div>
<div>
<h2 class="snrs-h2 snrs-serif">獎項與媒體</h2>
<div class="snrs-press-list">
<div class="snrs-press">
<div class="snrs-press-year">2025</div>
<div class="snrs-press-title">獎項或報導標題</div>
<div class="snrs-press-source">頒獎單位／媒體名</div>
</div>
<div class="snrs-press">
<div class="snrs-press-year">2024</div>
<div class="snrs-press-title">獎項或報導標題</div>
<div class="snrs-press-source">頒獎單位／媒體名</div>
</div>
<div class="snrs-press">
<div class="snrs-press-year">2024</div>
<div class="snrs-press-title">受訪報導：節目／文章標題</div>
<div class="snrs-press-source">媒體名</div>
</div>
<div class="snrs-press">
<div class="snrs-press-year">2023</div>
<div class="snrs-press-title">獎項或榮譽</div>
<div class="snrs-press-source">頒獎單位</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CONTACT -->
<section class="snrs-contact">
<div class="snrs-container">
<span class="snrs-eyebrow">Get in touch</span>
<h2 class="snrs-serif">有適合的<em>合作機會</em>嗎？</h2>
<p>歡迎聯絡，最快 24 小時內回覆。目前接案排程到 2026 Q3。</p>
<a href="mailto:[email protected]" class="snrs-btn snrs-btn-primary">[email protected] →</a>
<div class="snrs-contact-meta">
<span>LinkedIn → linkedin.com/in/yourname</span>
<span>Behance → behance.net/yourname</span>
<span>Instagram → @yourhandle</span>
</div>
</div>
</section>
</div>圖片怎麼換#
模板裡的圖片都是 placehold.co 的佔位圖。要換成你的圖：先把圖片上傳到媒體庫拿到網址，再請 Claude 替換。詳見「上傳圖片到媒體庫，把網址貼回給 Claude」這篇教學。
想要更多客製怎麼辦#
- 加新區段：請 Claude 在 [指定位置] 加一個 [區段類型] 區塊
- 調順序：直接告訴 Claude「把方案區塊往前，放在 features 之後」
- 移除某個區段：說「拿掉 logo wall 區段」即可
- 整體重新調色：給 Claude 你的品牌主色 hex，請它套到所有 accent 色
模板的 CSS 結構鬆散且 scoped，AI 改起來不會壞。每次改完都建議在 Vibe 畫布的「預覽」模式先看過再儲存。