-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
594 lines (537 loc) · 28.9 KB
/
Copy pathindex.html
File metadata and controls
594 lines (537 loc) · 28.9 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
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ═══ CareerOS launch redirect (ROOT-ONLY, reversible) ═══════════════════
This old homepage now forwards to the current site, leebrian.dev.
Only THIS root page redirects — every subpage (/0020, /1020, /work/*)
stays live and untouched. To restore the old homepage: delete this block.
Fires before render (no flash); meta-refresh is the no-JS fallback. -->
<script>location.replace("https://leebrian.dev/");</script>
<meta http-equiv="refresh" content="0; url=https://leebrian.dev/" />
<link rel="canonical" href="https://leebrian.dev/" />
<!-- ═══════════════════════════════════════════════════════════════════════ -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" type="image/png" href="./images/favicon.png" />
<title>
Brian Wonjun Lee | Website Introducing Myself
</title>
<meta name="Brian Wonjun Lee" content="Passionate about crafting immersive 3D graphics and exploring the limitless potential of programming. I thrive at the intersection of creativity and technology, building visually stunning and technically sophisticated solutions that bring ideas to life. Whether it's designing intricate virtual worlds or developing innovative tools, I'm driven by a fascination for how code transforms imagination into reality.">
<meta name="keywords" content="Brian Wonjun Lee, Java, OCaml, C++, C#, Visual Studio, Oracle, DBeaver, SQLite, Blender, Adobe Creative Suite" />
<link rel="stylesheet" href="index.css?v=4" />
<!-- Preload critical fonts so they're ready before first paint -->
<link rel="preload" href="./fonts/HKGrotesk-Regular.woff" as="font" type="font/woff" crossorigin />
<link rel="preload" href="./fonts/Jost-Regular.ttf" as="font" type="font/ttf" crossorigin />
</head>
<body>
<!-- Custom cursor -->
<div class="cursor cursor--dot"></div>
<div class="cursor cursor--ring"></div>
<!-- Navigation -->
<nav class="nav" role="navigation" id="site-nav">
<div class="row">
<a href="#top" class="nav__logo">Brian Lee</a>
<ul class="nav__items">
<li class="nav__item"><a href="#about" class="nav__link" data-section="about">About</a></li>
<li class="nav__item nav__item--has-dropdown">
<a href="#work" class="nav__link" data-section="work">Work</a>
<div class="nav__dropdown">
<button class="nav__dropdown-item" data-filter="recent">Recent</button>
<button class="nav__dropdown-item" data-filter="design">Design</button>
<button class="nav__dropdown-item" data-filter="develop">Development</button>
<button class="nav__dropdown-item" data-filter="3d">3D</button>
</div>
</li>
<li class="nav__item"><a href="#clients" class="nav__link" data-section="clients">Experience</a></li>
<li class="nav__item"><a href="#contact" class="nav__link" data-section="contact">Contact</a></li>
</ul>
</div>
</nav>
<!-- Header -->
<header class="header" role="banner" id="top">
<div class="header__text-box row">
<div class="header__text">
<h1 class="heading-primary" data-reveal>
<span>Brian Wonjun Lee</span>
</h1>
<p data-reveal data-reveal-delay="120">A designer and engineer passionate about blending creativity with technology to craft immersive experiences.</p>
<a href="#contact" class="btn btn--pink" data-reveal data-reveal-delay="240">Get in touch</a>
</div>
</div>
</header>
<main role="main">
<!-- About -->
<section class="about" id="about">
<div class="row">
<h2 data-reveal>About Me</h2>
<div class="about__content">
<div class="about__text" data-reveal data-reveal-delay="100">
<p>
Hello! I'm Brian Lee, a junior at the University of Pennsylvania double majoring Design and Computer Science. I'm passionate about blending creativity with technology to craft innovative, human-centered experiences. With a background spanning programming, graphic design, 3D graphics, and interactive media, I enjoy exploring how design and code intersect to bring ideas to life. From designing and develping end-to-end products to experimenting with digital art and immersive environments, I'm always seeking new ways to push boundaries, learn, and create impactful work. Welcome to my portfolio!
</p>
</div>
<div class="about__photo-container" data-reveal data-reveal-delay="200">
<img class="about__photo" src="./images/IMG_0047.jpg" alt="" fetchpriority="high" loading="eager" />
</div>
</div>
</div>
</section>
</main>
<!-- Work -->
<section class="work" id="work">
<div class="row">
<h2 data-reveal>My Work</h2>
<!-- Tabs -->
<div class="work__tabs" role="tablist" aria-label="Project categories">
<button class="work__tab is-active" role="tab" data-tab="recent" aria-selected="true" type="button">Recent</button>
<button class="work__tab" role="tab" data-tab="design" aria-selected="false" type="button">Design</button>
<button class="work__tab" role="tab" data-tab="develop" aria-selected="false" type="button">Development</button>
<button class="work__tab" role="tab" data-tab="3d" aria-selected="false" type="button">3D</button>
</div>
<div class="work__boxes">
<!-- Passenger — 3D + design -->
<div class="work__box" data-tabs="3d design">
<div class="work__text">
<div class="work__tags">
<span class="work__tag work__tag--3d">3D</span>
<span class="work__tag work__tag--design">Design</span>
</div>
<h3>Passenger</h3>
<p class="work__date">Mar – Apr 2026</p>
<a href="./work/passenger.html" class="work__cta">View Project →</a>
<p>
A cinematic short — a figure walks through a canyon, finds an abandoned train swallowed by roots and wildflowers, and picks up something that briefly opens the world backward. Built in Maya and Unreal Engine 5 with Lumen GI, hardware ray tracing, and custom HLSL post-process shaders including an anisotropic Kuwahara filter for a painterly look.
</p>
<ul class="work__list">
<li>Unreal Engine 5</li>
<li>Maya</li>
<li>Megascans</li>
<li>HLSL Shaders</li>
<li>Movie Render Pipeline</li>
</ul>
</div>
<div class="work__image-col">
<div class="work__image-box">
<div class="yt-facade" data-src="https://www.youtube.com/embed/mSnqY3R2d-E?autoplay=1" data-allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture">
<img class="yt-facade__thumb" src="https://img.youtube.com/vi/mSnqY3R2d-E/hqdefault.jpg" alt="Passenger — Animation" loading="lazy" />
<button class="yt-facade__play" aria-label="Play Passenger video">
<svg viewBox="0 0 68 48" width="68" height="48"><path d="M66.5 7.7c-.8-2.9-2.5-5.4-5.4-6.2C55.8.1 34 0 34 0S12.2.1 6.9 1.5c-2.9.8-4.6 3.3-5.4 6.2C.1 12.4 0 24 0 24s.1 11.6 1.5 16.3c.8 2.9 2.5 5.4 5.4 6.2C12.2 47.9 34 48 34 48s21.8-.1 27.1-1.5c2.9-.8 4.6-3.3 5.4-6.2C67.9 35.6 68 24 68 24s-.1-11.6-1.5-16.3z" fill="red"/><path d="M45 24L27 14v20z" fill="#fff"/></svg>
</button>
</div>
</div>
<div class="work__links work__links--stacked">
<a href="https://youtu.be/mSnqY3R2d-E?si=GY6RXucE201QNE9b" target="_blank" class="link__text">
Watch Film <span>→</span>
</a>
</div>
</div>
</div>
<!-- Mini Minecraft — 3D + develop -->
<div class="work__box" data-tabs="3d develop">
<div class="work__text">
<div class="work__tags">
<span class="work__tag work__tag--3d">3D</span>
<span class="work__tag work__tag--develop">Development</span>
</div>
<h3>Mini Minecraft</h3>
<p class="work__date">April 2026</p>
<a href="./work/mini-minecraft.html" class="work__cta">View Project →</a>
<p>
A full 3D voxel engine built from scratch in C++ and OpenGL — 7 procedural biomes via layered Perlin/FBM noise, 3D cave systems, PCF shadow mapping, screen-space reflections, vertex ambient occlusion, a day-night cycle, multithreaded chunk streaming with a BlockType/VBO worker pipeline, and a predator-prey NPC ecosystem with A* pathfinding on a thread pool.
</p>
<ul class="work__list">
<li>C++ / OpenGL</li>
<li>GLSL</li>
<li>Multithreading</li>
<li>Procedural Terrain</li>
</ul>
</div>
<div class="work__image-col">
<div class="work__image-box">
<div class="yt-facade" data-src="https://www.youtube.com/embed/_NExgS0mZgM?start=15&autoplay=1" data-allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture">
<img class="yt-facade__thumb" src="https://img.youtube.com/vi/_NExgS0mZgM/hqdefault.jpg" alt="Mini Minecraft Demo" loading="lazy" />
<button class="yt-facade__play" aria-label="Play Mini Minecraft demo">
<svg viewBox="0 0 68 48" width="68" height="48"><path d="M66.5 7.7c-.8-2.9-2.5-5.4-5.4-6.2C55.8.1 34 0 34 0S12.2.1 6.9 1.5c-2.9.8-4.6 3.3-5.4 6.2C.1 12.4 0 24 0 24s.1 11.6 1.5 16.3c.8 2.9 2.5 5.4 5.4 6.2C12.2 47.9 34 48 34 48s21.8-.1 27.1-1.5c2.9-.8 4.6-3.3 5.4-6.2C67.9 35.6 68 24 68 24s-.1-11.6-1.5-16.3z" fill="red"/><path d="M45 24L27 14v20z" fill="#fff"/></svg>
</button>
</div>
</div>
<div class="work__links work__links--stacked">
<a href="https://www.youtube.com/watch?v=_NExgS0mZgM&t=15s" target="_blank" class="link__text">
Demo Video <span>→</span>
</a>
</div>
</div>
</div>
<!-- Wikipedia Redesign — design only -->
<div class="work__box" data-tabs="design">
<div class="work__text">
<div class="work__tags">
<span class="work__tag work__tag--design">Design</span>
</div>
<h3>Wikipedia Redesign</h3>
<p class="work__date">April 2026</p>
<a href="./work/wikipedia.html" class="work__cta">View Case Study →</a>
<p>
Course Project: A full UX research-to-prototype redesign of Wikipedia's mobile interface — three user interviews, a structured survey, low-fidelity wireframing, four-user prototype testing, and a high-fidelity prototype across five redesigned sections: Home, Article, Search, Language, and AI Chat.
</p>
<ul class="work__list">
<li>Figma</li>
<li>UX Research</li>
<li>User Interviews</li>
<li>User Testing</li>
</ul>
</div>
<div class="work__image-col">
<div class="work__image-box">
<div style="overflow: hidden; border-radius: 8px; height: 400px;">
<img
src="./images/Figma/Wikipedia/Thumbnail.png"
alt="Wikipedia redesign — thumbnail"
class="work__image"
loading="lazy"
style="border-radius: 0; transform: scale(1.12); transform-origin: center;" />
</div>
</div>
<div class="work__links work__links--stacked">
<a href="./work/wikipedia.html" class="link__text">
View Case Study <span>→</span>
</a>
</div>
</div>
</div>
<!-- Path@Penn Redesign — design only -->
<div class="work__box" data-tabs="design">
<div class="work__text">
<div class="work__tags">
<span class="work__tag work__tag--design">Design</span>
</div>
<h3>Path@Penn Redesign</h3>
<p class="work__date">March 2026</p>
<a href="./work/path-at-penn.html" class="work__cta">View Case Study →</a>
<p>
Self Directed Project: Path@Penn's existing experience supports enrollment, but its dense interface, fragmented workflows, unclear registration feedback, and reliance on outside tools make course planning unnecessarily difficult, especially for first-time users. Through a self-directed UX/UI redesign grounded in user research, interviews, and iterative prototype testing, the portal was reimagined as four connected sections—Dashboard, Course, Schedule, and Degree—creating a clearer, more cohesive, and more guided academic planning experience.
</p>
<ul class="work__list">
<li>Figma</li>
<li>UX Research</li>
<li>UI Design</li>
<li>User Testing</li>
</ul>
</div>
<div class="work__image-col">
<div class="work__image-box">
<img
src="./images/Figma/Student Dashboard (Main).png"
alt="Path@Penn redesign — Student Dashboard"
class="work__image"
loading="lazy"
style="border-radius: 8px;" />
</div>
<div class="work__links work__links--stacked">
<a href="https://www.figma.com/proto/DBOeERCANozjTRaP6VYxIb/Brian-Lee---Design?node-id=319-216&viewport=344%2C-430%2C0.08&t=2hEc8yLmTo5mlCYw-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=319%3A216&show-proto-sidebar=1&page-id=42%3A398" target="_blank" class="link__text">
View Prototype <span>→</span>
</a>
<a href="https://www.figma.com/deck/KYlvDCdz7M2VCTRki5Vvag" target="_blank" class="link__text">
Presentation <span>→</span>
</a>
</div>
</div>
</div>
<!-- Art of the Web — design + develop + 3D -->
<div class="work__box" data-tabs="design develop 3d">
<div class="work__text">
<div class="work__tags">
<span class="work__tag work__tag--3d">3D</span>
<span class="work__tag work__tag--design">Design</span>
<span class="work__tag work__tag--develop">Development</span>
</div>
<h3>Art of the Web</h3>
<p class="work__date">Aug 2025 - Dec 2025</p>
<a href="./work/art-of-web.html" class="work__cta">View Project →</a>
<p>
Course Project: A semester-long interactive portfolio built as a Three.js 3D scene — floating GLTF objects with custom physics and GSAP animations serve as the navigation for eight course projects spanning CSS art, generative p5.js sketches, a browser game, and an interactive data experience.
</p>
<ul class="work__list">
<li>Three.js</li>
<li>GSAP</li>
<li>SCSS / Vite</li>
<li>p5.js</li>
<li>Canvas API</li>
</ul>
</div>
<div class="work__image-col">
<div class="work__image-box">
<iframe
src="https://leebwj.github.io/1020/portfolio/"
frameborder="0"
width="100%"
height="400"
loading="lazy"
style="border-radius: 8px; overflow:hidden;">
</iframe>
</div>
<div class="work__links work__links--stacked">
<a href="https://leebwj.github.io/1020/portfolio/" target="_blank" class="link__text">
View Project <span>→</span>
</a>
<a href="https://github.com/leebwj/ArtOfTheWeb" target="_blank" class="link__text">
Repository <span>→</span>
</a>
</div>
</div>
</div>
<!-- Penn Spark Website — design + develop -->
<div class="work__box" data-tabs="design develop">
<div class="work__text">
<div class="work__tags">
<span class="work__tag work__tag--design">Design</span>
<span class="work__tag work__tag--develop">Development</span>
</div>
<h3>Penn Spark Website Redesign</h3>
<p class="work__date">Sep 2025 - Dec 2025</p>
<a href="./work/penn-spark.html" class="work__cta">View Case Study →</a>
<p>
Team Project: Led the redesign of Penn Spark's public website as project lead, overseeing design and development end-to-end. Wireframes, component systems, and high-fidelity layouts were designed in Figma before rebuilding the site from an outdated Gatsby stack to Next.js + React with shared components and structured data. The result is faster performance, consistent branding, and a case-study driven experience across responsive, accessible pages.
</p>
<ul class="work__list">
<li>Figma</li>
<li>UI/UX Design</li>
<li>Tailwind CSS</li>
<li>React</li>
<li>Next.js</li>
</ul>
</div>
<div class="work__image-col">
<div class="work__image-box">
<div class="work__slideshow" data-interval="4200">
<img src="./images/Spark/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202026-05-09%20011231.png" class="work__slide is-active" alt="Penn Spark homepage redesign" loading="lazy" />
<img src="./images/PennSpark4.PNG" class="work__slide" alt="Penn Spark — Client Projects Stories" loading="lazy" />
<img src="./images/Spark/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202026-05-09%20011252.png" class="work__slide" alt="Penn Spark — illustration section" loading="lazy" />
<img src="./images/Spark/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202026-05-09%20011341.png" class="work__slide" alt="Penn Spark — pixel grid section" loading="lazy" />
<button class="work__slide-control work__slide-control--prev" type="button" aria-label="Previous slide">
<img src="./images/arrow-up.svg" alt="" class="work__slide-icon work__slide-icon--prev" />
</button>
<button class="work__slide-control work__slide-control--next" type="button" aria-label="Next slide">
<img src="./images/arrow-up.svg" alt="" class="work__slide-icon work__slide-icon--next" />
</button>
</div>
</div>
<div class="work__links work__links--stacked">
<a href="https://pennspark.org/" target="_blank" class="link__text">
Live Website <span>→</span>
</a>
<a href="https://www.figma.com/deck/Smncuea22qlU67fbiESZaP" target="_blank" class="link__text">
Presentation <span>→</span>
</a>
</div>
</div>
</div>
<!-- Road Rogue — 3D + develop -->
<div class="work__box" data-tabs="develop 3d">
<div class="work__text">
<div class="work__tags">
<span class="work__tag work__tag--3d">3D</span>
<span class="work__tag work__tag--develop">Development</span>
</div>
<h3>Road Rogue</h3>
<p class="work__date">Nov 2025</p>
<a href="./work/road-rogue.html" class="work__cta">View Project →</a>
<p>
Course Project (vibe-coded): A 3D car chase game inspired by Smashy Road, built using AI tools as part of a design course exploring AI-assisted creation. 3D assets were generated with Meshy, game logic scaffolded with Codex, and the result assembled with Three.js — focusing on responsive driving controls, obstacle-filled streets, and a survival score that ramps up the tension.
</p>
<ul class="work__list">
<li>Three.js</li>
<li>JavaScript</li>
<li>Low-Poly Modeling</li>
<li>Game Design</li>
</ul>
</div>
<div class="work__image-col">
<div class="work__image-box">
<img src="./images/rodeRogue.png" class="work__image" alt="Road Rogue gameplay" loading="lazy" />
</div>
<div class="work__links work__links--stacked">
<a href="https://leebwj.github.io/0020/Final/index.html" target="_blank" class="link__text">
Play Game <span>→</span>
</a>
<a href="https://github.com/leebwj/RodeRogue" target="_blank" class="link__text">
Repository <span>→</span>
</a>
</div>
</div>
</div>
<!-- Capsule — 3D + design + develop -->
<div class="work__box" data-tabs="design develop 3d">
<div class="work__text">
<div class="work__tags">
<span class="work__tag work__tag--3d">3D</span>
<span class="work__tag work__tag--design">Design</span>
<span class="work__tag work__tag--develop">Development</span>
</div>
<h3>Capsule</h3>
<p class="work__date">Jan 2025 - April 2025</p>
<a href="./work/capsule.html" class="work__cta">View Case Study →</a>
<p>
Team Project: A collaborative web app where users create interactive 3D time capsules that unlock on specific dates. UI and user flows were designed in Figma, with 3D assets modeled in Blender—each capsule a playful container for memories revealed in an immersive gallery inspired by Japanese gachapon machines. Built with React Three Fiber, MongoDB, and AWS S3.
</p>
<ul class="work__list">
<li>Figma</li>
<li>React Three Fiber</li>
<li>MongoDB</li>
<li>AWS S3</li>
<li>Blender</li>
</ul>
</div>
<div class="work__image-col">
<div class="work__image-box">
<div class="yt-facade" data-src="https://www.youtube.com/embed/VcS-ikD9YmM?autoplay=1" data-allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture">
<img class="yt-facade__thumb" src="https://img.youtube.com/vi/VcS-ikD9YmM/hqdefault.jpg" alt="Capsule Demo" loading="lazy" />
<button class="yt-facade__play" aria-label="Play Capsule demo">
<svg viewBox="0 0 68 48" width="68" height="48"><path d="M66.5 7.7c-.8-2.9-2.5-5.4-5.4-6.2C55.8.1 34 0 34 0S12.2.1 6.9 1.5c-2.9.8-4.6 3.3-5.4 6.2C.1 12.4 0 24 0 24s.1 11.6 1.5 16.3c.8 2.9 2.5 5.4 5.4 6.2C12.2 47.9 34 48 34 48s21.8-.1 27.1-1.5c2.9-.8 4.6-3.3 5.4-6.2C67.9 35.6 68 24 68 24s-.1-11.6-1.5-16.3z" fill="red"/><path d="M45 24L27 14v20z" fill="#fff"/></svg>
</button>
</div>
</div>
<div class="work__links work__links--stacked">
<a href="https://github.com/leebwj/sp25-penn-time-capsule?tab=readme-ov-file" target="_blank" class="link__text">
Repository <span>→</span>
</a>
<a href="https://www.figma.com/proto/xNLzE7NKvOo9SToBUZtaSn/Penn-Time-Capsule?node-id=913-1430&t=ThuJ8gaWZlmAcply-0&scaling=contain&content-scaling=fixed&page-id=662%3A1067" target="_blank" class="link__text">
Presentation <span>→</span>
</a>
</div>
</div>
</div>
<!-- Playground — 3D + design -->
<div class="work__box" data-tabs="design 3d">
<div class="work__text">
<div class="work__tags">
<span class="work__tag work__tag--3d">3D</span>
<span class="work__tag work__tag--design">Design</span>
</div>
<h3>Playground</h3>
<p class="work__date">Mar 2025 - April 2025</p>
<a href="./work/playground.html" class="work__cta">View Project →</a>
<p>
Self-Directed Project: Recreation of a childhood memory, bringing life to a character with distinctive animations through user interactive actions with the 3D models. Using keyboard or mouse, players can trigger interactive animations as "Boo" comes to life. Press 'Q' to reset the scene. (Wait for full render result)
</p>
<ul class="work__list">
<li>Spline</li>
<li>Maya</li>
<li>Substance Painter</li>
<li>Photoshop</li>
</ul>
</div>
<div class="work__image-col">
<div class="work__image-box">
<iframe
src="https://my.spline.design/untitled-QVRKLSCWxKCmX5aAVZUXDukV/"
frameborder="0"
width="100%"
height="400"
loading="lazy"
style="border-radius: 8px; overflow:hidden;">
</iframe>
</div>
<div class="work__links work__links--stacked">
<a href="https://my.spline.design/untitled-QVRKLSCWxKCmX5aAVZUXDukV/" target="_blank" class="link__text">
View Project <span>→</span>
</a>
</div>
</div>
</div>
<!-- Pixel Dash — develop only -->
<div class="work__box" data-tabs="develop">
<div class="work__text">
<div class="work__tags">
<span class="work__tag work__tag--develop">Development</span>
</div>
<h3>Pixel Dash</h3>
<p class="work__date">Nov 2024 - Dec 2024</p>
<a href="./work/pixel-dash.html" class="work__cta">View Project →</a>
<p>
Self-Directed Project: A side-scrolling endless runner game with collectible coins, customizable skins, and dynamic obstacles, designed to deepen my Java expertise. The project applies key concepts like File I/O for saving progress, Lists and Collections for managing game objects, and JUnit testing to validate mechanics such as collision detection and scoring. It demonstrates my ability to create engaging gameplay while ensuring robust, scalable code.
</p>
<ul class="work__list">
<li>Java</li>
<li>OOP</li>
<li>File I/O</li>
<li>Game Design</li>
</ul>
</div>
<div class="work__image-col">
<div class="work__image-box">
<img src="./images/pixelrun.png" class="work__image" alt="Pixel Run" loading="lazy" />
</div>
<div class="work__links work__links--stacked">
<a href="https://github.com/leebwj/pixeldash.github.io" target="_blank" class="link__text">
Repository <span>→</span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Work Experience -->
<section class="client" id="clients">
<div class="row">
<h2 data-reveal>Work Experience</h2>
<div class="client__logos">
<a href="https://it-farm.co.kr/" target="_blank" rel="noopener" class="client__logo-link">
<img src="./images/logo.svg" class="client__logo" alt="IT Farm" loading="lazy" />
</a>
<a href="https://www.bitmango.com/en/homepageen/" target="_blank" rel="noopener" class="client__logo-link">
<img src="./images/BitMango.png" class="client__logo" alt="BitMango" loading="lazy" />
</a>
<a href="https://www.puzzle1studio.com/" target="_blank" rel="noopener" class="client__logo-link">
<img src="./images/Puzzle1Studio.png" class="client__logo" alt="Puzzle1 Studio" loading="lazy" />
</a>
<a href="https://pennspark.org" target="_blank" rel="noopener" class="client__logo-link" aria-label="Spark website">
<img src="./images/spark.png" class="client__logo client__logo--sm" alt="Spark" loading="lazy" />
</a>
</div>
</div>
</section>
<!-- Contact -->
<section class="contact" id="contact">
<div class="row">
<h2 data-reveal>Get in Touch</h2>
<div class="contact__info">
<p>Contact Information</p>
<a href="mailto:leebwj@sas.upenn.edu" class="btn">leebwj@sas.upenn.edu</a>
<div class="contact__links work__links--stacked">
<a href="https://brianleeportfolio.cargo.site/" target="_blank" rel="noopener" class="link__text">
Art Portfolio <span>→</span>
</a>
<a href="https://www.linkedin.com/in/brian-lee-0b706b225/" target="_blank" rel="noopener" class="link__text">
LinkedIn <span>→</span>
</a>
<a href="https://github.com/leebwj" target="_blank" rel="noopener" class="link__text">
GitHub <span>→</span>
</a>
<a href="./assets/Brain_Lee_Resume.pdf" target="_blank" rel="noopener" class="link__text">
Resume <span>→</span>
</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer role="contentinfo" class="footer">
<div class="row">
<div class="footer__inner">
<p class="footer__copy">© 2026 Brian Wonjun Lee</p>
<div class="footer__links">
<a href="https://github.com/leebwj" target="_blank" rel="noopener" class="footer__link">GitHub</a>
<a href="https://brianleeportfolio.cargo.site/" target="_blank" rel="noopener" class="footer__link">Art Portfolio</a>
<a href="https://www.linkedin.com/in/brian-lee-0b706b225/" target="_blank" rel="noopener" class="footer__link">LinkedIn</a>
</div>
</div>
</div>
</footer>
<a href="#top" class="back-to-top" title="Back to Top">
<img src="./images/arrow-up.svg" alt="Back to Top" class="back-to-top__image"/>
</a>
<script src="./index.js?v=4" defer></script>
</body>
</html>