forked from congchu/web-porfolio
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
618 lines (566 loc) · 36.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>프론트엔드 개발자 노호준</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="css/open-iconic-bootstrap.min.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/ionicons.min.css">
<link rel="stylesheet" href="css/flaticon.css">
<link rel="stylesheet" href="css/icomoon.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
<!-- <nav class="navbar navbar-expand-lg navbar-dark ftco_navbar ftco-navbar-light site-navbar-target" id="ftco-navbar">
<div class="container">
<a class="navbar-brand" href="index.html"><span>N</span>ohHojun</a>
<button class="navbar-toggler js-fh5co-nav-toggle fh5co-nav-toggle" type="button" data-toggle="collapse"
data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="oi oi-menu"></span> Menu
</button>
<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="navbar-nav nav ml-auto">
<li class="nav-item"><a href="#home-section" class="nav-link"><span>Home</span></a></li>
<li class="nav-item"><a href="#about-section" class="nav-link"><span>About</span></a></li>
<li class="nav-item"><a href="#education-section" class="nav-link"><span>Education</span></a></li>
<li class="nav-item"><a href="#skills-section" class="nav-link"><span>Skills</span></a></li>
<li class="nav-item"><a href="#projects-section" class="nav-link"><span>Projects</span></a></li>
<li class="nav-item"><a href="#blog-section" class="nav-link"><span>My Blog</span></a></li>
<li class="nav-item"><a href="#contact-section" class="nav-link"><span>Contact</span></a></li>
</ul>
</div>
</div>
</nav> -->
<!-- <section class="hero-wrap js-fullheight">
<div class="overlay"></div>
<div class="container">
<div class="row no-gutters slider-text js-fullheight justify-content-center align-items-center">
<div class="col-lg-8 col-md-6 ftco-animate d-flex align-items-center">
<div class="text text-center">
<span class="subheading">Hello! I am</span>
<h1>노호준</h1>
<h2>I'm a
<span class="txt-rotate" data-period="500"
data-rotate='["프론트엔드 개발자"]'></span>
</h2>
</div>
</div>
</div>
</div>
</div>
<div class="mouse">
<a href="#" class="mouse-icon">
<div class="mouse-wheel"><span class="ion-ios-arrow-round-down"></span></div>
</a>
</div>
</section> -->
<section class="ftco-about img ftco-section ftco-no-pt ftco-no-pb mt-5" id="about-section" style="margin-left: 16rem">
<div class="container">
<div class="row justify-content-center d-flex no-gutters">
<div class="col-md-6 col-lg-6 d-flex">
<div class="img-about img d-flex align-items-stretch">
<div class="overlay"></div>
<div class="img d-flex align-self-stretch align-items-center"
style="background-image:url(images/about.jpg);">
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 pl-md-5 py-5">
<div class="row justify-content-center pb-3">
<div class="col-md-12 heading-section ftco-animate">
<h1 class="big">About</h1>
<h2 class="mb-4">About Me</h2>
<!-- <p>항상 노호준입니다.</p> -->
<ul class="about-info mt-4 px-md-0 px-2">
<li class="d-flex"><span>Name:</span> <a href="tel://01073513804">노호준</a></li>
<li class="d-flex"><span>Email:</span> <a href="mailto:[email protected]">[email protected]</a></li>
<li class="d-flex"><span>Phone: </span> <a href="tel://01073513804">010-7351-3804</a></li>
<li class="d-flex"><span>github:</span> <a href="https://github.com/nowaveosu">github.com/nowaveosu</a></li>
<li class="d-flex"><span>blog: </span> <a href="https://velog.io/@nowaveosu">velog.io/@nowaveosu</a></li>
</ul>
</div>
</div>
<div class="counter-wrap ftco-animate d-flex mt-md-3">
<div class="text">
<p><a target="_blank"
href="https://drive.google.com/file/d/1U_uaZ6CR2o81rLrX2CnmshCoE4-cBkQp/view?usp=sharing"
class="btn btn-primary py-3 px-3">이력서 다운받기</a></p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="ftco-section ftco-no-pb goto-here" id="resume-section">
<div class="container">
<div class="row justify-content-center">
<!-- <div class="col-md-3">
<nav id="navi">
<ul>
<li><a href="#page-1">Education</a></li>
<li><a href="#page-2">Skills</a></li>
<li><a href="#page-3">Evaluation</a></li>
<li><a href="#page-4">Experience</a></li>
<li><a href="#page-5">Projects</a></li>
</ul>
</nav>
</div> -->
<div class="col-md-9" id="education-section">
<div id="page-1" class="page one">
<h2 class="heading">Education</h2>
<div class="resume-wrap d-flex ftco-animate">
<div class="icon d-flex align-items-center justify-content-center">
<span class="flaticon-ideas"></span>
</div>
<div class="text pl-3">
<span class="date">2017-2023</span>
<h2>컴퓨터정보통신공학과 전공 </h2>
<span class="position">전남대학교</span>
<p>컴퓨터공학과 전공자로, 재학중 2번의 앱 서비스 개발 및 해커톤에 참여, 1회 수상<br>
4학년 학부연구생으로서 Python을 활용한 자동 채점 시스템 개발, 해당 시스템은 교수님께서 활용함 </p>
</div>
</div>
</div>
<!-- <div id="page-1.5" class="page one">
<h2 class="heading">evaluation</h2>
<div class="resume-wrap d-flex ftco-animate">
<div class="icon d-flex align-items-center justify-content-center">
<span class="flaticon-ideas"></span>
</div>
<div class="text pl-3">
<h2>자기 소개</h2>
<p>"호준님은 프론트 개발자로서 역할에 충실하고, <br>
4학년 학부연구생으로 Python을 사용한 수강생 프로그램 채점 코드를 제작하여 교수님께서 활용함 </p>
</div>
</div>
</div> -->
<div id="page-2" class="page two">
<h2 class="heading">Skills</h2>
<div class="row">
<div class="col-md-6 animate-box">
<div class="progress-wrap ftco-animate">
<h3>React</h3>
<div class="progress">
<div class="progress-bar color-1" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:90%">
<span>70%</span>
</div>
</div>
</div>
</div>
<div class="col-md-6 animate-box">
<div class="progress-wrap ftco-animate">
<h3>JavaScript</h3>
<div class="progress">
<div class="progress-bar color-2" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width:60%">
<span>60%</span>
</div>
</div>
</div>
</div>
<div class="col-md-6 animate-box">
<div class="progress-wrap ftco-animate">
<h3>TypeScript</h3>
<div class="progress">
<div class="progress-bar color-3" role="progressbar" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100" style="width:50%">
<span>50%</span>
</div>
</div>
</div>
</div>
<div class="col-md-6 animate-box">
<div class="progress-wrap ftco-animate">
<h3>HTML</h3>
<div class="progress">
<div class="progress-bar color-4" role="progressbar" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100" style="width:40%">
<span>40%</span>
</div>
</div>
</div>
</div>
<div class="col-md-6 animate-box">
<div class="progress-wrap ftco-animate">
<h3>Redux</h3>
<div class="progress">
<div class="progress-bar color-5" role="progressbar" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100" style="width:40%">
<span>40%</span>
</div>
</div>
</div>
</div>
<div class="col-md-6 animate-box">
<div class="progress-wrap ftco-animate">
<h3>Zustand</h3>
<div class="progress">
<div class="progress-bar color-6" role="progressbar" aria-valuenow="30"
aria-valuemin="0" aria-valuemax="100" style="width:30%">
<span>30%</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="page-3" class="page three">
<h2 class="heading">팀원 평가</h2>
<div class="resume-wrap d-flex ftco-animate">
<img src="./images/yeom.jpg" class="icon d-flex align-items-center justify-content-center">
<span class="flaticon-ideas"></span>
</img>
<div class="text pl-3">
<h2>[FE] 염도경</h2>
<span class="position">호준님은 팀원들의 의견을 조용히 듣다가 적절한 중재안을 잘 말해줍니다. 백앤드와 소통해야 할 때도 굉장히 능숙합니다.</span>
</div>
</div>
<div class="resume-wrap d-flex ftco-animate">
<img src="./images/joh.png" class="icon d-flex align-items-center justify-content-center">
<span class="flaticon-ideas"></span>
</img>
<div class="text pl-3">
<h2>[BE] 조만기</h2>
<span class="position">모르는 분야를 같이 고민해주는 팀원이고, 어색할 때 부드럽게 분위기를 풀어주는 사람이다. </span>
</div>
</div>
<div class="resume-wrap d-flex ftco-animate">
<img src="./images/kim.png" class="icon d-flex align-items-center justify-content-center">
<span class="flaticon-ideas"></span>
</img>
<div class="text pl-3">
<h2>[FE] 김성수</h2>
<span class="position">호준님은 코딩 능력이 뛰어나지만, 우쭐대지 않고 팀원을 존중한다<br> 소통시에 상대방의 의견을 수용하려 노력한다. 단, 의견이 많아지면 약간 어지러워 한다. </span>
</div>
</div>
</div>
<div id="page-4" class="page four">
<h2 class="heading">Experience</h2>
<div class="resume-wrap d-flex ftco-animate">
<div class="icon d-flex align-items-center justify-content-center">
<span class="flaticon-ideas"></span>
</div>
<div class="text pl-3">
<span class="date">2022.12</span>
<h2>코드스테이츠 프론트엔드 개발자 부트캠프 수강</h2>
<p>Javascript, HTML, CSS, React, Typescript, 웹개발 기초 수강</p>
</div>
</div>
<div class="resume-wrap d-flex ftco-animate">
<div class="icon d-flex align-items-center justify-content-center">
<span class="flaticon-ideas"></span>
</div>
<div class="text pl-3">
<span class="date">2022.04</span>
<div class="d-flex">
<h2>김영철교수님 연구실 TA 참여</h2>
<div> <a class="btn btn-outline-secondary" target="_blank"
class="btn btn-outline-secondary"
href="https://github.com/nowaveosu/student_score_calculator">Github</a>
</div>
</div>
<div><p>인공지능 수업의 학부연구생으로 매주 연구실 세미나 참석</p></div>
<div><p>Python을 사용한 과제 그래프 판별 코드 제작</p></div>
</div>
</div>
<div class="resume-wrap d-flex ftco-animate">
<div class="icon d-flex align-items-center justify-content-center">
<span class="flaticon-ideas"></span>
</div>
<div class="text pl-3">
<span class="date">2021.09</span>
<h2>전남대 이노베이션 해커톤 특별상 수상</h2>
<div><p>flutter을 사용한 프론트엔드 개발 및 Google Map API 연동</p></div>
</div>
</div>
</div>
<div id="page-5" class="page five">
<h2 id="projects-section" class="heading">Projects</h2>
<div class="resume-wrap d-flex ftco-animate">
<div class="icon d-flex align-items-center justify-content-center">
<span class="flaticon-ideas"></span>
</div>
<div class="text pl-3">
<span class="date">2023.07</span>
<div class="d-flex">
<h2>[hyper-tictactoe] 독특한 룰을 여러개 적용한 1인개발 온라인 매칭 틱택토게임</h2>
<div> <a class="btn btn-outline-secondary" target="_blank"
class="btn btn-outline-secondary"
href="https://github.com/nowaveosu/hyper-tictactoe">Github</a> <a
class="btn btn-outline-secondary" target="_blank"
href="https://www.hyper-tictactoe.com/">Link</a>
</div>
</div>
<div> <b class="text-dark">기술 스택 : </b>Next.js, TypeScript, Tailwind CSS, Socket.io, Node.js
</div>
<div> <b class="text-dark">담당 기능 : </b> 로고, 반응형 디자인, 게임 룰 개발, 실시간 채팅 및 게임의 프론트엔드, 백엔드 구현 <br />
디자인, 개발, 배포 모든 단계를 독자적으로 진행했음</div> <br>
<span class="position">시연영상 📼</span> <br>
<video width="800" controls src="./images/matching.mp4"></video width="800"> <br>
<span class="position"> 사용자가 몇명있는지 확인할 수 있는 Room 구현, 대기화면 후 두명이 모두 접속하면 가위바위보로 선공을 정한 후 게임에 참가됨.</span> <br><br><br>
<video width="800" controls src="./images/game.mp4"></video width="800"> <br>
<span class="position"> Queue 자료구조를 사용한 가장 오래된 수가 사라지는 룰 + 시간제한을 둔 4x4 온라인 틱택토 게임 구현 </span> <br><br><br>
<video width="800" controls src="./images/chat.mp4"></video width="800"> <br>
<span class="position"> Socket.io를 사용한 같은 Room의 참가자끼리 채팅기능 구현</span> <br><br>
</div>
</div>
<div class="resume-wrap d-flex ftco-animate">
<div class="icon d-flex align-items-center justify-content-center">
<span class="flaticon-ideas"></span>
</div>
<div class="text pl-3">
<span class="date">2023.07</span>
<div class="d-flex">
<h2>[펫칭] 펫시터와 반려동물 주인 매칭 웹 서비스</h2>
<div> <a class="btn btn-outline-secondary" target="_blank"
class="btn btn-outline-secondary"
href="https://github.com/Petching/Petching">Github</a> <a
class="btn btn-outline-secondary" target="_blank"
href="https://petching.net/">Link</a>
</div>
</div>
<div> <b class="text-dark">기술 스택 : </b>React, TypeScript, Zustand, tailwind-CSS
</div>
<div> <b class="text-dark">담당 기능 : </b> Tailwind CSS를 활용한 돌봄리스트 페이지 및 글작성 페이지의 반응형 디자인 구현<br />
게시글 CRUD를 구현, 카카오 주소 API를 이용한 검색 기능 구현</div> <br>
<span class="position">시연영상 📼</span> <br>
<video width="800" controls src="./images/search.mp4"></video width="800"> <br>
<span class="position"> 지역, 날짜에 맞는 게시글 검색 </span> <br><br><br>
<video width="800" controls src="./images/write_1.mp4"></video width="800"> <br>
<span class="position"> 게시글 작성 </span> <br><br><br>
<video width="800" controls src="./images/delete_1.mp4"></video width="800"> <br>
<span class="position"> 게시글 수정, 삭제 </span> <br><br>
</div>
</div>
<div class="resume-wrap d-flex ftco-animate">
<div class="icon d-flex align-items-center justify-content-center">
<span class="flaticon-ideas"></span>
</div>
<div class="text pl-3">
<span class="date">2023.05</span>
<div class="d-flex">
<h2>[도와조약] 사용자 알러지 기반 알약 추천 웹 서비스</h2>
<div> <a class="btn btn-outline-secondary" target="_blank"
class="btn btn-outline-secondary"
href="https://github.com/codestates-seb/seb43_main_009">Github</a> <a
class="btn btn-outline-secondary" target="_blank"
href="https://dowajoyak.store">Link</a>
</div>
</div>
<div> <b class="text-dark">기술 스택 : </b>React, JavaScript, Redux, Styled-Component
</div>
<div> <b class="text-dark">담당 기능 : </b>헤더, 로그인, 회원가입, OAuth, 맞춤추천 페이지 개발 및 구글검색 API 사용과 디자인 구현</div> <br>
<span class="position">시연영상 📼</span> <br>
<video width="800" controls src="./images/OAuthLogin.mp4" ></video width="800"> <br>
<span class="position"> 로그인, OAuth로그인 </span> <br><br><br>
<video width="800" controls src="./images/Recommend_1.mp4"></video width="800"> <br>
<span class="position"> 맞춤추천 기능 </span> <br><br>
</div>
</div>
<div class="resume-wrap d-flex ftco-animate">
<div class="icon d-flex align-items-center justify-content-center">
<span class="flaticon-ideas"></span>
</div>
<div class="text pl-3">
<span class="date">2021.10</span>
<div class="d-flex">
<h2>[해커톤] 같은 경로를 이용하는 택시 이용자를 매칭하는 어플리케이션</h2>
<div> <a class="btn btn-outline-secondary" target="_blank"
class="btn btn-outline-secondary"
href="https://github.com/nowaveosu/gachiTarlae">Github</a>
</div>
</div>
<div> <b class="text-dark">기술 스택 : </b>flutter, firebase
</div>
<div> <b class="text-dark">담당 기능 : </b> flutter을 사용한 프론트엔드 개발 및 Google Map API 연동</div>
</div>
</div>
<div class="resume-wrap d-flex ftco-animate">
<div class="icon d-flex align-items-center justify-content-center">
<span class="flaticon-ideas"></span>
</div>
<div class="text pl-3">
<span class="date">2021.08</span>
<div class="d-flex">
<h2>[토이 프로젝트] 손에 맞는 마우스 추천 사이트</h2>
<div> <a
class="btn btn-outline-secondary" target="_blank"
href="https://nowaveosu.github.io/lifemouse/welcome.html">Link</a>
</div>
</div>
<div> <b class="text-dark">기술 스택 : </b>HTML
</div>
<div> <b class="text-dark">담당 기능 : </b> 대학교 3학년 때 HTML을 독학하며 정적 웹사이트 개발</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--
<section class="ftco-section" id="blog-section">
<div class="container">
<div class="row justify-content-center mb-5 pb-5">
<div class="col-md-7 heading-section text-center ftco-animate">
<h1 class="big big-2">Blog</h1>
<h2 class="mb-4">My Blog</h2>
<p>주로 React, JS, TS 개발 중 이슈에 대해 기록하고 있습니다.</p>
</div>
</div>
<div class="row d-flex">
<div class="col-md-4 d-flex ftco-animate">
<div class="blog-entry justify-content-end">
<a href="single.html" class="block-20" style="background-image: url('images/image_1.jpg');">
</a>
<div class="text mt-3 float-right d-block">
<h3 class="heading"><a href="https://velog.io/@nowaveosu/React-%EC%83%81%ED%83%9C-%EB%81%8C%EC%96%B4%EC%98%AC%EB%A6%AC%EA%B8%B0">[React] 상태 끌어올리기</a>
</h3>
<div class="d-flex align-items-center mb-3 meta">
<p class="mb-0">
<span class="mr-2">Feb. 2, 2023</span>
<a href="#" class="meta-chat"><span class="icon-chat"></span></a>
</p>
</div>
<p>react의 데이터 흐름에 대한 정리를 해두었습니다</p>
</div>
</div>
</div>
<div class="col-md-4 d-flex ftco-animate">
<div class="blog-entry justify-content-end">
<a href="single.html" class="block-20" style="background-image: url('images/image_2.jpg');">
</a>
<div class="text mt-3 float-right d-block">
<h3 class="heading"><a href="https://velog.io/@nowaveosu/Javascript-this">[Javascript] this</a>
</h3>
<div class="d-flex align-items-center mb-3 meta">
<p class="mb-0">
<span class="mr-2">Mar. 3, 2023</span>
<a href="#" class="meta-chat"><span class="icon-chat"></span></a>
</p>
</div>
<p>헷갈리기 쉬운 JavaScript의 this의 사용법을 정리해두었습니다</p>
</div>
</div>
</div>
<div class="col-md-4 d-flex ftco-animate">
<div class="blog-entry">
<a href="single.html" class="block-20" style="background-image: url('images/image_3.jpg');">
</a>
<div class="text mt-3 float-right d-block">
<h3 class="heading"><a href="https://velog.io/@nowaveosu/Git-kanban-flow">[Git] kanban, flow</a>
</h3>
<div class="d-flex align-items-center mb-3 meta">
<p class="mb-0">
<span class="mr-2">Apr. 12, 2023</span>
<a href="#" class="meta-chat"><span class="icon-chat"></span></a>
</p>
</div>
<p>프로젝트를 하며 자주 사용한 깃허브 명령어를 모아서 정리했습니다</p>
</div>
</div>
</div>
</div>
</div>
</section> -->
<section class="ftco-section contact-section ftco-no-pb" id="contact-section">
<div class="container">
<div class="row justify-content-center mb-5 pb-3">
<div class="col-md-7 heading-section text-center ftco-animate">
<h1 class="big big-2">Contact</h1>
<h2 class="mb-4">Contact Me</h2>
<p>회사와 함께 성장하는 개발자가 되겠습니다. 연락주세요.</p>
</div>
</div>
<div class="row d-flex contact-info mb-5">
<div class="col-md-6 col-lg-3 d-flex ftco-animate">
<div class="align-self-stretch box text-center p-4 shadow">
<div class="icon d-flex align-items-center justify-content-center">
<span class="icon-github"></span>
</div>
<div>
<h3 class="mb-4">Github</h3>
<p><a href="https://github.com/nowaveosu">github.com/nowaveosu</a></p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 d-flex ftco-animate">
<div class="align-self-stretch box text-center p-4 shadow">
<div class="icon d-flex align-items-center justify-content-center">
<span class="icon-phone2"></span>
</div>
<div>
<h3 class="mb-4">Contact Number</h3>
<p><a href="tel://01073513804">010 7351 3804</a></p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 d-flex ftco-animate">
<div class="align-self-stretch box text-center p-4 shadow">
<div class="icon d-flex align-items-center justify-content-center">
<span class="icon-paper-plane"></span>
</div>
<div>
<h3 class="mb-4">Email Address</h3>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 d-flex ftco-animate">
<div class="align-self-stretch box text-center p-4 shadow">
<div class="icon d-flex align-items-center justify-content-center">
<span class="icon-globe"></span>
</div>
<div>
<h3 class="mb-4">blog</h3>
<p><a href="https://velog.io/@nowaveosu">velog.io/@nowaveosu</a></p>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="ftco-footer ftco-section">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<p>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©
<script>document.write(new Date().getFullYear());</script> All rights reserved | This template
is made with <i class="icon-heart color-danger" aria-hidden="true"></i> by <a
href="https://colorlib.com" target="_blank">Colorlib</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</p>
</div>
</div>
</div>
</footer>
<!-- loader -->
<div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px">
<circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee" />
<circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10"
stroke="#F96D00" />
</svg></div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/jquery.animateNumber.min.js"></script>
<script src="js/scrollax.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>