forked from congchu/web-porfolio
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
562 lines (550 loc) · 33.8 KB
/
index.html
File metadata and controls
562 lines (550 loc) · 33.8 KB
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
<!DOCTYPE html>
<html lang="ko">
<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>H</span>anJaeKyeong</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="#education-section" class="nav-link"><span>Education</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="#contact-section" class="nav-link"><span>Contact</span></a></li>
</ul>
</div>
</div>
</nav>
<section class="hero-wrap js-fullheight" id="home-section">
<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">Hey! I am</span>
<h1>한재경</h1>
<h2>I'm a
<span class="txt-rotate" data-period="500"
data-rotate='["풀스택 개발자", "Backend Developer", "Frontend Developer"]'></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" >
<div class="container">
<div class="row 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/ProfileView.jfif);">
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 pl-md-5 py-5">
<div class="row justify-content-start pb-3">
<div class="col-md-12 heading-section ftco-animate">
<h1 class="big">About</h1>
<h2 class="mb-4">About Me</h2>
<p>더 편한 세상을 만들고 싶은 개발자 한재경입니다. 레거시 시스템의 현대화와 사용자 경험 개선에 관심이 많으며, eGovFramework 기반의 전통적인 웹 개발부터 Next.js와 Spring Boot를 활용한 최신 아키텍처까지 다양한 환경에서 실무 경험을 쌓아왔습니다.</p>
<ul class="about-info mt-4 px-md-0 px-2">
<li class="d-flex"><span>Name:</span> <span>한재경</span></li>
<li class="d-flex"><span>Date of birth:</span> <span>1997.04.30</span></li>
<li class="d-flex"><span>Address:</span> <span>경기도 부천시 원미구</span></li>
<li class="d-flex"><span>Email:</span> <span>juliet61008@gmail.com</span></li>
<li class="d-flex"><span>Phone: </span> <span>+82-10-3551-0430</span></li>
</ul>
</div>
</div>
<div class="counter-wrap ftco-animate d-flex mt-md-3">
<div class="text">
<p class="mb-4">
<span class="yearNumber" data-number="4">4</span>
<span>년차 개발자</span>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="ftco-section ftco-no-pb ftco-counter img" id="section-counter">
<div class="container-fluid px-md-5">
<div class="row d-md-flex align-items-center">
<div class="col-md d-flex justify-content-center counter-wrap ftco-animate">
<div class="block-18 shadow">
<div class="text">
<strong id="codeDate" class="number" data-number="1545">1545</strong>
<span>코딩한 일수</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="ftco-section ftco-no-pb goto-here" id="resume-section">
<div class="container">
<div class="row">
<div class="col-md-3">
<nav id="navi">
<ul>
<li><a href="#page-1">Education</a></li>
<li><a href="#page-2">Experience</a></li>
<li><a href="#page-3">Skills</a></li>
<li><a href="#page-4">Projects</a></li>
<li><a href="#page-5">Challenges</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">2016.03 - 2020.02</span>
<h2>의료정보과 졸업</h2>
<span class="position">안산대학교</span>
<p>GPA: 3.54/4.5 학점으로 졸업하였으며, 프로그래밍 기초, 정보 시스템 관리 등을 학습하며 개발자로서의 기초를 다졌습니다.</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">2020 - 2021</span>
<h2>Java 풀스택 개발자 양성과정 수료</h2>
<span class="position">구트아카데미</span>
<p>Java 기반 웹 개발 과정을 이수하며 Spring Framework, JSP, Servlet, Oracle 등 백엔드 개발의 기초를 다졌습니다. 실무 프로젝트를 통해 개발 프로세스 전반을 경험했습니다.</p>
</div>
</div>
</div>
<div id="page-2" class="page two">
<h2 class="heading">Work 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">2024.04 - 현재 (재직중)</span>
<h2>Full Stack Developer</h2>
<span class="position">라드씨엔에스</span>
<p><b class="text-dark">CJ CGV 차세대 시스템 구축 프로젝트</b><br/>
영화관 예매 시스템의 차세대 전환 프로젝트에 참여하여 인증 시스템과 사용자 페이지를 담당했습니다.</p>
<b class="text-primary">주요 기술 스택</b>
<p>Spring Boot, Next.js, TypeScript, React Query, MyBatis, Oracle</p>
<b class="text-primary">주요 업무 및 성과</b>
<div>
<div>• 인증 시스템: 일반/간편/생체/SSO/자동 로그인 등 다양한 인증 방식 구현</div>
<div>• 간편 로그인 리팩토링: 네이버/애플/카카오 간편 로그인 설정 전체 리팩토링으로 코드 일관성 개선</div>
<div>• 본인인증 커스텀 훅: PC(iframe popup), Mobile Web/App(redirect) 환경을 고려한 useNiceAuth 훅 개발</div>
<div>• Next.js 서버 컴포넌트 최적화: accessToken 갱신 로직 추가로 사용자 인증 경험 개선</div>
<div>• 쿼리 성능 개선: 프리퀀시 스탬프 계산 쿼리 최적화로 응답시간 30초~1분에서 3초 이내로 단축</div>
<div>• 트랜잭션 안정성: 결제 취소 시 수수료 결제와 환불 프로세스 간 정합성 보장 로직 구현</div>
<div>• 공통 컴포넌트: 결제 취소, 좋아요 등 재사용 가능한 컴포넌트 및 API 설계/구현</div>
<div>• 사용자 기능: 예약/결제 내역, 스마트 영수증, 내가 본 영화, 특별관 상세, 극장별 관람 가격, OMS 기능 개발</div>
</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.11 - 2024.02 (2년 4개월)</span>
<h2>Full Stack Developer</h2>
<span class="position">한경정보기술</span>
<p><b class="text-dark">공공구매종합정보망 고도화 및 유지보수</b><br/>
공공기관의 구매 시스템을 유지보수하고 고도화하며 결제/알림 시스템을 설계하고 구현했습니다.</p>
<b class="text-primary">주요 기술 스택</b>
<p>Spring Boot, eGovFramework, MyBatis, Oracle, JSP</p>
<b class="text-primary">주요 업무 및 성과</b>
<div>
<div>• 결제 시스템 리모델링: 직접생산 증명서 수수료 수납(KCP API) 및 환불 시스템 전면 개편</div>
<div>• 현금영수증 시스템: KCP API 연동을 통한 현금영수증 발행 및 취소 기능 개발</div>
<div>• 카카오톡 알림 시스템: 비즈엠 API를 활용한 카카오톡 발송/예약/예약취소 아키텍처 설계부터 E2E 개발</div>
<div>• 증명서 신청 시스템: 새로운 증명서 신청 프로세스 추가 구현</div>
<div>• 레거시 시스템 유지보수: eGovFramework 기반 시스템의 안정성 및 사용자 편의성 개선</div>
</div>
</div>
</div>
</div>
<div id="page-3" class="page three">
<h2 class="heading">Skills</h2>
<div class="row">
<div class="col-md-6 animate-box">
<div class="progress-wrap ftco-animate">
<h3>Spring Boot</h3>
<div class="progress">
<div class="progress-bar color-1" role="progressbar" aria-valuenow="100"
aria-valuemin="0" aria-valuemax="100" style="width:100%">
</div>
</div>
</div>
</div>
<div class="col-md-6 animate-box">
<div class="progress-wrap ftco-animate">
<h3>Next.js</h3>
<div class="progress">
<div class="progress-bar color-2" role="progressbar" aria-valuenow="100"
aria-valuemin="0" aria-valuemax="100" style="width:100%">
</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="100"
aria-valuemin="0" aria-valuemax="100" style="width:100%">
</div>
</div>
</div>
</div>
<div class="col-md-6 animate-box">
<div class="progress-wrap ftco-animate">
<h3>React Query</h3>
<div class="progress">
<div class="progress-bar color-4" role="progressbar" aria-valuenow="100"
aria-valuemin="0" aria-valuemax="100" style="width:100%">
</div>
</div>
</div>
</div>
<div class="col-md-6 animate-box">
<div class="progress-wrap ftco-animate">
<h3>MyBatis</h3>
<div class="progress">
<div class="progress-bar color-5" role="progressbar" aria-valuenow="100"
aria-valuemin="0" aria-valuemax="100" style="width:100%">
</div>
</div>
</div>
</div>
<div class="col-md-6 animate-box">
<div class="progress-wrap ftco-animate">
<h3>Oracle & PostgreSQL</h3>
<div class="progress">
<div class="progress-bar color-6" role="progressbar" aria-valuenow="100"
aria-valuemin="0" aria-valuemax="100" style="width:100%">
</div>
</div>
</div>
</div>
<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="100"
aria-valuemin="0" aria-valuemax="100" style="width:100%">
</div>
</div>
</div>
</div>
<div class="col-md-6 animate-box">
<div class="progress-wrap ftco-animate">
<h3>eGovFramework</h3>
<div class="progress">
<div class="progress-bar color-2" role="progressbar" aria-valuenow="100"
aria-valuemin="0" aria-valuemax="100" style="width:100%">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="page-4" class="page four">
<h2 id="projects-section" class="heading">Main 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">2024.04 - 현재</span>
<div class="d-flex">
<h2>CJ CGV 차세대 시스템 구축</h2>
</div>
<span class="position">라드씨엔에스</span>
<div><b class="text-dark">기술 스택: </b>Spring Boot, Next.js, TypeScript, React Query, MyBatis, Oracle</div>
<div><b class="text-dark">주요 기능: </b>인증 시스템, 예약/결제, 사용자 페이지, 결제 시스템</div>
<p>영화관 예매 시스템의 차세대 전환 프로젝트로, 다양한 인증 방식 구현 및 쿼리 최적화를 통해 사용자 경험을 크게 개선했습니다. 특히 프리퀀시 스탬프 계산 쿼리를 최적화하여 응답시간을 30초~1분에서 3초 이내로 단축시켰습니다.</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">2021.11 - 2024.02</span>
<h2>공공구매종합정보망 고도화</h2>
<span class="position">한경정보기술</span>
<div><b class="text-dark">기술 스택: </b>Spring Boot, eGovFramework, MyBatis, Oracle, JSP</div>
<div><b class="text-dark">주요 기능: </b>결제 시스템, 알림 시스템, 증명서 관리</div>
<p>공공기관의 구매 시스템 유지보수 및 고도화 프로젝트로, KCP API를 활용한 결제/환불 시스템과 비즈엠 API를 활용한 카카오톡 알림 시스템을 아키텍처 설계부터 구현까지 E2E로 개발했습니다.</p>
</div>
</div>
</div>
<div id="page-5" class="page five">
<h2 class="heading">Technical Challenges</h2>
<!-- Challenge 1: JWT 토큰 갱신 -->
<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="challenge-badge">CJ CGV 프로젝트</span>
<h2 class="challenge-title">Next.js SSR/CSR 환경에서의 JWT 토큰 자동 갱신</h2>
<div class="challenge-section">
<h4>문제 상황</h4>
<p>Next.js의 서버 컴포넌트(SSR)와 클라이언트 컴포넌트(CSR) 환경에서 JWT 토큰 자동 갱신 로직을 구현하는 과정에서 어려움을 겪었습니다.</p>
<ul>
<li>클라이언트에서 401 에러 시 토큰 갱신은 구현했지만, 서버 컴포넌트에서 쿠키를 직접 수정할 수 없는 문제</li>
<li>서버 컴포넌트는 클라이언트의 커스텀 fetch 함수를 사용할 수 없어 별도 갱신 로직 필요</li>
<li>페이지 이동 시 만료된 토큰으로 인한 인증 에러 발생</li>
</ul>
</div>
<div class="challenge-section">
<h4>해결 방법</h4>
<p><strong>1) 클라이언트 갱신 로직</strong></p>
<ul>
<li>커스텀 fetch 함수로 401 에러 감지 및 자동 토큰 갱신 API 호출</li>
<li>새 토큰을 HttpOnly Cookie에 이중 암호화하여 저장</li>
<li>Bearer 헤더에 새 토큰을 담아 원래 요청 순차적으로 재실행</li>
</ul>
<p><strong>2) 서버 컴포넌트 갱신 로직</strong></p>
<ul>
<li>middleware.ts 활용: 모든 페이지 진입 시 쿠키에서 토큰 추출 및 검증</li>
<li>토큰 만료 시간 체크(exp claim 확인)</li>
<li>만료 임박(5분 이내) 또는 만료 시 자동 갱신 API 호출</li>
<li>NextResponse.next()의 cookies.set()으로 새 토큰 쿠키 업데이트</li>
</ul>
</div>
<div class="challenge-section">
<h4>결과</h4>
<ul>
<li>클라이언트/서버 컴포넌트 모두에서 자동 토큰 갱신 구현</li>
<li>사용자가 갱신 과정을 인지하지 못하는 seamless한 UX 제공</li>
<li>토큰 만료로 인한 인증 에러 방지 및 안정적인 인증 상태 유지</li>
</ul>
</div>
</div>
</div>
<!-- Challenge 2: 쿼리 최적화 -->
<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="challenge-badge">CJ CGV 프로젝트</span>
<h2 class="challenge-title">프리퀀시 스탬프 쿼리 성능 최적화 (30초→3초)</h2>
<div class="challenge-section">
<h4>문제 상황</h4>
<p>프리퀀시 스탬프 계산 쿼리의 응답 시간이 30초~1분까지 소요되어 사용자 경험에 심각한 문제가 발생했습니다.</p>
<ul>
<li>복잡한 JOIN과 서브쿼리로 인한 성능 저하</li>
<li>대량의 데이터 처리 시 응답 지연</li>
<li>실시간 조회가 필요한 기능에서 사용 불가능한 수준</li>
</ul>
</div>
<div class="challenge-section">
<h4>해결 방법</h4>
<ul>
<li>메인 테이블 구조 변경 및 인덱스 재설계</li>
<li>불필요한 JOIN 조건 제거 및 최적화</li>
<li>실행 계획(Execution Plan) 분석을 통한 병목 지점 파악</li>
<li>서브쿼리를 CTE(Common Table Expression)로 변환</li>
</ul>
</div>
<div class="challenge-section">
<h4>결과</h4>
<ul>
<li>쿼리 응답 시간 30초~1분 → 3초 이내로 단축 (90% 개선)</li>
<li>실시간 조회 기능 정상 작동</li>
<li>사용자 만족도 크게 향상</li>
</ul>
</div>
</div>
</div>
<!-- Challenge 3: jChat 메시지 ID 최적화 -->
<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="challenge-badge">jChat 사이드 프로젝트</span>
<h2 class="challenge-title">메시지 ID 생성 성능 최적화 (50ms→1ms)</h2>
<div class="challenge-section">
<h4>문제 상황</h4>
<p>메시지 전송 시 DB Sequence 조회로 인한 지연이 발생하여 사용자 체감 속도가 느렸습니다.</p>
<ul>
<li>메시지 전송 → DB Sequence 조회(50-100ms) → 저장 → 응답</li>
<li>실시간 채팅 특성상 즉각적인 피드백 필요</li>
<li>메시지 생성 때마다 DB 조회로 인한 부하</li>
</ul>
</div>
<div class="challenge-section">
<h4>해결 방법</h4>
<p><strong>1) 낙관적 업데이트 (Next.js)</strong></p>
<ul>
<li>메시지 전송 즉시 임시 ID(UUID)로 UI에 먼저 표시</li>
<li>React Query의 Optimistic Update 활용</li>
<li>서버 응답 받으면 임시 ID → 실제 ID로 교체</li>
</ul>
<p><strong>2) Sequence 사전 조회 시스템 (Spring Boot)</strong></p>
<ul>
<li>메모리에 Sequence를 미리 조회해서 Queue에 보관</li>
<li>ConcurrentLinkedQueue로 Thread-Safe 구현</li>
<li>Queue 크기 20개 미만 시 비동기로 50개 조회, 0개 시 동기 조회</li>
<li>AtomicBoolean으로 조회 중복 방지</li>
</ul>
</div>
<div class="challenge-section">
<h4>결과</h4>
<ul>
<li>메시지 ID 생성 시간 50ms → 1ms 미만으로 단축</li>
<li>낙관적 업데이트로 사용자 체감 지연 완전 제거</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="ftco-section ftco-hireme img" style="background-image: url(images/bg_1.jpg)">
<div class="overlay"></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-7 ftco-animate text-center">
<h2>함께 성장할 <span>회사를 찾는 중</span>입니다</h2>
<p>더 편한 세상을 만들고 싶은 개발자 한재경입니다. 사용자 경험을 최우선으로 생각하며, 유지보수 가능하고 확장 가능한 시스템을 만들기 위해 노력합니다.</p>
<p class="mb-0"><a href="#contact-section" class="btn btn-primary py-3 px-5">연락주세요</a></p>
</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-map-signs"></span>
</div>
<div>
<h3 class="mb-4">Address</h3>
<p>경기도 부천시 원미구</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://01035510430">010-3551-0430</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:juliet61008@gmail.com">juliet61008@gmail.com</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">GitHub</h3>
<p><a href="https://github.com/juliet61008" target="_blank">github.com/juliet61008</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>
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>
</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/test.js"></script>
<script src="js/main.js"></script>
</body>
</html>