-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
263 lines (244 loc) · 12.6 KB
/
Copy pathindex.html
File metadata and controls
263 lines (244 loc) · 12.6 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
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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="张瀚 / ZZDR1023 的 AI Native、Serverless Web 与 ROS 机器人系统作品集。">
<meta name="author" content="张瀚">
<meta property="og:type" content="website">
<meta property="og:title" content="张瀚 / ZZDR1023 - AI Native Portfolio">
<meta property="og:description" content="把 AI 能力接入真实业务、数据流程与机器人硬件场景。">
<meta property="og:url" content="https://zzdr1023.github.io/">
<title>张瀚 / ZZDR1023 · AI Native Portfolio</title>
<script>document.documentElement.classList.add('js');</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div class="cursor-orb" aria-hidden="true"></div>
<canvas id="signal-canvas" aria-hidden="true"></canvas>
<div class="page-shell">
<header class="site-header" data-reveal>
<a class="brand" href="#top" aria-label="回到首页">
<span class="brand-mark">ZH</span>
<span>ZZDR1023</span>
</a>
<nav class="site-nav" aria-label="主导航">
<a href="#projects">项目</a>
<a href="#stack">技术栈</a>
<a href="#workflow">工作流</a>
<a href="https://github.com/ZZDR1023" target="_blank" rel="noreferrer">GitHub</a>
</nav>
</header>
<main id="top">
<section class="hero section-grid">
<div class="hero-copy" data-reveal>
<p class="eyebrow">AI APPLICATION · SERVERLESS WEB · ROBOTICS SYSTEMS</p>
<h1>把 AI 能力接入真实业务、数据流程与机器人场景。</h1>
<p class="hero-lede">
我是张瀚，计算机科学与技术本科生。关注 AI Native 应用开发、Cloudflare Serverless、Web 全栈与 ROS/Linux 机器人系统，习惯用 Claude Code / Codex 把需求拆解、代码实现、调试验证和部署流程串起来。
</p>
<div class="hero-actions" aria-label="主要链接">
<a class="button primary" href="#projects">查看项目</a>
<a class="button secondary" href="https://github.com/ZZDR1023" target="_blank" rel="noreferrer">GitHub 主页</a>
</div>
</div>
<aside class="hero-panel" data-reveal>
<div class="panel-status">
<span class="pulse-dot"></span>
<span>Portfolio online</span>
</div>
<div class="terminal-card" aria-label="能力概览">
<div class="terminal-line"><span>focus</span><strong>AI Native 工程实践</strong></div>
<div class="terminal-line"><span>model</span><strong>GLM API · Claude Code</strong></div>
<div class="terminal-line"><span>deploy</span><strong>Cloudflare Pages / Workers / D1</strong></div>
<div class="terminal-line"><span>robotics</span><strong>ROS1 · Cartographer · RViz</strong></div>
</div>
<div class="signal-map">
<span style="--x: 12%; --y: 22%; --d: 0s"></span>
<span style="--x: 76%; --y: 18%; --d: .35s"></span>
<span style="--x: 54%; --y: 58%; --d: .7s"></span>
<span style="--x: 24%; --y: 78%; --d: 1.05s"></span>
</div>
</aside>
</section>
<section class="section intro" data-reveal>
<div>
<p class="section-kicker">Profile</p>
<h2>不只是写 Demo，更关注从想法到可运行产品的闭环。</h2>
</div>
<p>
我的项目横跨 H5 交互、医疗数据、机器人小车和 Serverless 后端。相比单点技术，我更在意把 AI 接口、前端体验、数据处理、部署排障和真实硬件联调组合成可以展示、可以复盘、可以继续迭代的工程成果。
</p>
</section>
<section class="section" id="projects">
<div class="section-heading" data-reveal>
<p class="section-kicker">Selected Work</p>
<h2>代表项目</h2>
</div>
<div class="project-stack">
<article class="project-card large" data-reveal>
<div class="project-index">01</div>
<div class="project-content">
<p class="project-type">ROS / Web Control / Robotics</p>
<h3>XF-ROBOT-UCAR01 智能小车</h3>
<p>
基于 ROS1、Python Flask、WebSocket、Cartographer、RViz 与 Linux 的智能车 Web 控制系统，支持远程控制、地图导航、巡逻、语音控制、日志分析与实时状态监控。
</p>
<ul class="clean-list">
<li>使用 Claude Code 辅助完成 ROS/Linux 调试、服务部署和日志排查。</li>
<li>开发 Web 驾驶舱，支持底盘控制、STOP、导航目标下发和 AMCL 位姿展示。</li>
<li>通过 SSH 连接实体车环境，完成联调、异常定位与运行验证。</li>
</ul>
<div class="tag-row">
<span>ROS1</span><span>Python Flask</span><span>WebSocket</span><span>RViz</span><span>Linux</span>
</div>
<div class="project-links">
<a class="text-link" href="/projects/ucar.html">项目详情 →</a>
<a class="text-link muted-link" href="https://github.com/ZZDR1023/ucar_web_control" target="_blank" rel="noreferrer">查看仓库 →</a>
</div>
</div>
</article>
<article class="project-card" data-reveal>
<div class="project-index">02</div>
<div class="project-content">
<p class="project-type">AI Data / Medical System</p>
<h3>PO-SCORAD 多模态医疗数据智能评估系统</h3>
<p>
面向医疗场景的数据采集与智能评估系统，参与数据导出、对象归一化处理、训练数据链路与前端交互优化。
</p>
<ul class="clean-list">
<li>整理医生标注、患者图像和结构化字段，形成 AI 可用数据集。</li>
<li>优化数据管理体验，支持后续模型训练、评估与数据闭环。</li>
</ul>
<div class="tag-row"><span>HTML5</span><span>JavaScript</span><span>数据归一化</span><span>CI/CD</span></div>
<a class="text-link" href="/projects/po-scorad.html">项目详情 →</a>
</div>
</article>
<article class="project-card" data-reveal>
<div class="project-index">03</div>
<div class="project-content">
<p class="project-type">AI Native Game / Serverless</p>
<h3>光球潜入：移动端体感游戏</h3>
<p>
基于 H5 Canvas、JavaScript、GLM API、Cloudflare Pages / Workers / D1 的移动端体感游戏，通过 AI 生成剧情文本与互动反馈。
</p>
<ul class="clean-list">
<li>设计 Prompt 映射逻辑，接入 GLM API 生成结算文案。</li>
<li>使用 Cloudflare Workers / D1 构建轻量后端和排行榜。</li>
</ul>
<div class="tag-row"><span>Canvas</span><span>GLM API</span><span>Workers</span><span>D1</span></div>
<div class="project-links">
<a class="text-link" href="/projects/cyber-infiltration.html">项目详情 →</a>
<a class="text-link" href="https://cyber-infiltration.pages.dev/" target="_blank" rel="noreferrer">在线体验 →</a>
<a class="text-link muted-link" href="https://github.com/ZZDR1023/cyber-infiltration" target="_blank" rel="noreferrer">查看仓库 →</a>
</div>
</div>
</article>
</div>
</section>
<section class="section capability-grid" id="stack">
<div class="section-heading" data-reveal>
<p class="section-kicker">Stack</p>
<h2>技术能力地图</h2>
</div>
<div class="capability-list">
<div class="capability" data-reveal><span>AI Native</span><strong>Claude Code / Codex / Prompt 工作流 / GLM API</strong></div>
<div class="capability" data-reveal><span>Web & Serverless</span><strong>HTML5 / Canvas / Flask / Cloudflare Pages / Workers / D1</strong></div>
<div class="capability" data-reveal><span>Robotics</span><strong>ROS1 / Cartographer / RViz / Linux / SSH / 传感器调试</strong></div>
<div class="capability" data-reveal><span>Engineering</span><strong>Git 协作 / CI/CD / systemd / 日志分析 / 远程部署</strong></div>
</div>
</section>
<section class="section workflow" id="workflow" data-reveal>
<div>
<p class="section-kicker">Workflow</p>
<h2>我的 AI 辅助开发方式</h2>
</div>
<div class="workflow-steps">
<div><span>01</span><strong>拆解需求</strong><p>把模糊目标拆成页面、接口、数据、部署和验证步骤。</p></div>
<div><span>02</span><strong>快速实现</strong><p>用 AI 工具提升编码和调试速度，但保留人工判断和工程约束。</p></div>
<div><span>03</span><strong>联调验证</strong><p>结合日志、SSH、浏览器和硬件运行状态，把 Demo 跑成可用版本。</p></div>
<div><span>04</span><strong>沉淀复盘</strong><p>整理项目文档、技术栈、问题定位过程和可复用经验。</p></div>
</div>
</section>
</main>
<footer class="site-footer" data-reveal>
<p>© 2026 张瀚 / ZZDR1023</p>
<div>
<a href="https://github.com/ZZDR1023" target="_blank" rel="noreferrer">GitHub</a>
<a href="#top">Back to top</a>
</div>
</footer>
</div>
<script>
const revealItems = document.querySelectorAll('[data-reveal]');
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.12 });
revealItems.forEach((item) => observer.observe(item));
const canvas = document.getElementById('signal-canvas');
const context = canvas.getContext('2d');
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
let width = 0;
let height = 0;
let points = [];
function resizeCanvas() {
const scale = window.devicePixelRatio || 1;
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width * scale;
canvas.height = height * scale;
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
context.setTransform(scale, 0, 0, scale, 0, 0);
points = Array.from({ length: Math.min(42, Math.floor(width / 32)) }, (_, index) => ({
x: (index * 97) % width,
y: (index * 53) % height,
vx: ((index % 5) - 2) * 0.12,
vy: (((index + 2) % 5) - 2) * 0.1
}));
}
function drawSignals() {
context.clearRect(0, 0, width, height);
context.fillStyle = 'rgba(190, 166, 112, 0.55)';
context.strokeStyle = 'rgba(120, 145, 125, 0.2)';
context.lineWidth = 1;
points.forEach((point, index) => {
if (!prefersReducedMotion) {
point.x += point.vx;
point.y += point.vy;
if (point.x < 0 || point.x > width) point.vx *= -1;
if (point.y < 0 || point.y > height) point.vy *= -1;
}
context.beginPath();
context.arc(point.x, point.y, index % 3 === 0 ? 1.8 : 1.2, 0, Math.PI * 2);
context.fill();
for (let nextIndex = index + 1; nextIndex < points.length; nextIndex += 1) {
const next = points[nextIndex];
const distance = Math.hypot(point.x - next.x, point.y - next.y);
if (distance < 150) {
context.globalAlpha = 1 - distance / 150;
context.beginPath();
context.moveTo(point.x, point.y);
context.lineTo(next.x, next.y);
context.stroke();
context.globalAlpha = 1;
}
}
});
if (!prefersReducedMotion) requestAnimationFrame(drawSignals);
}
resizeCanvas();
drawSignals();
window.addEventListener('resize', resizeCanvas);
</script>
<script src="/js/portfolio.js"></script>
</body>
</html>