-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
553 lines (553 loc) · 37 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Koh MinJung</title>
<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">MinJung's</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars ml-1"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ml-auto">
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">about</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#experiences">Experiences</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#skills">skills</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#projects">projects</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Masthead-->
<header class="masthead">
<div class="container">
<div class="masthead-subheading">Welcome To My Portfolio!</div>
<div class="masthead-heading text-uppercase">고민정</div>
<h4>Koh MinJung</h4>
<br>
<!-- <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="" download>PDF 다운로드</a> -->
<br><br><br>
<a class="text-contact btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="https://github.com/dico1631" target="_blank">Github으로 이동</a>
</div>
</header>
<!-- about-->
<section class="page-section bg-light" id="about">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">About</h2>
<h3 class="section-subheading text-muted">나에 대해</h3>
</div>
<div>
<h4 class="my-3">1. 새로운 도전을 좋아합니다.</h4>
<p class="text-muted">
경영학부 공부를 하던 중 SQL을 접하면서, 프로그래밍에 관심이 생겼고, 컴퓨터과학부 복수전공을 했습니다.
또한, 데이터 기반 의사결정의 중요성을 깨닫고 데이터 분석 수업을 들었습니다.
그리고 4차 산업혁명을 따라가고자 졸업 후 삼성 멀티캠퍼스에서 '딥러닝 기반 AI 엔지니어링' 과정을 이수했습니다.
이처럼 새로운 분야에 관심이 많고, 호기심 충족을 위해 다양한 도전을 합니다.
</p>
</div>
<br>
<div>
<h4 class="my-3">2. 발전을 위해 끊임없이 노력합니다.</h4>
<p class="text-muted">
3학년에 프로그래밍을 시작하면서, 8학기 내에 졸업하기에는 시간과 컴퓨터 기초 지식 모두 부족했습니다.
그래서 부족한 시간을 메우기 위해 평일마다 수업 이후 3시간씩 공부했습니다.
당일 수업 내용을 모두 복습하는 것을 목표로 2년간 공부한 결과 추가 학기 없이 컴퓨터 전공에서 4.27의 우수한 성적을 받으며 졸업했습니다.
이처럼 부족함에 좌절하지 않고 이를 채우기 위해 지속해서 노력합니다.
</p>
</div>
<br>
<div>
<h4 class="my-3">3. 다양한 사람들과 협업에 익숙합니다.</h4>
<p class="text-muted">
대학 시절 여러 전공의 사람들이 모여있는 공연 동아리 회장을 했습니다.
초창기에는 다른 사람들을 이해하기가 힘들었으나, 1년간 함께 공연을 준비하면서 다름을 인정하게 되었습니다.
또한, 능력을 파악함으로써 업무 및 역할을 알맞게 배분하는 방법을 배웠습니다.
이 경험은 경영 및 컴퓨터 공부를 하면서 진행한 다양한 프로젝트를 하는 데 많은 도움이 되었습니다.
</p>
</div>
</div>
</section>
<!-- experiences-->
<section class="page-section" id="experiences">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Experiences</h2>
<h3 class="section-subheading text-muted">교육 및 경험</h3>
</div>
<ul class="timeline">
<li>
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/experiences/1.jpg" alt="" /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>2014.02 - 2020.02</h4>
<h4 class="subheading">숙명여자대학교 경영학 학사, 컴퓨터과학 학사</h4>
</div>
<div class="timeline-body"><p class="text-muted">조직행동론, 마케팅원론, 통계학입문, 경영데이터분석, IT와비즈니스혁신 등을 이수함.
<br><br>
알고리즘, 자료구조, 컴퓨터구조, 수치해석, 운영체제 등을 이수함.
</p></div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/experiences/2.jpg" alt="" /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>2019.12 - 2020.06</h4>
<h4 class="subheading">삼성 멀티캠퍼스 딥러닝 기반 AI 엔지니어링</h4>
</div>
<div class="timeline-body"><p class="text-muted">고용노동부가 주관하는 딥러닝 기반 AI 엔지니어링 과정 1000시간을 이수함.
<br><br>
<i class="fas fa-trophy"></i> 세미 프로젝트 우수상 수상
</p></div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<br>
<h4>
What's Next!
</h4>
</div>
</li>
</ul>
</div>
</section>
<!-- skills-->
<section class="page-section" id="skills">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">skills</h2>
<h3 class="section-subheading text-muted">스킬</h3>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fas fa-circle fa-stack-2x text-primary"></i>
<i class="fas fa-file-code fa-stack-1x fa-inverse"></i>
</span>
<h4 class="my-3">Language</h4>
<p class="text-muted">JAVA, Python, C언어, R, PHP</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fas fa-circle fa-stack-2x text-primary"></i>
<i class="fas fa-laptop fa-stack-1x fa-inverse"></i>
</span>
<h4 class="my-3">Web Skill</h4>
<p class="text-muted">HTML, JavaScript, CSS, Django, Spring Boot</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fas fa-circle fa-stack-2x text-primary"></i>
<i class="fas fa-robot fa-stack-1x fa-inverse"></i>
</span>
<h4 class="my-3">AI Skill</h4>
<p class="text-muted">Pandas, Tensorflow, Keras, Pytorch</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fas fa-circle fa-stack-2x text-primary"></i>
<i class="fas fa-lock fa-stack-1x fa-inverse"></i>
</span>
<h4 class="my-3">Ect</h4>
<p class="text-muted">MySQL(Maria DB), Git, 아두이노, 안드로이드 스튜디오</p>
</div>
</div>
</div>
</section>
<!-- projects Grid-->
<section class="page-section bg-light" id="projects">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">projects</h2>
<h3 class="section-subheading text-muted">프로젝트</h3>
</div>
<div class="row">
<div class="col-lg-4 col-sm-6 mb-4">
<div class="projects-item">
<a class="projects-link" data-toggle="modal" href="#projectsModal1">
<div class="projects-hover">
<div class="projects-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/projects/01-thumbnail.jpg" alt="" />
</a>
<div class="projects-caption">
<div class="projects-caption-heading">Deep Colorization</div>
<div class="projects-caption-subheading text-muted">사진 필터 제거 및 채색 인공지능 사이트</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4 mb-sm-0">
<div class="projects-item">
<a class="projects-link" data-toggle="modal" href="#projectsModal2">
<div class="projects-hover">
<div class="projects-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/projects/02-thumbnail.jpg" alt="" />
</a>
<div class="projects-caption">
<div class="projects-caption-heading">Pic-masterpiece</div>
<div class="projects-caption-subheading text-muted">명화의 색감을 사진에 넣어주는 인공지능 사이트</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="projects-item">
<a class="projects-link" data-toggle="modal" href="#projectsModal3">
<div class="projects-hover">
<div class="projects-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/projects/03-thumbnail.jpg" alt="" />
</a>
<div class="projects-caption">
<div class="projects-caption-heading">Font Find</div>
<div class="projects-caption-subheading text-muted">폰트를 찾아주는 인공지능 사이트</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="projects-item">
<a class="projects-link" data-toggle="modal" href="#projectsModal4">
<div class="projects-hover">
<div class="projects-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/projects/04-thumbnail.jpg" alt="" />
</a>
<div class="projects-caption">
<div class="projects-caption-heading">Let it Zoom</div>
<div class="projects-caption-subheading text-muted">확대된 사진 맞추기 게임</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4 mb-lg-0">
<div class="projects-item">
<a class="projects-link" data-toggle="modal" href="#projectsModal5">
<div class="projects-hover">
<div class="projects-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/projects/05-thumbnail.jpg" alt="" />
</a>
<div class="projects-caption">
<div class="projects-caption-heading">공연보러갈래?</div>
<div class="projects-caption-subheading text-muted">연극, 뮤지컬 정보를 모아둔 공연 정보 커뮤니티</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4 mb-sm-0">
<div class="projects-item">
<a class="projects-link" data-toggle="modal" href="#projectsModal6">
<div class="projects-hover">
<div class="projects-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/projects/06-thumbnail.jpg" alt="" />
</a>
<div class="projects-caption">
<div class="projects-caption-heading">쑥쑥이</div>
<div class="projects-caption-subheading text-muted">센서를 통해 기록되는 식물 일기 어플리케이션</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact-->
<section class="page-section" id="contact">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Contact</h2>
<p class="text-contact">
<i class="far fa-envelope-open"></i>
<p class="text-contact">
<i class="fas fa-mobile-alt"></i>
010-2412-1631</p>
<a class="text-contact" href="https://github.com/dico1631" target="_blank">
<i class="fab fa-github"></i>
dico1631</a>
</div>
</div>
</section>
<!-- Footer-->
<footer class="footer py-4">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-4 text-lg-left">Copyright © Koh MinJung 2020</div>
<!-- <div class="col-lg-4 my-3 my-lg-0">
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-linkedin-in"></i></a>
</div> -->
</div>
</div>
</footer>
<!-- projects Modals-->
<!-- Modal 1-->
<div class="projects-modal modal fade" id="projectsModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Deep Colorization</h2>
<p class="item-intro text-muted">CNN과 U-Net을 이용한 사진 필터 제거 및 채색 인공지능 사이트</p>
<img class="img-fluid d-block mx-auto" src="assets/img/projects/01-full.jpg" alt="" />
<p>
옛날 사진을 열어봤는데 필터가 너무 심한가요? <br>
필터를 지우고 싶은데 포토샵은 너무 어려운가요? <br>
그렇다면 Deep Colorization을 통해 추억에 최신 감성을 더해 복원해보세요! <br><br>
Django를 이용하여 사진 복원 및 채색 사이트를 구축하였습니다.
기능은 총 2가지로 첫째는 필터가 있는 사진을 업로드해 필터를 지우고, 사진을 저장할 수 있습니다.
두 번째는 필터가 제거된 사진 혹은 본인이 소지한 사진을 업로드한 다음 원하는 위치에 원하는 색의 점을 찍으면 해당 위치에 지정 색감을 입혀줍니다.
CNN을 통해 인스타그램의 15종 사진 필터 학습시켜 사진 필터 제거 모델을 구축했으며, U-Net을 통해 사용자 input에 따라 채색이 된 사진을 생성하는 모델을 만들었습니다.
</p>
<ul class="list-inline">
<li>프로젝트 기간: 2020.04.20 - 2020.06.19</li>
<li>웹 구축: Django (Python, HTML, CSS, JavaScript)</li>
<li>AI 모델: CNN(필터 제거 모델), U-Net(채색 모델)</li>
<li>AI 기술: Pytorch</li>
<li>github: <a href="https://github.com/dico1631/DeepColorization" target="_blank">DeepColorization</a></li>
</ul>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fas fa-times mr-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 2-->
<div class="projects-modal modal fade" id="projectsModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Pic-masterpiece</h2>
<p class="item-intro text-muted">VGG를 이용해 명화의 색감을 사진에 넣어주는 인공지능 사이트</p>
<img class="img-fluid d-block mx-auto" src="assets/img/projects/02-full.jpg" alt="" />
<p>
고흐가 그린 내 얼굴, 피카소가 그린 풍경화<br>
명화의 느낌을 내 사진 속으로!<br>
Pic-masterpiece가 나만의 독특한 사진을 만들어 드립니다.<br><br>
Django를 이용해 웹 사이트를 구현했습니다.
사용자는 바꾸고 싶은 사진을 업로드하고, 제시된 명화 그림 중 마음에 드는 색감의 명화를 선택합니다.
VGG 모델을 통해 사용자 사진의 윤곽과 명화의 색을 특징추출 한 다음, noise 사진을 변화시키며 새로운 이미지를 만들었습니다.
content loss(사용자 사진과 생성 이미지 사이의 loss)와 style loss(명화와 생성 이미지 사이의 loss)의 합인 total loss를 loss로 사용했습니다.
</p>
<ul class="list-inline">
<li>프로젝트 기간: 2020.05.14 - 2020.05.19</li>
<li>웹 구축: Django (Python, HTML, CSS, JavaScript)</li>
<li>AI 모델: VGG</li>
<li>AI 기술: keras</li>
<li>github: <a href="https://github.com/dico1631/Pic-masterpiece" target="_blank">Pic-masterpiece</a></li>
</ul>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fas fa-times mr-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 3-->
<div class="projects-modal modal fade" id="projectsModal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Font Find</h2>
<p class="item-intro text-muted">CNN을 이용해 사진 속 한글 폰트를 찾아주는 사이트</p>
<img class="img-fluid d-block mx-auto" src="assets/img/projects/03-full.jpg" alt="" />
<p>
일상 속에서 마음에 드는 폰트를 발견하셨나요?<br>
사진을 찍어주세요!<br>
Font Find가 어떤 폰트인지 찾아드리겠습니다.<br><br>
Django를 이용해 웹 사이트를 구축했습니다.
사용자가 사진을 업로드하면 사진에서 Open API 'Imgur'를 통해 폰트 부분만 추출합니다.
추출된 폰트 사진을 Laplacian로 전처리 후 CNN을 통해 특징 추출 및 classification하여 어떤 폰트인지 찾아냅니다.
Dataset은 폰트 6개에 대해 각각 250개의 폰트 사진(총 1,500개 이미지)이 사용되었습니다.<br>
</p>
<ul class="list-inline">
<li>프로젝트 기간: 2020.04.27 - 2020.05.01</li>
<li>웹 구축: Django (Python, HTML, CSS, JavaScript)</li>
<li>AI 모델: CNN</li>
<li>AI 기술: keras</li>
<li>github: <a href="https://github.com/dico1631/Font_Find" target="_blank">Font_Find</a></li>
</ul>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fas fa-times mr-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 4-->
<div class="projects-modal modal fade" id="projectsModal4" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Let it Zoom</h2>
<p class="item-intro text-muted">Django를 이용한 사진 맞추기 게임</p>
<img class="img-fluid d-block mx-auto" src="assets/img/projects/04-full.jpg" alt="" />
<p>
이게 무슨 사진이지?<br>
점점 확대되는 사진을 맞춰보아요!<br>
Let It Zoom!<br><br>
Django를 이용해 웹 사이트를 구축했습니다.
사용자는 이름을 등록해 계정을 생성한 다음 게임을 진행합니다.
현재 음식과 동물, 2가지 주제의 게임이 구현되어 있으며 Game Over시 정답 확인 및 랭킹 확인이 가능합니다.
Python Crawing으로 정답 및 사진을 수집했으며, DB는 MySQL을 사용했습니다.<br>
</p>
<ul class="list-inline">
<li>프로젝트 기간: 2020.02.04 - 2020.02.11</li>
<li>웹 구축: Django (Python, HTML, CSS, JavaScript)</li>
<li>주 사용 기술: MySQL, Python Crawing, Pillow 모듈</li>
<li>github: <a href="https://github.com/dico1631/let_it_zoom" target="_blank">Let it Zoom</a></li>
</ul>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fas fa-times mr-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 5-->
<div class="projects-modal modal fade" id="projectsModal5" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">공연보러갈래?</h2>
<p class="item-intro text-muted">Spring Boot를 이용한 공연 정보 커뮤니티</p>
<img class="img-fluid d-block mx-auto" src="assets/img/projects/05-full.jpg" alt="" />
<p>
영화 정보는 쉽게 찾을 수 있는데,<br>
공연 정보는 한눈에 볼 수 없을까?<br>
사이트 '공연보러갈래?'가 한 번에 보여드립니다.<br><br>
Spring Boot를 이용해 웹 사이트를 구축했습니다.
연극과 뮤지컬 정보를 한눈에 보여주는 웹 사이트입니다.
공연은 장르별로 구분되어 있으며, Open API를 이용하여 공연 관련 유튜브까지 함께 볼 수 있습니다.
원하는 공연을 스크랩할 수 있으며, 인터파크 티켓 사이트와 연동되어 있어 예약도 쉽게 할 수 있도록 구현했습니다.<br>
</p>
<ul class="list-inline">
<li>프로젝트 기간: 2020.01.06 - 2020.01.10</li>
<li>웹 구축: Spring Boot (JAVA, HTML, CSS, JavaScript)</li>
<li>주 사용 기술: MySQL, JAVA Crawing</li>
<li>github: <a href="https://github.com/dico1631/Performance_site" target="_blank">공연보러갈래?</a></li>
</ul>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fas fa-times mr-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 6-->
<div class="projects-modal modal fade" id="projectsModal6" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">쑥쑥이</h2>
<p class="item-intro text-muted">아두이노 센서를 이용한 식물 일기 어플리케이션</p>
<img class="img-fluid d-block mx-auto" src="assets/img/projects/06-full.jpg" alt="" />
<p>
반려 식물을 키우고 계신가요?<br>
식물의 상태를 직접 확인하고 싶지 않으신가요?<br>
쑥쑥이가 알려드리겠습니다!<br><br>
아두이노를 통해 식물의 수분과 조도, 온도를 측정합니다.
측정 결과는 어플리케이션 '쑥쑥이'에 확인할 수 있으며, 아두이노의 LCD 화면에서도 바로 볼 수 있습니다.
신호등 모듈은 초록, 노랑, 빨강 3가지 색을 통해 현 상태의 위험 정도를 직관적으로 보여줍니다.
위험 정도의 기준은 DB에 저장된 식물 종별 필요 습도, 조도, 온도입니다.
또한 '쑥쑥이'를 통해 식물 다이어리 기록, 식물 검색 및 추천, 커뮤니티를 이용할 수 있습니다.<br>
</p>
<ul class="list-inline">
<li>프로젝트 기간: 2018.03.02 - 2018.06.21</li>
<li>서버: 10G 광아우토반 FullSSD (Cafe24 구매)</li>
<li>주 사용 기술: 안드로이드 스튜디오, 아두이노, PHP, MariaDB</li>
<li>아두이노 구성: 수분센서 2개, 조도센서, 온도센서, LCD 화면, 신호등 모듈 2개, wifi 모듈(esp8266)</li>
<li>github: <a href="https://github.com/dico1631/sooksook" target="_blank">쑥쑥이</a></li>
</ul>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fas fa-times mr-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<!-- Third party plugin JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!-- Contact form JS-->
<script src="assets/mail/jqBootstrapValidation.js"></script>
<script src="assets/mail/contact_me.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>