-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
299 lines (284 loc) · 14 KB
/
index.html
File metadata and controls
299 lines (284 loc) · 14 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
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Yarpen Wong</title>
<link rel="stylesheet" href="style.css">
</head>
<body data-theme="dark">
<header class="site-header">
<div class="container hero">
<img src="assets/me.jpg" class="avatar" alt="Portrait of Yarpen Wong">
<div class="hero-content">
<h1>Yarpen Wong</h1>
<p class="tagline">Rig🔗 Animate🦿 Play🎮 Repeat🔄</p>
<div class="hero-actions">
<a class="icon-link" href="https://space.bilibili.com/2425256" aria-label="Bilibili profile">
<img src="assets/bilibili-mark.svg" class="iico" alt="">
</a>
<a class="icon-link" href="https://github.com/b6462" aria-label="GitHub profile">
<img src="assets/github-mark.svg" class="iico" alt="">
</a>
<div class="switch">
<input id="language-Switch" class="check-toggle check-toggle-round-flat" type="checkbox" aria-label="Switch language">
<label for="language-Switch"></label>
<span class="on">中文</span>
<span class="off">ENG</span>
</div>
<label class="theme-switch" for="theme-switch">
<input id="theme-switch" type="checkbox" checked aria-label="Toggle dark mode">
<span class="theme-slider"></span>
<span class="theme-label-dark"> ☾ </span>
<span class="theme-label-light"> ☀︎ </span>
</label>
</div>
</div>
</div>
</header>
<main>
<div id="contentCHN" class="content active">
<section class="section container">
<h2 class="section-title">经历</h2>
<div class="timeline">
<article class="timeline-entry">
<div class="timespan">2025.4 - Present</div>
<div class="ico">
<div class="entry-dot"></div>
<img src="assets/mihoyo_hist.png" alt="MiHoYo logo">
</div>
<div class="desc">在<a href="https://www.mihoyo.com/">米哈游</a>担任技术动画</div>
</article>
<article class="timeline-entry">
<div class="timespan">2023.11 - 2025.3</div>
<div class="ico">
<div class="entry-dot"></div>
<img src="assets/tencent_hist.png" alt="Tencent logo">
</div>
<div class="desc">
在<a href="http://ieg.tencent.com/">腾讯IEG</a>担任技术动画
<br>
为在研ACT项目部署动画管线，开发并维护角色动画模块
</div>
</article>
<article class="timeline-entry">
<div class="timespan">2021.6 - 2023.8</div>
<div class="ico">
<div class="entry-dot"></div>
<img src="assets/herogames_hist.jpeg" alt="Hero Games logo">
</div>
<div class="desc">
在<a href="https://www.herogame.com/">英雄游戏</a>技术研究院担任技术美术
<br>
为工作室研究并开发新技术与管线，包括大世界场景资产过程生成，动画管线与绑定工具开发，以及运行时动画效果实现
</div>
</article>
<article class="timeline-entry">
<div class="timespan">2017.9 - 2021.6</div>
<div class="ico">
<div class="entry-dot"></div>
<img src="assets/ustb_hist.png" alt="USTB logo">
</div>
<div class="desc">本科毕业于<a href="https://www.ustb.edu.cn/">北京科技大学</a>智能科学与技术系</div>
</article>
</div>
</section>
<section class="section section-muted">
<div class="container">
<h2 class="section-title">文章</h2>
<ul class="nodot">
<li>N/A</li>
</ul>
</div>
</section>
<section class="section section-muted">
<div class="container">
<h2 class="section-title">项目</h2>
<div class="card-grid">
<article class="card">
<a href="https://github.com/b6462/ComputerAnimationPlayground">
<div class="ccimg"><img src="assets/proj_thumb_01.png" alt="Animation playground screenshot"></div>
</a>
<div class="cdesc">Animation playground</div>
</article>
<article class="card">
<a href="https://github.com/b6462/DOFfer">
<div class="ccimg"><img src="assets/proj_thumb_02.png" alt="DOFfer project screenshot"></div>
</a>
<div class="cdesc">DOFfer 绑定脚本集</div>
</article>
</div>
</div>
</section>
<section class="section container">
<h2 class="section-title">迷你项目</h2>
<article class="project">
<div class="pico"><img src="assets/petProj_thumb_00.jpg" alt="Parallax concept thumbnail"></div>
<div class="pdesc"><a href="https://www.bilibili.com/video/BV17z4y117Bs/">视差测试</a>, 21年找工作时做的小原型, 只使用了很基本的Unity技术和大量的Trick.</div>
</article>
<article class="project">
<div class="pico"><img src="assets/petProj_thumb_01.png" alt="Tetris PSO thumbnail"></div>
<div class="pdesc">
<a href="https://github.com/b6462/Tetris_PSO">Tetris PSO</a> 是为我本科毕业论文制作的可视化框架, 在LOVE2D引擎中使用lua完成, 之后重构到了pygame框架中, 不过代码很遗憾丢失掉了
<br>
图中是这个框架在一台 <a href="https://forum.clockworkpi.com/c/gameshell/5">gameshell</a> 掌机上运行的状态.
</div>
</article>
<article class="project">
<div class="pico"><img src="assets/petProj_thumb_02.png" alt="Arduino project thumbnail"></div>
<div class="pdesc"><a href="https://github.com/b6462/Arduino_projects">Arduino 井字棋</a>, 我在大学早期制作的游戏项目之一, 使用了一台ArduinoUNO、一个模拟摇杆和一块液晶显示屏.</div>
</article>
<article class="project">
<div class="pico"><img src="assets/petProj_thumb_03.png" alt="Yeetpack Joyride thumbnail"></div>
<div class="pdesc">
<a href="https://github.com/b6462/YeetpackJoyride">Yeetpack Joyride</a> - jetpack joyride的翻版, 我的第一个游戏项目, 使用<a href="http://www.rgsoft.cn/page41">FunCode引擎</a>用C++写制.
</div>
</article>
</section>
<section class="section container">
<h2 class="section-title">MISC</h2>
<ul>
<li></li>
</ul>
</section>
<section class="section container">
<h2 class="section-title">Appendix</h2>
<ul>
<li id="port_01">[1] 网页框架启发自 <a href="https://karpathy.ai/">Andrej Karpathy</a> </li>
</ul>
</section>
</div>
<div id="contentENG" class="content">
<section class="section container">
<h2 class="section-title">Experience</h2>
<div class="timeline">
<article class="timeline-entry">
<div class="timespan">2025.4 - Present</div>
<div class="ico">
<div class="entry-dot"></div>
<img src="assets/mihoyo_hist.png" alt="MiHoYo logo">
</div>
<div class="desc">Joined <a href="https://www.mihoyo.com/">MiHoYo</a> as Technical Animator</div>
</article>
<article class="timeline-entry">
<div class="timespan">2023.11 - 2025.3</div>
<div class="ico">
<div class="entry-dot"></div>
<img src="assets/tencent_hist.png" alt="Tencent logo">
</div>
<div class="desc">
Joined <a href="http://ieg.tencent.com/">Tencent IEG</a> as Technical Animator
<br>
Established animation piplines for WIP ACT project, developed and maintained in-game character animation features
</div>
</article>
<article class="timeline-entry">
<div class="timespan">2021.6 - 2023.8</div>
<div class="ico">
<div class="entry-dot"></div>
<img src="assets/herogames_hist.jpeg" alt="Hero Games logo">
</div>
<div class="desc">
Joint <a href="https://www.herogame.com/">Hero Games</a>' Advanced Tech Division as Technical Artist
<br>
Developed new technologies and piplines for company studios, including open-world asset PCG pipline, Animation toolsets, and in-game animation features
</div>
</article>
<article class="timeline-entry">
<div class="timespan">2017.9 - 2021.6</div>
<div class="ico">
<div class="entry-dot"></div>
<img src="assets/ustb_hist.png" alt="USTB logo">
</div>
<div class="desc">BEng at <a href="https://www.ustb.edu.cn/">University of Science and Technology Beijing (USTB)</a> major in Intelligence Science and Technology.</div>
</article>
</div>
</section>
<section class="section section-muted">
<div class="container">
<h2 class="section-title">Writings</h2>
<p>Most of my blogs are stored locally for fast referencing, and they are a mess, occasionally I refine a few and post them here:</p>
<ul class="nodot">
<li>N/A</li>
</ul>
</div>
</section>
<section class="section section-muted">
<div class="container">
<h2 class="section-title">Projects</h2>
<div class="card-grid">
<article class="card">
<a href="https://github.com/b6462/ComputerAnimationPlayground">
<div class="ccimg"><img src="assets/proj_thumb_01.png" alt="Animation playground screenshot"></div>
</a>
<div class="cdesc">Animation playground</div>
</article>
<article class="card">
<a href="https://github.com/b6462/DOFfer">
<div class="ccimg"><img src="assets/proj_thumb_02.png" alt="DOFfer project screenshot"></div>
</a>
<div class="cdesc">DOFfer rigging scripts</div>
</article>
</div>
</div>
</section>
<section class="section container">
<h2 class="section-title">Pet projects</h2>
<article class="project">
<div class="pico"><img src="assets/petProj_thumb_00.jpg" alt="Parallax concept thumbnail"></div>
<div class="pdesc"><a href="https://www.bilibili.com/video/BV17z4y117Bs/">Parallax concept </a>, an early prototype I made when looking for my first job back in 2021, with bascis Unity skills and lots of tricks.</div>
</article>
<article class="project">
<div class="pico"><img src="assets/petProj_thumb_01.png" alt="Tetris PSO thumbnail"></div>
<div class="pdesc">
<a href="https://github.com/b6462/Tetris_PSO">Tetris PSO</a> is the framework I built as a visualizer for my Bachelor's thesis, written in lua using the LOVE2D engine, it was later refactored to fit the pygame framework, but the code was unfortunately lost.
<br>
The thumbnail is the framework running on a <a href="https://forum.clockworkpi.com/c/gameshell/5">gameshell</a> handheld.
</div>
</article>
<article class="project">
<div class="pico"><img src="assets/petProj_thumb_02.png" alt="Arduino Tic-tac-toe thumbnail"></div>
<div class="pdesc"><a href="https://github.com/b6462/Arduino_projects">Arduino Tic-tac-toe </a>, one of my earliest gameDev projects in college, built with an ArduinoUno, an analog stick and a LCD screen on a breadboard.</div>
</article>
<article class="project">
<div class="pico"><img src="assets/petProj_thumb_03.png" alt="Yeetpack Joyride thumbnail"></div>
<div class="pdesc">
<a href="https://github.com/b6462/YeetpackJoyride">Yeetpack Joyride</a> - a copy of jetpack joyride, my first ever game project, written with C++ in <a href="http://www.rgsoft.cn/page41">FunCode engine</a>.
</div>
</article>
</section>
<section class="section container">
<h2 class="section-title">MISC</h2>
<ul>
<li></li>
</ul>
</section>
<section class="section container">
<h2 class="section-title">Appendix</h2>
<ul>
<li id="port_02">[1] Page inspired by <a href="https://karpathy.ai/">Andrej Karpathy</a></li>
</ul>
</section>
</div>
</main>
<script>
const switchInput = document.getElementById("language-Switch");
const themeSwitch = document.getElementById("theme-switch");
const contentCH = document.getElementById("contentCHN");
const contentENG = document.getElementById("contentENG");
const pageBody = document.body;
switchInput.addEventListener("change", () => {
if (switchInput.checked) {
contentCH.classList.remove("active");
contentENG.classList.add("active");
} else {
contentCH.classList.add("active");
contentENG.classList.remove("active");
}
});
themeSwitch.addEventListener("change", () => {
pageBody.setAttribute("data-theme", themeSwitch.checked ? "dark" : "light");
});
</script>
</body>
</html>