wehub-resource-sync
716 lines
21 KiB
HTML
716 lines
21 KiB
HTML
<!DOCTYPE html>
|
||
<!-- ==================================================================
|
||
PORTFOLIO TEMPLATE · parchment design system
|
||
多页 A4 作品集 / 案例集 / 项目集
|
||
结构：封面 -> About -> 若干项目页 -> Contact
|
||
每个项目 1-2 页，视觉重于文字
|
||
================================================================== -->
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>{{名字}} · 作品集</title>
|
||
<meta name="author" content="{{名字}}">
|
||
<meta name="description" content="{{摘要}}">
|
||
<meta name="keywords" content="{{关键词}}">
|
||
<meta name="generator" content="Kami">
|
||
<style>
|
||
/* Regular weight */
|
||
@font-face {
|
||
font-family: "TsangerJinKai02";
|
||
src: url("../fonts/TsangerJinKai02-W04.ttf") format("truetype"),
|
||
url("https://cdn.jsdelivr.net/gh/tw93/Kami@main/assets/fonts/TsangerJinKai02-W04.ttf") format("truetype");
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
}
|
||
|
||
/* Bold weight - W05 for all bold variants */
|
||
@font-face {
|
||
font-family: "TsangerJinKai02";
|
||
src: url("../fonts/TsangerJinKai02-W05.ttf") format("truetype"),
|
||
url("https://cdn.jsdelivr.net/gh/tw93/Kami@main/assets/fonts/TsangerJinKai02-W05.ttf") format("truetype");
|
||
font-weight: 500;
|
||
font-style: normal;
|
||
}
|
||
|
||
@page {
|
||
size: A4;
|
||
margin: 12mm 15mm 12mm 15mm;
|
||
background: #f5f4ed;
|
||
}
|
||
|
||
@page:first {
|
||
margin: 0;
|
||
}
|
||
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
:root {
|
||
--parchment: #f5f4ed;
|
||
--ivory: #faf9f5;
|
||
--near-black:#141413;
|
||
--dark-warm: #3d3d3a;
|
||
--olive: #504e49;
|
||
--stone: #6b6a64;
|
||
--brand: #1B365D;
|
||
--border: #e8e6dc;
|
||
--border-soft:#e5e3d8;
|
||
--tag-bg: #E4ECF5;
|
||
--serif: "TsangerJinKai02", "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", "STSong", Georgia, serif;
|
||
--sans: var(--serif);
|
||
|
||
--rhythm-module: 14pt;
|
||
--rhythm-section: 18pt;
|
||
}
|
||
|
||
html, body { background: var(--parchment); }
|
||
|
||
@media screen {
|
||
body { max-width: 210mm; margin: 0 auto; padding: 12mm 15mm; }
|
||
}
|
||
|
||
body {
|
||
color: var(--near-black);
|
||
font-family: var(--serif);
|
||
font-size: 10pt;
|
||
line-height: 1.45;
|
||
letter-spacing: 0.3pt;
|
||
widows: 3;
|
||
orphans: 3;
|
||
}
|
||
|
||
.serif {
|
||
font-family: var(--serif);
|
||
}
|
||
|
||
/* ════════════ COVER ════════════ */
|
||
.cover {
|
||
width: 100%;
|
||
height: 297mm;
|
||
padding: 25mm 20mm;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
break-after: page;
|
||
}
|
||
.cover-top {
|
||
font-family: var(--serif);
|
||
font-size: 10pt;
|
||
color: var(--brand);
|
||
letter-spacing: 2pt;
|
||
text-transform: uppercase;
|
||
}
|
||
/* 品牌 logo 槽(可选,来自 brand profile);默认无 logo,样式仅在取消注释后生效。 */
|
||
.brand-logo {
|
||
display: block;
|
||
height: 72px;
|
||
width: auto;
|
||
max-width: 200px;
|
||
object-fit: contain;
|
||
margin-bottom: 16pt;
|
||
}
|
||
.cover-center {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14pt;
|
||
}
|
||
.cover-name {
|
||
font-family: var(--serif);
|
||
font-size: 58pt;
|
||
font-weight: 500;
|
||
line-height: 1.05;
|
||
color: var(--near-black);
|
||
letter-spacing: 1pt;
|
||
}
|
||
.cover-tagline {
|
||
font-family: var(--serif);
|
||
font-size: 18pt;
|
||
color: var(--olive);
|
||
line-height: 1.4;
|
||
max-width: 80%;
|
||
}
|
||
.cover-line {
|
||
width: 80pt;
|
||
height: 2pt;
|
||
background: var(--brand);
|
||
margin: 18pt 0 4pt 0;
|
||
}
|
||
.cover-meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
font-size: 10pt;
|
||
color: var(--stone);
|
||
}
|
||
.cover-meta strong {
|
||
color: var(--dark-warm);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* ════════════ ABOUT ════════════ */
|
||
section.about {
|
||
break-after: page;
|
||
padding: 10mm 0;
|
||
}
|
||
.about-eyebrow {
|
||
font-size: 9pt;
|
||
color: var(--brand);
|
||
letter-spacing: 1pt;
|
||
text-transform: uppercase;
|
||
margin-bottom: 8pt;
|
||
}
|
||
.about-title {
|
||
font-family: var(--serif);
|
||
font-size: 32pt;
|
||
font-weight: 500;
|
||
line-height: 1.2;
|
||
margin-bottom: 20pt;
|
||
border-left: 2.5pt solid var(--brand);
|
||
border-radius: 1.5pt;
|
||
padding-left: 8pt;
|
||
}
|
||
.about-lead {
|
||
font-family: var(--serif);
|
||
font-size: 15pt;
|
||
line-height: 1.5;
|
||
color: var(--dark-warm);
|
||
margin-bottom: 24pt;
|
||
max-width: 90%;
|
||
}
|
||
.about-body {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 24pt;
|
||
}
|
||
.about-body p {
|
||
line-height: 1.45;
|
||
margin-bottom: 10pt;
|
||
}
|
||
.about-body h3 {
|
||
font-family: var(--serif);
|
||
font-size: 13pt;
|
||
font-weight: 500;
|
||
color: var(--near-black);
|
||
margin-bottom: 6pt;
|
||
}
|
||
|
||
/* ════════════ PROJECT PAGE ════════════ */
|
||
.project {
|
||
break-before: page;
|
||
break-after: page;
|
||
padding: 8mm 0;
|
||
}
|
||
.project-header {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
margin-bottom: var(--rhythm-module);
|
||
border-left: 2.5pt solid var(--brand);
|
||
border-radius: 1.5pt;
|
||
padding-left: 8pt;
|
||
}
|
||
.project-num {
|
||
font-family: var(--serif);
|
||
font-size: 42pt;
|
||
font-weight: 500;
|
||
color: var(--brand);
|
||
line-height: 1;
|
||
margin-right: 18pt;
|
||
}
|
||
.project-title-block {
|
||
flex: 1;
|
||
padding-top: 6pt;
|
||
}
|
||
.project-type {
|
||
font-size: 9pt;
|
||
color: var(--brand);
|
||
letter-spacing: 1pt;
|
||
text-transform: uppercase;
|
||
margin-bottom: 3pt;
|
||
}
|
||
.project-title {
|
||
font-family: var(--serif);
|
||
font-size: 22pt;
|
||
font-weight: 500;
|
||
color: var(--near-black);
|
||
line-height: 1.2;
|
||
margin-bottom: 4pt;
|
||
}
|
||
.project-subtitle {
|
||
font-size: 11pt;
|
||
color: var(--olive);
|
||
line-height: 1.4;
|
||
}
|
||
.project-date {
|
||
text-align: right;
|
||
font-size: 9pt;
|
||
color: var(--stone);
|
||
font-variant-numeric: tabular-nums;
|
||
white-space: nowrap;
|
||
min-width: 80pt;
|
||
padding-top: 10pt;
|
||
}
|
||
|
||
/* Tags row */
|
||
.project-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 4pt;
|
||
margin-bottom: var(--rhythm-module);
|
||
}
|
||
.tag {
|
||
background: var(--tag-bg);
|
||
color: var(--brand);
|
||
font-size: 9pt;
|
||
font-weight: 500;
|
||
padding: 2pt 7pt;
|
||
border-radius: 3pt;
|
||
}
|
||
|
||
/* Image / Visual */
|
||
.project-hero {
|
||
width: 100%;
|
||
height: 110mm;
|
||
background: var(--ivory);
|
||
border-radius: 6pt;
|
||
margin-bottom: var(--rhythm-module);
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--stone);
|
||
font-size: 10pt;
|
||
}
|
||
.project-hero img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
/* 3 段式 */
|
||
.project-body {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
gap: 16pt;
|
||
}
|
||
.project-block h3 {
|
||
font-family: var(--serif);
|
||
font-size: 11pt;
|
||
font-weight: 500;
|
||
color: var(--brand);
|
||
margin-bottom: 4pt;
|
||
letter-spacing: 0.3pt;
|
||
}
|
||
.project-block p {
|
||
font-size: 9.5pt;
|
||
line-height: 1.45;
|
||
color: var(--dark-warm);
|
||
}
|
||
.project-block .hl {
|
||
color: var(--brand);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Results metrics row */
|
||
.project-results {
|
||
display: flex;
|
||
gap: 14pt;
|
||
margin-top: var(--rhythm-module);
|
||
padding-top: 10pt;
|
||
border-top: 0.5pt dotted var(--border);
|
||
}
|
||
.result-item {
|
||
flex: 1;
|
||
}
|
||
.result-value {
|
||
font-family: var(--serif);
|
||
font-size: 18pt;
|
||
font-weight: 500;
|
||
color: var(--brand);
|
||
line-height: 1.1;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.result-label {
|
||
font-size: 9pt;
|
||
color: var(--olive);
|
||
margin-top: 2pt;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
/* ════════════ 2-IMAGE VARIANT ════════════ */
|
||
.project-visuals-2col {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 10pt;
|
||
margin-bottom: var(--rhythm-module);
|
||
}
|
||
.project-visuals-2col .project-hero {
|
||
height: 80mm;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* ════════════ SELECTED WORKS LIST ════════════ */
|
||
section.more-works {
|
||
break-before: page;
|
||
padding-top: 10mm;
|
||
}
|
||
.more-works-title {
|
||
font-family: var(--serif);
|
||
font-size: 24pt;
|
||
font-weight: 500;
|
||
margin-bottom: 16pt;
|
||
border-left: 2.5pt solid var(--brand);
|
||
border-radius: 1.5pt;
|
||
padding-left: 8pt;
|
||
}
|
||
.work-item {
|
||
display: grid;
|
||
grid-template-columns: 40pt 1fr 80pt;
|
||
gap: 12pt;
|
||
padding: 8pt 0;
|
||
border-bottom: 0.3pt dotted var(--border);
|
||
align-items: baseline;
|
||
}
|
||
.work-item:last-of-type { border-bottom: none; }
|
||
.work-year {
|
||
font-family: var(--serif);
|
||
color: var(--brand);
|
||
font-size: 11pt;
|
||
white-space: nowrap;
|
||
}
|
||
.work-title-block .title {
|
||
font-family: var(--serif);
|
||
font-size: 11pt;
|
||
font-weight: 500;
|
||
color: var(--near-black);
|
||
}
|
||
.work-title-block .desc {
|
||
font-size: 9pt;
|
||
color: var(--olive);
|
||
margin-top: 1pt;
|
||
}
|
||
.work-link {
|
||
text-align: right;
|
||
font-size: 9pt;
|
||
color: var(--stone);
|
||
}
|
||
|
||
/* ════════════ CONTACT ════════════ */
|
||
section.contact {
|
||
break-before: page;
|
||
padding: 20mm 0;
|
||
min-height: 230mm;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
.contact-eyebrow {
|
||
font-size: 10pt;
|
||
color: var(--brand);
|
||
letter-spacing: 2pt;
|
||
text-transform: uppercase;
|
||
margin-bottom: 12pt;
|
||
}
|
||
.contact-title {
|
||
font-family: var(--serif);
|
||
font-size: 48pt;
|
||
font-weight: 500;
|
||
line-height: 1.1;
|
||
margin-bottom: 20pt;
|
||
color: var(--near-black);
|
||
}
|
||
.contact-line {
|
||
width: 80pt;
|
||
height: 2pt;
|
||
background: var(--brand);
|
||
margin-bottom: 24pt;
|
||
}
|
||
.contact-list {
|
||
font-size: 12pt;
|
||
line-height: 1.55;
|
||
color: var(--dark-warm);
|
||
}
|
||
.contact-list strong {
|
||
color: var(--stone);
|
||
font-weight: 500;
|
||
font-size: 10pt;
|
||
letter-spacing: 0.5pt;
|
||
margin-right: 12pt;
|
||
display: inline-block;
|
||
min-width: 70pt;
|
||
text-transform: uppercase;
|
||
}
|
||
.contact-list a {
|
||
color: var(--brand);
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* ════════════ TABLE (kami-table) ════════════ */
|
||
table, .kami-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 9.5pt;
|
||
margin: 10pt 0;
|
||
break-inside: avoid;
|
||
}
|
||
table th, .kami-table th {
|
||
text-align: left;
|
||
font-weight: 500;
|
||
color: var(--dark-warm);
|
||
padding: 5pt 8pt;
|
||
border-bottom: 1pt solid var(--border);
|
||
background: transparent;
|
||
}
|
||
table td, .kami-table td {
|
||
padding: 4pt 8pt;
|
||
border-bottom: 0.3pt solid var(--border-soft);
|
||
vertical-align: top;
|
||
}
|
||
table.compact th, .kami-table.compact th { padding: 3pt 6pt; font-size: 8pt; }
|
||
table.compact td, .kami-table.compact td { padding: 2pt 6pt; font-size: 8pt; line-height: 1.4; }
|
||
table.financial td:not(:first-child), .kami-table.financial td:not(:first-child) {
|
||
text-align: right; font-variant-numeric: tabular-nums;
|
||
}
|
||
table.financial th:not(:first-child), .kami-table.financial th:not(:first-child) { text-align: right; }
|
||
table.striped tbody tr:nth-child(even) td, .kami-table.striped tbody tr:nth-child(even) td {
|
||
background: var(--ivory);
|
||
}
|
||
table .total td, .kami-table .total td {
|
||
font-weight: 500; border-top: 1pt solid var(--brand); border-bottom: none; color: var(--near-black);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ════════════ COVER ════════════ -->
|
||
<div class="cover">
|
||
<div class="cover-head">
|
||
<!-- 品牌 logo 槽(可选,来自 brand profile 的 logo 字段)。无 logo 时保持注释,勿插破图。
|
||
有 logo 时取消注释,把 src 换成已展开的本地绝对路径:
|
||
<img class="brand-logo" src="/absolute/path/to/logo.svg" alt=""> -->
|
||
<div class="cover-top">{{年份 或 领域标签 · 如 "Selected Works 2023–2026"}}</div>
|
||
</div>
|
||
|
||
<div class="cover-center">
|
||
<div class="cover-name">{{名字<br>作品集}}</div>
|
||
<div class="cover-tagline">{{一句自我描述 / 作品集主题}}</div>
|
||
<div class="cover-line"></div>
|
||
</div>
|
||
|
||
<div class="cover-meta">
|
||
<div>
|
||
<strong>{{专业 / 角色}}</strong><br>
|
||
{{所在地}}
|
||
</div>
|
||
<div style="text-align: right;">
|
||
{{EMAIL}}<br>
|
||
{{网站 / 社交链接}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ════════════ ABOUT ════════════ -->
|
||
<section class="about">
|
||
<div class="about-eyebrow">About</div>
|
||
<div class="about-title">{{一句自我定位的 headline}}</div>
|
||
<div class="about-lead">
|
||
{{2-3 行的自我介绍引言。serif 字体，斜体感，不写太 sales。
|
||
用自己的语言描述你关心什么、擅长什么。}}
|
||
</div>
|
||
<div class="about-body">
|
||
<div>
|
||
<h3>经历</h3>
|
||
<p>{{一段关于你过往经历的概述。}}</p>
|
||
</div>
|
||
<div>
|
||
<h3>关注</h3>
|
||
<p>{{一段关于你当前的关注点 / 方法论。}}</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════ PROJECT 01 ════════════ -->
|
||
<section class="project">
|
||
<div class="project-header">
|
||
<div class="project-num">01</div>
|
||
<div class="project-title-block">
|
||
<div class="project-type">{{项目类型 · 如 "Product Design" / "Open Source"}}</div>
|
||
<div class="project-title">{{项目名称}}</div>
|
||
<div class="project-subtitle">{{一句话描述这个项目做了什么}}</div>
|
||
</div>
|
||
<div class="project-date">{{时间 · 如 "2025.04 - 2026.02"}}</div>
|
||
</div>
|
||
|
||
<div class="project-tags">
|
||
<span class="tag">{{标签 1}}</span>
|
||
<span class="tag">{{标签 2}}</span>
|
||
<span class="tag">{{标签 3}}</span>
|
||
</div>
|
||
|
||
<!-- 主图 -->
|
||
<div class="project-hero" style="background:#f5f4ed;">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 280" width="540" height="360" style="background:#f5f4ed">
|
||
<style>
|
||
text { font-family: Charter, Georgia, "TsangerJinKai02", "Source Han Serif SC", "Noto Serif CJK SC", serif; }
|
||
</style>
|
||
<defs>
|
||
<marker id="seq-arrow" markerWidth="8" markerHeight="5" refX="8" refY="2.5" orient="auto-start-reverse">
|
||
<polygon points="0 0, 8 2.5, 0 5" fill="#1b365d" />
|
||
</marker>
|
||
<marker id="seq-arrow-open" markerWidth="8" markerHeight="5" refX="8" refY="2.5" orient="auto-start-reverse">
|
||
<polyline points="0 0, 8 2.5, 0 5" fill="none" stroke="#1b365d" stroke-width="1" />
|
||
</marker>
|
||
</defs>
|
||
<line class="lifeline" data-actor="U" x1="70" y1="70" x2="70" y2="250" stroke="#504e49" stroke-width="0.75" stroke-dasharray="6 4" />
|
||
<line class="lifeline" data-actor="A" x1="210" y1="70" x2="210" y2="250" stroke="#504e49" stroke-width="0.75" stroke-dasharray="6 4" />
|
||
<line class="lifeline" data-actor="D" x1="350" y1="70" x2="350" y2="250" stroke="#504e49" stroke-width="0.75" stroke-dasharray="6 4" />
|
||
<g class="message" data-from="U" data-to="A" data-label="提交请求" data-line-style="solid" data-arrow-head="filled" data-self="false">
|
||
<line x1="70" y1="90" x2="210" y2="90" stroke="#504e49" stroke-width="1" marker-end="url(#seq-arrow)" />
|
||
<text x="140" y="80" font-size="11" text-anchor="middle" font-weight="400" fill="#6b6a64" dy="3.8499999999999996">提交请求</text>
|
||
</g>
|
||
<g class="message" data-from="A" data-to="D" data-label="查询记录" data-line-style="solid" data-arrow-head="filled" data-self="false">
|
||
<line x1="210" y1="130" x2="350" y2="130" stroke="#504e49" stroke-width="1" marker-end="url(#seq-arrow)" />
|
||
<text x="280" y="120" font-size="11" text-anchor="middle" font-weight="400" fill="#6b6a64" dy="3.8499999999999996">查询记录</text>
|
||
</g>
|
||
<g class="message" data-from="D" data-to="A" data-label="返回结果" data-line-style="dashed" data-arrow-head="filled" data-self="false">
|
||
<line x1="350" y1="170" x2="210" y2="170" stroke="#504e49" stroke-width="1" stroke-dasharray="6 4" marker-end="url(#seq-arrow)" />
|
||
<text x="280" y="160" font-size="11" text-anchor="middle" font-weight="400" fill="#6b6a64" dy="3.8499999999999996">返回结果</text>
|
||
</g>
|
||
<g class="message" data-from="A" data-to="U" data-label="响应数据" data-line-style="dashed" data-arrow-head="filled" data-self="false">
|
||
<line x1="210" y1="210" x2="70" y2="210" stroke="#504e49" stroke-width="1" stroke-dasharray="6 4" marker-end="url(#seq-arrow)" />
|
||
<text x="140" y="200" font-size="11" text-anchor="middle" font-weight="400" fill="#6b6a64" dy="3.8499999999999996">响应数据</text>
|
||
</g>
|
||
<g class="actor" data-id="U" data-label="用户" data-type="participant">
|
||
<rect x="30" y="30" width="80" height="40" rx="4" ry="4" fill="#faf9f5" stroke="#e8e6dc" stroke-width="1" />
|
||
<text x="70" y="50" font-size="13" text-anchor="middle" font-weight="500" fill="#141413" dy="4.55">用户</text>
|
||
</g>
|
||
<g class="actor" data-id="A" data-label="API" data-type="participant">
|
||
<rect x="170" y="30" width="80" height="40" rx="4" ry="4" fill="#faf9f5" stroke="#e8e6dc" stroke-width="1" />
|
||
<text x="210" y="50" font-size="13" text-anchor="middle" font-weight="500" fill="#141413" dy="4.55">API</text>
|
||
</g>
|
||
<g class="actor" data-id="D" data-label="数据库" data-type="participant">
|
||
<rect x="310" y="30" width="80" height="40" rx="4" ry="4" fill="#faf9f5" stroke="#e8e6dc" stroke-width="1" />
|
||
<text x="350" y="50" font-size="13" text-anchor="middle" font-weight="500" fill="#141413" dy="4.55">数据库</text>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- 三段式正文 -->
|
||
<div class="project-body">
|
||
<div class="project-block">
|
||
<h3>Context</h3>
|
||
<p>{{为什么做这个项目？要解决什么问题？谁是用户？}}</p>
|
||
</div>
|
||
<div class="project-block">
|
||
<h3>Approach</h3>
|
||
<p>{{怎么做的？关键决策、设计考量、技术方案。}}</p>
|
||
</div>
|
||
<div class="project-block">
|
||
<h3>Outcome</h3>
|
||
<p>{{结果是什么？<span class="hl">数据</span>、反馈、影响。}}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 关键数据（可选）-->
|
||
<div class="project-results">
|
||
<div class="result-item">
|
||
<div class="result-value">{{数字}}</div>
|
||
<div class="result-label">{{标签}}</div>
|
||
</div>
|
||
<div class="result-item">
|
||
<div class="result-value">{{数字}}</div>
|
||
<div class="result-label">{{标签}}</div>
|
||
</div>
|
||
<div class="result-item">
|
||
<div class="result-value">{{数字}}</div>
|
||
<div class="result-label">{{标签}}</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════ PROJECT 02 (双图版式) ════════════ -->
|
||
<section class="project">
|
||
<div class="project-header">
|
||
<div class="project-num">02</div>
|
||
<div class="project-title-block">
|
||
<div class="project-type">{{项目类型 · 如 "Product Design" / "Open Source"}}</div>
|
||
<div class="project-title">{{项目名称}}</div>
|
||
<div class="project-subtitle">{{一句话描述}}</div>
|
||
</div>
|
||
<div class="project-date">{{时间 · 如 "2025.04 - 2026.02"}}</div>
|
||
</div>
|
||
|
||
<div class="project-tags">
|
||
<span class="tag">{{标签}}</span>
|
||
<span class="tag">{{标签}}</span>
|
||
</div>
|
||
|
||
<!-- 并排两图 -->
|
||
<div class="project-visuals-2col">
|
||
<div class="project-hero">[左图]</div>
|
||
<div class="project-hero">[右图]</div>
|
||
</div>
|
||
|
||
<div class="project-body">
|
||
<div class="project-block">
|
||
<h3>Context</h3>
|
||
<p>{{为什么做这个项目？要解决什么问题？谁是用户？}}</p>
|
||
</div>
|
||
<div class="project-block">
|
||
<h3>Approach</h3>
|
||
<p>{{怎么做的？关键决策、设计考量、技术方案。}}</p>
|
||
</div>
|
||
<div class="project-block">
|
||
<h3>Outcome</h3>
|
||
<p>{{结果是什么？<span class="hl">数据</span>、反馈、影响。}}</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════ MORE WORKS（可选） ════════════ -->
|
||
<section class="more-works">
|
||
<div class="more-works-title">更多作品</div>
|
||
|
||
<div class="work-item">
|
||
<span class="work-year">2025</span>
|
||
<div class="work-title-block">
|
||
<div class="title">{{作品标题}}</div>
|
||
<div class="desc">{{一句描述}}</div>
|
||
</div>
|
||
<div class="work-link">{{链接 / 状态}}</div>
|
||
</div>
|
||
|
||
<div class="work-item">
|
||
<span class="work-year">2024</span>
|
||
<div class="work-title-block">
|
||
<div class="title">{{作品标题}}</div>
|
||
<div class="desc">{{一句描述}}</div>
|
||
</div>
|
||
<div class="work-link">{{链接 / 状态}}</div>
|
||
</div>
|
||
|
||
<div class="work-item">
|
||
<span class="work-year">2023</span>
|
||
<div class="work-title-block">
|
||
<div class="title">{{作品标题}}</div>
|
||
<div class="desc">{{一句描述}}</div>
|
||
</div>
|
||
<div class="work-link">{{链接 / 状态}}</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════ CONTACT ════════════ -->
|
||
<section class="contact">
|
||
<div class="contact-eyebrow">Let's Talk</div>
|
||
<div class="contact-title">{{欢迎联系的一句话 · 如 "期待新的合作机会"}}</div>
|
||
<div class="contact-line"></div>
|
||
<div class="contact-list">
|
||
<div><strong>Email</strong><a href="mailto:{{EMAIL}}">{{EMAIL}}</a></div>
|
||
<div><strong>Phone</strong>{{电话}}</div>
|
||
<div><strong>Website</strong><a href="{{URL}}">{{URL}}</a></div>
|
||
<div><strong>{{其他平台}}</strong><a href="{{URL}}">@{{ID}}</a></div>
|
||
</div>
|
||
</section>
|
||
|
||
</body>
|
||
</html>
|