-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstack.html
More file actions
121 lines (113 loc) · 5.06 KB
/
Copy pathstack.html
File metadata and controls
121 lines (113 loc) · 5.06 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="ReeveByte 的恶搞能力页。" />
<meta name="theme-color" content="#0f4c5c" />
<title>能力 | ReeveByte</title>
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header class="site-header page-header" data-header>
<a class="brand" href="index.html" aria-label="ReeveByte home">
<span class="brand-mark">Rb</span>
<span>ReeveByte</span>
</a>
<nav class="site-nav" aria-label="主导航">
<a href="work.html"><span class="nav-icon" aria-hidden="true">□</span>作品</a>
<a class="is-active" href="stack.html"><span class="nav-icon" aria-hidden="true">△</span>能力</a>
<a href="contact.html"><span class="nav-icon" aria-hidden="true">@</span>联系</a>
</nav>
</header>
<main class="page-shell">
<section class="page-hero page-hero-split" aria-labelledby="stack-title">
<div>
<p class="eyebrow">Skill laboratory</p>
<h1 id="stack-title">能力说明书：看起来很会，实际上也在努力很会。</h1>
<p>
我擅长把“这个能不能简单做一下”翻译成结构、样式、交互和部署，
中途顺便安抚几个不听话的边距。
</p>
</div>
<aside class="page-note">
<span>熟练度</span>
<strong>还在升级</strong>
<p>技能树没有点满，但已经学会先备份再大胆折腾。</p>
</aside>
</section>
<section class="section capability-section" aria-labelledby="capability-title">
<div class="section-heading">
<p class="eyebrow">Capabilities</p>
<h2 id="capability-title">四个常用技能槽</h2>
</div>
<div class="capability-grid">
<article class="capability-card">
<span>01</span>
<h3>页面搭建</h3>
<p>把空白页面从“什么都没有”推进到“至少看起来很有安排”。</p>
</article>
<article class="capability-card">
<span>02</span>
<h3>样式收拾</h3>
<p>处理颜色、间距、排版和移动端，让界面少一点临时工气质。</p>
</article>
<article class="capability-card">
<span>03</span>
<h3>交互打磨</h3>
<p>让按钮有反馈，让导航不迷路，让用户少问一句“我在哪”。</p>
</article>
<article class="capability-card">
<span>04</span>
<h3>部署上线</h3>
<p>把文件推到 GitHub Pages，完成从本地快乐到公开快乐的迁徙。</p>
</article>
</div>
</section>
<section class="section stack-section" aria-labelledby="toolbox-title">
<div class="stack-layout">
<div>
<p class="eyebrow">Workflow</p>
<h2 id="toolbox-title">工作流，不玄学，主要靠反复看。</h2>
<ul class="skill-list" aria-label="工作流列表">
<li><span>01</span> 先把需求拆开，防止它在角落里偷偷长大。</li>
<li><span>02</span> 先做能用的版本，再把它收拾到愿意被截图。</li>
<li><span>03</span> 桌面端看一遍，移动端再看一遍，然后继续皱眉。</li>
<li><span>04</span> 提交前检查路径、链接和那些很会躲的错别字。</li>
</ul>
</div>
<div class="tool-panel">
<p class="panel-kicker dark">Toolbox</p>
<div class="tool-cloud" aria-label="技术关键词">
<span>HTML</span>
<span>CSS</span>
<span>JavaScript</span>
<span>GitHub Pages</span>
<span>Responsive UI</span>
<span>Static Sites</span>
<span>Layout Debugging</span>
<span>Copy Polishing</span>
</div>
</div>
</div>
</section>
<section class="section meter-section" aria-labelledby="meter-title">
<div class="section-heading compact-heading">
<p class="eyebrow">Meters</p>
<h2 id="meter-title">能力仪表盘</h2>
</div>
<div class="meter-list">
<div class="meter-row"><span>把页面扶正</span><strong style="--value: 88%"></strong><em>88%</em></div>
<div class="meter-row"><span>和 CSS 讲道理</span><strong style="--value: 82%"></strong><em>82%</em></div>
<div class="meter-row"><span>命名变量不后悔</span><strong style="--value: 64%"></strong><em>64%</em></div>
</div>
</section>
</main>
<footer class="site-footer">
<p>© <span data-year></span> ReeveByte. 能力说明仅供快乐参考。</p>
<a href="index.html">回到主页</a>
</footer>
<script src="script.js"></script>
</body>
</html>