-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
700 lines (671 loc) · 40.7 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
<!DOCTYPE html5>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf8">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;500;600&display=swap" rel="stylesheet">
<link href="./styles/styles.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<title>상상을 그리는 개발자</title>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<div id="arrow"class="arrow bounce print-invisible">
<!-- <a class="" href="#"> -->
<i id="arrow-in"class="arrow-down"></i>
<!-- </a> -->
</div>
<img src="imgs/portfolio/projects/pt-67.png" style="display:none">
<section id="home" class="section-main print-height-100 print-no-break">
<div class="mac-window">
<div class="terminal-topbar">
<span class="terminal-btn red"></span>
<span class="terminal-btn yellow"></span>
<span class="terminal-btn green"></span>
</div>
<div id="terminal">
<span class="terminal-body loading">Resource Loading...</span>
</div>
</div>
</section>
<nav id="nav" class="print-invisible">
<div class="nav-link-wrap">
<a href="#home" class="nav-link">HOME</a>
<a href="#about" class="nav-link">ABOUT</a>
<a href="#portfolio" class="nav-link">PORTFOLIO</a>
<a href="https://2kiju.tistory.com/" target="_blank" class="nav-link">BLOG</a>
<a href="mailto: thdydehfdl12@gmail.com" class="nav-link">CONTACT</a>
</div>
</nav>
<section id="about" class="section-index print-no-break print-height-100">
<div class="header-wrap">
<h2 class="header">
ABOUT
</h2>
<div class="header-bar div-center"></div>
</div>
<div class="grid-values-container div-center text-center">
<div class="grid-values-item">
<div class="icon-wrap div-center box-style-wb">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="white" class="bi bi-graph-up" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5z"/>
</svg>
</div>
<div class="values-text-wrap">
<h3 class="values-text values-head">발전</h3>
<p class="values-text values-contents">내 발전이 곧<br>내 팀의 발전.</p>
</div>
</div>
<div class="grid-values-item">
<div class="icon-wrap div-center box-style-wb">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="white" class="bi bi-hand-thumbs-up" viewBox="0 0 16 16">
<path d="M8.864.046C7.908-.193 7.02.53 6.956 1.466c-.072 1.051-.23 2.016-.428 2.59-.125.36-.479 1.013-1.04 1.639-.557.623-1.282 1.178-2.131 1.41C2.685 7.288 2 7.87 2 8.72v4.001c0 .845.682 1.464 1.448 1.545 1.07.114 1.564.415 2.068.723l.048.03c.272.165.578.348.97.484.397.136.861.217 1.466.217h3.5c.937 0 1.599-.477 1.934-1.064a1.86 1.86 0 0 0 .254-.912c0-.152-.023-.312-.077-.464.201-.263.38-.578.488-.901.11-.33.172-.762.004-1.149.069-.13.12-.269.159-.403.077-.27.113-.568.113-.857 0-.288-.036-.585-.113-.856a2.144 2.144 0 0 0-.138-.362 1.9 1.9 0 0 0 .234-1.734c-.206-.592-.682-1.1-1.2-1.272-.847-.282-1.803-.276-2.516-.211a9.84 9.84 0 0 0-.443.05 9.365 9.365 0 0 0-.062-4.509A1.38 1.38 0 0 0 9.125.111L8.864.046zM11.5 14.721H8c-.51 0-.863-.069-1.14-.164-.281-.097-.506-.228-.776-.393l-.04-.024c-.555-.339-1.198-.731-2.49-.868-.333-.036-.554-.29-.554-.55V8.72c0-.254.226-.543.62-.65 1.095-.3 1.977-.996 2.614-1.708.635-.71 1.064-1.475 1.238-1.978.243-.7.407-1.768.482-2.85.025-.362.36-.594.667-.518l.262.066c.16.04.258.143.288.255a8.34 8.34 0 0 1-.145 4.725.5.5 0 0 0 .595.644l.003-.001.014-.003.058-.014a8.908 8.908 0 0 1 1.036-.157c.663-.06 1.457-.054 2.11.164.175.058.45.3.57.65.107.308.087.67-.266 1.022l-.353.353.353.354c.043.043.105.141.154.315.048.167.075.37.075.581 0 .212-.027.414-.075.582-.05.174-.111.272-.154.315l-.353.353.353.354c.047.047.109.177.005.488a2.224 2.224 0 0 1-.505.805l-.353.353.353.354c.006.005.041.05.041.17a.866.866 0 0 1-.121.416c-.165.288-.503.56-1.066.56z"/>
</svg>
</div>
<div class="values-text-wrap ">
<h3 class="values-text values-head">도전</h3>
<p class="values-text values-contents">생각은 짧게<br>실천은 빠르게.</p>
</div>
</div>
<div class="grid-values-item">
<div class="icon-wrap div-center box-style-wb">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="white" class="bi bi-emoji-smile" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z"/>
</svg>
</div>
<div class="values-text-wrap">
<h3 class="values-text values-head">소통</h3>
<p class="values-text values-contents">동료와의 소통<br>고객과의 소통.</p>
</div>
</div>
<div class="grid-values-item">
<div class="icon-wrap div-center box-style-wb">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="white" class="bi bi-card-checklist" viewBox="0 0 16 16">
<path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
<path d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/>
</svg>
</div>
<div class="values-text-wrap">
<h3 class="values-text values-head">개선</h3>
<p class="values-text values-contents">더욱 견고하게<br>더욱 효율적으로.</p>
</div>
</div>
</div>
<div class="profile-container">
<div class="profile-img div-center box-style-wb">
</div>
<div class="profile-text-container text-center">
<h3 class="profile-header nomargin">상상을 그리는 개발자</h3>
<p class="profile-contents nomargin">
개발을 하며 탐구하고, 소통하고, 컴퓨터 공학의 이슈에 대해 살펴보는 것을 좋아합니다.<br>
저에 대해 더욱 알고 싶으시다면 <a class="alink" target="_blank" href="https://www.notion.so/f75a57f2ee37408bb1d4ea2be699ce06">여기</a>를 눌러주세요.
</p>
</div>
</div>
</section>
<section id="portfolio" class="bg-color-whiteblue print-pagebreak">
<div class="header-wrap">
<h2 class="header">
PORTFOLIO
</h2>
<div class="header-bar div-center"></div>
</div>
<!-- Projects!!!! -->
<!-- Projects!!!! -->
<!-- Projects!!!! -->
<div class="portfolio-container div-center">
<h2 class="portfolio-header nomargin print-pagebreak">Projects.</h2>
<!-- 원격 조종 프레젠테이션 -->
<hr>
<div class=" print-no-break portfolio-item-container">
<div class="portfolio-img-container">
<img src="imgs/portfolio/projects/pt-60.png">
</div>
<div class="portfolio-info-container">
<h2 class="portfolio-title nomargin">원격 조종 프레젠테이션 <span class="span-border">2020.12</span></h2>
<h3 class="portfolio-title portfolio-contribution nomargin">개인 과제 : 전체 개발</h3>
<p class="portfolio-contents nomargin">
가장 즐겁게 개발한 프로젝트입니다. 코엑스에서 인상깊게 본 기술을 목적을 바꾸어 저만의 프로젝트로 각색하였습니다. 프레젠테이션의 QR 코드를 디바이스로 읽으면, 디바이스는 해당 프레젠테이션을 제어할 수 있는 Controller 화면으로 전환되고, 프레젠테이션을 제어할 수 있습니다.
</p>
<ul class="portfolio-info-list">
<li>프론트 서버와 백 서버로 나뉘어 있음.</li>
<li>hub를 통하여 각 주소들에게 메시지를 전달함.</li>
<li>발급받은 key로 각자를 식별할 수 있음.</li>
<li>크로스 브라우징(safari, firefox, chrome testing.)</li>
<!-- <li></li> -->
<li>Skill keywords</li>
</ul>
<div class="keywords-container">
<span class="span-border span-bg-violet">C#</span>
<span class="span-border">.net</span>
<span class="span-border">blazorWASM</span>
<!-- <span class="span-border"></span> -->
</div>
<div class="portfolio-btns-container">
<a class="visit-btn" target='_blank' href="https://2kiju.tistory.com/60">More</a>
<a class="visit-btn" target='_blank' href="https://youtu.be/G4WMqFfsxI4">Preview</a>
<a class="visit-btn" target='_blank' href="https://github.com/kiJu2/RemoteContrallablePresentation">Git</a>
<!-- <a class="visit-btn" >Git</a> -->
</div>
</div>
</div>
<!-- 여행지 추천 -->
<div class=" print-no-break portfolio-item-container">
<div class="portfolio-img-container">
<img src="imgs/portfolio/projects/pt-51.png">
</div>
<div class="portfolio-info-container">
<h2 class="portfolio-title nomargin">여행지 추천 어플리케이션 백엔드 개발 <span class="span-border">2020.09</span></h2>
<h3 class="portfolio-title portfolio-contribution nomargin">캡스톤 팀 개발 : 백엔드 개발</h3>
<p class="portfolio-contents nomargin">
내일로 여행지를 추천하고, 여행지를 저장할 수 있는 어플리케이션입니다. 서버는 AWS를 사용하고, 공공 API를 활용하였습니다. RDS에는 회원 정보와 여행지 node 정보를 담습니다.
</p>
<ul class="portfolio-info-list">
<li>사용자는 관심있는 여행지를 관심 여행지로 담을 수 있습니다.</li>
<li>여행지를 기반으로 사용자가 갈 여행지를 추천해줍니다.</li>
<li>추천 방식은 사용자 기반 협업필터링 추천 시스템의 방식으로 추천합니다.</li>
<li>가장 효율적인(거리가 짧은) 순서대로 여행경로를 추천해줍니다.</li>
<li>메일 인증을 통하여 회원가입을 할 수 있습니다.</li>
<!-- <li>기차 정보 시간표를 확인할 수 있습니다.(팀원 개발)</li> -->
<li>Skill keywords</li>
</ul>
<div class="keywords-container">
<span class="span-border span-bg-violet">python</span>
<span class="span-border span-bg-violet">php</span>
<span class="span-border">restAPI</span>
<span class="span-border">AWS</span>
<span class="span-border">api</span>
<!-- <span class="span-border">back</span>
<span class="span-border">smtp</span>
<span class="span-border">aws</span>
<span class="span-border">ubuntu</span>
<span class="span-border">rds</span>
<span class="span-border">php</span>
<span class="span-border">python</span> -->
</div>
<div class="portfolio-btns-container">
<a class="visit-btn" target='_blank' href="https://2kiju.tistory.com/51">More</a>
<a class="visit-btn" target='_blank' href="https://play.google.com/store/apps/details?id=com.koreatech.naeilro&hl=fi&gl=US">View App</a>
<!-- <a class="visit-btn" >Git</a> -->
</div>
</div>
</div>
<!-- -->
<!-- 한평 -->
<div class=" print-no-break portfolio-item-container">
<div class="portfolio-img-container">
<img src="imgs/portfolio/projects/pt-48.png">
</div>
<div class="portfolio-info-container">
<h2 class="portfolio-title nomargin">강의 평가 플랫폼 <span class="span-border">2020.07</span></h2>
<h3 class="portfolio-title portfolio-contribution nomargin">개인/취미 :디자인, 전체 개발</h3>
<p class="portfolio-contents nomargin">
제가 개발한 플랫폼을 서비스하고 싶은 욕심이 생겼고, 기획, 개발, 디자인을 도맡아서 개발을 하고 싶었습니다. 아키텍쳐 관리 미흡으로, 결국 리팩토링을 결정하게 되었으나, 제 성장에 가장 큰 기여를 한 프로젝트입니다.
</p>
<ul class="portfolio-info-list">
<li>강의 데이터 크롤링</li>
<li>SPA로, 페이지의 구성 요소들이 동적으로 작동함.</li>
<li>카테고리를 클릭함으로서 데이터를 필터링할 수 있음.</li>
<li>DNS 사용(현재 기한 초과)</li>
<li>이메일 인증으로 회원가입을 할 수 있음.</li>
<li><b><del>테스트 아이디는 test이며, 비밀번호는 000000!aa 입니다.</del></b></li>
<li class="notused"><del>테스팅은 가능하나, 개발 중단 및 리팩토링 예정</del></li>
<li class="notused">현재는 서버를 닫은 상태입니다.</li>
<li>Skill keywords</li>
</ul>
<div class="keywords-container">
<span class="span-border span-bg-violet">php</span>
<span class="span-border span-bg-violet">python</span>
<span class="span-border span-bg-violet">javascript</span>
<span class="span-border">SPA</span>
<span class="span-border">SSR</span>
<span class="span-border">AWS</span>
<span class="span-border">jQuery</span>
<!-- <span class="span-border">html</span>
<span class="span-border">css</span>
<span class="span-border">javascript</span>
<span class="span-border">front</span>
<span class="span-border">back</span>
<span class="span-border">smtp</span>
<span class="span-border">spa</span>
<span class="span-border">ajax</span>
<span class="span-border">aws</span>
<span class="span-border">ubuntu</span>
<span class="span-border">rds</span>
<span class="span-border">jQuery</span>
<span class="span-border">python</span>
<span class="span-border">crawling</span> -->
</div>
<div class="portfolio-btns-container">
<a class="visit-btn" target='_blank' href="https://2kiju.tistory.com/48">More</a>
<a class="visit-btn" target='_blank' href="http://13.124.6.95/">Visit Site</a>
<!-- <a class="visit-btn" >Git</a> -->
</div>
</div>
</div>
<!-- -->
<!-- 기주봇 -->
<div class=" print-no-break portfolio-item-container">
<div class="portfolio-img-container">
<img src="imgs/portfolio/projects/pt-69.png">
</div>
<div class="portfolio-info-container">
<h2 class="portfolio-title nomargin">비트코인 트레이딩 봇 <span class="span-border">2021.03</span></h2>
<h3 class="portfolio-title portfolio-contribution nomargin">개인/취미 :전체 개발</h3>
<p class="portfolio-contents nomargin">
암호화폐 시장을 시작하게 되었는데, 많은 시간을 암호화폐에 투자하게 되면서 나의 생활이 줄어서 고민이었습니다. 그렇게 "나 대신 암호화폐를 돌려줄 사람이 없을까?"에서 시작 된 프로젝트 입니다. 해당 프로젝트는 24시간 암호화폐를 조회/매수/매도를 수행하는 트레이딩 봇이며, 저를 포함하여 친구들의 코인도 함께 관리해주고 있기에 한 인스턴스에 여러 유저들을 수용할 수 있도록 개발하였습니다.
</p>
<ul class="portfolio-info-list">
<li>암호화폐 트레이딩 봇</li>
<li>여러 유저를 한 인스턴스에서 관리할 수 있음.</li>
<li>Upbit에 소켓을 연결하여 실시간으로 데이터를 송수신 함.</li>
<!-- <li class="notused">특정 서버가 없기에 웹으로 제공은 못하나, 소스 코드 확인 가능.</li> -->
<li>Skill keywords</li>
</ul>
<div class="keywords-container">
<span class="span-border span-bg-violet">python</span>
<span class="span-border">API</span>
<span class="span-border">singleton</span>
<!-- <span class="span-border">front</span> -->
</div>
<div class="portfolio-btns-container">
<a class="visit-btn" target='_blank' href="https://2kiju.tistory.com/69">More</a>
<!-- <a class="visit-btn" target='_blank' href="http://13.124.6.95/">Visit Site</a> -->
<!-- <a class="visit-btn" >Git</a> -->
</div>
</div>
</div>
<!-- -->
<!-- OS 스케줄링 시뮬레이터 -->
<div class=" print-no-break portfolio-item-container">
<div class="portfolio-img-container">
<img src="imgs/portfolio/projects/pt-12.png">
</div>
<div class="portfolio-info-container">
<h2 class="portfolio-title nomargin">OS 스케줄링 시뮬레이터 <span class="span-border">2019.03</span></h2>
<h3 class="portfolio-title portfolio-contribution nomargin">팀 과제, 본인 기여 : 시각화, RR을 제외한 모든 스케줄링 알고리즘</h3>
<p class="portfolio-contents nomargin">
운영체제 스케줄링의 AT(Arrival Time), BT(Burst Time)을 입력하여 각 스케줄링이 어떻게 반환되는지 시각화해주는 어플리케이션입니다. 동적으로 어떤 프로세스가 대기하며, 프로세스의 모든 상태정보를 알 수 있도록 설계하였습니다. 크롬에서 원활히 테스팅 가능합니다.
</p>
<ul class="portfolio-info-list">
<li>동적으로 어떠한 스케줄링이 대기하는지 확인 가능</li>
<li>FCFS, SPN, SRTN, HRRN, LPHRN, RR 스케줄링 알고리즘 개발.</li>
<li>브라우저에서 작동할 수 있도록 시각화.</li>
<li>Skill keywords</li>
</ul>
<div class="keywords-container">
<!-- <span class="span-border">html</span>
<span class="span-border">css</span> -->
<span class="span-border span-bg-violet">javascript</span>
<span class="span-border">jQuery</span>
</div>
<div class="portfolio-btns-container">
<a class="visit-btn" target='_blank' href="https://2kiju.tistory.com/12">More</a>
<a class="visit-btn" target='_blank' href="https://github.com/kiJu2/Scheduling-Simulator-visualization">Git</a>
<a class="visit-btn" target='_blank' href="https://kiju2.github.io/Scheduling-Simulator-visualization/">Visit Site</a>
<!-- <a class="visit-btn" >Git</a> -->
</div>
</div>
</div>
<!-- -->
<!-- 3D 도면거래 -->
<!-- <hr>
<div class=" print-no-break portfolio-item-container">
<div class="portfolio-img-container">
<img src="imgs/portfolio/projects/pt-15.png">
</div>
<div class="portfolio-info-container">
<h2 class="portfolio-title nomargin">3D 도면 거래 플랫폼 <span class="span-border">2019.04</span></h2>
<h3 class="portfolio-title portfolio-contribution nomargin">팀 과제, 본인 기여 : 메인 페이지, 회원가입, 로그인, grid form BBS, file upload/download</h3>
<p class="portfolio-contents nomargin">
3D 프린터 도면을 거래하는 사이트 컨셉으로 개발된 플랫폼입니다. 도면을 조회 및 자료를 사용할 수 있으며, key 여부에 따른 권한이 부여됩니다.
</p>
<ul class="portfolio-info-list">
<li>3D 도면을 정규식으로 검색하여 조회할 수 있음.(팀원이 개발)</li>
<li>로그인을 함으로서 도면 다운로드 권한이 주어짐.</li>
<li>도면을 업로드하고 다운로드가 가능함.</li>
<li>카테고리 별로 분류된 도면을 모아볼 수 있음.</li>
<li class="notused">(본 프로젝트는 테스팅을 할 수 없습니다.)</li>
<li>Skill keywords</li>
</ul>
<div class="keywords-container">
<span class="span-border span-bg-violet">js</span>
<span class="span-border span-bg-violet">php</span>
<span class="span-border">jQuery</span>
</div>
<div class="portfolio-btns-container">
<a class="visit-btn" target='_blank' href="https://2kiju.tistory.com/15">More</a>
</div>
</div>
</div> -->
<!-- -->
<!-- 브라우저 웹캠 -->
<div class=" print-no-break portfolio-item-container">
<div class="portfolio-img-container">
<img src="imgs/portfolio/projects/pt-57.png">
</div>
<div class="portfolio-info-container">
<h2 class="portfolio-title nomargin">웹캠 오픈소스 <span class="span-border">2020.11</span></h2>
<h3 class="portfolio-title portfolio-contribution nomargin">개인, 취미 : 전체 개발</h3>
<p class="portfolio-contents nomargin">
브라우저 내에서 웹캠으로 카메라를 캡처할 수 있는 오픈소스입니다. 계란 선별기 외주 개발</a>을 하다가 일부 기능을 오픈소스를 목적으로 배포하였습니다. 브라우저에서 카메라 액세스를 허용하면, 카메라가 동작하며 캡처를 할 수 있도록 합니다. 캡처된 내용은 브라우저 메모리에 내장되며 출력합니다.
</p>
<ul class="portfolio-info-list">
<li>버튼을 클릭함으로써 화면을 캡처할 수 있음.</li>
<li>설치된 단말(audio, video)을 선택할 수 있음.</li>
<li>Skill keywords</li>
</ul>
<div class="keywords-container">
<!-- <span class="span-border">html</span>
<span class="span-border">css</span> -->
<span class="span-border span-bg-violet">javascript</span>
</div>
<div class="portfolio-btns-container">
<a class="visit-btn" target='_blank' href="https://2kiju.tistory.com/57">More</a>
<a class="visit-btn" target='_blank' href="https://kiju2.github.io/Simple-Web-Cam/index.html">Visit Site</a>
<a class="visit-btn" target='_blank' href="https://github.com/kiJu2/Simple-Web-Cam">Git</a>
<!-- <a class="visit-btn" >Git</a> -->
</div>
</div>
</div>
<!-- 슬라이딩 페이지 -->
<!-- <hr>
<div class=" print-no-break portfolio-item-container">
<div class="portfolio-img-container">
<img src="imgs/portfolio/projects/pt-13.png">
</div>
<div class="portfolio-info-container">
<h2 class="portfolio-title nomargin">스크롤 슬라이딩 페이지 <span class="span-border">2019.06</span></h2>
<h3 class="portfolio-title portfolio-contribution nomargin">개인/취미: 디자인, 전체 개발</h3>
<p class="portfolio-contents nomargin">
추후, 3D 도면 거래 플랫폼에 이어서, 컨셉을 유지한 체 메인 페이지를 동적(애니메이션)으로 바꾸는 법을 배우고 싶어서 해외 사이트를 레퍼런스하여 디자인하였고, 기능을 개발하였습니다.
</p>
<ul class="portfolio-info-list">
<li>스크롤 이벤트 발생 시 변수가 누적됨.</li>
<li>일정 변수가 누적되면 페이지를 슬라이딩 함.</li>
<li>Skill keywords</li>
</ul>
<div class="keywords-container">
<span class="span-border span-bg-violet">javascript</span>
<span class="span-border">jQuery</span>
</div>
<div class="portfolio-btns-container">
<a class="visit-btn" target='_blank' href="https://2kiju.tistory.com/13">More</a>
<a class="visit-btn" target='_blank' href="https://kiju2.github.io/slide-page/">Visit Site</a>
</div>
</div>
</div> -->
<!-- -->
<!-- 포트폴리오 페이지 -->
<div class=" print-no-break portfolio-item-container">
<div class="portfolio-img-container">
<img src="imgs/portfolio/projects/pt-67.png">
</div>
<div class="portfolio-info-container">
<h2 class="portfolio-title nomargin">포트폴리오 페이지 <span class="span-border">2021.02</span></h2>
<h3 class="portfolio-title portfolio-contribution nomargin">개인/취미: 디자인, 전체 개발</h3>
<p class="portfolio-contents nomargin">
지금 보고 계십니다. 😆<br>
</p>
<ul class="portfolio-info-list">
<li>Skill keywords</li>
</ul>
<div class="keywords-container">
<!-- <span class="span-border">html</span>
<span class="span-border">css</span> -->
<span class="span-border span-bg-violet">js</span>
<span class="span-border">responsive</span>
</div>
<div class="portfolio-btns-container">
<a class="visit-btn" target='_blank' href="https://2kiju.tistory.com/67">More</a>
<!-- <a class="visit-btn" target='_blank' href="https://youtu.be/_BIwG4XCmEE">Preview</a> -->
<!-- <a class="visit-btn" >Git</a> -->
</div>
</div>
</div>
<!-- -->
</div>
<div class="portfolio-container div-center">
<h2 class="portfolio-header nomargin">Works.</h2>
<!-- 일본경제사회연구소 -->
<hr>
<div class="portfolio-item-container print-no-break ">
<div class="portfolio-img-container">
<img src="imgs/portfolio/works/pt-29.png">
</div>
<div class="portfolio-info-container">
<h2 class="portfolio-title nomargin">일본경제사회연구소 <span class="span-border">2019.08</span></h2>
<h3 class="portfolio-title portfolio-subtitle nomargin">시사일본어학원</h3>
<p class="portfolio-contents nomargin">
시사일본어학원의 새로운 사업인 일본경제사회연구소의 홈페이지를 맡아 개발을 하였습니다. 중점적인 개발 의뢰는 CRUD가 가능한 BBS였으며, 사용자는 Read-only이며, 관리자만이 게시물에 대해 모든 접근 권한을 가집니다.
</p>
<ul class="portfolio-info-list">
<li>고객의 요구사항 명세를 바탕으로 모든 개발을 임함.</li>
<li>고객 전용 매니저 페이지를 개발함으로서 게시물 관리에 용이함.</li>
<!-- <li>카테고리 별로 분류된 게시판</li> -->
<li>게시물 별로 서버 내 이미지 업로드 및 출력</li>
<li>일반 유저는 Read-only, 관리자는 CRUD 가능</li>
<!-- <li>공지사항을 메인페이지에 고지</li> -->
<!-- <li>동적인 페이지</li> -->
<li>페이지 별 디자인</li>
<li>Skill keywords</li>
</ul>
<div class="keywords-container">
<span class="span-border span-bg-violet">javascript</span>
<span class="span-border">jQuery</span>
<!-- <span class="span-border">php</span>
<span class="span-border">html</span>
<span class="span-border">css</span>
<span class="span-border">javascript</span>
<span class="span-border">jQuery</span>
<span class="span-border">front</span>
<span class="span-border">back</span>
<span class="span-border">sql</span> -->
</div>
<div class="portfolio-btns-container">
<a class="visit-btn" target='_blank' href="https://2kiju.tistory.com/29">More</a>
<a class="visit-btn" target='_blank' href="https://www.jesi.co.kr/">Visit Site</a>
<!-- <a class="visit-btn" >Git</a> -->
</div>
</div>
</div>
<!-- 온라인 작가 전시회 플랫폼 -->
<div class="portfolio-item-container print-no-break">
<div class="portfolio-img-container">
<img src="imgs/portfolio/works/pt-65.png">
</div>
<div class="portfolio-info-container">
<h2 class="portfolio-title nomargin">온라인 작가 전시 플랫폼 <span class="span-border">2020.8</span></h2>
<h3 class="portfolio-title portfolio-subtitle nomargin">Gallery VIA</h3>
<p class="portfolio-contents nomargin">
계약직으로 2개월 가량 근무하였습니다. MyPage와 AboutUs 부분을 맡게 되었으며, 개발부서가 있었기에 개발부서 팀원들과 github로 상호작용을 하며 개발하였습니다.
</p>
<ul class="portfolio-info-list">
<li>라우팅이 된 페이지에서 개발을 수행함.</li>
<li>마이페이지 프론트 개발.</li>
<li>회사 소개 프론트 개발.</li>
<li>Responsive.</li>
<li>Skill keywords</li>
</ul>
<div class="keywords-container">
<span class="span-border span-bg-violet">javascript</span>
<span class="span-border">react</span>
<!-- <span class="span-border">php</span> -->
<!-- <span class="span-border">codeIgnigter</span> -->
<!-- <span class="span-border">html</span>
<span class="span-border">css</span>
<span class="span-border">javascript</span>
<span class="span-border">react</span>
<span class="span-border">responsive</span>
<span class="span-border">github</span>
<span class="span-border">git</span> -->
<!-- <span class="span-border">jQuery</span> -->
<!-- <span class="span-border">ajax</span> -->
<!-- <span class="span-border">front-end</span> -->
<!-- <span class="span-border">back-end</span> -->
<!-- <span class="span-border">sql</span> -->
</div>
<div class="portfolio-btns-container">
<a class="visit-btn" target='_blank' href="https://2kiju.tistory.com/65">More</a>
<a class="visit-btn" target='_blank' href="http://gallery-via.com/">Visit Site</a>
<!-- <a class="visit-btn" >Git</a> -->
</div>
</div>
</div>
<!-- 독서 플랫폼 디자인 리뉴얼 -->
<div class="portfolio-item-container print-no-break">
<div class="portfolio-img-container">
<img src="imgs/portfolio/works/pt-34.png">
</div>
<div class="portfolio-info-container">
<h2 class="portfolio-title nomargin">독서 플랫폼 디자인 리뉴얼 <span class="span-border">2020.03</span></h2>
<h3 class="portfolio-title portfolio-subtitle nomargin">리딩오션</h3>
<p class="portfolio-contents nomargin">
리딩오션의 기존의 웹을, 새로운 디자인으로 리뉴얼을 하게되었습니다. 데이터 접근이 필요한 부분에 따라 데이터베이스 및 Controller와 View를 중점적으로 처리하였습니다.
</p>
<ul class="portfolio-info-list">
<li>기존 페이지 중 없는 데이터를 Controller에 추가</li>
<li>독서능력진단검사, 독서 퀴즈(4종목) 등을 리뉴얼된 디자인으로 재개발.</li>
<li>인쇄가 중요한 플랫폼이므로, 인쇄 시 깨지지 않도록 레이아웃 조정.</li>
<li>Skill keywords</li>
</ul>
<div class="keywords-container">
<span class="span-border span-bg-violet">javascript</span>
<span class="span-border">codeIgnigter</span>
<!-- <span class="span-border">php</span>
<span class="span-border">codeIgnigter</span>
<span class="span-border">html</span>
<span class="span-border">css</span>
<span class="span-border">javascript</span>
<span class="span-border">jQuery</span>
<span class="span-border">ajax</span> -->
<!-- <span class="span-border">front-end</span> -->
<!-- <span class="span-border">back-end</span> -->
<!-- <span class="span-border">sql</span> -->
</div>
<div class="portfolio-btns-container">
<a class="visit-btn" target='_blank' href="https://2kiju.tistory.com/34">More</a>
<a class="visit-btn" target='_blank' href="http://enro.co.kr/">Visit Site</a>
<!-- <a class="visit-btn" >Git</a> -->
</div>
</div>
</div>
<!-- 계란 선별기 -->
<div class="portfolio-item-container print-no-break">
<div class="portfolio-img-container">
<img src="imgs/portfolio/works/pt-61.png">
</div>
<div class="portfolio-info-container">
<h2 class="portfolio-title nomargin">계란 선별기 프로토타입 <span class="span-border">2020.12</span></h2>
<h3 class="portfolio-title portfolio-subtitle nomargin">지현테크놀로지</h3>
<p class="portfolio-contents nomargin">
지현테크놀로지에서는 공정에서 계란을 캡쳐하여 계란의 상태를 파악할 수 있는 어플리케이션을 원했습니다. 개발 환경을 고려하여, 브라우저 내에서 신호에 따라 RGB를 분석 및 계란의 상태를 파악하도록 개발하였습니다.
</p>
<ul class="portfolio-info-list">
<li>특정 신호에 사진을 캡처.</li>
<li>특정 신호에 RGB를 분석하여 이상란, 정상란, 혈란 등 카운트.</li>
<li>캡처 화면은 총 2개이며, Queue 구조를 가지며 캡처본을 저장.</li>
<li>메모리는 브라우저 메모리를 사용.</li>
<li>Skill keywords</li>
</ul>
<div class="keywords-container">
<!-- <span class="span-border">html</span>
<span class="span-border">css</span> -->
<span class="span-border span-bg-violet">javascript</span>
</div>
<div class="portfolio-btns-container">
<a class="visit-btn" target='_blank' href="https://2kiju.tistory.com/61">More</a>
<a class="visit-btn" target='_blank' href="https://youtu.be/_BIwG4XCmEE">Preview</a>
</div>
</div>
</div>
<!-- -->
</div>
<div class="portfolio-container div-center">
<h2 class="portfolio-header nomargin print-pagebreak">Etc.</h2>
<hr>
<div class=" print-no-break portfolio-item-container">
<div class="portfolio-img-container">
<img src="imgs/portfolio/paper/pp-46.png">
</div>
<div class="portfolio-info-container">
<h2 class="portfolio-title nomargin">효율적인 웹 서비스 구축을 위한 GoLang 성능 분석 <span class="span-border">2020.6</span></h2>
<h3 class="portfolio-title portfolio-subtitle nomargin">학부 연구, 정보통신학회<br>UCI(KEPA) : I410-ECN-0101-2020-004-000904998</h3>
<p class="portfolio-contents nomargin">
국내에는 적지만, 해외에서는 관심이 많던 Go 언어에 관심이 있었는데, 학부 연구생으로 활동중이던 저는 Go 언어를 활용하여 논문을 기재해보고 싶었습니다. 교수님에게 부탁하였고, 박사님의 서포트를 받으며 연구 방향성을 잡았습니다.
</p>
<ul class="portfolio-info-list">
<li>aws 환경에서 연구 진행.</li>
<li>DB와 통신을 주고 받는 시간을 측정.</li>
<li>Server와 Client 간 데이터를 주고 받는 시간을 측정.</li>
<li class="notused">저작권 문제로 외부 링크로 전환됩니다.</li>
<li>Skill keywords</li>
</ul>
<div class="keywords-container">
<span class="span-border span-bg-violet">go</span>
<!-- <span class="span-border">rds</span> -->
<span class="span-border">AWS</span>
<!-- <span class="span-border">back</span> -->
<!-- <span class="span-border"></span> -->
<!-- <span class="span-border"></span> -->
</div>
<div class="portfolio-btns-container">
<a class="visit-btn" target='_blank' href="https://2kiju.tistory.com/46">More</a>
<!-- <a class="visit-btn" target='_blank' href="https://www.dbpia.co.kr/Journal/articleDetail?nodeId=NODE09371872">View</a> -->
<!-- <a class="visit-btn" target='_blank' href="https://github.com/kiJu2/RemoteContrallablePresentation">Git</a> -->
<!-- <a class="visit-btn" >Git</a> -->
</div>
</div>
</div>
<div class=" print-no-break portfolio-item-container">
<div class="portfolio-img-container">
<img src="imgs/portfolio/paper/pp-66.png">
</div>
<div class="portfolio-info-container">
<h2 class="portfolio-title nomargin">협업 필터링 추천 시스템을 이용한 관심사 기반 자동 생성 앱 서비스 <span class="span-border">2020.10</span></h2>
<h3 class="portfolio-title portfolio-subtitle nomargin">학부 연구, 정보통신학회</h3>
<p class="portfolio-contents nomargin">
캡스톤 디자인을 개발하고, 관련 학술대회에 참여하였습니다.
</p>
<ul class="portfolio-info-list">
<li>사용자 기반 협업 필터링 시스템을 활용하여 연구.</li>
<li>일치하는 노드의 개수가 많음에 따라 관심사가 비슷함으로 간주.</li>
<li>가장 비슷한 사용자들을 추려내어 다음 노드를 추천해줌.</li>
<!-- <li class="notused">4월 출간 예정이기에 요약본만 기재합니다.</li> -->
<li>Skill keywords</li>
</ul>
<div class="keywords-container">
<!-- <span class="span-border">back</span> -->
<span class="span-border span-bg-violet">python</span>
<span class="span-border">AWS</span>
</div>
<div class="portfolio-btns-container">
<a class="visit-btn" target='_blank' href="https://2kiju.tistory.com/66">More</a>
<!-- <a class="visit-btn" target='_blank' href="https://www.dbpia.co.kr/Journal/articleDetail?nodeId=NODE09371872">View</a> -->
<!-- <a class="visit-btn" target='_blank' href="https://github.com/kiJu2/RemoteContrallablePresentation">Git</a> -->
<!-- <a class="visit-btn" >Git</a> -->
</div>
</div>
</div>
</div>
</section>
<footer class="print-pagebreak print-height-100">
<div class="footer-intro">
</div>
<div class="footer-container">
<h3>
상상을 그리는 개발자
</h3>
<p>
본 포트폴리오의 메인 컨셉인 저의 작업환경을 주제로 작성하였습니다.<br>
작업하는 화면을 메인화면에 녹여내고 싶었습니다. 지향하는 포지션을 보여주기 위하여 터미널창으로 메시지를 담았습니다. 저에 대해 봐주신 모든 분들께 감사드립니다.
</p>
</div>
</footer>
</body>
<script type="text/javascript" src="./js/script.js"></script>
</html>