-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
682 lines (581 loc) · 25 KB
/
index.html
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
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
<link rel="stylesheet" href="assets\css\w3.css">
<link rel="stylesheet" href="font.css">
<link rel="stylesheet" href="assets\css\3dbutton.css" \>
<link rel="stylesheet" href="assets\css\dropdownmenu\dropdownmenu.css"
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body, h1, h2, h3, h4, h5, h6 {
font-family: "Lato", sans-serif;
}
.w3-myfont{
font-family: "Lato_TC", normal;
}
body, html {
height: 100%;
color: #777;
line-height: 1.8;
}
/* Create a Parallax Effect */
.indexpic-1,.indexpic-2, .projpic-0,.projpic-1, .projpic-2, .projpic-3, .projpic-4, .projpic-5, .projpic-6, .projpic-7, .projpic-8, .projpic-15 {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.indexpic-1 {
background-image: url("pictures/main_page/skillnode.png");
min-height: 100%;
}
.indexpic-2 {
background-image: url("pictures/main_page/portfolio_planning.png");
min-height: 100%;
}
.projpic-0 {
background-image: url("minecraft_server_gate.png");
min-height: 100%;
}
/* First image (Logo. Full height) */
.projpic-1 {
background-image: url("minecraft_server_gate.png");
min-height: 100%;
}
/* Second image (Portfolio) */
.projpic-2 {
background-image: url("pictures/main_page/main_project_1.png");
min-height: 100%;
}
/* Third image (Contact) */
.projpic-3 {
background-image: url("pictures/main_page/main_project_2.png");
min-height: 100%;
}
.projpic-4 {
background-image: url("pictures/main_page/main_project_3.png");
min-height: 100%;
}
.projpic-5 {
background-image: url("pictures/main_page/main_project_4_6.png");
min-height: 100%;
}
.projpic-6 {
background-image: url("pictures/main_page/main_project_7.png");
min-height: 100%;
}
.projpic-7 {
background-image: url("pictures/main_page/main_project_12.png");
min-height: 100%;
}
.projpic-8 {
background-image: url("pictures/main_page/main_project_x.png");
min-height: 100%;
}
.projpic-13 {
background-image: url("pictures/main_page/main_project_13.png");
min-height: 100%;
}
.projpic-14 {
background-image: url("pictures/main_page/main_project_14.png");
min-height: 100%;
}
.projpic-15 {
background-image: url("pictures/main_page/main_project_15.png");
min-height: 100%;
}
.w3-wide {
letter-spacing: 10px;
}
.w3-hover-opacity {
cursor: pointer;
}
/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1600px) {
.indexpic-1,.indexpic-2, .projpic-1, .projpic-2, .projpic-3, .projpic-4, .projpic-5, .projpic-6, .projpic-7, .projpic-8 {
background-attachment: scroll;
min-height: 400px;
}
}
span.mcserver {
font-size: 150%;
}
#duty_senior #duty_mid {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#duty_senior td, #duty_senior th ,#duty_mid td , #duty_mid th {
border: 1px solid #ddd;
text-align: center;
padding: 12px;
}
#duty_senior tr:nth-child(even){background-color: #f2f2f2;}
#duty_mid tr:nth-child(even){background-color: #f2f2f2;}
#duty_senior tr:hover{background-color: #ddd;}
#duty_mid tr:hover {background-color: #ddd;}
#duty_senior th , #duty_mid th{
padding-top: 18px;
padding-bottom: 18px;
text-align: center;
background-color: #5990ff;
color: white;
}
</style>
<title> Nelson LAN 靜態個人介紹網頁 主頁</title>
<body>
<div class="w3-top">
<div class="w3-bar" id="myNavbar">
<a class="w3-bar-item w3-button w3-hover-black w3-hide-medium w3-hide-large w3-right" href="javascript:void(0);" onClick="toggleFunction()" title="Toggle Navigation Menu">
<i class="fa fa-bars"></i> </a>
<a href="#" class="w3-bar-item w3-button">HOME</a>
<a href="#about" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-user"></i>ABOUT</a>
<a href="#contact" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-envelope"></i> CONTACT</a>
<a href="#duty" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-th"></i> DUTY</a>
<div class="w3-dropdown-hover w3-hide-small">
<button class=" w3-button" title="More">PORTFOLIO <i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item"> Minecraft -- 伺服器營運 (頁面未準備就緒)</th>
<a href="portfolio_project2.html" class="w3-bar-item w3-button"> 畢業作品 -- 影子的內心 </th>
<a href="portfolio_project3.html" class="w3-bar-item w3-button"> Nanaimo -- 回憶重現作品 </th>
<a href="portfolio_project4_6.html" class="w3-bar-item w3-button"> Cities Skyline -- 3D 模組製作</th>
<a href="portfolio_project7.html" class="w3-bar-item w3-button"> Minecraft -- 列車報站 平面設計 </th>
<a href="portfolio_project11.html" class="w3-bar-item w3-button"> 質數 X RPG遊戲</th>
<a href="#" class="w3-bar-item"> Hytale -- 伺服器營運 (未開始)</th>
</div>
</div>
<a href="skill.html" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-user"></i> SKILL</a>
<a href="media_archive.html" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-th"></i> Media Archive</a>
<a href="other_archive.html" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-th"></i> Other Archive</a>
</div>
<!-- Navbar (sit on top) -->
<div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium"> <a href="main.html#about" class="w3-bar-item w3-button" onClick="toggleFunction()">ABOUT</a> <a href="#skill" class="w3-bar-item w3-button" onClick="toggleFunction()">Skill</a> <a href="portfolio_main.html" class="w3-bar-item w3-button" onClick="toggleFunction()">PORTFOLIO</a> <a href="media_archive.html" class="w3-bar-item w3-button" onClick="toggleFunction()">Media Archive</a> <a href="other_archive.html" class="w3-bar-item w3-button" onClick="toggleFunction()">Other Archive</a> <a href="main.html#contact" class="w3-bar-item w3-button" onClick="toggleFunction()">CONTACT</a> </div>
</div>
</div>
<div class="projpic-0 w3-display-container w3-opacity-min" id="home">
<div class="w3-display-middle" style="white-space:nowrap;"> <span class="w3-center w3-padding-large w3-black w3-xlarge w3-wide w3-animate-opacity">NelsonLAN's Homepage </div>
</div>
<div class="w3-content w3-container w3-padding-64" id="about">
<h2 class="w3-center w3-myfont">Some of pages in this website is still under construction. There are soon more detail and pages on this website.</h2>
<h2 class="w3-center w3-myfont">本網站部分頁面仍在架設。稍後將製作更多頁面並上載。</h2>
<hr>
<h5 class="w3-center w3-myfont">最後更新日期：06/OCT/2024</h5>
<hr>
</div>
<div class="w3-content w3-container " id="about">
<h3 class="w3-center w3-myfont"><b>About me</b></h3>
<p class=" w3-myfont">
<b>Name</b>：<br></p>
<h3> Nelson, LAN Ming Shun </h3>
<br>
<!--p class="w3-myfont"><b> Work Exp </b>-->
<p class="w3-myfont"><b> Education </b>
<br>
<br>
<b> Currently </b>
<br>
【Received Direct Offer; Studying】 QF5 -- BSc(Hons) in DM
<br>
<br>
<b> Past </b>
<br>
School of Continuing and Professional Studies, The Chinese University of Hong Kong (CUSCS, CUHK) </p>
<p class=" w3-myfont">
QF3 -- Diploma Programme in Foundation Studies (2015 Obtained -- Merit)<br>
QF4 -- Higher Diploma Programme in Computer Game Development (2017 Obtained -- Merit)</p>
<br>
<p class=" w3-myfont"> <b>
Professional Sectors </b>： <br>
● Game Producing (Project Leading) <br>
● Game Server Hosting <br>
● Game Content Research <br>
● Game Design, Planning, Architect <br>
● Game Translation <br>
● Game Development (Programming) <br>
● Game Art Producing <br>
● IT Support Solution and Game QA / QC <br>
● Multimedia Producing <br>
(Corresponding duties are listed on this page below.) <br>
</p>
</h4>
</div>
<hr>
<div class="w3-center w3-container w3-padding-64" id="contact">
<h3 class="w3-center w3-myfont">Contact</h3>
<p class="w3-center w3-myfont">聯絡方法</p>
<p class="w3-center w3-myfont">按下面有關圖示可使用超連結。</p>
<p class="w3-center w3-myfont">Click below icons to access corresponding hyperlink.</p>
<div class="w3-large w3-margin-bottom">
<a href="mailto:[email protected]">
<i class="fa fa-envelope fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i></a>
Email : <a href="mailto:[email protected]"> <br>
<a href="https://youtube.com/playlist?list=PL9zygzz0hZakBpDPZLevbXaQCUzkf-Ncz">
<i class="fa fa-youtube-play fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i>
</a> Youtube : nelsonlan <br>
<a href="https://github.com/nelsonlan01">
<i class="fa fa-github fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i>
</a> GitHub : nelsonlan01 <br>
<a href="https://www.linkedin.com/in/nelsonlan574211143">
<i class="fa fa-linkedin fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i>
</a> Linkedin : www.linkedin.com/in/nelsonlan574211143 <br>
<a href="https://drive.google.com/open?id=1x5gO8Dmfox_wXYIrENMOVmvkefmgbh1B">
<i class="fa fa-google fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i>
</a> Portfolio PDF Link -- Gooogle Drive : https://drive.google.com/open?id=1x5gO8Dmfox_wXYIrENMOVmvkefmgbh1B <br>
</div>
</div>
<div class="w3-row w3-center w3-dark-grey w3-padding-16 ">
<div class=" w3-section w3-myfont">
<span class="w3-xlarge"></span>
<br>
</div>
</div>
<div class="indexpic-1 w3-display-container w3-opacity-min" >
</div>
<hr>
<div class=" w3-container w3-padding-64 w3-myfont w3-center" id="duty">
<h4 class=" w3-myfont"> 【 職權一覽 / Job Duties 】</h4>
<h5 class=" w3-myfont"> 下面三個表格會指出以往在專案，我是主／非主責（受任）於那些崗位上及職權範圍。如有其他第三者關係，都會在表格上有所註明。</h5>
<h5 class=" w3-myfont"> There are three charts at the rest of this page, the chart illustrate how I affiliate in different roles of the project. There indicated a comment on the chart, if there have any engaged from/with any 3rd party personals, if acceptable.</h5>
</div>
<hr>
<div class=" w3-container w3-padding-32 " id="">
<table id="duty_senior" align="center">
<h3 class="w3-center w3-myfont">廣域的職權 <br> More Resourcefulness Position</h3>
<tr>
<th>Duties <br> <br>職責</th>
<th>Project I & VIII <br>=====<br> Minecraft Server Hosting <br> <br> Minecraft 伺服器營運</th>
<th>Project II <br>=====<br> Final Year Project <br> <br> 畢業作品 <br> 影子的內心 </th>
<th>Project III <br>=====<br> Nanaimo Rebuild <br> <br> 回憶重現作品 </th>
<th>Project IV, VI, IX <br>=====<br> Cities Skyline 3D Modelling <br> <br> Cities Skyline 3D 模組製作</th>
<th>Project VII <br>=====<br> Train Broadcast<br> Grapic Design <br> <br> 列車報站 平面設計 </th>
<th>Project XI <br>=====<br> Prime Education 'X' RPG <br> <br> 質數 X RPG遊戲</th>
<th>Project XII <br>=====<br> Hytale Server Hosting <br> <br> Hytale 伺服器營運 <br>(籌備中)</th>
</tr>
<tr>
<td><b> Project Lead <br> 專案領導 </b></td>
<td> Major <br> 主責 </td>
<td> Groupmate <br> 由其他成員負責 </td>
<td> Major <br> 主責 </td>
<td> Major <br> 主責 </td>
<td> Minor <br> 非主責 </td>
<td> Major <br> 主責 </td>
<td> Major, with investor <br> 與投資者共同主責 </td>
</tr>
<tr>
<td><b> Server Host / Owner <br> DevOps <br> 伺服主持 及<br>開發/營運服務提供者 </b></td>
<td> Major <br> 主責 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> Major, with investor <br> 與投資者共同主責 </td>
</tr>
<tr><br>
</table>
<br>
<hr>
<h3 class="w3-center w3-myfont"> 行內要角 <br> Main and crucial positions</h3>
<table id="duty_mid" align="center">
<tr>
<th>Duties / Jobs <br> <br>職責</th>
<th>Project I & VIII <br>=====<br> Minecraft Server Hosting <br> <br> Minecraft 伺服器營運</th>
<th>Project II <br>=====<br> Final Year Project <br> <br> 畢業作品 <br> 影子的內心 </th>
<th>Project III <br>=====<br> Nanaimo Rebuild <br> <br> 回憶重現作品 </th>
<th>Project IV, VI, IX <br>=====<br> Cities Skyline 3D Modelling <br> <br> Cities Skyline 3D 模組製作</th>
<th>Project VII <br>=====<br> Train Broadcast<br> Grapic Design <br> <br> 列車報站 平面設計 </th>
<th>Project XI <br>=====<br> Prime Education 'X' RPG <br> <br> 質數 X RPG遊戲</th>
<th>Project XII <br>=====<br> Hytale Server Hosting <br> <br> Hytale 伺服器營運 <br>(籌備中)</th>
</tr>
<tr>
<td><b> Game Designer / Architect <br> 遊戲設計企劃/建築師 <br> || 遊戲(內容)研究員 </b></td>
<td> Major <br> 主責 </td>
<td> Minor <br> 非主責 </td>
<td> Major <br> 主責 </td>
<td> </td>
<td> </td>
<td> Major <br> 主責 </td>
<td> Major <br> 主責 </td>
</tr>
<tr>
<td><b> Game Developer <br> 遊戲開發員 </b></td>
<td> Major <br> 主責 </td>
<td> Groupmate <br> 由其他成員負責 </td>
<td> Major <br> 主責 </td>
<td> Minor <br> 非主責 </td>
<td> </td>
<td> Major <br> 主責 </td>
<td> Major <br> 主責 </td>
</tr>
<tr>
<td><b> Game 2D / 3D Artist <br> 遊戲2D / 3D美術員 </b></td>
<td> Major <br> 主責<br>(2D) </td>
<td> Major <br> 主責<br>(2D) </td>
<td> Major <br> 主責<br>(2D+3D) </td>
<td> Major <br> 主責<br>(2D+3D) </td>
<td> Major <br> 主責<br>(2D) </td>
<td> Major <br> 主責<br>(2D) </td>
<td> Major <br> 主責<br>(2D+3D) </td>
</tr>
<tr>
<td><b> QA / QC <br> 質量保證 及 管制 </b></td>
<td> Major <br> 主責 </td>
<td> Major <br> 主責 </td>
<td> Major <br> 主責 </td>
<td> Major <br> 主責 </td>
<td> </td>
<td> Major <br> 主責 </td>
<td> Major <br> 主責 </td>
</tr>
<tr><br>
</table>
<br>
<hr>
<h3 class="w3-center w3-myfont"> 支援/營運維護角色 <br> Support / Maintenance positions</h3>
<table id="duty_mid" align="center">
<tr>
<th>Duties / Jobs <br> <br>職責</th>
<th>Project I & VIII <br>=====<br> Minecraft Server Hosting <br> <br> Minecraft 伺服器營運</th>
<th>Project II <br>=====<br> Final Year Project <br> <br> 畢業作品 <br> 影子的內心 </th>
<th>Project III <br>=====<br> Nanaimo Rebuild <br> <br> 回憶重現作品 </th>
<th>Project IV, VI, IX <br>=====<br> Cities Skyline 3D Modelling <br> <br> Cities Skyline 3D 模組製作</th>
<th>Project VII <br>=====<br> Train Broadcast<br> Grapic Design <br> <br> 列車報站 平面設計 </th>
<th>Project XI <br>=====<br> Prime Education 'X' RPG <br> <br> 質數 X RPG遊戲</th>
<th>Project XII <br>=====<br> Hytale Server Hosting <br> <br> Hytale 伺服器營運 <br>(籌備中)</th>
</tr>
<tr>
<td> <b>Multimedia Producer <br> 多媒體內容<br>製作員</b></td>
<td> Major <br> 主責 </td>
<td> Major <br> 主責 </td>
<td> Major <br> 主責 </td>
<td> Major <br> 主責 </td>
<td> Major <br> 主責 </td>
<td> Major <br> 主責 </td>
<td> Major <br> 主責 </td>
</tr>
<tr>
<td> <b>Game (Content) Translator <br> 遊戲(內容)<br>翻譯員 </b></td>
<td> Major <br> 主責 </td>
<td> Minor <br> 非主責 </td>
<td> </td>
<td> Major <br> 主責 </td>
<td> Major <br> 主責 </td>
<td> </td>
<td> Major <br> 主責 </td>
</tr>
<tr>
<td> <b>Game Master <br> 遊戲主持者 </b></td>
<td> Major <br> 主責 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> Major <br> 主責 </td>
</tr>
</table>
</div>
</div>
<!-- about me what+ -->
<hr> <br>
<div class="w3-row w3-center w3-dark-grey w3-padding-16" id = "portfolio">
<div class=" w3-section"> <span class="w3-xlarge"></span><br><br><br></div>
</div>
<!-- Logo Text -->
<div class="indexpic-2 w3-display-container w3-opacity-min" id="home">
</div>
<!-- Logo Text -->
<!-- Container (About Section) -->
<div class=" w3-container w3-padding-64 w3-myfont" id="about">
<h3 class="w3-center w3-myfont">PORTFOLIO SEQUENCE</h3>
<p class="w3-center w3-myfont">Order by "investment value".</p>
<h3 class="w3-center w3-myfont">作品集目錄</h3>
<p class="w3-center w3-myfont">按照投資量多到少排序</p>
<hr>
<div class="w3-row w3-center w3-padding-16">
<a href="kpi.html" class="buttonstyle_two">前往 【專案 · 績效頁面】Go to KPI Page </a>
</div>
<hr>
<div class="w3-row w3-center w3-padding-16">
<a href="https://drive.google.com/file/d/14jWQH6taT3pqOOyHJtfXsFk_SZ_g04Nh/view?usp=sharing" class="buttonstyle_two">前往 【2024 版作品集小冊子】Go to Portfolio Booklet </a>
</div>
<hr>
<div class="w3-row w3-center w3-dark-grey w3-padding-16">
<div class="w3-quarter w3-section"> <span class="w3-xlarge">10+</span><br>
個 已開始專案<br>
Projects Started</div>
<div class="w3-quarter w3-section"> <span class="w3-xlarge">6</span><br>
個 已完成專案<br>
Projects Done / Ended </div>
<div class="w3-quarter w3-section"> <span class="w3-xlarge">4+</span><br>
個 進行中專案<br>
Projects Ongoing </div>
</div>
<!-- Navbar on small screens -->
<br>
<hr>
<!-- Second Parallax Image with Portfolio Text -->
<div class="projpic-2 w3-display-container w3-opacity-min w3-myfont" id ="portfolio"></div>
<div class="w3-row w3-center w3-dark-grey w3-padding-16 ">
<div class=" w3-section w3-myfont">
<span class="w3-xlarge">專案一, 八 Minecraft 插件/模組伺服器營運<br> Minecraft Server w/ Youtube Creator
<br>
</span>
<br><!--
<a href="#" class="buttonstyle_two">前往專案一, 八頁面 Go to Project I, VIII Page(s)
</a>-->
</div>
</div>
<!-- Third Parallax Image with Portfolio Text -->
<div class="projpic-3 w3-display-container w3-opacity-min w3-myfont w3-grayscale-max"></div>
<div class="w3-row w3-center w3-dark-grey w3-padding-16">
<div class=" w3-section w3-myfont">
<span class="w3-xlarge">專案二 畢業作品 影子的內心<br> Project II Final Year Project
<br>
</span>
<br>
<a href="portfolio_project2.html" class="buttonstyle_two">前往專案二 頁面 Go to Project II Page(s)
</a>
</div>
</div>
<!-- 4th Parallax Image with Portfolio Text -->
<div class="projpic-4 w3-display-container w3-opacity-min w3-myfont "></div>
<div class="w3-row w3-center w3-dark-grey w3-padding-16 ">
<div class=" w3-section w3-myfont">
<span class="w3-xlarge">專案三 回憶重現/致敬/參考/改編回憶重現作品<br> Project III
Archetype Game for Remembrance
<br>
</span>
<br>
<a href="portfolio_project3.html" class="buttonstyle_two">前往專案三 頁面 Go to Project III Page(s)
</a>
</div>
</div>
<!-- 5th Parallax Image with Portfolio Text -->
<div class="projpic-5 w3-display-container w3-opacity-min w3-myfont"></div>
<div class="w3-row w3-center w3-dark-grey w3-padding-16">
<div class=" w3-section w3-myfont">
<span class="w3-xlarge">專案四,六,九 Cities Skyline 3D 模組製作<br> Project IV, VI, IX Cities Skyline 3D Modelling
<br>
</span>
<br>
<a href="portfolio_project4_6.html" class="buttonstyle_two">前往專案四,六,九 頁面 Go to Project IV, VI, IX Page(s)
</a>
</div>
</div>
<!--
<div class="projpic-0 w3-display-container w3-opacity-min w3-myfont"></div>
<div class="w3-row w3-center w3-dark-grey w3-padding-16">
<div class=" w3-section w3-myfont">
<span class="w3-xlarge">專案十一 質數 X RPG遊戲<br> Project XI Prime Education 'X' RPG
<br>
</span>
<br>
<a href="#" class="buttonstyle_two">前往專案十一 頁面 Go to Project XI Page(s)
</a>
</div>
</div>
-->
<div class="projpic-13 w3-display-container w3-opacity-min w3-myfont"></div>
<div class="w3-row w3-center w3-dark-grey w3-padding-16">
<div class=" w3-section w3-myfont">
<span class="w3-xlarge">專案十三 -- 需求的根源 GGJ 2023 <br> Project XIII -- The Roots of Our Needs
<br>
</span>
<br>
<a href="portfolio_project13.html" class="buttonstyle_two">前往專案十三 頁面 Go to Project XIII Page(s)
</a>
</div>
</div>
<div class="projpic-14 w3-display-container w3-opacity-min w3-myfont"></div>
<div class="w3-row w3-center w3-dark-grey w3-padding-16">
<div class=" w3-section w3-myfont">
<span class="w3-xlarge">專案十四 -- Cat Make me laugh GGJ2024<br> Project XIV -- Cat Make me laugh
<br>
</span>
<br>
<a href="portfolio_project14.html" class="buttonstyle_two">前往專案十四 頁面 Go to Project XIV Page(s)
</a>
</div>
</div>
<div class="projpic-6 w3-display-container w3-opacity-min w3-myfont"></div>
<div class="w3-row w3-center w3-dark-grey w3-padding-16">
<div class=" w3-section w3-myfont">
<span class="w3-xlarge">專案七 列車報站 平面設計<br> Project VII Train Broadcast Grapic Design
<br>
</span>
<br>
<a href="portfolio_project7.html" class="buttonstyle_two">前往專案七 頁面 Go to Project VII Page(s)
</a>
</div>
</div>
<div class="projpic-15 w3-display-container w3-opacity-min w3-myfont"></div>
<div class="w3-row w3-center w3-dark-grey w3-padding-16">
<div class=" w3-section w3-myfont">
<span class="w3-xlarge">專案十五 Associated Link<br> Project XV : Associated Link
<br>
</span>
<br>
<a href="portfolio_project15.html" class="buttonstyle_two">前往專案十五 頁面 Go to Project XV Page(s)
</a>
</div>
</div>
<div class="projpic-7 w3-display-container w3-opacity-min w3-myfont"></div>
<div class="w3-row w3-center w3-dark-grey w3-padding-16">
<div class=" w3-section w3-myfont">
<span class="w3-xlarge">專案十二 Hytale 伺服器營運 (未開始)<br> Project XII Hytale Server Hosting
<br>
</span>
<br><!--
<a href="#" class="buttonstyle_two">前往專案十二 頁面 Go to Project XII Page(s)
</a>-->
</div>
</div>
</div>
</div>
</div>
<!--=====================(Portfolio Section)===============--->
</div>
<!--=====================(Portfolio Section)===============---> <!-- portfolio -->
<!-- Modal for full size images on click-->
<div id="modal01" class="w3-modal w3-black" onClick="this.style.display='none'"> <span class="w3-button w3-large w3-black w3-display-topright" title="Close Modal Image"><i class="fa fa-remove"></i></span>
<div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64"> <img id="img01" class="w3-image">
<p id="caption" class="w3-opacity w3-large"></p>
</div>
</div>
<footer class="w3-center w3-black w3-padding-64 w3-opacity w3-hover-opacity-off"> <a href="#home" class="w3-button w3-light-grey"><i class="fa fa-arrow-up w3-margin-right"></i>To the top</a>
<div class="w3-xlarge w3-section"> <a href="https://drive.google.com/open?id=1x5gO8Dmfox_wXYIrENMOVmvkefmgbh1B"><i class="fa fa-google w3-hover-opacity" style="font-size:36px";></i></a> <a href="https://www.youtube.com/user/bbbgbg"><i class="fa fa-youtube-play w3-hover-opacity" style="font-size:36px";></i></a> <a href="https://github.com/NelsonLAN"><i class="fa fa-github w3-hover-opacity" style="font-size:36px";></i></a> <a href="https://www.linkedin.com/in/nelsonlan574211143"><i class="fa fa-linkedin w3-hover-opacity" style="font-size:36px";></i></a> </div>
You are visitor<div align="center"><iframe src="https://profile-counter.glitch.me/nelsonlan01/count.svg" height="100" style="border:none;" style="text-align:center;"></iframe></div>
<p> </p>
<p> © 版權屬 Nelson LAN 所有 (2012 - 2022)</p>
<p> © Copyright belong to Nelson LAN (2012 - 2022) </p>
</footer>
<!-- Footer -->
<script>
// Modal Image Gallery
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
var captionText = document.getElementById("caption");
captionText.innerHTML = element.alt;
}
// Change style of navbar on scroll
window.onscroll = function() {myFunction()};
function myFunction() {
var navbar = document.getElementById("myNavbar");
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
navbar.className = "w3-bar" + " w3-card" + " w3-animate-top" + " w3-white";
} else {
navbar.className = navbar.className.replace(" w3-card w3-animate-top w3-white", "");
}
}
// Used to toggle the menu on small screens when clicking on the menu button
function toggleFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</body>
</html></body>
</html>