-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
677 lines (664 loc) · 54.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<meta property="og:title" content="감각있는 디자이너를 원하신다면?" />
<meta property="og:description" content="현업에서 뛰고있는 디자이너 YOOMIN SON" />
<meta property="og:url" content="https://fdgh134.github.io/yoom/" />
<meta property="og:type" content='website' />
<meta property="og:site_name" content="Portfolio" />
<meta property="og:image" content="img/ogimg.jpg" />
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
<title>Yoom's portfolio</title>
</head>
<body class="body_overflow">
<!--마우스커서 영역 시작-->
<section id="mouse">
<div class="mouse_cursor"></div>
<div class="mouse_cursor2"></div>
</section>
<!--마우스커서 영역 끝-->
<!--헤더 영역 시작-->
<header class="header_top animate__animated none">
<div class="header_inner">
<div class="header_line_top"></div>
<div class="header_content">
<h1>Yoom's Web Portfolio</h1>
<a class="my_mail" href="mailto:[email protected]">[email protected]</a>
<span> <div class="square"></div> Contect Me!</span>
</div>
<div class="header_line_bottom"></div>
<div class="header_bottom_out">
</div>
</div>
</header>
<!--헤더 영역 끝-->
<!--인트로 영역 시작-->
<div class="wrapper">
<svg class="motion" viewBox="0 0 750 160">
<g>
<path class="st0" d="M53.3 83.5c-17.5 0-31.7-13.4-31.7-29.8s14.2-29.8 31.7-29.8"/>
<path class="st0" d="M339.7 114.1c-16.1 0-29.1-12.1-29.1-27.1s13-27.1 29.1-27.1"/>
<path class="st0" d="M41.6 103.6v39.1h89"/>
<path class="st1" d="M41.6 142.7h89"/>
<path class="st0" d="M118.3 8.9v104.6"/>
<path class="st1" d="M118.3 57.3v56.2"/>
<path class="st1" d="M146.1 57.3h-27.8"/>
<path class="st0" d="M169.7 17.6v63.3S214 83.5 238 76"/>
</g>
<g>
<path class="st1" d="M169.7 80.9S214 83.5 238 76"/>
<path class="st0" d="M220.2 30.6h46.7"/>
<path class="st1" d="M252.7 30.6h14.2"/>
<path class="st0" d="M220.2 56.4h46.7"/>
<path class="st1" d="M236.2 56.4h30.7"/>
<path class="st0" d="M266.9 8.9v86.6"/>
<path class="st1" d="M266.9 30.6v64.9"/>
<path class="st0" d="M226.6 145.4c-23 0-41.6-9.4-41.6-20.9s18.6-20.9 41.6-20.9"/>
<path class="st0" d="M646.4 85.2c-25.7 0-46.6-13.9-46.6-31s20.9-31 46.6-31"/>
<path class="st1" d="M53.3 23.9C70.8 23.9 85 37.3 85 53.7S70.7 83.5 53.3 83.5"/>
</g>
<g>
<path class="st1" d="M339.7 59.9c16.1 0 29.1 12.1 29.1 27.1s-13 27.1-29.1 27.1"/>
<path class="st1" d="M226.6 103.6c23 0 41.6 9.4 41.6 20.9 0 11.5-18.7 20.9-41.6 20.9"/>
<path class="st1" d="M646.4 23.3c25.7 0 46.6 13.9 46.6 31s-20.9 31-46.6 31"/>
<path class="st0" d="M339.7 10.6v26.3"/>
<path class="st0" d="M296.7 36.9h84.2"/>
<path class="st1" d="M339.7 23.8v13.1"/>
<path class="st1" d="M339.7 36.9h41.2"/>
<path class="st0" d="M401.4 8.9v141.9"/>
<path class="st1" d="M401.4 73.1v77.7"/>
<path class="st0" d="M401.4 73.1h29.9"/>
</g>
<g>
<path class="st1" d="M401.4 73.1h14.9"/>
<path class="st0" d="M475.5 22.5v37.4c0 7.7-8.9 40.9-33 56"/>
<path class="st1" d="M475.5 59.9s8.3 40.5 32.3 53"/>
<path class="st0" d="M496 65.1h30.2"/>
<path class="st0" d="M526.2 11.7v132.5"/>
<path class="st1" d="M513.3 65.1h12.9"/>
<path class="st0" d="M555.8 8.9v142.8"/>
<path class="st1" d="M526.2 65.1v79.1"/>
</g>
<g>
<path class="st1" d="M555.8 57.4v94.3"/>
<path class="st0" d="M619.8 82.1V128"/>
<path class="st0" d="M673.4 80.3V128"/>
<path class="st0" d="M581.4 128H712"/>
<path class="st1" d="M633.3 128H712"/>
<path class="st1" d="M673.4 104.2V128"/>
<path class="st0" d="M738.8 22.3v82.8"/>
</g>
<g>
<path class="st0" d="M738.8 128.3v-.1"/>
</g>
</svg>
</div>
<div class="welcome-section content-hidden">
<div class="content-wrap">
<ul class="fly-in-text top">
<li>Y</li>
<li>O</li>
<li>O</li>
<li>M</li>
<li>I</li>
<li>N</li>
<li> S</li>
<li>O</li>
<li>N</li>
</ul>
<ul class="fly-in-text bottom">
<li>P</li>
<li>O</li>
<li>R</li>
<li>T</li>
<li>F</li>
<li>O</li>
<li>L</li>
<li>I</li>
<li>O</li>
</ul>
<ul class="fly-in-text bottom">
<li>C</li>
<li>L</li>
<li>I</li>
<li>C</li>
<li>K</li>
<li> H</li>
<li>E</li>
<li>R</li>
<li>E</li>
</ul>
</div>
</div>
<!--인트로 영역 끝-->
<!--본문 영역 시작-->
<div class="wrap content-hidden">
<!--짧은소개 시작-->
<div class="me">
<div class="pic animate__animated">
<div class="imgbox animate__animated">
<img src="img/me_lt.png" alt="">
</div>
<div class="profile animate__animated none">
<div class="text__box">
<dl>
<dt>Name</dt>
<dd>Yoomin Son</dd>
<dt>Birth</dt>
<dd>1992.07</dd>
<dt>E-mail</dt>
<dd>[email protected]</dd>
</dl>
</div>
</div>
</div>
<div class="aboutme">
<div class="introduce animate__animated none">
<h3>About Me</h3>
<svg class="icon_html5" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48">
<path fill="#E65100" d="M41,5H7l3,34l14,4l14-4L41,5L41,5z"></path><path fill="#FF6D00" d="M24 8L24 39.9 35.2 36.7 37.7 8z"></path><path fill="#FFF" d="M24,25v-4h8.6l-0.7,11.5L24,35.1v-4.2l4.1-1.4l0.3-4.5H24z M32.9,17l0.3-4H24v4H32.9z"></path><path fill="#EEE" d="M24,30.9v4.2l-7.9-2.6L15.7,27h4l0.2,2.5L24,30.9z M19.1,17H24v-4h-9.1l0.7,12H24v-4h-4.6L19.1,17z"></path>
</svg>
<svg class="icon_css" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48">
<path fill="#0277BD" d="M41,5H7l3,34l14,4l14-4L41,5L41,5z"></path><path fill="#039BE5" d="M24 8L24 39.9 35.2 36.7 37.7 8z"></path><path fill="#FFF" d="M33.1 13L24 13 24 17 28.9 17 28.6 21 24 21 24 25 28.4 25 28.1 29.5 24 30.9 24 35.1 31.9 32.5 32.6 21 32.6 21z"></path><path fill="#EEE" d="M24,13v4h-8.9l-0.3-4H24z M19.4,21l0.2,4H24v-4H19.4z M19.8,27h-4l0.3,5.5l7.9,2.6v-4.2l-4.1-1.4L19.8,27z"></path>
</svg>
<svg class="icon_jquery" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0,0,256,256">
<g fill="#1266a9" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M29.86719,3.00781c-0.10547,0.01563 -0.21094,0.04688 -0.3125,0.09375c-0.85937,0.42578 -1.83594,1.69141 -2.02344,1.94141c-0.01172,0.01563 -0.02344,0.03125 -0.03125,0.04688c-0.96484,1.44531 -1.48047,3.13672 -1.5,4.89844c-0.01172,1.32031 0.24609,2.62891 0.76953,3.89063c1.21875,2.92578 3.75,5.34766 6.76172,6.48047c0.10156,0.03516 0.19922,0.07031 0.375,0.13281c0.01563,0.00781 0.16406,0.05469 0.1875,0.05859l0.10938,0.03906c0.15625,0.05078 0.31641,0.10156 0.47266,0.13281c0.79297,0.16016 1.56641,0.25 2.29297,0.27344c0.125,0 0.25,0.00391 0.375,0.00391c5.48047,0 7.60547,-3.86719 8.3125,-5.15625c0.07031,-0.125 0.12109,-0.22656 0.16797,-0.28906c0,-0.00391 0,-0.00391 0.00391,-0.00781c0.30859,-0.45703 0.19141,-1.07812 -0.26562,-1.39062c-0.45312,-0.30859 -1.07422,-0.19141 -1.38672,0.26563h-0.00391c-1.46094,2.15234 -3.96094,2.80469 -7.42578,1.94531c-0.25781,-0.0625 -0.53906,-0.16016 -0.78906,-0.25391c-0.32812,-0.11719 -0.65625,-0.25391 -0.96094,-0.40234c-0.60547,-0.30078 -1.17578,-0.66016 -1.69141,-1.05859c-3.04687,-2.36328 -4.23828,-7.28125 -2.45703,-10.12109c0.23828,-0.37891 0.19531,-0.87109 -0.10547,-1.20312c-0.22656,-0.25 -0.55469,-0.36328 -0.875,-0.32031zM21.00781,5c-0.22656,-0.00391 -0.45703,0.07031 -0.64453,0.22656c-1.51172,1.23047 -3.05859,3.24609 -3.125,3.32813c-0.00781,0.01563 -0.01562,0.02734 -0.02734,0.04297c-2.73437,3.98047 -2.94141,9.64453 -0.52344,14.42969c0.37891,0.75781 0.80859,1.48047 1.26563,2.14453l0.13672,0.19531c0.38672,0.56641 0.82031,1.20703 1.375,1.70703c0.19141,0.21875 0.39844,0.42969 0.60156,0.63281l0.09766,0.10156l0.08203,0.08203c0.20703,0.19922 0.41797,0.40234 0.63672,0.59766h0.00391c0.01563,0.02344 0.03906,0.03906 0.05859,0.05859c0.24609,0.21875 0.49609,0.42578 0.82813,0.6875l0.08984,0.06641c0.25781,0.20703 0.51953,0.40234 0.78906,0.59375c0.02734,0.01953 0.05469,0.03906 0.08203,0.05859c0.09375,0.0625 0.1875,0.12109 0.28125,0.1875l0.09375,0.0625l0.10938,0.07031c0.19922,0.13281 0.39453,0.25391 0.67188,0.41406c0.17969,0.10938 0.37109,0.21875 0.49609,0.28125c0.05469,0.03125 0.11328,0.0625 0.25,0.13672l0.30469,0.16016c0.01563,0.00781 0.08594,0.03906 0.10156,0.04688c0.19922,0.10156 0.40625,0.19922 0.61328,0.29297l0.31641,0.14063c0.20703,0.08984 0.41797,0.17578 0.67578,0.27344l0.11719,0.04297c0.00781,0.00781 0.10547,0.04297 0.11328,0.04688c0.1875,0.06641 0.37891,0.13281 0.57031,0.19531l0.4375,0.14453c0.21875,0.07422 0.47266,0.16016 0.75,0.20703c1.36328,0.22656 2.6875,0.34375 3.94141,0.34375c0.14844,0 0.29688,-0.00391 0.44141,-0.00391c11.03906,-0.24219 13.91016,-9.62109 13.9375,-9.71484c0.13672,-0.47266 -0.08594,-0.97656 -0.53125,-1.1875c-0.44531,-0.21094 -0.97656,-0.0625 -1.25391,0.34375c-2.79687,4.08594 -8.08594,5.8125 -13.47266,4.39063c-0.25,-0.0625 -0.49219,-0.13281 -0.79297,-0.23047c-0.05078,-0.01562 -0.09375,-0.03125 -0.17578,-0.0625c-0.17578,-0.05469 -0.34766,-0.11328 -0.54297,-0.1875l-0.27734,-0.10547c-0.16016,-0.0625 -0.32031,-0.125 -0.51562,-0.21094l-0.12891,-0.05859c-0.23828,-0.10156 -0.46875,-0.21484 -0.67578,-0.31641l-0.57031,-0.29687c-0.12891,-0.0625 -0.24219,-0.13281 -0.41797,-0.23828l-0.09766,-0.05469l-0.09766,-0.05859c-0.14453,-0.08594 -0.28906,-0.17578 -0.42187,-0.26953l-0.09375,-0.05859c-0.00781,-0.00391 -0.08594,-0.05859 -0.09375,-0.06641c-0.11719,-0.07422 -0.23047,-0.14844 -0.33984,-0.21875c-0.24219,-0.17187 -0.48047,-0.35156 -0.75781,-0.57031l-0.10937,-0.08984c-2.57812,-2.05859 -4.48437,-4.80859 -5.37891,-7.75781c-0.83203,-2.70703 -0.21484,-6.25 1.65234,-9.47656c0.24219,-0.41797 0.15234,-0.94922 -0.21875,-1.26172c-0.18359,-0.15625 -0.41016,-0.23828 -0.63672,-0.23828zM10.00391,8c-0.23828,0 -0.48047,0.08594 -0.67187,0.25781c-1.91016,1.71484 -3.33984,3.9375 -3.49609,4.19141c-4.08594,5.94922 -3.29687,15.19531 -0.49219,20.84766c0.05469,0.11719 0.11328,0.23047 0.17188,0.34375l0.03906,0.0625c0.05078,0.11328 0.10938,0.23047 0.12891,0.25391c0.03125,0.07422 0.07813,0.15625 0.09766,0.17969c0.04688,0.09766 0.09375,0.18359 0.17969,0.33203l0.32031,0.55078c0.04688,0.07422 0.09375,0.15234 0.10938,0.17969c0.0625,0.10156 0.12891,0.20703 0.19531,0.3125l0.15625,0.25c0.04688,0.07422 0.09375,0.14063 0.125,0.17969c0.15625,0.24219 0.3125,0.48438 0.48438,0.71484c0.00781,0.01172 0.01563,0.01953 0.02344,0.02734l0.0625,0.08594c0.14063,0.20313 0.28516,0.39844 0.41406,0.55859l0.57031,0.72266c0.00781,0.00781 0.07031,0.08203 0.07422,0.08984l0.08203,0.09375c0.17188,0.21094 0.35547,0.42188 0.53906,0.625c0.02734,0.03125 0.05469,0.05859 0.08203,0.08984c0.17578,0.19141 0.35547,0.38281 0.54297,0.58203l0.17969,0.17188c0.14844,0.15625 0.29688,0.30859 0.45313,0.45313c0,0.00391 0.07422,0.07422 0.07422,0.07422l0.15625,0.14453c0.1875,0.17969 0.38281,0.35938 0.53125,0.48438c0.00781,0.01172 0.14844,0.13281 0.16016,0.14063c0.18359,0.16406 0.36719,0.32031 0.55469,0.47266l0.95703,0.75781c0.16016,0.11719 0.32422,0.23438 0.51172,0.37109c0.0625,0.04688 0.12891,0.09375 0.19531,0.13672c0.02734,0.02344 0.05859,0.04688 0.07813,0.05859l0.71875,0.48047c0.26172,0.17188 0.52344,0.33203 0.84375,0.52344l0.17188,0.09766c0.19922,0.11719 0.40234,0.23438 0.59375,0.33594c0.11328,0.0625 0.22656,0.11719 0.32422,0.16797c0.13672,0.07422 0.28516,0.15625 0.51172,0.26563c0.01953,0.01172 0.17969,0.08984 0.19922,0.09766c0.22656,0.11328 0.45703,0.21875 0.74609,0.34766c0,0.00391 0.09375,0.04688 0.09375,0.04688c0.26563,0.11328 0.52344,0.22266 0.86328,0.35938c0.05469,0.02344 0.10938,0.04297 0.12109,0.04688c0.24219,0.09375 0.49609,0.1875 0.70313,0.26172c0.01953,0.00781 0.125,0.05078 0.14453,0.05859c0.27734,0.09375 0.55078,0.18359 0.90234,0.29297c0.05859,0.01953 0.12109,0.03906 0.12891,0.03906l0.19922,0.0625c0.24219,0.07422 0.48438,0.15234 0.74609,0.20313c1.85938,0.33984 3.67578,0.51563 5.39453,0.51563h0.00391c14.32422,0 18.88672,-11.52734 18.93359,-11.64453c0.17578,-0.46484 -0.01562,-0.98828 -0.45312,-1.23047c-0.42969,-0.23828 -0.97656,-0.125 -1.28125,0.26953c-3.67578,4.83984 -10.60937,6.63672 -18.54687,4.8125c-0.19141,-0.04687 -0.38672,-0.10156 -0.57812,-0.16016l-0.375,-0.11328c-0.25391,-0.07812 -0.50781,-0.16406 -0.75391,-0.25c-0.00391,0 -0.11719,-0.04297 -0.11719,-0.04297c-0.21875,-0.07422 -0.4375,-0.16016 -0.62891,-0.23437l-0.21875,-0.08594c-0.24219,-0.09766 -0.48437,-0.19922 -0.71875,-0.30469l-0.13672,-0.05859c-0.21094,-0.09766 -0.41406,-0.19141 -0.61719,-0.29297c-0.01562,-0.00781 -0.17578,-0.08594 -0.19141,-0.08984c-0.14062,-0.07031 -0.28125,-0.14453 -0.46094,-0.24219l-0.81641,-0.4375c-0.08203,-0.05469 -0.16797,-0.10547 -0.25,-0.14844c-0.24609,-0.15234 -0.5,-0.30469 -0.75,-0.46484c-0.05859,-0.03516 -0.10937,-0.07422 -0.20703,-0.14062c-0.17187,-0.10937 -0.33984,-0.22266 -0.58594,-0.39453l-0.09766,-0.07031c-0.16797,-0.11719 -0.33203,-0.24219 -0.46875,-0.34375c-0.08594,-0.0625 -0.17187,-0.13281 -0.3125,-0.23828c-0.125,-0.09766 -0.25,-0.19141 -0.36719,-0.28516l-0.21875,-0.17969c-0.18359,-0.14844 -0.35547,-0.30469 -0.53516,-0.45703c-0.02344,-0.02344 -0.04297,-0.03906 -0.07031,-0.05859c-0.19922,-0.18359 -0.40234,-0.36719 -0.64453,-0.59766l-0.70703,-0.70312c-0.17187,-0.17578 -0.34375,-0.35547 -0.53906,-0.57031c-0.17969,-0.19922 -0.35156,-0.39844 -0.58203,-0.67187l-0.42187,-0.51562c-0.05078,-0.07422 -0.10547,-0.14844 -0.17187,-0.22656c-0.14453,-0.19531 -0.28906,-0.38672 -0.43359,-0.58984c-3.89062,-5.35937 -4.90625,-16.54687 -1.875,-20.64453c0.30469,-0.41016 0.25,-0.98828 -0.13281,-1.33594c-0.1875,-0.17187 -0.42969,-0.25781 -0.66797,-0.25781z"></path></g></g>
</svg>
<svg class="icon_javascript" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48">
<path fill="#ffd600" d="M6,42V6h36v36H6z"></path><path fill="#000001" d="M29.538 32.947c.692 1.124 1.444 2.201 3.037 2.201 1.338 0 2.04-.665 2.04-1.585 0-1.101-.726-1.492-2.198-2.133l-.807-.344c-2.329-.988-3.878-2.226-3.878-4.841 0-2.41 1.845-4.244 4.728-4.244 2.053 0 3.528.711 4.592 2.573l-2.514 1.607c-.553-.988-1.151-1.377-2.078-1.377-.946 0-1.545.597-1.545 1.377 0 .964.6 1.354 1.985 1.951l.807.344C36.452 29.645 38 30.839 38 33.523 38 36.415 35.716 38 32.65 38c-2.999 0-4.702-1.505-5.65-3.368L29.538 32.947zM17.952 33.029c.506.906 1.275 1.603 2.381 1.603 1.058 0 1.667-.418 1.667-2.043V22h3.333v11.101c0 3.367-1.953 4.899-4.805 4.899-2.577 0-4.437-1.746-5.195-3.368L17.952 33.029z"></path>
</svg>
<svg class="icon_photoshop" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48">
<path fill="#03A9F4" d="M6,10c0-2.209,1.791-4,4-4h28c2.209,0,4,1.791,4,4v28c0,2.209-1.791,4-4,4H10c-2.209,0-4-1.791-4-4V10z"></path><path fill="#020F16" d="M20.016,19.174h-2.002v4.434h1.973c0.547,0,0.97-0.179,1.27-0.537s0.449-0.879,0.449-1.563c0-0.71-0.153-1.274-0.459-1.694S20.53,19.181,20.016,19.174z"></path><path fill="#020F16" d="M9,9v30h30V9H9z M23.365,24.789C22.539,25.597,21.393,26,19.928,26h-1.914v5h-2.871V16.781h4.844c1.406,0,2.528,0.437,3.364,1.309s1.255,2.005,1.255,3.398S24.192,23.981,23.365,24.789z M32.682,30.336c-0.709,0.573-1.641,0.859-2.793,0.859c-0.775,0-1.459-0.151-2.051-0.454s-1.057-0.725-1.392-1.265s-0.503-1.123-0.503-1.748h2.627c0.014,0.481,0.125,0.843,0.337,1.084s0.558,0.361,1.04,0.361c0.742,0,1.113-0.335,1.113-1.006c0-0.234-0.112-0.451-0.337-0.649S30,27.052,29.225,26.713c-1.139-0.462-1.922-0.94-2.349-1.436s-0.64-1.11-0.64-1.846c0-0.925,0.334-1.688,1.001-2.29s1.552-0.903,2.651-0.903c1.158,0,2.086,0.3,2.783,0.898s1.045,1.403,1.045,2.412h-2.764c0-0.859-0.357-1.289-1.074-1.289c-0.293,0-0.533,0.091-0.723,0.273s-0.283,0.437-0.283,0.762c0,0.234,0.104,0.441,0.313,0.62s0.699,0.435,1.475,0.767c1.127,0.417,1.922,0.881,2.388,1.392s0.698,1.174,0.698,1.987C33.746,29.005,33.391,29.763,32.682,30.336z"></path>
</svg>
<svg class="icon_illustrator" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48">
<path fill="#FF5722" d="M6,10c0-2.209,1.791-4,4-4h28c2.209,0,4,1.791,4,4v28c0,2.209-1.791,4-4,4H10c-2.209,0-4-1.791-4-4V10z"></path><path fill="#1C0802" d="M9,9v30h30V9H9z M23.691,31l-0.762-2.91h-3.916L18.252,31h-3.037l4.443-14.219h2.627L26.758,31H23.691z M30.85,31h-2.773V20.434h2.773V31z M30.552,18.754c-0.271,0.28-0.636,0.42-1.099,0.42s-0.828-0.14-1.099-0.42s-0.405-0.632-0.405-1.055c0-0.43,0.137-0.781,0.41-1.055s0.639-0.41,1.094-0.41s0.82,0.137,1.094,0.41s0.41,0.625,0.41,1.055C30.957,18.122,30.822,18.474,30.552,18.754z"></path><path fill="#1C0802" d="M19.639 25.697L22.295 25.697 20.967 20.629z"></path>
</svg>
<svg class="icon_vscode" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0,0,256,256">
<g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.33333,5.33333)"><path d="M44,11.11v25.78c0,1.27 -0.79,2.4 -1.98,2.82l-8.82,4.14l0.8,-10.85v-18l-0.8,-10.85l8.82,4.14c1.19,0.42 1.98,1.55 1.98,2.82z" fill="#8fd6ff"></path><path d="M4.416,33.815l3.159,1.95c0.733,0.44 1.664,0.365 2.318,-0.185l24.107,-19.642v-10.585c0,-1.198 -1.482,-1.758 -2.275,-0.86l-22.725,25.38z" fill="#5a9cd1"></path><path d="M4.416,14.185l3.159,-1.95c0.733,-0.44 1.664,-0.365 2.318,0.185l24.107,19.643v10.585c0,1.198 -1.482,1.758 -2.275,0.86l-22.725,-25.381z" fill="#5eadff"></path><path d="M9,18.13v11.74l-3.2,3.74c-0.58,0.76 -1.8,0.35 -1.8,-0.61v-18c0,-0.96 1.22,-1.37 1.8,-0.61z" fill="#1b689a"></path></g></g>
</svg>
<svg class="icon_figma" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0,0,256,256">
<g fill="#23211c" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M64,256c-35.34622,0 -64,-28.65378 -64,-64v-128c0,-35.34622 28.65378,-64 64,-64h128c35.34622,0 64,28.65378 64,64v128c0,35.34622 -28.65378,64 -64,64z" id="shape"></path></g><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.33333,5.33333)"><path d="M26,17h-8c-3.866,0 -7,-3.134 -7,-7v0c0,-3.866 3.134,-7 7,-7h8z" fill="#e64a19"></path><path d="M25,31h-7c-3.866,0 -7,-3.134 -7,-7v0c0,-3.866 3.134,-7 7,-7h7z" fill="#7c4dff"></path><path d="M18,45v0c-3.866,0 -7,-3.134 -7,-7v0c0,-3.866 3.134,-7 7,-7h7v7c0,3.866 -3.134,7 -7,7z" fill="#66bb6a"></path><path d="M32,17h-7v-14h7c3.866,0 7,3.134 7,7v0c0,3.866 -3.134,7 -7,7z" fill="#ff7043"></path><circle cx="32" cy="24" r="7" fill="#29b6f6"></circle></g></g>
</svg>
<svg class="icon_XD" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48">
<path fill="#ff41c8" d="M6,10c0-2.209,1.791-4,4-4h28c2.209,0,4,1.791,4,4v28c0,2.209-1.791,4-4,4H10c-2.209,0-4-1.791-4-4 V10z"></path><path fill="#16020b" d="M9,9v30h30V9H9z M19.093,21.695l1.914-4.883h3.291l-3.34,7.051l3.418,7.168h-3.33l-1.953-4.971 l-1.943,4.971h-3.33l3.418-7.168l-3.35-7.051h3.291L19.093,21.695z M25.069,25.426c0-1.732,0.293-3.024,0.879-3.877 s1.438-1.279,2.559-1.279c0.813,0,1.491,0.352,2.031,1.055v-5.293h2.783v15h-2.51l-0.127-1.074c-0.566,0.847-1.296,1.27-2.188,1.27 c-1.106,0-1.951-0.423-2.534-1.27s-0.881-2.09-0.894-3.73V25.426z M27.843,26.119c0,1.042,0.11,1.77,0.332,2.183 s0.596,0.62,1.123,0.62c0.547,0,0.96-0.244,1.24-0.732v-4.824c-0.273-0.521-0.684-0.781-1.23-0.781 c-0.508,0-0.879,0.205-1.113,0.615s-0.352,1.14-0.352,2.188V26.119z"></path>
</svg>
<svg class="icon_autocad" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48">
<path fill="#770829" d="M39.859,14.972C41.375,15,42.17,14.984,43,15c0.042,2.186,0.036,28.534,0.001,29.053 C32.238,44.071,20.829,43.99,10.066,44c-0.639-0.002-1.34-0.061-1.836-0.51c-0.372-0.349-0.66-0.83-0.649-1.355 c-0.003-1.15-0.001-2.3-0.002-3.45c0.822-0.55,1.659-1.075,2.482-1.623c0.367,0.04,0.737,0.038,1.105,0.032 c6.456-0.001,12.912-0.001,19.368-0.001c3.103-0.009,6.207,0.019,9.309-0.013c0.059-0.726,0.011-1.454,0.024-2.18 C39.862,28.258,39.879,21.615,39.859,14.972z"></path><path fill="#e85984" d="M4,12.093C6.023,10.729,8.048,9.371,10.066,8c-0.004,9.687,0.007,19.375-0.005,29.062 c-0.793,0.548-1.599,1.073-2.391,1.623c-1.021,0.659-2.028,1.342-3.027,2.038c-0.197,0.143-0.409,0.26-0.631,0.356 C4.003,31.417,4.025,21.755,4,12.093z"></path><path fill="#e51050" d="M10.066,8c9.301,0.001,18.603-0.002,27.904,0.001c0.971,0.013,1.906,0.774,1.985,1.761 c0.037,1.735-0.025,3.474,0.03,5.21c0.021,6.643,0.003,13.286,0.009,19.929c-0.014,0.727,0.034,1.455-0.025,2.18 c-3.115,0.031-6.232,0.004-9.348,0.013c-6.484,0-12.967,0-19.451,0.001c-0.37,0.006-0.742,0.008-1.11-0.032 C10.073,27.376,10.062,17.687,10.066,8 M22.843,14.043c-0.618,1.778-1.111,3.599-1.686,5.391c-1.073,3.497-2.146,6.994-3.22,10.491 c-0.099,0.279-0.183,0.564-0.231,0.857c1.016,0.016,2.033,0.023,3.049-0.003c0.39-1.345,0.786-2.688,1.162-4.037 c0.037-0.119,0.085-0.234,0.133-0.348c1.926,0.005,3.854-0.025,5.78,0.016c0.463,1.46,0.903,2.929,1.394,4.379 c1.038,0.006,2.078,0.013,3.116-0.006c-0.616-2.057-1.317-4.088-1.958-6.137c-1.155-3.529-2.268-7.072-3.43-10.599 C25.584,14.013,24.212,14.02,22.843,14.043z"></path><path fill="#e51050" d="M24.795,16.217c0.198,0.472,0.276,0.983,0.435,1.468c0.585,2.083,1.204,4.157,1.765,6.248 c-1.438,0.02-2.878,0.021-4.317,0C23.342,21.351,24.117,18.797,24.795,16.217z"></path><path fill="#f7f5fa" d="M22.789,14.043c1.363-0.023,2.729-0.03,4.092,0.004c1.157,3.569,2.266,7.155,3.416,10.728 c0.638,2.074,1.336,4.13,1.95,6.212c-1.034,0.019-2.069,0.012-3.103,0.006c-0.489-1.468-0.927-2.954-1.388-4.433 c-1.918-0.042-3.837-0.011-5.756-0.016c-0.047,0.116-0.095,0.232-0.132,0.352c-0.375,1.365-0.769,2.725-1.157,4.086 c-1.011,0.027-2.025,0.019-3.036,0.003c0.048-0.296,0.131-0.585,0.23-0.867c1.069-3.54,2.138-7.079,3.207-10.619 C21.683,17.685,22.174,15.843,22.789,14.043 M24.795,16.244c-0.678,2.611-1.454,5.196-2.117,7.81c1.439,0.021,2.879,0.02,4.317,0 c-0.561-2.116-1.18-4.216-1.765-6.324C25.071,17.239,24.993,16.722,24.795,16.244z"></path>
</svg>
<svg class="icon_skatchup" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48">
<path fill="#D32F2F" d="M28.143,8.058L37.9,15.51l-2.238,18.03l-19.717,5.851L11.858,26.59L9.347,10.671L28.143,8.058 M28.941,5L6,8.184l3.014,19.083L14.038,43l24.279-7.198L41,14.205L28.941,5L28.941,5z"></path><path fill="#D32F2F" d="M29.277,16.547l-5.021-5.354L8.843,13.375l1.009,12.217l5.19,15.734l21.605-6.862l2.848-19.749L29.277,16.547z M13.331,33.508l-1.344-4.307l7.853-1.529l2.107,3.827L13.331,33.508z M21.279,24.703c-0.097,0.289-2.107-3.445-2.107-3.445l-7.279,1.437l-1.533-3.535l14.176-2.398l5.074,6.126C29.607,22.887,21.373,24.414,21.279,24.703z"></path>
</svg>
<svg class="icon_mbti_isfj" version="1.1" id="레이어_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="100" height="100" viewBox="0 0 504 273" xml:space="preserve">
<style>
.st5{fill:#607e8f}.st6{fill:#44b6d2}
</style>
<path d="M295.6 226.4c-9.3-.3-18.6-.6-27.9.2-2 5.8-1.4 7.1 4.3 6.7 4.6-.3 6 1.1 5.8 5.7-.4 8.6-.1 17.3-.1 26 0 5.8 1.6 6.7 7.7 4.3.2-12 .3-23.9.5-35.9h6c5.3-.1 6-1.3 3.7-7zm-10.6 8.5c.1-.5.3-1 .8-1.5-.3.5-.6 1-.8 1.5z" style="fill:#607d8e"/>
<path d="M82.6 173.7v-161c0-1.8.6-3.7-1-5.2-.5-1.4-1.4-2.1-3-1.9H53.7c-1.3.1-2.3.7-2.8 1.9-1.6 1.7-1.1 3.7-1.1 5.7v159.9c0 1.8-.6 3.7.9 5.2.9 2.5 2.9 2.9 5.2 2.9h20.9c2.2 0 4.4-.2 5.2-2.8 1.1-1.3.6-3.1.6-4.7z" style="fill:#3ab5d1"/>
<path d="M71.7 226.5c1 0 1.7.2 2.4.4-.8.1-1.6 0-2.4-.4-2.4 5.8-.3 11.8-1.1 17.7-6.9 0-13.9 0-20.8.1-.1-3.9-.1-7.9-.1-11.8 0-6.6 0-6.6-7-6-1.9 1.1-1 3-1 4.5-.1 11.2-.1 22.4 0 33.7 0 6.3 1.5 7.2 7.7 4.7.2-5.9.4-11.9.6-17.8 5.6 0 11.2.2 16.8 0 2.9-.1 4.2.7 4 3.8-.3 3.1-.1 6.3-.1 9.4 0 6.2 1.6 7.2 7.7 4.7l.3-36.9c0-6.9 0-6.9-7-6.1z" style="fill:#648191"/>
<path d="M116.9 263.2c-6.3-1.8-12.8-.1-19.2-.9.1-3.6.1-7.3.2-10.9h11.8c5.4 0 6-1.2 3.8-6.9l-15.8-.3c0-3.6 0-7.2.1-10.8 2.8 0 5.6.2 8.3-.1 3.8-.3 7.7 1.2 11.2-1 0-.5.1-1 0-1.4.3-2.2 1.4-4.8-2.9-4.8-8 0-15.9.2-23.9.3-.3.4-.9.7-.9 1.1-.1 13.3-.1 26.6-.1 39.9 0 2.6 1.6 2.9 3.7 2.9 4.5 0 9 .2 13.5-.1 3.5-.2 7.2 1.3 10.5-1 .5-2 1.1-4.1-.3-6zm-17 .7v-.3l1.5.3h-1.5z" style="fill:#5e7d8f"/>
<path d="M408.5 226.6c-7.7-1.2-15.4-.3-23.1-.5-6.1-.1-6.1 0-5.7 6.1 3.3 2.4 7.1.4 10.5 1.1.2 11.9.3 23.9.5 35.8 6 2.4 7.6 1.5 7.7-4.3v-23.4c0-7.8 0-7.8 7.5-8.2 1-.1 2 .1 2.6-.9 1.2-1.8 1.4-3.8 0-5.7z" style="fill:#6a8595"/>
<path class="st5" d="M262.6 240.7c-4.1-12.4-16.1-18.1-28.6-14.3-13.7 4.2-19.4 21.5-11.8 34 3.6 6 9.5 8.4 15.4 10.9h7c.6-1.4 2-.8 3.1-1.2 12.4-3.7 19.1-16.8 14.9-29.4zM249 260.8c-1.4.9-2.9 1.5-4.4 2.2-1.9.1-3.8.1-5.7.2-6.1-1.9-10-6-12.1-12v-6.6c2.4-5.5 5.6-10.2 12.1-11.2 7.3-1.1 13.7 2.8 16.1 9.6 2.4 6.7 0 14-6 17.8z"/>
<path class="st5" d="M458.3 247.4c-.6-11.4-9.3-21.1-19.9-22.1-12-1.1-22.1 5.9-24.7 17-2.7 11.7 2.9 22.6 13.9 27.2 1.3.5 3 .3 3.9 1.8h7c.6-1.1 1.7-.8 2.6-1 10.2-2.5 17.7-12.6 17.2-22.9zm-20 15.8h-5.4c-6.5-2.1-10.4-6.6-12.1-13.1v-3.4c3.3-10 7.7-13.8 15.9-13.4 7.8.4 11.5 5.7 13.8 12.3 0 1.5.1 3.1.1 4.6-1.9 6.5-5.9 10.8-12.3 13z"/>
<path class="st6" d="M234.6 129.5c-.3-11.3-5.5-20.4-12.9-28.4-10.1-10.9-23.1-17.1-36.6-22.7-9.4-3.9-18.9-7.6-26.2-15-6.1-6.1-7.8-14-4.7-20.4 4.5-9.5 15.3-13.8 27.3-11 9.5 2.3 18 6.7 26.2 11.8 5 3.1 7.5 2.8 10.9-1.9 3.2-4.4 6.2-9 9-13.7 2.2-3.6 1.7-6.9-2.1-9.5-8.2-5.5-17.1-9.2-26.6-12.4-17-5.6-33.5-4.8-49.7 1.4-31.3 11.9-39.6 52.1-16.2 76.6 10.1 10.6 23.1 16.6 36.3 22.2 8.6 3.6 17.1 7.5 23.5 14.6 9 10 7.8 22.8-2.9 30.2-3 2.1-6.6 2.1-9.6 3.9-3.3-.1-6.5-.1-9.8-.2-11.7-3.1-22.2-8.4-32.1-15.2-3.8-2.6-6.8-1.9-9.2 2-2.4 3.8-4.5 7.7-6.8 11.6-4.4 7.5-4.4 8.8 2.8 13.9 22.7 16 47.5 21.5 74.5 12.9 19.7-6.3 34-23.9 34.8-41.8.1-3 .1-6 .1-8.9z"/>
<path d="M381.2 9.1c0-.7-.2-2.1-1.7-1.8-.9-.3-.7-1.9-2-1.7-34.2 0-68.5 0-102.7-.1-1.2 0-2.3 0-3.2 1.1-1.1.3-1.5 1.1-1.7 2.1-.1 2-.3 4-.3 6v123.8c0 13 .1 26 .2 38.9.6 2.9 2.6 4 5.3 4h21.7c2.5 0 4.5-1 4.8-3.8 1.3-1.6.7-3.5.7-5.3 0-18.3.2-36.6-.1-54.9 0-4 1.2-5 5.1-4.9 18.3.2 36.6.1 54.9.1 5.1 0 6.9-1.7 7.1-6.8.1-5.3.2-10.6 0-16-.2-5.8-1.9-7.2-7.6-7.2-18.1 0-36.3-.1-54.4.1-4 0-5-1.2-5-5 .2-12.5.2-25 0-37.4-.1-3.7 1-4.8 4.7-4.8 22.1.2 44.3.1 66.4 0 1.7 0 3.7.7 5.2-.8 1.1-.3 1.7-1 2-2 2-7.9.9-15.7.6-23.6z" style="fill:#3cb5d2"/>
<path class="st6" d="M459.3 13.2c0-1.6.6-3.3-.8-4.7-.2-1.9-1.5-2.5-3.1-2.8h-25.8c-3.8 1-3.2 4.1-3.2 6.9V125c0 6-.6 11.9-3 17.6-3.5 8.3-12.7 13.4-21 11.7-5.1-1-9.2-3.7-12.7-7.4-2.7-2.9-5.5-3-8.2-.3-4.1 4.1-8.2 8.3-12.2 12.5-2.5 2.6-2.4 5.1 0 7.9 11.3 13.1 25.8 19 42.6 17.1 31.6-3.5 46.9-26 47.3-52.9.6-39.4.2-78.7.1-118z"/>
<path d="M492.2 255.5c-1.2-2-1.4-3.2 1-4.6 3.3-1.8 5.5-4.8 6.4-8.5 0-2-.1-4-.1-6.1-2-5.7-5.5-9.8-12-10-6.7-.4-13.3-.5-20 0-1.9 1.1-1 3-1 4.5-.1 11.4-.1 22.8 0 34.2 0 5.8 1.7 6.6 7.7 4.2l.3-15.9c5.2-1.3 8.9 0 10.8 5.5 1.1 3.2 3 6.2 4.7 9.3 1.9 3.5 5.7 2.8 7.9 1.8 3.1-1.3-.1-3.6-.8-5.3-1.4-3.1-3.1-6.1-4.9-9.1zm-7.6-9.2c-1.2.1-2.3 0-3.9 0-1.7-.7-5.1 1.5-5.8-1.2-.9-3.4-.3-7.2 0-10.8.1-1 1.6-.9 2.6-.9 2.3 0 4.6-.1 7 0 4.1.2 7.1 1.6 7.2 6.3 0 4-2.6 6.4-7.1 6.6z" style="fill:#638091"/>
<path d="M205.3 257.3c-2.1-3-2.4-5 1.4-7.4 5.1-3.2 6.5-9 4.8-14.5-1.6-5.1-6-8.4-11.9-9-6.6-.3-13.3-.6-19.9.1-1.8 1.2-.9 3-.9 4.5-.1 11.3-.1 22.6 0 33.9 0 5.8 1.6 6.7 7.7 4.3l.3-15.9c5.2-1.2 9-.1 10.9 5.5 1 3.1 3 5.9 4.5 8.9 1.9 4 5.8 3.2 8.2 2.1 3.2-1.3-.2-3.6-.9-5.2-1.2-2.5-2.6-5-4.2-7.3zm-11-10.9c-2.5-.2-5-.1-7.4-.1v-12.9c2.6 0 5.3.2 7.9-.1 4.4-.4 7.7 1.2 9.6 5.3v2.4c-2 4.4-5.5 5.8-10.1 5.4z" style="fill:#617e8f"/>
<path d="M368.1 260.7c-8.1 5.1-18.2 1-21-7.8-2-6.2 0-13.2 4.9-17.2 4.8-3.8 10.7-4.3 16.7-.4 3.7 2.4 4.9-.4 6.4-2.2 2-2.5-.9-3.3-2.3-4.4-5.2-4.2-11.5-3.8-17.4-2.9-10.1 1.5-18 12.2-17.8 22.9.2 10.9 8.3 20.2 18.8 21.8h8.3c2.9-.2 5.5-1.5 7.8-3.1 1.6-1.1 4.6-1.9 2.4-4.8-1.7-2.2-3-4.3-6.8-1.9z" style="fill:#627f90"/>
<path d="M327.9 262.5c-3.7 0-7.3-.3-11 .1-4.5.4-6-1-5.9-5.7.1-4.3 1-6.2 5.5-5.5 1.8.3 3.7-.2 5.5.1 5.1.8 6.5-1.5 5.4-6.1-5.2-2.4-10.6-.5-15.9-1.1-.1-1.6-.1-3.3-.4-4.9-.8-4.7.9-6.3 5.8-6.1 4.4.2 9.1 1.4 13.5-.9-.1-2.4 2.4-6.1-2.7-6.2-7.1-.1-14.3 0-21.4-.1-2 0-3.1.6-3 2.8.2 13.4.2 26.9.3 40.3.4 1 1.2 1 2 1 7.3 0 14.6-.1 21.9 0 2.6 0 3.6-1 3.6-3.5.2-2.3-.1-4.2-3.2-4.2z" style="fill:#628091"/>
<path class="st5" d="M159.6 226.4c-5-.1-10-.2-14.9-.3-2-.1-3.1.5-3.1 2.8.2 13.4.2 26.9.3 40.4 6.1 2.5 7.7 1.6 7.7-4.6 0-3.6 0-7.2.1-10.8 3.3-.2 6.6-.3 9.9-.5 7.4-1 12.6-6.5 12.7-13.5.2-6.9-5.2-12.5-12.7-13.5zm-8.3 19.9c-1.2-.3-1.6-.9-1.7-2 0-.7-.2-1.4 0-2 .9-2.9-2.2-7.1 1.7-8.8 4.9-2.1 10 .3 13.1 5v2.5c-3.1 4.9-7.9 6.8-13.1 5.3z"/>
<path d="M29.5 226c-7.9.5-15.8.3-23.8.4h-1v7c.4 0 .8-.1 1.2-.1 3.5.1 6.9.1 10.4.2.2 11.9.4 23.9.5 35.8 2.3 1.7 4.5 1.6 6.8.1 1.3-1.4.7-3.1.7-4.7.1-8.2.3-16.5-.1-24.7-.2-4.9.8-7.5 6.3-6.6 1.3.2 3 .7 4-1 1.4-4.6.3-6.7-5-6.4z" style="fill:#648091"/>
</svg>
</div>
<div class="career animate__animated none">
<div class="company">
<h3>Career</h3>
<p>2018.01-2019.11 모아유통 <br>
2020.02-2021.12 퓨어피싱코리아 <br>
2022.06-2022.12 공간사랑이앤씨 <br>
2023.03-present 메타이노베이션</p>
</div>
<div class="certificate">
<h3>Certificate</h3>
<p>웹디자인기능사 <br>
GTQ photoshop 1급 <br>
전산응용건축제도기능사 <br>
운전면허 1종보통/2종소형</p>
</div>
</div>
</div>
<div class="btnframe none"><button class="custom-btn infobtn">더보기</button></div>
</div>
<!--짧은소개 끝-->
<div class="line"></div>
<!--작업물 시작-->
<div class="content animate__animated none">
<div class="grid none animate__animated" data-effect="hover-2">
<h2 class="grid__title none">Work<br>Experience</h2>
<div class="card none link1">
<div class="card__img" style="background-image: url(img/03.png)"></div>
<div class="card__box card__box--b">
<span class="card__box-number">01</span>
<span class="card__box-tags">#html #CSS #jQuery</span>
</div>
<div class="card__box card__box--c">
<span class="card__box-category">METAPOS POS <br> 바로가기</span>
</div>
</div>
<div class="card card--alt none link2">
<div class="card__img" style="background-image: url(img/02.png)"></div>
<div class="card__box card__box--a">
<span class="card__box-number">02</span>
<span class="card__box-tags">#html #CSS #jQuery</span>
</div>
<div class="card__box card__box--b">
<span class="card__box-category">METAPOS TABLE ORDER <br> 바로가기</span>
</div>
</div>
<div class="card card--alt none link8">
<div class="card__img" style="background-image: url(img/08.png)"></div>
<div class="card__box card__box--a">
<span class="card__box-number">03</span>
<span class="card__box-tags">#html #CSS #jQuery</span>
</div>
<div class="card__box card__box--c">
<span class="card__box-category">GLOX CARRIER <br> 바로가기</span>
</div>
</div>
<!-- <div class="card card--empty"></div> -->
<div class="card card--empty empty2"></div>
<div class="card none link3">
<div class="card__img" style="background-image: url(img/01.png)"></div>
<div class="card__box card__box--a">
<span class="card__box-number">04</span>
<span class="card__box-tags">#html #CSS #jQuery</span>
</div>
<div class="card__box card__box--d">
<span class="card__box-category">METAPOS ROBOT <br> 바로가기</span>
</div>
</div>
<div class="card card--alt none link4">
<div class="card__img" style="background-image: url(img/04.png)"></div>
<div class="card__box card__box--b">
<span class="card__box-number">05</span>
<span class="card__box-tags">#html #CSS #jQuery</span>
</div>
<div class="card__box card__box--c">
<span class="card__box-category">METAINNO <br> 바로가기</span>
</div>
</div>
<div class="card card--alt none link5">
<div class="card__img" style="background-image: url(img/05.png)"></div>
<div class="card__box card__box--b">
<span class="card__box-number">06</span>
<span class="card__box-tags">#html #CSS #jQuery</span>
</div>
<div class="card__box card__box--c">
<span class="card__box-category">NIKE WEB <br> 바로가기</span>
</div>
</div>
<div class="card card--alt none link6">
<div class="card__img" style="background-image: url(img/06.png)"></div>
<div class="card__box card__box--b">
<span class="card__box-number">07</span>
<span class="card__box-tags">#html #CSS #jQuery</span>
</div>
<div class="card__box card__box--d">
<span class="card__box-category">Z:IN WEB <br> 바로가기</span>
</div>
</div>
<div class="card none link7">
<div class="card__img" style="background-image: url(img/07.png)"></div>
<div class="card__box card__box--c">
<span class="card__box-number">08</span>
<span class="card__box-tags">#html #CSS #jQuery</span>
</div>
<div class="card__box card__box--d">
<span class="card__box-category">ESTsecurity WEB <br> 바로가기</span>
</div>
</div>
</div>
</div>
<div class="content2 none">
<div class="content2_inner none">
<div class="content2_info">
<div class="content2_info_inner">
<div>
<p class="content2_info_inner_p">Product Detail page</p>
<div class="content2_info_inner_div">
<div class="content2_info_big_text big_text1">
<p>Pursuing</p>
</div>
<div class="content2_info_big_text big_text2">
<p>Simplicity</p>
</div>
</div>
</div>
<div>
<p class="content2_info_long_text">
복잡한 디자인보다 깔끔하고 개방감 있는 디자인을 선호합니다. <br>
계속 바뀌는 디자인 트랜드에 맞춰 한 곳에 머무르지 않는 재미있는 디자인을 추구합니다. <br>
지금까지 수십장의 상세페이지를 제작했습니다.
</p>
</div>
</div>
</div>
<div class="content2_list">
<div class="content2_list_inner">
<div class="content2_list_item">
<a href="https://fdgh134.github.io/NAK-10/" rel="noopener" target="_blank" class="content2_list_link">
<div class="content2_list_thum"><img src="img/nak10.png" alt=""></div>
<div class="content2_list_itemtext">
<span class="item_date">2024. Jan</span>
<h4 class="item_title">NAK-10 안드로이드 키오스크 상세페이지</h4>
<p class="item_dis">나이스 정보통신에서 출시한 안드로이드 키오스크 장비 <br> 모듈화된 부품으로 관리가 수월하고 컴팩트한 디자인으로 공간 활용이 다양해집니다. <br> 메타포스 신제품 NAK-10 키오스크 </p>
</div>
</a>
<div class="item_line"></div>
</div>
<div class="content2_list_item">
<a href="https://fdgh134.github.io/cloi/" rel="noopener" target="_blank" class="content2_list_link">
<div class="content2_list_thum"><img src="img/01.png" alt=""></div>
<div class="content2_list_itemtext">
<span class="item_date">2023. Dec</span>
<h4 class="item_title">서빙로봇 3세대 상세페이지</h4>
<p class="item_dis">LG Cloi 서빙로봇 3세대 제품 디테일 정보 <br> 향상된 주행 성능과 뛰어난 장애물 회피능력으로 효율적인 매장 운영을 지원합니다. <br> 메타포스 신제품 Cloi 3세대 서빙로봇 </p>
</div>
</a>
<div class="item_line"></div>
</div>
<div class="content2_list_item">
<a href="https://fdgh134.github.io/hit-plus/" rel="noopener" target="_blank" class="content2_list_link">
<div class="content2_list_thum"><img src="img/03.png" alt=""></div>
<div class="content2_list_itemtext">
<span class="item_date">2023. Nov</span>
<h4 class="item_title">포스기 HIT-PLUS 상세페이지</h4>
<p class="item_dis">메타포스 포스기 HIT의 상위버전 HIT-PLUS 매장 포스 장비 <br> 한대의 포스기로 배달, 키오스크, 테이블오더 전부 연동 가능하며 실시간 매출 확인까지 <br> 메타포스 포스기 HIT-PLUS</p>
</div>
</a>
<div class="item_line"></div>
</div>
<div class="content2_list_item">
<a href="https://fdgh134.github.io/tableorder/" rel="noopener" target="_blank" class="content2_list_link">
<div class="content2_list_thum"><img src="img/02.png" alt=""></div>
<div class="content2_list_itemtext">
<span class="item_date">2023. Nov</span>
<h4 class="item_title">테이블오더 NTP-10 상세페이지</h4>
<p class="item_dis">메타포스 테이블오더 NTP-10 제품 디테일 정보 <br> 선불형 후불형 선택이 가능하며 설치와 조작이 쉬운 테이블오더 <br> 메타포스 테이블오더 NTP-10 </p>
</div>
</a>
<div class="item_line"></div>
</div>
<div class="content2_list_item">
<a href="https://fdgh134.github.io/slk-ts100/" rel="noopener" target="_blank" class="content2_list_link">
<div class="content2_list_thum"><img src="img/08.jpg" alt=""></div>
<div class="content2_list_itemtext">
<span class="item_date">2023. May</span>
<h4 class="item_title">영수증프린터 SLK-TS100 상세페이지</h4>
<p class="item_dis">메타포스 영수증프린터 SLK-TS100 제품 디테일 정보 <br> 초경량 무게와 빠른 출력 속도로 주방에 최적화된 고성능 영수증 프린터 <br> 배달앱과 연동되는 영수증프린터 SLK-TS100 </p>
</div>
</a>
<div class="item_line"></div>
</div>
<div class="content2_list_item">
<a href="https://fdgh134.github.io/100_hoodie2/" rel="noopener" target="_blank" class="content2_list_link">
<div class="content2_list_thum"><img src="img/title0.jpg" alt=""></div>
<div class="content2_list_itemtext">
<span class="item_date">2021. Nov</span>
<h4 class="item_title">AbuGarcia 100주년 콜라보 with YALE 후드티</h4>
<p class="item_dis">퓨어피싱코리아 자사 브랜드 AbuGarcia의 창립 100주년 기념 <br> 무신사 스토어 인기 브랜드 YALE과 콜라보 의류 제작 <br> 의류 디자인 및 상세페이지 제작에 참여했습니다.</p>
</div>
</a>
<div class="item_line"></div>
</div>
<div class="content2_list_item">
<a href="img/2021purefishing_catalog.pdf" rel="noopener" target="_blank" class="content2_list_link">
<div class="content2_list_thum"><img src="img/2021pf_catalog.png" alt=""></div>
<div class="content2_list_itemtext">
<span class="item_date">2021. Nov</span>
<h4 class="item_title">퓨어피싱코리아 2022 제품 카탈로그</h4>
<p class="item_dis">퓨어피싱코리아 자사 브랜드 제품 카탈로그 제작</p>
</div>
</a>
<div class="item_line"></div>
</div>
<div class="content2_list_item">
<a href="https://fdgh134.github.io/100_reel/" rel="noopener" target="_blank" class="content2_list_link">
<div class="content2_list_thum"><img src="img/Ambassadeur100YearAnniversary.jpg" alt=""></div>
<div class="content2_list_itemtext">
<span class="item_date">2021. Nov</span>
<h4 class="item_title">AbuGarcia 100주년 기념 장구통릴 상세페이지</h4>
<p class="item_dis">퓨어피싱코리아 자사 브랜드 AbuGarcia의 창립 100주년 기념 <br> 한정판 장구통 릴 제품 상세페이지 제작.</p>
</div>
</a>
<div class="item_line"></div>
</div>
<div class="content2_list_item">
<a href="https://fdgh134.github.io/100_hoodie1/" rel="noopener" target="_blank" class="content2_list_link">
<div class="content2_list_thum"><img src="img/revo_hoodie.jpg" alt=""></div>
<div class="content2_list_itemtext">
<span class="item_date">2021. Oct</span>
<h4 class="item_title">AbuGarcia 100주년 기념 후드티</h4>
<p class="item_dis">퓨어피싱코리아 자사 브랜드 AbuGarcia의 창립 100주년 기념 <br> 한정판 후드티 제품 상세페이지 제작.</p>
</div>
</a>
<div class="item_line"></div>
</div>
<div class="content2_list_item">
<a href="https://fdgh134.github.io/100_cap/" rel="noopener" target="_blank" class="content2_list_link">
<div class="content2_list_thum"><img src="img/100_cap.jpg" alt=""></div>
<div class="content2_list_itemtext">
<span class="item_date">2021. Jul</span>
<h4 class="item_title">AbuGarcia 100주년 기념 스냅백</h4>
<p class="item_dis">퓨어피싱코리아 자사 브랜드 AbuGarcia의 창립 100주년 기념 <br> 한정판 스냅백 직접 디자인 및 공장과 커뮤니케이션을 통해 제작까지 참여했습니다.</p>
</div>
</a>
<div class="item_line"></div>
</div>
<div class="content2_list_item">
<a href="https://fdgh134.github.io/3way/" rel="noopener" target="_blank" class="content2_list_link">
<div class="content2_list_thum"><img src="img/abu_3way_tool_bag.jpg" alt=""></div>
<div class="content2_list_itemtext">
<span class="item_date">2021. Jun</span>
<h4 class="item_title">AbuGarcia 휴대용 낚시 가방 상세페이지</h4>
<p class="item_dis">퓨어피싱코리아 자사 브랜드 AbuGarcia의 낚시용 방수 가방 상세페이지 </p>
</div>
</a>
<div class="item_line"></div>
</div>
<div class="content2_list_item">
<a href="https://fdgh134.github.io/rocket/" rel="noopener" target="_blank" class="content2_list_link">
<div class="content2_list_thum"><img src="img/revo_beast_rocket.jpg" alt=""></div>
<div class="content2_list_itemtext">
<span class="item_date">2020. Nov</span>
<h4 class="item_title">AbuGarcia Revo-Rocket 베이트릴 상세페이지</h4>
<p class="item_dis">퓨어피싱코리아 자사 브랜드 AbuGarcia의 베이트캐스트릴 Revo Rocket 상세페이지 </p>
</div>
</a>
<div class="item_line"></div>
</div>
<div class="content2_list_item">
<a href="https://fdgh134.github.io/zata/" rel="noopener" target="_blank" class="content2_list_link">
<div class="content2_list_thum"><img src="img/revo_zata4.jpg" alt=""></div>
<div class="content2_list_itemtext">
<span class="item_date">2020. Nov</span>
<h4 class="item_title">AbuGarcia Revo-Zata 베이트릴 상세페이지</h4>
<p class="item_dis">퓨어피싱코리아 자사 브랜드 AbuGarcia의 베이트캐스트릴 Revo Zata 상세페이지 </p>
</div>
</a>
<div class="item_line"></div>
</div>
<div class="content2_list_item">
<a href="https://fdgh134.github.io/ike/" rel="noopener" target="_blank" class="content2_list_link">
<div class="content2_list_thum"><img src="img/revo_ike.jpg" alt=""></div>
<div class="content2_list_itemtext">
<span class="item_date">2020. Oct</span>
<h4 class="item_title">AbuGarcia Revo-Ike 베이트릴 상세페이지</h4>
<p class="item_dis">퓨어피싱코리아 자사 브랜드 AbuGarcia의 베이트캐스트릴 Revo Ike 상세페이지 </p>
</div>
</a>
<div class="item_line"></div>
</div>
<div class="content2_list_item">
<a href="https://fdgh134.github.io/exd/" rel="noopener" target="_blank" class="content2_list_link">
<div class="content2_list_thum"><img src="img/revo_exd.jpg" alt=""></div>
<div class="content2_list_itemtext">
<span class="item_date">2020. Oct</span>
<h4 class="item_title">AbuGarcia Revo-Exd 베이트릴 상세페이지</h4>
<p class="item_dis">퓨어피싱코리아 자사 브랜드 AbuGarcia의 베이트캐스트릴 Revo Exd 상세페이지 </p>
</div>
</a>
<div class="item_line"></div>
</div>
<div class="content2_list_item">
<a href="https://fdgh134.github.io/lx992z/" rel="noopener" target="_blank" class="content2_list_link">
<div class="content2_list_thum"><img src="img/lx992z3.jpg" alt=""></div>
<div class="content2_list_itemtext">
<span class="item_date">2020. Oct</span>
<h4 class="item_title">AbuGarcia Revo-LX992Z 베이트릴 상세페이지</h4>
<p class="item_dis">퓨어피싱코리아 자사 브랜드 AbuGarcia의 베이트캐스트릴 Revo LX992Z 상세페이지 </p>
</div>
</a>
<div class="item_line"></div>
</div>
<div class="content2_list_item">
<a href="https://fdgh134.github.io/deez/" rel="noopener" target="_blank" class="content2_list_link">
<div class="content2_list_thum"><img src="img/deez.jpg" alt=""></div>
<div class="content2_list_itemtext">
<span class="item_date">2020. Sep</span>
<h4 class="item_title">AbuGarcia Fantasista 낚싯대 상세페이지</h4>
<p class="item_dis">퓨어피싱코리아 자사 브랜드 AbuGarcia의 낚싯대 Fantasista 제품 상세페이지 </p>
</div>
</a>
<div class="item_line"></div>
</div>
</div>
</div>
</div>
</div>
<div class="content3 none">
<div class="content3_inner none">
<div class="content3_info">
<div class="content3_info_inner">
<div>
<p class="content3_info_inner_p">Simple Is Best</p>
<div class="content3_info_inner_div">
<div class="content3_info_big_text big_text1">
<p>UI/UX Design</p>
</div>
</div>
</div>
<div>
<p class="content3_info_long_text">
개인적으로 작업한 UI/UX 디자인 입니다. <br>
피그마, 포토샵, 일러스트 위주로 작업하며 정보전달이 명확하고 깔끔한 디자인을 추구합니다.<br>
</p>
</div>
</div>
</div>
<div class="content3_list">
<div class="content3_list_inner">
<div class="content3_list_item">
<a href="work/share.html" rel="noopener" target="_blank" class="content3_list_link">
<div class="content3_list_thum"><img src="img/uiux/share-thum.png" alt=""></div>
<div class="content3_list_itemtext">
<span class="item_date">2024. Aug</span>
<h4 class="item_title">쉐어라운지 키오스크</h4>
<p class="item_dis">여행갈때 필요한 물품 대여 서비스</p>
</div>
</a>
<div class="item_line"></div>
</div>
<div class="content3_list_item">
<a href="work/joid.html" rel="noopener" target="_blank" class="content3_list_link">
<div class="content3_list_thum"><img src="img/uiux/joid-thum.png" alt=""></div>
<div class="content3_list_itemtext">
<span class="item_date">2024. Jul</span>
<h4 class="item_title">조이디 어플리케이션</h4>
<p class="item_dis">발달이 느린 아이들을 위한 치료지원 플랫폼</p>
</div>
</a>
<div class="item_line"></div>
</div>
<div class="content3_list_item">
<a href="work/aim.html" rel="noopener" target="_blank" class="content3_list_link">
<div class="content3_list_thum"><img src="img/uiux/aim-thum.jpg" alt=""></div>
<div class="content3_list_itemtext">
<span class="item_date">2024. Jun</span>
<h4 class="item_title">에임위드 웹페이지</h4>
<p class="item_dis">인공지능 기반 데이터 거래 모니터링 플랫폼</p>
</div>
</a>
<div class="item_line"></div>
</div>
<div class="content3_list_item">
<a href="work/nail.html" rel="noopener" target="_blank" class="content3_list_link">
<div class="content3_list_thum"><img src="img/uiux/nail-thum.png" alt=""></div>
<div class="content3_list_itemtext">
<span class="item_date">2024. Jun</span>
<h4 class="item_title">네일샵 어플리케이션</h4>
<p class="item_dis">네일샵 예약 플랫폼</p>
</div>
</a>
<div class="item_line"></div>
</div>
<div class="content3_list_item">
<a href="work/fredit.html" rel="noopener" target="_blank" class="content3_list_link">
<div class="content3_list_thum"><img src="img/uiux/Fredit_thum.png" alt=""></div>
<div class="content3_list_itemtext">
<span class="item_date">2024. May</span>
<h4 class="item_title">프레딧 웹페이지 리뉴얼</h4>
<p class="item_dis">프레딧 야쿠르트 웹페이지 리뉴얼 디자인</p>
</div>
</a>
<div class="item_line"></div>
</div>
</div>
</div>
</div>
</div>
<div class="contact animate__animated animate__slow none">
<div class="contact_inner">
<div><p>CONTACT</p></div>
<div><p>같이 일할 파트너를 찾고 계신가요?</p></div>
<div><p>[email protected]</p></div>
</div>
<div class="contact_inner_2">
<div>
<p>다양한 업무 경험을 가진 디자이너를 찾고 계신가요? <br> 합류 및 협업 제안이 있으시면 언제든지 연락 주세요. <br> 메일로 문의 주시면 1-2일 내로 답장 드리겠습니다.</p>
</div>
<div>
<p>디자인 이외 문의도 괜찮으니 얼마든지 문의 주세요.</p>
</div>
</div>
<footer class="contact_footer">
<div class="footer_inner">
<div class="footer_inner_center">
<p>Made by <span>Yoom</span></p>
<div class="footer_inner_copyright">
<p>ⓒ2024 Yoomin Son</p>
</div>
</div>
</div>
</footer>
</div>
</div>
<!--본문 영역 끝-->
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/javascript.js"></script>
<script src="js/common.js"></script>
<script src="js/splitting.min.js"></script>
<script type="module" src="js/index.js"></script>
<script>
AOS.init();
</script>
</body>
</html>