reevebyte.github.io/work.html at main · reevebyte/reevebyte.github.io · GitHub

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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!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 class="is-active" href="work.html"><span class="nav-icon" aria-hidden="true">□</span>作品</a>
        <a 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="work-title">
        <div>
          <p class="eyebrow">Work buffet</p>
          <h1 id="work-title">作品陈列柜：能跑，能看，偶尔还能交作业。</h1>
          <p>
            这里不摆“改变世界”的大话，只摆一些被我从灵感草稿里捞出来、
            擦干净、接上电源、并成功没有当场冒烟的小东西。
          </p>
        </div>
        <aside class="page-note">
          <span>今日展品</span>
          <strong>3 件半</strong>
          <p>半件是因为还有个想法只写了标题，但标题非常自信。</p>
        </aside>
      </section>

      <section class="section featured-work" aria-labelledby="featured-title">
        <div class="section-heading">
          <p class="eyebrow">Featured</p>
          <h2 id="featured-title">主菜区</h2>
        </div>

        <article class="feature-case">
          <div class="case-index">01</div>
          <div>
            <p class="case-label">GitHub Pages 个人主页</p>
            <h3>把个人介绍做成一个认真胡闹的门面。</h3>
            <p>
              纯静态、可直接部署、移动端友好。主要功能是让访客先笑一下，
              再发现这个人好像真的会写页面。
            </p>
          </div>
          <a class="button secondary" href="index.html">
            <span aria-hidden="true">□</span>
            回首页验货
          </a>
        </article>
      </section>

      <section class="section work-section" aria-labelledby="work-list-title">
        <div class="section-heading compact-heading">
          <p class="eyebrow">Shelf</p>
          <h2 id="work-list-title">小项目货架</h2>
        </div>

        <div class="showcase-grid">
          <article class="showcase-card">
            <div class="card-topline">
              <span class="dot teal"></span>
              <span>笔记型</span>
            </div>
            <h3>知识库自助餐</h3>
            <p>把散落的学习记录摆成一排，让它们看起来像有组织的知识，而不是深夜灵感事故现场。</p>
            <ul class="mini-list">
              <li>工程笔记</li>
              <li>复盘草稿</li>
              <li>长期补坑</li>
            </ul>
          </article>

          <article class="showcase-card">
            <div class="card-topline">
              <span class="dot coral"></span>
              <span>页面型</span>
            </div>
            <h3>静态网页变装秀</h3>
            <p>不用复杂后台，也能把一个页面打扮得像刚从设计会议里全身而退。</p>
            <ul class="mini-list">
              <li>响应式布局</li>
              <li>视觉细节</li>
              <li>部署省心</li>
            </ul>
          </article>

          <article class="showcase-card">
            <div class="card-topline">
              <span class="dot amber"></span>
              <span>工具型</span>
            </div>
            <h3>自动化小卖部</h3>
            <p>专治重复劳动：把“我再点一次”变成“让程序去，它比较有空”。</p>
            <ul class="mini-list">
              <li>流程整理</li>
              <li>脚本辅助</li>
              <li>少点几下</li>
            </ul>
          </article>
        </div>
      </section>

      <section class="section status-board" aria-labelledby="status-title">
        <div class="section-heading compact-heading">
          <p class="eyebrow">Status</p>
          <h2 id="status-title">项目天气预报</h2>
        </div>
        <div class="status-rows">
          <div><span>正在施工</span><strong>页面精装修</strong><em>油漆味很淡，灵感味很重</em></div>
          <div><span>等待排期</span><strong>博客栏目</strong><em>标题已想好，内容正在装睡</em></div>
          <div><span>持续维护</span><strong>个人主页</strong><em>遇到不顺眼的间距就现场教育</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>