/
index.html
721 lines (647 loc) · 43.6 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
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Pappim Pipatkasrira : Software Engineer</title>
<!-- <link rel="shortcut icon" href="TemplateData/favicon.ico"> -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" src="navjs.js"></script>
<script type="text/javascript" src="js/printmov.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/parallax.css">
<link href="https://cdn.jsdelivr.net/gh/vaibhav111tandon/vov.css@latest/vov.css" rel="stylesheet" type="text/css">
<meta property="og:image" content="http://www.printmov.com/img/intro1.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Pappim Pipatkasrira's resume website">
</head>
<body>
<div id="profile" class="container" style="padding-top:50px;">
<div class="row">
<div class="d-none d-md-block" style="height:50px;"></div>
<div class="d-none d-sm-block d-md-none" style="height:30px;"></div>
<div class="d-xs-block d-sm-none" style="height:10px;"></div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="vov fade-in-left" id="parallax" style="height:500px; border-radius:10px;"></div>
<div class="vov fade-in-up slow col" style="text-align: center; margin-top: 20px;">
<h5>Accomplished everything<br />with determination and creativity</h5>
</div>
</div>
<div class="col-lg-6" style="padding: 20px; padding-top:30px; padding-bottom:30px;">
<h1 class="vov fade-in-right fast">Pappim Pipatkasrira</h1>
<h5 class="vov fade-in-right">Kasetsart University | Software Engineer</h5>
<h6><br /></h6>
<h2 class="vov fade-in-right slow">4 Years Experience</h2>
<h5 class="vov fade-in-right slower">
- <strong>Unity3D</strong>, <strong>XR</strong> experiences.
<br />
- <strong>HTML</strong>, <strong>CSS</strong>, and <strong>Javascript</strong> front-end.
<br />
- Game Dev. in <strong>Kajaani, Finland, 2019</strong>
</h5>
<h6><br /></h6>
<h3 class="vov fade-in-right slowest">SKILLS</h3>
<h5 class="vov fade-in-right slowest"> C#, Javascript, HTML & CSS, Kotlin & Android, Java, VR % AR & MR, and NodeJS</h5>
<h4 class="vov fade-in-right slowest" style="margin-top: 30px;">IELTS Academic 7.0</h4>
<h6 class="vov fade-in-right slowest">Listening 9.0 Reading 7.0 Writing 6.0 Speaking 6.5</h6>
</div>
</div>
</div>
<div class="profile-section full-width">
<div class="seperator full-width"></div>
<div id="projects" style="background-color: #060606;">
<div class="seperator-2 full-width"></div>
</div>
<div class="container">
<h1>Projects</h1>
<h3><br />Latest Projects</h3>
<div class="row" style="color: white;">
<div class="col-md-6 col-lg-4">
<div class="card">
<img src="img/knitten-ribbon.png" style="position: absolute; height: 80%; right: 100%; top: 50%; transform: translateY(-50%);">
<div class="card-img-top embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/9OwEGfTw734?si=zXPOT39eVP4izG-b&start=16" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="card-body">
<h5 class="card-title">Knitten <strong>(1st Place Winner)</strong></h5>
<p class="card-text"><span class="badge badge-success">Game Jam</span> <span class="badge badge-secondary">Unity3D</span> <span class="badge badge-secondary">WebGL</span></p>
<p class="card-text"><i>Winner of 1-Bit Jam #2</i></p>
<p class="card-text">Concept: Only 2 colors at a time.</p>
<p class="card-text">Theme: Starts with everything, ends wth nothing.</p>
<a href="https://itch.io/jam/1-bit-jam-n2/rate/2367178" class="btn btn-secondary" target="_BLANK">Submission Page</a>
<a href="https://itch.io/jam/1-bit-jam-n2/results" class="btn btn-secondary" target="_BLANK">Result Page</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-img-top embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/ef8sYi7DyRQ?start=94" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="card-body">
<h5 class="card-title">MRX: Kubota x WEDO</h5>
<p class="card-text"><span class="badge badge-danger">SCG WEDO</span> <span class="badge badge-secondary">Unity3D</span> <span class="badge badge-secondary">Mixed Reality (MR)</span></p>
<p class="card-text"><i>𝗧𝗲𝗰𝗵𝘀𝗮𝘂𝗰𝗲 𝗚𝗹𝗼𝗯𝗮𝗹 𝗦𝘂𝗺𝗺𝗶𝘁 𝟮𝟬𝟮𝟯</i></p>
<p class="card-text">MRX powered by Kubota x WEDO</p>
<p class="card-text">Excavator Simulation Training</p>
<a href="#" class="btn btn-secondary disabled" target="_BLANK">Techsauce</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-img-top embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/Zw4_arRSCbQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="card-body">
<h5 class="card-title">Uptown Outbreak</h5>
<p class="card-text"><span class="badge badge-secondary">Unity3D</span> <span class="badge badge-secondary">Available on Steam</span></p>
<p class="card-text"><i>A car battling game!</i></p>
<p class="card-text">Use your driving and battling skills to defeat the virus and restore the game to its former glory.</p>
<p class="card-text"><i>Developed by a solo developer!</i></p>
<a href="https://store.steampowered.com/app/2486620/Uptown_Outbreak/" class="btn btn-secondary" target="_BLANK">Available on Steam</a>
</div>
</div>
</div>
</div>
<h3><br />Game Projects</h3>
<div class="row" style="color: white;">
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-img-top embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/orpI0Ol93YA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="card-body">
<h5 class="card-title">Toyota Road Safety Game</h5>
<p class="card-text"><span class="badge badge-primary">A-script</span> <span class="badge badge-secondary">Unity3D</span> <span class="badge badge-secondary">WebGL</span> <span class="badge badge-secondary">Android</span> <span class="badge badge-secondary">iOS</span></p>
<p class="card-text"><i>Learn and race!</i></p>
<p class="card-text">Learn traffic rules and race in PVP modes!</p>
<p class="card-text">Compatible in WebGL, Android and iOS devices</p>
<a href="#" class="btn btn-secondary disabled" target="_BLANK">GitHub (private)</a>
<a href="https://toyotaroadsafetygame.com/" class="btn btn-secondary" target="_BLANK">Play on browser</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-img-top embed-responsive embed-responsive-16by9">
<iframe src="https://youtube.com/embed/40qvxWhH3IY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="card-body">
<h5 class="card-title">Kubota i-Gen</h5>
<p class="card-text"><span class="badge badge-primary">A-script</span> <span class="badge badge-secondary">Unity</span> <span class="badge badge-secondary">Android</span> <span class="badge badge-secondary">iOS</span> <span
class="badge badge-secondary">Firebase</span></p>
<p class="card-text"><i>Work from farm</i></p>
<p class="card-text">Farming game from Kubota.</p>
<p class="card-text">Compatible with Android and iOS devices</p>
<a href="https://play.google.com/store/apps/details?id=con.ascript.kubota_igen" class="btn btn-secondary" target="_BLANK">Google Play</a>
<a href="https://www.siamkubota.co.th/news/view/67" class="btn btn-secondary" target="_BLANK">Kubota Article</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-img-top embed-responsive embed-responsive-16by9">
<iframe src="https://youtube.com/embed/e27H_7bnl64" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="card-body">
<h5 class="card-title">Yamaha Virtual Event 2021</h5>
<p class="card-text"><span class="badge badge-primary">A-script</span> <span class="badge badge-secondary">Unity3D</span> <span class="badge badge-secondary">WebGL</span></p>
<p class="card-text">Walk, browse, and play virtually.</p>
<p class="card-text">Browse through the products and play mini-game to win the price daily!</p>
<a href="#" class="btn btn-secondary disabled" target="_BLANK">GitHub (private)</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-img-top embed-responsive embed-responsive-16by9">
<iframe src="https://youtube.com/embed/939OeVBmSEQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="card-body">
<h5 class="card-title">Tiger - Run Athletics</h5>
<p class="card-text"><span class="badge badge-primary">A-script</span> <span class="badge badge-secondary">Unity3D</span> <span class="badge badge-secondary">Android</span></p>
<p class="card-text"><i>Uncage Your Tiger</i></p>
<p class="card-text">Endless runner game promoting Tiger.</p>
<p class="card-text">Avoid all the obstacles.</p>
<a href="https://play.google.com/store/apps/details?id=con.ascript.kubota_igen" class="btn btn-secondary" target="_BLANK">Google Play</a>
<a href="https://www.siamkubota.co.th/news/view/67" class="btn btn-secondary" target="_BLANK">Kubota Article</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-img-top embed-responsive embed-responsive-16by9">
<iframe src="https://youtube.com/embed/BggA0cktmCM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="card-body">
<h5 class="card-title">The Dawn of the Epic Legend of the Tales of the Legendary Power Mage: The Reckoning</h5>
<p class="card-text"><span class="badge badge-secondary">Unity3D</span></p>
<p class="card-text">The Dawn of the Epic Legend of the Tales of the Legendary Power Mage: The Reckoning is a fast-paced single-player 3D game for PC where you play as a powerful wizard in a magic castle, fight enemies to collect score
and seek crystals to customize
your spells.</p>
<a href="https://ukkosstruck.itch.io/power-mage" class="btn btn-secondary" target="_BLANK">Available on Itch.io</a>
<a href="https://github.com/Sumpp1/powermage" class="btn btn-secondary" target="_BLANK">GitHub</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-img-top embed-responsive embed-responsive-16by9">
<iframe src="https://youtube.com/embed/4bP1rvzgHeA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="card-body">
<h5 class="card-title">ARGhost</h5>
<p class="card-text"><span class="badge badge-secondary">Unity3D</span> <span class="badge badge-secondary">AR</span></p>
<p class="card-text">A mobile augmented-reality survival horror game which simulates real ghost experiences and beating the other players’ scores from all around the world</p>
<p class="card-text">Calculate playing space at runtime. Use real-life physical card to repel AR virtual ghosts!</p>
<a href="https://ecourse.cpe.ku.ac.th/projar/project/details/1450/" class="btn btn-secondary" target="_BLANK">CPE Project Archive</a>
<a href="https://github.com/masty123/ARGHOST" class="btn btn-secondary" target="_BLANK">GitHub</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-img-top embed-responsive embed-responsive-16by9">
<iframe src="https://youtube.com/embed/wR9P_eidf2w" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="card-body">
<h5 class="card-title">InkIt - Kajaani Winter GameJam 2019</h5>
<p class="card-text"><span class="badge badge-success">Game Jam</span> <span class="badge badge-secondary">Unity3D</span></p>
<p class="card-text">Ink the way, get to the goal!</p>
<p class="card-text">Start from white screen. Ink your way to the goal. Becareful not to InkIt too much or else you won't see the way!</p>
<p class="card-text">This game is developed within 48 hours for Winter GameJam 2019 at Kajaani, Finland</p>
<a href="https://github.com/printto/InkIt-Winter-GameJam-2019" class="btn btn-secondary" target="_BLANK">GitHub</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<img class="card-img-top" src="img/projects/vrive.png">
<div class="card-body">
<h5 class="card-title">Vrive</h5>
<p class="card-text"><span class="badge badge-secondary">Unity3D</span> <span class="badge badge-secondary">VR</span></p>
<p class="card-text">VR driving project</p>
<p class="card-text">Driving project made with Unity3D. Simulates driving in VR with fully controls from VR controllers.</p>
<a href="https://github.com/ziveso/Vrive" class="btn btn-secondary" target="_BLANK">GitHub</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<img class="card-img-top" src="img/projects/parallelbro.gif">
<div class="card-body">
<h5 class="card-title">ParallelBro</h5>
<p class="card-text"><span class="badge badge-secondary">Unity2D</span> <span class="badge badge-secondary">Online Multi-player</span> <span class="badge badge-secondary">Photon</span></p>
<p class="card-text">Can you save the 2 world?</p>
<p class="card-text">Help each other to solve the puzzle! 2 players across the network.</p>
<p class="card-text">Compatible with Android devices</p>
<a href="https://github.com/masty123/ParallelBro/tree/master" class="btn btn-secondary" target="_BLANK">GitHub</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-img-top embed-responsive embed-responsive-16by9">
<iframe src="https://youtube.com/embed/kz2mH1xPeVI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="card-body">
<h5 class="card-title">Skullbreak</h5>
<p class="card-text"><span class="badge badge-secondary">Unity3D</span> <span class="badge badge-secondary">Android</span></p>
<p class="card-text">Endless runner project</p>
<p class="card-text">In the game a death monster from the underworld named ”Skullo”, found his way to the world of living monsters and trying to escape from its guardians.</p>
<p class="card-text">Compatible with Android devices</p>
<a href="https://github.com/printto/Skullbreak" class="btn btn-secondary" target="_BLANK">GitHub</a>
<a href="https://drive.google.com/file/d/1yVI77LCXlcamWsP937JJvd31naVedZQ7/view?usp=sharing" class="btn btn-secondary" target="_BLANK">Demo APK</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-img-top embed-responsive embed-responsive-16by9">
<iframe src="https://youtube.com/embed/Q7VAQ5RXZvU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="card-body">
<h5 class="card-title">Meiji Jigsaw</h5>
<p class="card-text"><span class="badge badge-primary">A-script</span> <span class="badge badge-secondary">Unity</span></p>
<p class="card-text">Jigsaw game promoting Meiji Plus Vitamins B Complex Formula.</p>
<a href="#" class="btn btn-secondary disabled" target="_BLANK">GitHub (private)</a>
</div>
</div>
</div>
</div>
<h3><br />Appication Projects</h3>
<div class="row" style="color: white;">
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-img-top embed-responsive embed-responsive-16by9">
<iframe src="https://youtube.com/embed/Fx-JEXiwpvY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="card-body">
<h5 class="card-title">BLA Photo Booth</h5>
<p class="card-text"><span class="badge badge-primary">A-script</span> <span class="badge badge-secondary">Unity</span></p>
<p class="card-text">Photo booth application promoting BLA.</p>
<p class="card-text">The application requires 2 displays (1 camera display and 1 touch screen control display).</p>
<a href="#" class="btn btn-secondary disabled" target="_BLANK">GitHub (private)</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-img-top embed-responsive embed-responsive-16by9">
<iframe src="https://youtube.com/embed/XQPKYLNCDvQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="card-body">
<h5 class="card-title">TPI Wall 3D Room</h5>
<p class="card-text"><span class="badge badge-primary">A-script</span> <span class="badge badge-secondary">Unity3D</span> <span class="badge badge-secondary">Android</span> <span class="badge badge-secondary">iOS</span></p>
<p class="card-text">TPI 3D demonstrates all Fiber Cement products that TPI has in different rooms such as Bathroom, Bedroom, Dining Room, Living Room, Meeting Room, and Kitchen. This application will represent how different textures are like in each surface area of the rooms, no matter it is Marble, Mahogany, or personalized photos.</p>
<a href="#" class="btn btn-secondary disabled" target="_BLANK">Google Play (not available)</a>
<a href="https://apps.apple.com/mn/app/tpi-360-degrees-room-tpi-3d/id1550256859" class="btn btn-secondary" target="_BLANK">Appstore</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-img-top embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/zKv3CrRSApQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="card-body">
<h5 class="card-title">UTANITY Synth Party 2022</h5>
<p class="card-text"><span class="badge badge-secondary">Unity3D</span> <span class="badge badge-secondary">WebGL</span></p>
<p class="card-text"><i>Virtual UTAU Party!</i></p>
<p class="card-text">Virtual live concert for vocal-synth community!</p>
<p class="card-text">Compatible in WebGL and Windows devices.</p>
<a href="#" class="btn btn-secondary disabled" target="_BLANK">GitHub</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-img-top embed-responsive embed-responsive-16by9">
<iframe src="https://youtube.com/embed/cUI3_9q2O8w?start=60" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!-- <img class="card-img-top" src="img/projects/SixerDev.png"> -->
<!-- <img class="col-xs-6" src="img/projects/SixerDev.png"> -->
<!-- <img class="col-xs-6" src="img/projects/SixerDev.png"> -->
</div>
<div class="card-body">
<h5 class="card-title">Digi-Idle Ver.1</h5>
<p class="card-text"><span class="badge badge-secondary">Android Studio</span> <span class="badge badge-secondary">Kotlin</span> <span class="badge badge-secondary">Firebase</span></p>
<p class="card-text">Tamagotchi-style vertual pet with online database and battle system.</p>
<p class="card-text">This project was created with Android studio.</p>
<a href="https://github.com/printto/Digi_Idle" class="btn btn-secondary" target="_BLANK">GitHub</a>
<a href="http://digi-idle.fandom.com/" class="btn btn-secondary" target="_BLANK">Digi-Idle Wiki</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="embed-responsive">
<div class="row">
<img src="img/projects/thal1.jpg" style="width: 50%;">
<img src="img/projects/thal2.jpg" style="width: 50%;">
</div>
</div>
<div class="card-body">
<h5 class="card-title">THAL - Thai Artist List</h5>
<p class="card-text"><span class="badge badge-secondary">Android Studio</span> <span class="badge badge-secondary">Kotlin</span> <span class="badge badge-secondary">JSON</span></p>
<p class="card-text">Application that gathers Thai artists' informations as a list.</p>
<p class="card-text">Users can search for artist's name or art type of the artist.</p>
<p class="card-text">This application is just to practice implementing custom adapter.</p>
<p class="card-text">JSON files are hosted on <a href="https://www.printmov.com/THAL/artist.json">printmov.com/THAL</a>.</p>
<a href="https://github.com/printto/THAL_Thai-Artist-List" class="btn btn-secondary" target="_BLANK">GitHub</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<img class="card-img-top" src="img/projects/noproject.png" style="opacity: 0.2;">
<div class="card-body">
<h5 class="card-title">Boba Finder</h5>
<p class="card-text"><span class="badge badge-secondary">iOS</span> <span class="badge badge-secondary">Xcode</span> <span class="badge badge-secondary">Swift</span></p>
<p class="card-text">Simple application that shows the 10 nearest bubble tea shops on the map using <strong>Foursquare API</strong>.</p>
<p class="card-text">This application is just to practice developing an app using Xcode and Foursquare API.</p>
<p class="card-text">GitHub repository is not available at the moment.</p>
<a href="#" class="btn btn-secondary disabled" target="_BLANK">GitHub (not available)</a>
</div>
</div>
</div>
</div>
<h3><br />Front-end Projects</h3>
<div class="row" style="color: white;">
<div class="col-md-6 col-lg-4">
<div class="card">
<img class="card-img-top" src="img/projects/dtac2.png">
<div class="card-body">
<h5 class="card-title">dtac Dataland</h5>
<p class="card-text"><span class="badge badge-primary">A-script</span> <span class="badge badge-secondary">HTML5</span> <span class="badge badge-secondary">CSS</span> <span class="badge badge-secondary">Javascript</span></p>
<p class="card-text">dtac e-learning system.</p>
<p class="card-text">Learn about communication system through games around Dataland.</p>
<p class="card-text">Dataland contains video and games.</p>
<a href="#" class="btn btn-secondary disabled" target="_BLANK">GitHub (private)</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<img class="card-img-top" src="img/projects/interboosters2.gif">
<div class="card-body">
<h5 class="card-title">Interboosters</h5>
<p class="card-text"><span class="badge badge-primary">A-script</span> <span class="badge badge-secondary">HTML5</span> <span class="badge badge-secondary">CSS</span> <span class="badge badge-secondary">Javascript</span></p>
<p class="card-text">Online Interboosters e-learning system.</p>
<p class="card-text">Online English courses.</p>
<p class="card-text">Contains videos and quizes.</p>
<a href="#" class="btn btn-secondary disabled" target="_BLANK">GitHub</a>
<a href="https://ascriptwork.com/work/interboosters/" class="btn btn-secondary" target="_BLANK">Deployed Website</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<img class="card-img-top" src="img/projects/printmov-festival.gif">
<div class="card-body">
<h5 class="card-title">PRINTmov Festival 2022</h5>
<p class="card-text"><span class="badge badge-secondary">Unity3D</span> <span class="badge badge-secondary">WebGL</span> <span class="badge badge-secondary">HTML5</span> <span class="badge badge-secondary">CSS</span> <span class="badge badge-secondary">Javascript</span></p>
<p class="card-text">Website to celebrate PRINTmov Studio 11th Anniversary.</p>
<p class="card-text">Take virtual tour in 3D around the festival area.</p>
<p class="card-text">Downloads section also available on the website.</p>
<a href="#" class="btn btn-secondary disabled" target="_BLANK">GitHub (not available)</a>
<a href="https://printmov.com/" class="btn btn-secondary" target="_BLANK">Deployed website</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<img class="card-img-top" src="img/projects/baxter-countdown.png">
<div class="card-body">
<h5 class="card-title">Baxter - Introducing Three Chamber Bag Containing</h5>
<p class="card-text"><span class="badge badge-primary">A-script</span> <span class="badge badge-secondary">HTML5</span> <span class="badge badge-secondary">CSS</span> <span class="badge badge-secondary">Javascript</span> <span class="badge badge-secondary">AR</span></p>
<p class="card-text">Countdown to the product's introducing event date.</p>
<p class="card-text">This website is used for camera filter. WebRTC is required.</p>
<a href="#" class="btn btn-secondary disabled" target="_BLANK">GitHub (private)</a>
<a href="https://ascriptwork.com/work/countdown/" class="btn btn-secondary" target="_BLANK">Deployed Website</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<img class="card-img-top" src="img/projects/drjill.png">
<div class="card-body">
<h5 class="card-title">Dr.Jill - AR Filter Website</h5>
<p class="card-text"><span class="badge badge-primary">A-script</span> <span class="badge badge-secondary">HTML5</span> <span class="badge badge-secondary">CSS</span> <span class="badge badge-secondary">Javascript</span> <span class="badge badge-secondary">AR</span></p>
<p class="card-text">Camera filters that appear by scanning the product's containers.</p>
<p class="card-text">This website is used for camera filter. WebRTC is required.</p>
<a href="#" class="btn btn-secondary disabled" target="_BLANK">GitHub (private)</a>
<a href="https://www.drjill.co.th/ar/" class="btn btn-secondary" target="_BLANK">Deployed Website</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-img-top embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/DcyPg-4klZ8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="card-body">
<h5 class="card-title">Zilk Wallpaper</h5>
<p class="card-text"><span class="badge badge-primary">A-script</span> <span class="badge badge-secondary">HTML5</span> <span class="badge badge-secondary">CSS</span> <span class="badge badge-secondary">Javascript</span></p>
<p class="card-text">Your lucky wallpaper!</p>
<p class="card-text">Generate wallpaper according to your birthdate.</p>
<a href="#" class="btn btn-secondary disabled" target="_BLANK">GitHub (private)</a>
<a href="#" class="btn btn-secondary disabled" target="_BLANK">Deployed Website</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<img class="card-img-top" src="img/projects/REST.png">
<div class="card-body">
<h5 class="card-title">REST Project</h5>
<p class="card-text"><span class="badge badge-secondary">HTML5</span> <span class="badge badge-secondary">CSS</span> <span class="badge badge-secondary">Javascript</span></p>
<p class="card-text">Working too hard or sitting for a long time can cause a serious health problem. REST is the chair designed to help people that face office syndrome problem.</p>
<p class="card-text">The project consist of the front-end, back-end and hardware.</p>
<a href="https://github.com/printto/project-exceed" class="btn btn-secondary" target="_BLANK">GitHub</a>
<a href="http://exceed.cpe.ku.ac.th/wiki/index.php/Exceed_14_Group_13" class="btn btn-secondary" target="_BLANK">eXceed Camp Wiki</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<img class="card-img-top" src="img/projects/Judjarn.png">
<div class="card-body">
<h5 class="card-title">Judjarn Namplawan</h5>
<p class="card-text"><span class="badge badge-secondary">HTML5</span> <span class="badge badge-secondary">CSS</span></p>
<p class="card-text">Website selling Thai chilli paste.</p>
<a href="https://www.judjarnnamplawan.com/" class="btn btn-secondary" target="_BLANK">Deployed Website</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<img class="card-img-top" src="img/projects/arslonga.png">
<div class="card-body">
<h5 class="card-title">ARSLONGA Studio</h5>
<p class="card-text"><span class="badge badge-secondary">HTML5</span> <span class="badge badge-secondary">CSS</span></p>
<p class="card-text">This website shows the profile of "ARSLONGA Studio"'s school courses and also gives contract informations.</p>
<a href="https://arslonga-studio.com/" class="btn btn-secondary" target="_BLANK">GitHub</a>
<a href="https://github.com/printto/ARSLONGA-Studio-Website" class="btn btn-secondary" target="_BLANK">Deployed Website</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<img class="card-img-top" src="img/projects/portrait.png">
<div class="card-body">
<h5 class="card-title">Portrait Touch</h5>
<p class="card-text"><span class="badge badge-secondary">HTML5</span> <span class="badge badge-secondary">CSS</span> <span class="badge badge-secondary">Javascript</span></p>
<p class="card-text">This website shows the profile of "Portrait Touch"'s art and graphics and also gives contract informations.</p>
<a href="https://github.com/printto/Portrait-Touch-Website" class="btn btn-secondary" target="_BLANK">GitHub</a>
<a href="http://www.portraittouch.com/" class="btn btn-secondary" target="_BLANK">Deployed Website</a>
</div>
</div>
</div>
</div>
<h3><br />AR Projects</h3>
<div class="row" style="color: white;">
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-img-top embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/KxoVxflMV84" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="card-body">
<h5 class="card-title">chARlie</h5>
<p class="card-text"><span class="badge badge-primary">A-script</span> <span class="badge badge-secondary">Unity3D</span> <span class="badge badge-secondary">AR Foundation</span> <span class="badge badge-secondary">iOS</span></p>
<p class="card-text">AR platform for mobile.</p>
<p class="card-text">Create, edit and share your AR project within 1 app.</p>
<a href="#" class="btn btn-secondary disabled" target="_BLANK">Appstore (not available)</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-img-top embed-responsive embed-responsive-16by9">
<iframe src="https://youtube.com/embed/GePPqQVjWKI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="card-body">
<h5 class="card-title">Coca-Cola No Sugar AR</h5>
<p class="card-text"><span class="badge badge-primary">A-script</span> <span class="badge badge-secondary">Spark AR</span> <span class="badge badge-secondary">Facebook</span> <span class="badge badge-secondary">Instagram</span></p>
<p class="card-text">AR filter promoting Coca-Cola No Sugar.</p>
<p class="card-text">The filter will be randomed when the user start recording.</p>
<a href="#" class="btn btn-secondary disabled" target="_BLANK">Facebook AR (not available)</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-img-top embed-responsive embed-responsive-16by9">
<iframe src="https://youtube.com/embed/hoorefNZdMM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="card-body">
<h5 class="card-title">Pomelo - Bugs Bunny AR</h5>
<p class="card-text"><span class="badge badge-primary">A-script</span> <span class="badge badge-secondary">Spark AR</span> <span class="badge badge-secondary">Facebook</span> <span class="badge badge-secondary">Instagram</span></p>
<p class="card-text">Eat the carrot to win a discount code!</p>
<p class="card-text">Bite the carrot as fast as possible.</p>
<a href="#" class="btn btn-secondary disabled" target="_BLANK">Facebook AR (not available)</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-img-top embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/uTbSzx0_jyo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="card-body">
<h5 class="card-title">Tom and Jerry Blink Race AR</h5>
<p class="card-text"><span class="badge badge-primary">A-script</span> <span class="badge badge-secondary">Spark AR</span> <span class="badge badge-secondary">Facebook</span> <span class="badge badge-secondary">Instagram</span></p>
<p class="card-text">Blink fast to win!</p>
<p class="card-text">2 players can race against each other.</p>
<a href="#" class="btn btn-secondary disabled" target="_BLANK">Facebook AR (not available)</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-img-top embed-responsive embed-responsive-16by9">
<iframe src="https://youtube.com/embed/-kj1Nt4TZT0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="card-body">
<h5 class="card-title">Milo Game AR</h5>
<p class="card-text"><span class="badge badge-primary">A-script</span> <span class="badge badge-secondary">Spark AR</span> <span class="badge badge-secondary">Facebook</span> <span class="badge badge-secondary">Instagram</span></p>
<p class="card-text">Collect the products as many as you can!</p>
<p class="card-text">Avoid all the bombs.</p>
<a href="#" class="btn btn-secondary disabled" target="_BLANK">Facebook AR (not available)</a>
</div>
</div>
</div>
</div>
<h3><br />Back-end Projects</h3>
<div class="row" style="color: white;">
<div class="col-md-6 col-lg-4">
<div class="card">
<img class="card-img-top" src="img/projects/SixerDev.png">
<div class="card-body">
<h5 class="card-title">SixerDev - Boardgame Store</h5>
<p class="card-text"><span class="badge badge-secondary">Node.js</span> <span class="badge badge-secondary">PUG</span> <span class="badge badge-secondary">MongoDB</span> <span class="badge badge-secondary">Javascript</span></p>
<p class="card-text">High quality e-commerce website that sells board game that suits customer needs.</p>
<p class="card-text">The website contains normal user section, registered user section and admin section.</p>
<p class="card-text">Node.js, PUG and MongoDB were used in this project.</p>
<p class="card-text">Try using <strong>username: pappimdemo</strong> and <strong>password: 1234</strong> to login to admin system or you can register a new account on the website.</p>
<a href="https://github.com/masty123/BoardGameStore_SixerDev" class="btn btn-secondary" target="_BLANK">GitHub</a>
<a href="http://sixer-dev-store.herokuapp.com/" class="btn btn-secondary" target="_BLANK">Deployed Heroku Website</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card">
<img class="card-img-top" src="img/projects/translate.png">
<div class="card-body">
<h5 class="card-title">Printto-Lang</h5>
<p class="card-text"><span class="badge badge-secondary">Node.js</span> <span class="badge badge-secondary">MongoDB</span></p>
<p class="card-text">New language developed for voice-synth community. The language is read-able and translable.</p>
<p class="card-text">This new language can translated to back English.</p>
<p class="card-text">When the user want to translate the word that does not exist, new word will be generated and saved to the language system. Translator also validate for English words.</p>
<p class="card-text">Node.js and MongoDB were used in this project.</p>
<a href="http://www.printmov.com/translate" class="btn btn-secondary" target="_BLANK">Deployed Website</a>
</div>
</div>
</div>
</div>
</div>
<div id="contact" style="background-color: #060606;">
<div class="seperator full-width" style="background-color: white;"></div>
</div>
<div class="seperator-2 full-width" style="background-color: #060606;"></div>
</div>
<div class="vov fade-in slowest container contact-section" style="height:700px; padding-top: 100px;">
<h1 id="contact-selector">Contact</h1>
<p>
Tel. <a href="tel:+66824955152">(+66)82-495-5152</a>
</p>
<p>
Email
<br /><a href="mailto:pappim.p@ku.ac.th">pappim.p@ku.ac.th</a>
<br /><a href="mailto:printtopipatkasira@gmail.com">printtopipatkasira@gmail.com</a>
</p>
<p>
GitHub <a href="http://www.github.com/printto">GitHub.com/printto</a>
</p>
<p>
756/27 Passorn Prestige, Pattanakarn 38, Pattanakarn Rd., Suanluang, Bangkok, Thailand, 10250
</p>
</div>
<div class="seperator">
</div>
<div class="vov fade-in slow" id="loadnav">
</div>
<script type="text/javascript" src="js/parallax.js"></script>
<script>
connectApi("profile-resume");
</script>
</body>
</html>