lordmos.github.io/index.html at master · lordmos/lordmos.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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
<!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="LordMOS — 独立开发者，iOS应用、微信小程序、AI Agent" />
  <title>LordMOS</title>
  <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
  <!-- Fonts: preconnect first, then load — non-blocking fallback to system fonts if unavailable -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap"
    media="print" onload="this.media='all'" />
  <noscript>
    <link rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap" />
  </noscript>
  <!-- Font Awesome 6 Free -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
    crossorigin="anonymous" />
  <link href="css/custom.css" rel="stylesheet" />
  <link href="css/blog.css" rel="stylesheet" />
</head>

<body>

  <!-- Skip Navigation -->
  <a class="skip-nav" href="#main">跳转到主内容</a>

  <!-- Navbar -->
  <nav id="mainNav" aria-label="主导航">
    <div class="nav-inner">
      <a class="nav-brand" href="#">LordMOS</a>
      <button class="nav-toggle" id="navToggle" aria-label="打开导航菜单" aria-expanded="false" aria-controls="navLinks">
        <i class="fas fa-bars"></i>
      </button>
      <ul class="nav-links" id="navLinks">
        <li><a href="/blog-list.html">博客</a></li>
        <li><a href="#miniprogram">小程序</a></li>
        <li><a href="#agents">Agent 项目</a></li>
        <li><a href="#projects">iOS 应用</a></li>
        <li><a href="/privacy">隐私政策</a></li>
      </ul>
    </div>
  </nav>

  <main id="main">

  <!-- Hero -->
  <section class="hero" id="about">
    <h1 class="hero-name">LordMOS</h1>
    <p class="hero-bio">
      独立开发者。沉迷 Vibe Coding AI Agent。<br>
      创业未半而中道崩崩崩崩 🫠
    </p>
    <div class="hero-pills">
      <span class="hero-pill">🛠️ 独立开发者</span>
      <span class="hero-pill">📱 iOS 开发者</span>
      <span class="hero-pill">🃏 TCG 爱好者</span>
      <span class="hero-pill">🤖 AI Agent 菜鸟</span>
      <span class="hero-pill">💬 内容运营</span>
    </div>
    <div class="hero-links">
      <a class="hero-link" href="https://github.com/lordmos" target="_blank" rel="noopener">
        <i class="fab fa-github"></i> GitHub
      </a>
      <a class="hero-link" href="https://www.zhihu.com/people/lordmos" target="_blank" rel="noopener">
        <i class="fab fa-zhihu"></i> 知乎
      </a>
      <a class="hero-link" href="https://space.bilibili.com/143360" target="_blank" rel="noopener">
        <i class="fab fa-bilibili"></i> B站
      </a>
    </div>
  </section>

  <hr class="page-divider" />

  <!-- Blog -->
  <section class="page-section" id="blog">
    <p class="section-label">Blog · 随笔</p>
    <div class="blog-grid" id="blogGrid">
      <div class="blog-loading">
        <div class="blog-loading-spinner"></div>
        <span>加载博客列表...</span>
      </div>
    </div>
    <a class="blog-view-all" id="blogViewAll" href="/blog-list.html" style="display:none">
      查看更多 <i class="fas fa-arrow-right"></i>
    </a>
  </section>

  <hr class="page-divider" />

  <!-- Mini Program -->
  <section class="page-section" id="miniprogram">
    <p class="section-label">WeChat Mini Program</p>
    <div class="mp-card">
      <div class="mp-qr">
        <img src="assets/img/ua-qrcode.png" alt="UA真选组小程序二维码" loading="lazy" />
      </div>
      <div class="mp-body">
        <span class="mp-tag"><i class="fab fa-weixin"></i> 微信小程序</span>
        <div class="mp-title">UA 真选组</div>
        <p class="mp-desc">
          Union Arena 第三方卡片游戏社区。提供卡片信息查询、中文翻译、卡组构筑与测试等功能，专为 UA 玩家打造。
          B站 <a href="https://space.bilibili.com/143360" target="_blank" rel="noopener"
            style="text-decoration:underline;color:inherit"><strong>LordMOS</strong></a> 有运营相关视频。
        </p>
      </div>
    </div>
  </section>

  <hr class="page-divider" />

  <!-- Agent Projects -->
  <section class="page-section" id="agents">
    <p class="section-label">Open Source · Vibe Coding</p>
    <div class="agent-grid">

      <a class="agent-card" href="https://lordmos.github.io/scriptorium/" target="_blank" rel="noopener">
        <div class="agent-logo">
          <img src="assets/img/hero-scriptorium.svg" alt="Scriptorium" loading="lazy" />
        </div>
        <div class="agent-name">Scriptorium</div>
        <div class="agent-sub">源码阅读 · 多 Agent 书籍编写框架</div>
        <p class="agent-desc">
          "源码阅读系列"技术书籍的多 Agent 协作编写框架。让 AI 协同分工，自动完成技术书籍的章节撰写、校对与发布。
        </p>
        <div class="agent-tags">
          <span class="agent-tag">Multi-Agent</span>
          <span class="agent-tag">技术书籍</span>
          <span class="agent-tag">VitePress</span>
        </div>
        <span class="btn-gh"><i class="fab fa-github"></i> GitHub</span>
      </a>

      <a class="agent-card" href="https://lordmos.github.io/meridian/" target="_blank" rel="noopener">
        <div class="agent-logo">
          <img src="assets/img/hero-meridian.svg" alt="Meridian" loading="lazy" />
        </div>
        <div class="agent-name">Meridian</div>
        <div class="agent-sub">开源项目运营工具包</div>
        <p class="agent-desc">
          可复用的开源 Agent 项目运营工具包。给定任何一个开源 Agent 项目，在一次 AI 会话里完成全套运营基础设施搭建。
        </p>
        <div class="agent-tags">
          <span class="agent-tag">项目运营</span>
          <span class="agent-tag">i18n</span>
          <span class="agent-tag">VitePress</span>
        </div>
        <span class="btn-gh"><i class="fab fa-github"></i> GitHub</span>
      </a>

      <a class="agent-card" href="https://lordmos.github.io/copilot-island/" target="_blank" rel="noopener">
        <div class="agent-logo">
          <img src="assets/img/hero-copilot-island.svg" alt="Copilot Island" loading="lazy" />
        </div>
        <div class="agent-name">Copilot Island</div>
        <div class="agent-sub">macOS 刘海屏 · Copilot CLI 监控</div>
        <p class="agent-desc">
          免费开源的 macOS 刘海屏应用，实时显示 GitHub Copilot CLI 的所有操作。支持会话监控、工具调用动态与对话历史浏览。
        </p>
        <div class="agent-tags">
          <span class="agent-tag">macOS</span>
          <span class="agent-tag">Swift</span>
          <span class="agent-tag">刘海屏</span>
        </div>
        <span class="btn-gh"><i class="fab fa-github"></i> GitHub</span>
      </a>

      <a class="agent-card" href="https://lordmos.github.io/dev-crew/" target="_blank" rel="noopener">
        <div class="agent-logo">
          <img src="assets/img/dev-crew.png" alt="DevCrew" loading="lazy" />
        </div>
        <div class="agent-name">DevCrew</div>
        <div class="agent-sub">AI 团队协作协议</div>
        <p class="agent-desc">
          给 AI 一套协作协议，让它像真正的团队一样工作。PDEVI 工作流 + 29 位领域专家，跨平台兼容所有 AI 平台。
        </p>
        <div class="agent-tags">
          <span class="agent-tag">Multi-Agent</span>
          <span class="agent-tag">PDEVI</span>
          <span class="agent-tag">跨平台</span>
        </div>
        <span class="btn-gh"><i class="fab fa-github"></i> GitHub</span>
      </a>

    </div>
  </section>

  <hr class="page-divider" />

  <!-- iOS Apps -->
  <section class="page-section" id="projects">
    <p class="section-label">iOS Apps</p>
    <div class="app-grid">

      <a class="app-card" href="https://apps.apple.com/cn/app/id1492618122" target="_blank" rel="noopener">
        <img class="app-icon" src="assets/img/icon-wewall.jpg" alt="唯沃壁纸" loading="lazy" />
        <div class="app-name">唯沃壁纸</div>
        <div class="app-sub">Wewall</div>
        <p class="app-desc">由全球专业摄影师与模特提供作品的高清壁纸，基于 Pexels 精选内容。</p>
        <span class="btn-store"><i class="fab fa-apple"></i> App Store</span>
      </a>

      <a class="app-card" href="https://apps.apple.com/cn/app/id1492861857" target="_blank" rel="noopener">
        <img class="app-icon" src="assets/img/icon-wesper.jpg" alt="微声白噪音" loading="lazy" />
        <div class="app-name">微声白噪音</div>
        <div class="app-sub">Wesper · WeTrack Studio</div>
        <p class="app-desc">精心设计的环境音与白噪音应用，专注当下，放下手机。</p>
        <span class="btn-store"><i class="fab fa-apple"></i> App Store</span>
      </a>

      <a class="app-card" href="https://apps.apple.com/cn/app/id1551346700" target="_blank" rel="noopener">
        <img class="app-icon" src="assets/img/icon-nfc.jpg" alt="NFC小册" loading="lazy" />
        <div class="app-name">NFC 小册</div>
        <div class="app-sub">WeTrack Studio</div>
        <p class="app-desc">一键管理你的 NFC 标签，写入、读取、分享，让物联网触手可及。</p>
        <span class="btn-store"><i class="fab fa-apple"></i> App Store</span>
      </a>

      <a class="app-card" href="https://apps.apple.com/cn/app/id1554477295" target="_blank" rel="noopener">
        <img class="app-icon" src="assets/img/icon-printer.jpg" alt="文小印" loading="lazy" />
        <div class="app-name">文小印</div>
        <div class="app-sub">Little Printer</div>
        <p class="app-desc">掌上收银 · 外卖点菜 · 进销存 · 蓝牙小票打印，定制模版灵活印。</p>
        <span class="btn-store"><i class="fab fa-apple"></i> App Store</span>
      </a>

    </div>
  </section>

  </main>

  <!-- Footer -->
  <footer class="site-footer">
    <div class="footer-inner">
      <span class="footer-copy">© 2021–2026 LordMOS</span>
      <ul class="footer-nav">
        <li><a href="https://github.com/lordmos" target="_blank" rel="noopener">GitHub</a></li>
        <li><a href="https://www.zhihu.com/people/lordmos" target="_blank" rel="noopener">知乎</a></li>
        <li><a href="https://space.bilibili.com/143360" target="_blank" rel="noopener">B站</a></li>
        <li><a href="/privacy">隐私政策</a></li>
      </ul>
    </div>
  </footer>

  <script>
    const nav = document.getElementById('mainNav');
    window.addEventListener('scroll', () => {
      nav.style.borderBottomColor = window.scrollY > 10 ? 'var(--nav-scroll-border)' : 'transparent';
    });

    // Mobile nav toggle
    const navToggle = document.getElementById('navToggle');
    const navLinks = document.getElementById('navLinks');
    navToggle.addEventListener('click', () => {
      const isOpen = navLinks.classList.toggle('nav-open');
      navToggle.setAttribute('aria-expanded', isOpen);
      navToggle.querySelector('i').className = isOpen ? 'fas fa-times' : 'fas fa-bars';
    });

    // Load latest 5 blog posts for homepage
    (async function loadBlogList() {
      const grid = document.getElementById('blogGrid');
      try {
        const res = await fetch('blogs/index.json');
        if (!res.ok) throw new Error('Failed to load');
        const posts = await res.json();

        // Sort by date descending
        posts.sort((a, b) => b.date.localeCompare(a.date));

        // Show only latest 5
        const latest = posts.slice(0, 5);

        grid.innerHTML = latest.map(post => {
          const dateObj = new Date(post.date + 'T00:00:00');
          const dateStr = `${dateObj.getFullYear()}-${String(dateObj.getMonth()+1).padStart(2,'0')}-${String(dateObj.getDate()).padStart(2,'0')}`;
          return `
            <a class="blog-card" href="blog.html?post=${encodeURIComponent(post.file)}">
              <span class="blog-card-date">${dateStr}</span>
              <div class="blog-card-content">
                <div class="blog-card-title">${post.title}</div>
                ${post.subtitle ? `<div class="blog-card-subtitle">${post.subtitle}</div>` : ''}
              </div>
              <span class="blog-card-arrow"><i class="fas fa-arrow-right"></i></span>
            </a>`;
        }).join('');

        // Show "查看更多" link if there are more than 5 posts, or always show it as entry to full list
        const viewAllEl = document.getElementById('blogViewAll');
        if (viewAllEl) viewAllEl.style.display = 'inline-flex';

      } catch (e) {
        grid.innerHTML = '<p style="color:var(--fg-3);font-size:0.9rem">暂无博客文章。</p>';
      }
    })();
  </script>

</body>

</html>