-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1580 lines (1551 loc) · 67.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
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta
name="description"
content="Revel in your creativity and unleash your inner artist as we shift to the Digital Normal in this year's UX&Chill production. Not even the pandemic can extinguish our passion for user experience design. Spark your passion. Chill with UX. ✨"
/>
<!-- Facebook Meta -->
<meta
property="og:title"
content="UX&Chill 2020 – User Experience Society"
/>
<meta property="og:type" content="website" />
<meta
property="og:image"
content="http://uxchill.uxsociety.org/uxchillmetadata.png"
/>
<meta
property="og:description"
content="Revel in your creativity and unleash your inner artist as we shift to the Digital Normal in this year's UX&Chill production. Not even the pandemic can extinguish our passion for user experience design. Spark your passion. Chill with UX. ✨"
/>
<meta name="twitter:card" content="" />
<meta name="twitter:site" content="@ux&chill" />
<meta name="twitter:creator" content="@uxsocietyph" />
<meta
name="twitter:title"
content="UX&Chill 2020 – User Experience Society"
/>
<meta
name="twitter:description"
content="A series of talks wherein User Experience design professionals share about their work and their passion for design and development! Join us as we come together spark your passion. Chill with UX."
/>
<meta
name="twitter:image"
content="https://uxchill.uxsociety.org/uxchillmetadata.png"
/>
<link rel="shortcut icon" href="favicon.ico" />
<link
href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700,800|Rubik:500,700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./css/app.css" />
<title>UX&Chill 2020 – User Experience Society</title>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-151954100-1"
></script>
<script>
window.dataLayer = window.dataLayer || []
function gtag() {
dataLayer.push(arguments)
}
gtag('js', new Date())
gtag('config', 'UA-151954100-1')
</script>
</head>
<body>
<main>
<section class="hero">
<div class="container">
<header>
<nav class="hero__nav">
<!-- logo -->
<a href="/">
<svg
xmlns="http://www.w3.org/2000/svg"
width="202"
height="48"
viewBox="0 0 202 48"
fill="none"
>
<path
d="M24.0625 9.5625V28.293C24.0625 31.4049 23.0859 33.8659 21.1328 35.6758C19.1927 37.4857 16.5365 38.3906 13.1641 38.3906C9.84375 38.3906 7.20703 37.5117 5.25391 35.7539C3.30078 33.9961 2.30469 31.5807 2.26562 28.5078V9.5625H8.125V28.332C8.125 30.194 8.56771 31.5547 9.45312 32.4141C10.3516 33.2604 11.5885 33.6836 13.1641 33.6836C16.4583 33.6836 18.1315 31.9518 18.1836 28.4883V9.5625H24.0625ZM41.043 19.3672L46.375 9.5625H53.1133L44.832 23.6641L53.3281 38H46.5117L41.043 28.0391L35.5742 38H28.7578L37.2539 23.6641L28.9727 9.5625H35.7109L41.043 19.3672Z"
fill="#4F4F4F"
/>
<path
d="M77.2 27L75.35 25.1C74.6167 25.7667 73.7917 26.2833 72.875 26.65C71.975 27.0167 71.025 27.2 70.025 27.2C68.8417 27.2 67.7917 27 66.875 26.6C65.9583 26.1833 65.2417 25.6167 64.725 24.9C64.225 24.1667 63.975 23.325 63.975 22.375C63.975 21.325 64.2667 20.3833 64.85 19.55C65.45 18.7167 66.4 17.9333 67.7 17.2C67.05 16.4833 66.575 15.825 66.275 15.225C65.9917 14.625 65.85 14 65.85 13.35C65.85 12.1 66.2917 11.1 67.175 10.35C68.075 9.58333 69.2417 9.2 70.675 9.2C72.0083 9.2 73.0667 9.55 73.85 10.25C74.65 10.9333 75.05 11.8583 75.05 13.025C75.05 13.925 74.7917 14.7333 74.275 15.45C73.7583 16.15 72.9083 16.8583 71.725 17.575L75.2 21.125C75.8833 19.775 76.2583 18.2 76.325 16.4H78.925C78.825 18.9667 78.2 21.175 77.05 23.025L80.925 27H77.2ZM70.7 11.35C70.0833 11.35 69.5917 11.5333 69.225 11.9C68.8583 12.25 68.675 12.725 68.675 13.325C68.675 13.725 68.775 14.1083 68.975 14.475C69.175 14.8417 69.5583 15.325 70.125 15.925C71.0083 15.425 71.625 14.9667 71.975 14.55C72.325 14.1167 72.5 13.65 72.5 13.15C72.5 12.6 72.3333 12.1667 72 11.85C71.6667 11.5167 71.2333 11.35 70.7 11.35ZM70.125 24.775C71.4417 24.775 72.6083 24.2917 73.625 23.325L69.325 18.875C68.5083 19.375 67.9167 19.8917 67.55 20.425C67.2 20.9417 67.025 21.5417 67.025 22.225C67.025 23.0083 67.3 23.6333 67.85 24.1C68.4167 24.55 69.175 24.775 70.125 24.775ZM90.9666 27.2C89.2999 27.2 87.8499 26.8417 86.6166 26.125C85.3833 25.3917 84.4333 24.35 83.7666 23C83.1166 21.6333 82.7916 20.025 82.7916 18.175C82.7916 16.325 83.1166 14.725 83.7666 13.375C84.4333 12.025 85.3833 10.9917 86.6166 10.275C87.8499 9.54167 89.2999 9.175 90.9666 9.175C92.1833 9.175 93.2999 9.36667 94.3166 9.75C95.3333 10.1167 96.2166 10.6667 96.9666 11.4L96.1916 12.975C95.3416 12.2583 94.5083 11.7417 93.6916 11.425C92.8749 11.1083 91.9749 10.95 90.9916 10.95C89.0583 10.95 87.5583 11.5833 86.4916 12.85C85.4416 14.1 84.9166 15.875 84.9166 18.175C84.9166 20.4917 85.4416 22.2833 86.4916 23.55C87.5583 24.8 89.0583 25.425 90.9916 25.425C91.9749 25.425 92.8749 25.2667 93.6916 24.95C94.5083 24.6333 95.3416 24.1167 96.1916 23.4L96.9666 24.975C96.2166 25.7083 95.3333 26.2667 94.3166 26.65C93.2999 27.0167 92.1833 27.2 90.9666 27.2ZM116.211 9.375V27H114.186V18.925H103.636V27H101.611V9.375H103.636V17.175H114.186V9.375H116.211ZM121.806 9.375H123.856V27H121.806V9.375ZM129.452 9.375H131.502V25.25H140.327V27H129.452V9.375ZM144.203 9.375H146.253V25.25H155.078V27H144.203V9.375Z"
fill="#4F4F4F"
/>
<rect x="63" y="34" width="93" height="4" fill="#4ECCA8" />
</svg>
</a>
<ul class="navbar">
<li><a href="#About">About</a></li>
<li><a href="#speakers">Speakers</a></li>
<li><a href="#faq">FAQs</a></li>
<li><a href="#partners">Partners</a></li>
<li>
<a
href="https://bit.ly/uxcRSVP"
class="header-button"
id="register-button"
>Register Now</a
>
</li>
</ul>
</nav>
</header>
<div class="main-text" id="About">
<div>
<h1 class="main">
UX&CHILL 2020 <br /><span class="gradient"
>Experience Digital</span
>
</h1>
<p class="event-description">
Revel in your creativity and unleash your inner artist in this
year's UX&Chill production - because not even the pandemic can
extinguish our passion for user experience.
<strong>Experience virtual. Chill with UX. ✨</strong>
</p>
<div class="CTA-Buttons">
<a href="https://bit.ly/uxcRSVP" class="primary-btn"
>Register Now</a
>
<a href="#speakers" class="secondary-btn">View Speakers</a>
</div>
</div>
<img src="Hero.png" alt="UX&Chill 2020 Hero Image" />
</div>
<!-- <img src="./homeleft.png" alt="" class="hero-img-left" /> -->
<img src="./CTA2.png" alt="" class="hero-img-right" />
</div>
</section>
<section class="speakers" id="speakers">
<!-- modals -->
<div id="modal-smithson" aria-hidden="true" class="micromodal-slide">
<div tabindex="-1" class="modal__overlay" data-micromodal-close>
<div class="modal__container">
<div class="close">
<span data-micromodal-close>Close window</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
data-micromodal-close
>
<path
d="M25.8828 24.1172L21.7656 20L25.8828 15.8828C26.3671 15.3985 26.3671 14.6016 25.8828 14.1172C25.3984 13.6328 24.6015 13.6328 24.1171 14.1172L19.9999 18.2344L15.8828 14.1172C15.3984 13.6328 14.664 13.5625 14.1171 14.1172C13.5624 14.6719 13.6484 15.4141 14.1171 15.8828L18.2343 20L14.1171 24.1172C13.5937 24.6406 13.6171 25.3906 14.1171 25.8828C14.6171 26.3828 15.3984 26.3672 15.8828 25.8828L19.9999 21.7656L24.1171 25.8828C24.6015 26.3672 25.3984 26.3672 25.8828 25.8828C26.3749 25.3985 26.3749 24.6016 25.8828 24.1172Z"
fill="#828282"
data-micromodal-close
/>
<path
d="M20 5.9375C23.7578 5.9375 27.2891 7.39844 29.9453 10.0547C32.6016 12.7109 34.0625 16.2422 34.0625 20C34.0625 23.7578 32.6016 27.2891 29.9453 29.9453C27.2891 32.6016 23.7578 34.0625 20 34.0625C16.2422 34.0625 12.7109 32.6016 10.0547 29.9453C7.39844 27.2891 5.9375 23.7578 5.9375 20C5.9375 16.2422 7.39844 12.7109 10.0547 10.0547C12.7109 7.39844 16.2422 5.9375 20 5.9375ZM20 3.75C11.0234 3.75 3.75 11.0234 3.75 20C3.75 28.9766 11.0234 36.25 20 36.25C28.9766 36.25 36.25 28.9766 36.25 20C36.25 11.0234 28.9766 3.75 20 3.75Z"
fill="#828282"
data-micromodal-close
/>
</svg>
</div>
<div class="main">
<div class="person">
<div
style="
width: 262px;
height: 262px;
background-image: url('./speakers/phil.png');
background-size: 262px;
border-radius: 50%;
margin-bottom: 30px;
"
></div>
<p class="speaker-name">Phil Smithson</p>
<p class="speaker-category">Chief Executive Officer</p>
<img src="./speakers/onoff.png" alt="On Off Logo" />
</div>
<div class="details">
<p>
As CEO, Phil is responsible for making On-Off Group the top
innovation agency in the Philippines. Today, the company
employs some of the most experienced Human-Centered Design
practitioners in the country. On-Off Group has helped
leading Filipino and global organizations use Design
Thinking and User Experience Design to develop their most
innovative products, services, and programs. Phil’s ultimate
goal is to encourage Filipino business leaders to employ
empathy to address their customers’ and stakeholders’ needs
so that products and services made through the lens of
Human-Centered Design becomes the standard in the country.
</p>
</div>
</div>
</div>
</div>
</div>
<div id="modal-jvillanueva" aria-hidden="true" class="micromodal-slide">
<div tabindex="-1" class="modal__overlay" data-micromodal-close>
<div class="modal__container">
<div class="close">
<span data-micromodal-close>Close window</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
data-micromodal-close
>
<path
d="M25.8828 24.1172L21.7656 20L25.8828 15.8828C26.3671 15.3985 26.3671 14.6016 25.8828 14.1172C25.3984 13.6328 24.6015 13.6328 24.1171 14.1172L19.9999 18.2344L15.8828 14.1172C15.3984 13.6328 14.664 13.5625 14.1171 14.1172C13.5624 14.6719 13.6484 15.4141 14.1171 15.8828L18.2343 20L14.1171 24.1172C13.5937 24.6406 13.6171 25.3906 14.1171 25.8828C14.6171 26.3828 15.3984 26.3672 15.8828 25.8828L19.9999 21.7656L24.1171 25.8828C24.6015 26.3672 25.3984 26.3672 25.8828 25.8828C26.3749 25.3985 26.3749 24.6016 25.8828 24.1172Z"
fill="#828282"
data-micromodal-close
/>
<path
d="M20 5.9375C23.7578 5.9375 27.2891 7.39844 29.9453 10.0547C32.6016 12.7109 34.0625 16.2422 34.0625 20C34.0625 23.7578 32.6016 27.2891 29.9453 29.9453C27.2891 32.6016 23.7578 34.0625 20 34.0625C16.2422 34.0625 12.7109 32.6016 10.0547 29.9453C7.39844 27.2891 5.9375 23.7578 5.9375 20C5.9375 16.2422 7.39844 12.7109 10.0547 10.0547C12.7109 7.39844 16.2422 5.9375 20 5.9375ZM20 3.75C11.0234 3.75 3.75 11.0234 3.75 20C3.75 28.9766 11.0234 36.25 20 36.25C28.9766 36.25 36.25 28.9766 36.25 20C36.25 11.0234 28.9766 3.75 20 3.75Z"
fill="#828282"
data-micromodal-close
/>
</svg>
</div>
<div class="main">
<div class="person">
<div
style="
width: 262px;
height: 262px;
background-image: url('./speakers/jiggy.png');
background-size: 262px;
border-radius: 50%;
margin-bottom: 30px;
"
></div>
<p class="speaker-name">Jiggy Villanueva</p>
<p class="speaker-category">Product Designer</p>
<img src="./speakers/kalibrr.png" alt="Kalibrr Logo" />
</div>
<div class="details">
<p>
Jiggy Villanueva helps people tell their unique stories
through branding and UX design. Currently, he’s a product
designer at Kalibrr, helping jobseekers find their dream
jobs. He also designs for Tayohelp.com, a website that helps
Filipino-Americans navigate the COVID-19 pandemic.
</p>
</div>
</div>
</div>
</div>
</div>
<div id="modal-pascasio" aria-hidden="true" class="micromodal-slide">
<div tabindex="-1" class="modal__overlay" data-micromodal-close>
<div class="modal__container">
<div class="close">
<span data-micromodal-close>Close window</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
data-micromodal-close
>
<path
d="M25.8828 24.1172L21.7656 20L25.8828 15.8828C26.3671 15.3985 26.3671 14.6016 25.8828 14.1172C25.3984 13.6328 24.6015 13.6328 24.1171 14.1172L19.9999 18.2344L15.8828 14.1172C15.3984 13.6328 14.664 13.5625 14.1171 14.1172C13.5624 14.6719 13.6484 15.4141 14.1171 15.8828L18.2343 20L14.1171 24.1172C13.5937 24.6406 13.6171 25.3906 14.1171 25.8828C14.6171 26.3828 15.3984 26.3672 15.8828 25.8828L19.9999 21.7656L24.1171 25.8828C24.6015 26.3672 25.3984 26.3672 25.8828 25.8828C26.3749 25.3985 26.3749 24.6016 25.8828 24.1172Z"
fill="#828282"
data-micromodal-close
/>
<path
d="M20 5.9375C23.7578 5.9375 27.2891 7.39844 29.9453 10.0547C32.6016 12.7109 34.0625 16.2422 34.0625 20C34.0625 23.7578 32.6016 27.2891 29.9453 29.9453C27.2891 32.6016 23.7578 34.0625 20 34.0625C16.2422 34.0625 12.7109 32.6016 10.0547 29.9453C7.39844 27.2891 5.9375 23.7578 5.9375 20C5.9375 16.2422 7.39844 12.7109 10.0547 10.0547C12.7109 7.39844 16.2422 5.9375 20 5.9375ZM20 3.75C11.0234 3.75 3.75 11.0234 3.75 20C3.75 28.9766 11.0234 36.25 20 36.25C28.9766 36.25 36.25 28.9766 36.25 20C36.25 11.0234 28.9766 3.75 20 3.75Z"
fill="#828282"
data-micromodal-close
/>
</svg>
</div>
<div class="main">
<div class="person">
<div
style="
width: 262px;
height: 262px;
background-image: url('./speakers/dom.png');
background-size: 262px;
border-radius: 50%;
margin-bottom: 30px;
"
></div>
<p class="speaker-name">Dom Pascasio</p>
<p class="speaker-category">
Financial Solutions Innovations and Transformations Lead
</p>
<img src="./speakers/pg.png" alt="P&G logo" />
</div>
<div class="details">
<p>
Dominique has more than 2 years of experience working as an
SAP Technical Solutions Expert, Project Manager, Innovations
and Transformation Lead in the Financial Services sector
within the Global Business Service space of Procter and
Gamble. He has very strong ties with User Experience -
recently achieved certification from NN/G and is one of the
founding members of the first student-led UX organization in
the Philippines. Dominique has firm belief on building
innovative user and human centered solutions through design.
</p>
</div>
</div>
</div>
</div>
</div>
<div id="modal-deguzman" aria-hidden="true" class="micromodal-slide">
<div tabindex="-1" class="modal__overlay" data-micromodal-close>
<div class="modal__container">
<div class="close">
<span data-micromodal-close>Close window</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
data-micromodal-close
>
<path
d="M25.8828 24.1172L21.7656 20L25.8828 15.8828C26.3671 15.3985 26.3671 14.6016 25.8828 14.1172C25.3984 13.6328 24.6015 13.6328 24.1171 14.1172L19.9999 18.2344L15.8828 14.1172C15.3984 13.6328 14.664 13.5625 14.1171 14.1172C13.5624 14.6719 13.6484 15.4141 14.1171 15.8828L18.2343 20L14.1171 24.1172C13.5937 24.6406 13.6171 25.3906 14.1171 25.8828C14.6171 26.3828 15.3984 26.3672 15.8828 25.8828L19.9999 21.7656L24.1171 25.8828C24.6015 26.3672 25.3984 26.3672 25.8828 25.8828C26.3749 25.3985 26.3749 24.6016 25.8828 24.1172Z"
fill="#828282"
data-micromodal-close
/>
<path
d="M20 5.9375C23.7578 5.9375 27.2891 7.39844 29.9453 10.0547C32.6016 12.7109 34.0625 16.2422 34.0625 20C34.0625 23.7578 32.6016 27.2891 29.9453 29.9453C27.2891 32.6016 23.7578 34.0625 20 34.0625C16.2422 34.0625 12.7109 32.6016 10.0547 29.9453C7.39844 27.2891 5.9375 23.7578 5.9375 20C5.9375 16.2422 7.39844 12.7109 10.0547 10.0547C12.7109 7.39844 16.2422 5.9375 20 5.9375ZM20 3.75C11.0234 3.75 3.75 11.0234 3.75 20C3.75 28.9766 11.0234 36.25 20 36.25C28.9766 36.25 36.25 28.9766 36.25 20C36.25 11.0234 28.9766 3.75 20 3.75Z"
fill="#828282"
data-micromodal-close
/>
</svg>
</div>
<div class="main">
<div class="person">
<div
style="
width: 262px;
height: 262px;
background-image: url('./speakers/jpdeg.png');
background-size: 262px;
border-radius: 50%;
margin-bottom: 30px;
"
></div>
<p class="speaker-name">JP de Guzman</p>
<p class="speaker-category">Chief Creative</p>
<img src="./speakers/frost.png" alt="Frost logo" />
</div>
<div class="details">
<p>
John Paul de Guzman is the Chief Creative and Founder of
Frost Design & Consulting Group — Manila based design
agency. He is also the founder of Rain Creative. Rain is a
web design agency that is also part of Frost Design and
Consulting Group. It aims to create handcrafted digital
experiences. Having 20 years of collective experiences in
the industry, his company has built the confidence and
rapport to deliver the most demanding projects and still
maintain a level of quality in every step of the way. He has
worked with wide a range of clients from different
industries and he led various creative projects from top
local and global organizations like International
Organization on Migration (IOM), Globe Telecoms, Asian
Institute of Management, AboitizLand, TV5, and Solar
Network.
</p>
</div>
</div>
</div>
</div>
</div>
<div id="modal-rvillanueva" aria-hidden="true" class="micromodal-slide">
<div tabindex="-1" class="modal__overlay" data-micromodal-close>
<div class="modal__container">
<div class="close">
<span data-micromodal-close>Close window</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
data-micromodal-close
>
<path
d="M25.8828 24.1172L21.7656 20L25.8828 15.8828C26.3671 15.3985 26.3671 14.6016 25.8828 14.1172C25.3984 13.6328 24.6015 13.6328 24.1171 14.1172L19.9999 18.2344L15.8828 14.1172C15.3984 13.6328 14.664 13.5625 14.1171 14.1172C13.5624 14.6719 13.6484 15.4141 14.1171 15.8828L18.2343 20L14.1171 24.1172C13.5937 24.6406 13.6171 25.3906 14.1171 25.8828C14.6171 26.3828 15.3984 26.3672 15.8828 25.8828L19.9999 21.7656L24.1171 25.8828C24.6015 26.3672 25.3984 26.3672 25.8828 25.8828C26.3749 25.3985 26.3749 24.6016 25.8828 24.1172Z"
fill="#828282"
data-micromodal-close
/>
<path
d="M20 5.9375C23.7578 5.9375 27.2891 7.39844 29.9453 10.0547C32.6016 12.7109 34.0625 16.2422 34.0625 20C34.0625 23.7578 32.6016 27.2891 29.9453 29.9453C27.2891 32.6016 23.7578 34.0625 20 34.0625C16.2422 34.0625 12.7109 32.6016 10.0547 29.9453C7.39844 27.2891 5.9375 23.7578 5.9375 20C5.9375 16.2422 7.39844 12.7109 10.0547 10.0547C12.7109 7.39844 16.2422 5.9375 20 5.9375ZM20 3.75C11.0234 3.75 3.75 11.0234 3.75 20C3.75 28.9766 11.0234 36.25 20 36.25C28.9766 36.25 36.25 28.9766 36.25 20C36.25 11.0234 28.9766 3.75 20 3.75Z"
fill="#828282"
data-micromodal-close
/>
</svg>
</div>
<div class="main">
<div class="person">
<div
style="
width: 262px;
height: 262px;
background-image: url('./speakers/raymund.png');
background-size: 262px;
border-radius: 50%;
margin-bottom: 30px;
"
></div>
<p class="speaker-name">Raymund Villanueva</p>
<p class="speaker-category">
Head of Business for QR Ecosystems
</p>
<img src="./speakers/paymaya.png" alt="Paymaya Logo" />
</div>
<div class="details">
<p>
Raymund holds an MBA degree from University of San Francisco
and has worked for fortune 500 companies leading marketing
and analytics organizations within Yahoo and the Gap. His
experience in these companies focused on utilizing big data,
marketing technology, and creativity in delivering truly
innovative and hyper personalized digital experiences to
grow global brands. In 2013, Raymund moved back to the
Philippines in hopes to further digital within the region.
Raymund is currently the Head of Business for QR Ecosystems
in PayMaya. He is responsible for expanding cashless
payments in the Philippines. He continues to make an effort
to be well-versed in the digital space as the digital
landscape evolves, aiming to put the Philippines on the
global digital map, one innovation, one brand at a time.
Raymund also holds a Management Engineering degree from
Ateneo and is an expert digital marketer with deep expertise
in SEM, SEO, email, display, mobile, video and social media.
He is co-founder of a top Performance Content Marketing
Agency, Blankslate Creative Inc. and an instructor teaching
digital marketing and social media part time.
</p>
</div>
</div>
</div>
</div>
</div>
<div id="modal-demetillo" aria-hidden="true" class="micromodal-slide">
<div tabindex="-1" class="modal__overlay" data-micromodal-close>
<div class="modal__container">
<div class="close">
<span data-micromodal-close>Close window</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
data-micromodal-close
>
<path
d="M25.8828 24.1172L21.7656 20L25.8828 15.8828C26.3671 15.3985 26.3671 14.6016 25.8828 14.1172C25.3984 13.6328 24.6015 13.6328 24.1171 14.1172L19.9999 18.2344L15.8828 14.1172C15.3984 13.6328 14.664 13.5625 14.1171 14.1172C13.5624 14.6719 13.6484 15.4141 14.1171 15.8828L18.2343 20L14.1171 24.1172C13.5937 24.6406 13.6171 25.3906 14.1171 25.8828C14.6171 26.3828 15.3984 26.3672 15.8828 25.8828L19.9999 21.7656L24.1171 25.8828C24.6015 26.3672 25.3984 26.3672 25.8828 25.8828C26.3749 25.3985 26.3749 24.6016 25.8828 24.1172Z"
fill="#828282"
data-micromodal-close
/>
<path
d="M20 5.9375C23.7578 5.9375 27.2891 7.39844 29.9453 10.0547C32.6016 12.7109 34.0625 16.2422 34.0625 20C34.0625 23.7578 32.6016 27.2891 29.9453 29.9453C27.2891 32.6016 23.7578 34.0625 20 34.0625C16.2422 34.0625 12.7109 32.6016 10.0547 29.9453C7.39844 27.2891 5.9375 23.7578 5.9375 20C5.9375 16.2422 7.39844 12.7109 10.0547 10.0547C12.7109 7.39844 16.2422 5.9375 20 5.9375ZM20 3.75C11.0234 3.75 3.75 11.0234 3.75 20C3.75 28.9766 11.0234 36.25 20 36.25C28.9766 36.25 36.25 28.9766 36.25 20C36.25 11.0234 28.9766 3.75 20 3.75Z"
fill="#828282"
data-micromodal-close
/>
</svg>
</div>
<div class="main">
<div class="person">
<div
style="
width: 262px;
height: 262px;
background-image: url('./speakers/jay.png');
background-size: 262px;
border-radius: 50%;
margin-bottom: 30px;
"
></div>
<p class="speaker-name">Jay Demetillo</p>
<p class="speaker-category">Lead UX / Visual Designer</p>
<img src="./speakers/grab.png" alt="Grab logo" />
</div>
<div class="details">
<p>
With 10+ years of experience working in New York City to San
Francisco and now Singapore, Jay Demetillo has almost seen
it all in the design world. Jay has worked with Twitter,
Pinterest, Yahoo, and now Grab. Jay was an adjunct professor
at CCA in San Francisco and has taught/spoken in China for
ACG. He's also worked on notable projects such as the Bay
Lights, Gaspar Brasserie, San Francisco's Park System
SFPark. Most recently, his journey has taken him from
designing within the Western world ideals to now learning
and adapting to Southeast Asia's culture and technology. He
has notably led the redesign of GrabFood with an amazing
team at Grab.
</p>
</div>
</div>
</div>
</div>
</div>
<div id="modal-matutina" aria-hidden="true" class="micromodal-slide">
<div tabindex="-1" class="modal__overlay" data-micromodal-close>
<div class="modal__container">
<div class="close">
<span data-micromodal-close>Close window</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
data-micromodal-close
>
<path
d="M25.8828 24.1172L21.7656 20L25.8828 15.8828C26.3671 15.3985 26.3671 14.6016 25.8828 14.1172C25.3984 13.6328 24.6015 13.6328 24.1171 14.1172L19.9999 18.2344L15.8828 14.1172C15.3984 13.6328 14.664 13.5625 14.1171 14.1172C13.5624 14.6719 13.6484 15.4141 14.1171 15.8828L18.2343 20L14.1171 24.1172C13.5937 24.6406 13.6171 25.3906 14.1171 25.8828C14.6171 26.3828 15.3984 26.3672 15.8828 25.8828L19.9999 21.7656L24.1171 25.8828C24.6015 26.3672 25.3984 26.3672 25.8828 25.8828C26.3749 25.3985 26.3749 24.6016 25.8828 24.1172Z"
fill="#828282"
data-micromodal-close
/>
<path
d="M20 5.9375C23.7578 5.9375 27.2891 7.39844 29.9453 10.0547C32.6016 12.7109 34.0625 16.2422 34.0625 20C34.0625 23.7578 32.6016 27.2891 29.9453 29.9453C27.2891 32.6016 23.7578 34.0625 20 34.0625C16.2422 34.0625 12.7109 32.6016 10.0547 29.9453C7.39844 27.2891 5.9375 23.7578 5.9375 20C5.9375 16.2422 7.39844 12.7109 10.0547 10.0547C12.7109 7.39844 16.2422 5.9375 20 5.9375ZM20 3.75C11.0234 3.75 3.75 11.0234 3.75 20C3.75 28.9766 11.0234 36.25 20 36.25C28.9766 36.25 36.25 28.9766 36.25 20C36.25 11.0234 28.9766 3.75 20 3.75Z"
fill="#828282"
data-micromodal-close
/>
</svg>
</div>
<div class="main">
<div class="person">
<div
style="
width: 262px;
height: 262px;
background-image: url('./speakers/dan.png');
background-size: 262px;
border-radius: 50%;
margin-bottom: 30px;
"
></div>
<p class="speaker-name">Dan Matutina</p>
<p class="speaker-category">Co-founder, Creative</p>
<img
src="./speakers/plus63.png"
alt="Plus 63 Design Co Logo"
/>
</div>
<div class="details">
<p>
Dan is represented by illustration agencies Agent Pekka and
Vision Track. His style is described as a combination of
angular, graphic shapes layered with hand-painted textures.
Dan’s illustrations have appeared in print, digital and
animation. He has worked on projects for brands such as
Apple, Google, Microsoft, Pinterest, Airbnb, Samsung, WIRED
Magazine, Fast Co., Wallpaper*, The Guardian, The Wall
Street Journal, Coca-Cola, Havaianas, Heineken, Uniqlo to
name a few. Dan has also worked with studios and agencies
such as Pentagram, Frog Design, CP+B, Wieden+Kennedy,
Droga5, Leo Burnett NY, Ogilvy & Mather NY and Tool of NA.
At Plus63 Design Co., he develops graphic design identities
and systems for brands. The studio experiments with new
ideas, extending its scope to include prototyping furniture
pieces or custom objects for memorable retail experiences,
developing business strategies for brands, designing
solutions for nonprofits, and taking on extensive projects
such as rebranding a university's athletic program. He has
lectured at the University of the Philippines - College of
Fine Arts.
</p>
</div>
</div>
</div>
</div>
</div>
<div id="modal-manikan" aria-hidden="true" class="micromodal-slide">
<div tabindex="-1" class="modal__overlay" data-micromodal-close>
<div class="modal__container">
<div class="close">
<span data-micromodal-close>Close window</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
data-micromodal-close
>
<path
d="M25.8828 24.1172L21.7656 20L25.8828 15.8828C26.3671 15.3985 26.3671 14.6016 25.8828 14.1172C25.3984 13.6328 24.6015 13.6328 24.1171 14.1172L19.9999 18.2344L15.8828 14.1172C15.3984 13.6328 14.664 13.5625 14.1171 14.1172C13.5624 14.6719 13.6484 15.4141 14.1171 15.8828L18.2343 20L14.1171 24.1172C13.5937 24.6406 13.6171 25.3906 14.1171 25.8828C14.6171 26.3828 15.3984 26.3672 15.8828 25.8828L19.9999 21.7656L24.1171 25.8828C24.6015 26.3672 25.3984 26.3672 25.8828 25.8828C26.3749 25.3985 26.3749 24.6016 25.8828 24.1172Z"
fill="#828282"
data-micromodal-close
/>
<path
d="M20 5.9375C23.7578 5.9375 27.2891 7.39844 29.9453 10.0547C32.6016 12.7109 34.0625 16.2422 34.0625 20C34.0625 23.7578 32.6016 27.2891 29.9453 29.9453C27.2891 32.6016 23.7578 34.0625 20 34.0625C16.2422 34.0625 12.7109 32.6016 10.0547 29.9453C7.39844 27.2891 5.9375 23.7578 5.9375 20C5.9375 16.2422 7.39844 12.7109 10.0547 10.0547C12.7109 7.39844 16.2422 5.9375 20 5.9375ZM20 3.75C11.0234 3.75 3.75 11.0234 3.75 20C3.75 28.9766 11.0234 36.25 20 36.25C28.9766 36.25 36.25 28.9766 36.25 20C36.25 11.0234 28.9766 3.75 20 3.75Z"
fill="#828282"
data-micromodal-close
/>
</svg>
</div>
<div class="main">
<div class="person">
<div
style="
width: 262px;
height: 262px;
background-image: url('./speakers/zed.png');
background-size: 262px;
border-radius: 50%;
margin-bottom: 30px;
"
></div>
<p class="speaker-name">Zed Manikan</p>
<p class="speaker-category">UX Designer</p>
<img src="./speakers/make.png" alt="Make Logo" />
</div>
<div class="details">
<p>
Zed Manikan is a UX Designer at Make Technology Inc. a
digital & innovations agency based in Makati. He worked with
multiple projects from different industries such as real
estate, telco, and banking. Working with some of the
industry’s well-recognized UX designers, he is eager in
sharing his learnings with others. He enjoys working closely
with his teammates and believes that collaboration and
open-communication open several doors to multiple ideas.
When he is not designing, he loves exploring open-world
games such as The Witcher 3, and The Legend of Zelda Breath
of the Wild.
</p>
</div>
</div>
</div>
</div>
</div>
<div id="modal-balisi" aria-hidden="true" class="micromodal-slide">
<div tabindex="-1" class="modal__overlay" data-micromodal-close>
<div class="modal__container">
<div class="close">
<span data-micromodal-close>Close window</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
data-micromodal-close
>
<path
d="M25.8828 24.1172L21.7656 20L25.8828 15.8828C26.3671 15.3985 26.3671 14.6016 25.8828 14.1172C25.3984 13.6328 24.6015 13.6328 24.1171 14.1172L19.9999 18.2344L15.8828 14.1172C15.3984 13.6328 14.664 13.5625 14.1171 14.1172C13.5624 14.6719 13.6484 15.4141 14.1171 15.8828L18.2343 20L14.1171 24.1172C13.5937 24.6406 13.6171 25.3906 14.1171 25.8828C14.6171 26.3828 15.3984 26.3672 15.8828 25.8828L19.9999 21.7656L24.1171 25.8828C24.6015 26.3672 25.3984 26.3672 25.8828 25.8828C26.3749 25.3985 26.3749 24.6016 25.8828 24.1172Z"
fill="#828282"
data-micromodal-close
/>
<path
d="M20 5.9375C23.7578 5.9375 27.2891 7.39844 29.9453 10.0547C32.6016 12.7109 34.0625 16.2422 34.0625 20C34.0625 23.7578 32.6016 27.2891 29.9453 29.9453C27.2891 32.6016 23.7578 34.0625 20 34.0625C16.2422 34.0625 12.7109 32.6016 10.0547 29.9453C7.39844 27.2891 5.9375 23.7578 5.9375 20C5.9375 16.2422 7.39844 12.7109 10.0547 10.0547C12.7109 7.39844 16.2422 5.9375 20 5.9375ZM20 3.75C11.0234 3.75 3.75 11.0234 3.75 20C3.75 28.9766 11.0234 36.25 20 36.25C28.9766 36.25 36.25 28.9766 36.25 20C36.25 11.0234 28.9766 3.75 20 3.75Z"
fill="#828282"
data-micromodal-close
/>
</svg>
</div>
<div class="main">
<div class="person">
<div
style="
width: 262px;
height: 262px;
background-image: url('./speakers/nica.png');
background-size: 262px;
border-radius: 50%;
margin-bottom: 30px;
"
></div>
<p class="speaker-name">Nica Balisi</p>
<p class="speaker-category">Lead for Interaction Design</p>
<img src="./speakers/make.png" alt="Make Logo" />
</div>
<div class="details">
<p>
Nica Balisi is currently a Lead for Interaction Design at
Make Technology, Inc. She leads a team of UX specialists and
designs products for an array of industries found both
locally and abroad. She specializes in complex problems,
distilling them to simpler systems that are both usable and
delightful to the user.
</p>
</div>
</div>
</div>
</div>
</div>
<div id="modal-dionisio" aria-hidden="true" class="micromodal-slide">
<div tabindex="-1" class="modal__overlay" data-micromodal-close>
<div class="modal__container">
<div class="close">
<span data-micromodal-close>Close window</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
data-micromodal-close
>
<path
d="M25.8828 24.1172L21.7656 20L25.8828 15.8828C26.3671 15.3985 26.3671 14.6016 25.8828 14.1172C25.3984 13.6328 24.6015 13.6328 24.1171 14.1172L19.9999 18.2344L15.8828 14.1172C15.3984 13.6328 14.664 13.5625 14.1171 14.1172C13.5624 14.6719 13.6484 15.4141 14.1171 15.8828L18.2343 20L14.1171 24.1172C13.5937 24.6406 13.6171 25.3906 14.1171 25.8828C14.6171 26.3828 15.3984 26.3672 15.8828 25.8828L19.9999 21.7656L24.1171 25.8828C24.6015 26.3672 25.3984 26.3672 25.8828 25.8828C26.3749 25.3985 26.3749 24.6016 25.8828 24.1172Z"
fill="#828282"
data-micromodal-close
/>
<path
d="M20 5.9375C23.7578 5.9375 27.2891 7.39844 29.9453 10.0547C32.6016 12.7109 34.0625 16.2422 34.0625 20C34.0625 23.7578 32.6016 27.2891 29.9453 29.9453C27.2891 32.6016 23.7578 34.0625 20 34.0625C16.2422 34.0625 12.7109 32.6016 10.0547 29.9453C7.39844 27.2891 5.9375 23.7578 5.9375 20C5.9375 16.2422 7.39844 12.7109 10.0547 10.0547C12.7109 7.39844 16.2422 5.9375 20 5.9375ZM20 3.75C11.0234 3.75 3.75 11.0234 3.75 20C3.75 28.9766 11.0234 36.25 20 36.25C28.9766 36.25 36.25 28.9766 36.25 20C36.25 11.0234 28.9766 3.75 20 3.75Z"
fill="#828282"
data-micromodal-close
/>
</svg>
</div>
<div class="main">
<div class="person">
<div
style="
width: 262px;
height: 262px;
background-image: url('./speakers/jp.png');
background-size: 262px;
border-radius: 50%;
margin-bottom: 30px;
"
></div>
<p class="speaker-name">JP Dionisio</p>
<p class="speaker-category">Fullstack Designer</p>
<img
src="./speakers/instagraphy.png"
alt="Instagraphy Logo"
/>
</div>
<div class="details">
<p>
JP Dionisio is currently a Fullstack Designer at Instagraphy
and the Community Leader of Webflow Manila. He graduated
from UST College of Architecture and lives in Cainta, Rizal.
He is an expert at web design and developing using Webflow,
having built over a hundred websites without any background
in coding. He is passionate about enabling everyone to
create for the web and to lead a fulfilling, impactful life
while doing it. You can often catch him playing Wild Rift
and satisfying his cravings for Japanese food.
</p>
</div>
</div>
</div>
</div>
</div>
<div id="modal-collado" aria-hidden="true" class="micromodal-slide">
<div tabindex="-1" class="modal__overlay" data-micromodal-close>
<div class="modal__container">
<div class="close">
<span data-micromodal-close>Close window</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
data-micromodal-close
>
<path
d="M25.8828 24.1172L21.7656 20L25.8828 15.8828C26.3671 15.3985 26.3671 14.6016 25.8828 14.1172C25.3984 13.6328 24.6015 13.6328 24.1171 14.1172L19.9999 18.2344L15.8828 14.1172C15.3984 13.6328 14.664 13.5625 14.1171 14.1172C13.5624 14.6719 13.6484 15.4141 14.1171 15.8828L18.2343 20L14.1171 24.1172C13.5937 24.6406 13.6171 25.3906 14.1171 25.8828C14.6171 26.3828 15.3984 26.3672 15.8828 25.8828L19.9999 21.7656L24.1171 25.8828C24.6015 26.3672 25.3984 26.3672 25.8828 25.8828C26.3749 25.3985 26.3749 24.6016 25.8828 24.1172Z"
fill="#828282"
data-micromodal-close
/>
<path
d="M20 5.9375C23.7578 5.9375 27.2891 7.39844 29.9453 10.0547C32.6016 12.7109 34.0625 16.2422 34.0625 20C34.0625 23.7578 32.6016 27.2891 29.9453 29.9453C27.2891 32.6016 23.7578 34.0625 20 34.0625C16.2422 34.0625 12.7109 32.6016 10.0547 29.9453C7.39844 27.2891 5.9375 23.7578 5.9375 20C5.9375 16.2422 7.39844 12.7109 10.0547 10.0547C12.7109 7.39844 16.2422 5.9375 20 5.9375ZM20 3.75C11.0234 3.75 3.75 11.0234 3.75 20C3.75 28.9766 11.0234 36.25 20 36.25C28.9766 36.25 36.25 28.9766 36.25 20C36.25 11.0234 28.9766 3.75 20 3.75Z"
fill="#828282"
data-micromodal-close
/>
</svg>
</div>
<div class="main">
<div class="person">
<div
style="
width: 262px;
height: 262px;
background-image: url('./speakers/alexis.png');
background-size: 262px;
border-radius: 50%;
margin-bottom: 30px;
"
></div>
<p class="speaker-name">Alexis Collado</p>
<p class="speaker-category">Senior Product Designer</p>
<img src="./speakers/kalibrr.png" alt="Kalibrr logo" />
</div>
<div class="details">
<p>
Alexis leads design at Kalibrr (YC W13), a Silicon Valley
company helping millions of South East Asians find better
opportunities by transforming the way jobseekers find jobs
and companies hire talent. He's Co-founder of UX+
Conference, the largest UX conference in Asia. He hosts and
produces design podcasts like Roots and UX Almusal. He also
manages Specter, where he helps new designers start their
career through curated mentorship and coaching programs.
Alexis was one of the original Co-founders of User
Experience Society, helping shape its vision, culture,
brand, and global expansion. You can often spot him fooling
around on his YouTube channel, playing DotA 2, writing on
his blog or newsletter, and playing lots of badminton
doubles.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h2>OUR SPEAKERS</h2>
<div class="speaker-collection">
<div class="speaker-card">
<div
data-micromodal-trigger="modal-collado"
style="
width: 140px;
height: 140px;
background-image: url('./speakers/alexis.png');
background-size: 140px;
border-radius: 50%;
margin: 0 auto;
margin-bottom: 32px;
"
></div>
<h3 class="speaker-name">Alexis Collado</h3>
<span class="speaker-category"> Senior Product Designer </span>
<img src="./speakers/kalibrr.png" alt="Kalibrr logo" />
</div>
<div class="speaker-card">
<div
data-micromodal-trigger="modal-matutina"
style="
width: 140px;
height: 140px;
background-image: url('./speakers/dan.png');
background-size: 140px;
border-radius: 50%;
margin: 0 auto;
margin-bottom: 32px;
"
></div>
<h3 class="speaker-name">Dan Matutina</h3>
<span class="speaker-category"> Co-founder, Creative </span>
<img src="./speakers/plus63.png" alt="Plus 63 Design Co Logo" />
</div>
<div class="speaker-card">
<div
data-micromodal-trigger="modal-pascasio"
style="
width: 140px;
height: 140px;
background-image: url('./speakers/dom.png');
background-size: 140px;
border-radius: 50%;
margin: 0 auto;
margin-bottom: 32px;
"
></div>
<h3 class="speaker-name">Dom Pascasio</h3>
<span class="speaker-category">
Financial Solutions Innovations and Transformations Lead
</span>
<img src="./speakers/pg.png" alt="P&G logo" />
</div>
<div class="speaker-card">
<div
data-micromodal-trigger="modal-demetillo"
style="
width: 140px;
height: 140px;
background-image: url('./speakers/jay.png');
background-size: 140px;
border-radius: 50%;
margin: 0 auto;
margin-bottom: 32px;
"
></div>
<h3 class="speaker-name">Jay Demetillo</h3>
<span class="speaker-category"> Lead UX / Visual Designer </span>
<img src="./speakers/grab.png" alt="Grab logo" />
</div>
<div class="speaker-card">
<div
data-micromodal-trigger="modal-jvillanueva"
style="
width: 140px;
height: 140px;
background-image: url('./speakers/jiggy.png');
background-size: 140px;
border-radius: 50%;
margin: 0 auto;
margin-bottom: 32px;
"
></div>
<h3 class="speaker-name">Jiggy Villanueva</h3>
<span class="speaker-category"> Product Designer </span>
<img src="./speakers/kalibrr.png" alt="Kalibrr Logo" />
</div>
<div class="speaker-card">
<div
data-micromodal-trigger="modal-deguzman"
style="
width: 140px;
height: 140px;
background-image: url('./speakers/jpdeg.png');
background-size: 140px;
border-radius: 50%;
margin: 0 auto;
margin-bottom: 32px;
"
></div>
<h3 class="speaker-name">JP de Guzman</h3>
<span class="speaker-category"> Chief Creative </span>
<img src="./speakers/frost.png" alt="Frost logo" />
</div>
<div class="speaker-card">
<div
data-micromodal-trigger="modal-dionisio"
style="
width: 140px;
height: 140px;
background-image: url('./speakers/jp.png');
background-size: 140px;
border-radius: 50%;
margin: 0 auto;
margin-bottom: 32px;
"
></div>
<h3 class="speaker-name">JP Dionisio</h3>
<span class="speaker-category"> Fullstack Designer </span>
<img src="./speakers/instagraphy.png" alt="Instagraphy Logo" />
</div>
<div class="speaker-card">
<div
data-micromodal-trigger="modal-balisi"
style="
width: 140px;
height: 140px;
background-image: url('./speakers/nica.png');
background-size: 140px;
border-radius: 50%;
margin: 0 auto;
margin-bottom: 32px;
"
></div>
<h3 class="speaker-name">Nica Balisi</h3>
<span class="speaker-category">
Lead for Interaction Design
</span>
<img src="./speakers/make.png" alt="Make Logo" />
</div>
<div class="speaker-card">
<div
data-micromodal-trigger="modal-smithson"
style="
width: 140px;
height: 140px;
background-image: url('./speakers/phil.png');
background-size: 140px;
border-radius: 50%;
margin: 0 auto;
margin-bottom: 32px;
"
></div>
<h3 class="speaker-name">Phil Smithson</h3>
<span class="speaker-category"> Chief Executive Officer </span>
<img src="./speakers/onoff.png" alt="On Off Logo" />
</div>
<div class="speaker-card">
<div
data-micromodal-trigger="modal-rvillanueva"
style="
width: 140px;
height: 140px;
background-image: url('./speakers/raymund.png');
background-size: 140px;
border-radius: 50%;
margin: 0 auto;
margin-bottom: 32px;
"
></div>
<h3 class="speaker-name">Raymund Villanueva</h3>
<span class="speaker-category">
Head of Business for QR Ecosystems
</span>