-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
447 lines (413 loc) · 27.9 KB
/
Copy pathindex.html
File metadata and controls
447 lines (413 loc) · 27.9 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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="클라우드 & 데브옵스 엔지니어 이제훈의 포트폴리오 웹사이트입니다. AWS, Kubernetes EKS, GitOps, Terraform 기반 고가용성 인프라 구축 및 장애 대응 전문 기술을 다룹니다.">
<title>이제훈 | Cloud & DevOps Engineer Portfolio</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<!-- FontAwesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Custom Style Sheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Background Gradient Grids -->
<div class="bg-glow bg-glow-1"></div>
<div class="bg-glow bg-glow-2"></div>
<!-- Navigation Bar -->
<nav id="navbar">
<div class="nav-container">
<a href="#" class="nav-logo">Unique<span>Onion</span></a>
<ul class="nav-links">
<li><a href="#about" id="nav-link-about">About</a></li>
<li><a href="#skills" id="nav-link-skills">Skills</a></li>
<li><a href="#projects" id="nav-link-projects">Projects</a></li>
<li><a href="#experience" id="nav-link-experience">Experience</a></li>
<li><a href="이제훈_클라우드엔지니어_지원서.pdf" class="btn-nav" target="_blank" id="nav-link-cv"><i class="fa-solid fa-file-pdf"></i> PDF 이력서</a></li>
</ul>
<div class="menu-toggle" id="mobile-menu">
<i class="fa-solid fa-bars"></i>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="hero">
<div class="hero-container">
<div class="hero-content">
<span class="hero-tagline">Cloud & DevOps Engineer</span>
<h1 class="hero-title">비즈니스의 중단 없는 가치를 지탱하는 <span>이제훈</span>입니다.</h1>
<p class="hero-subtitle">
AWS 클라우드 이중화 설계, Kubernetes(EKS) 및 GitOps(ArgoCD) 배포 자동화에 특화되어 있습니다. 솔루션 코드 분석부터 밑바닥 시스템 장애 대응(SOP 구축)까지, 끊임없이 트러블슈팅하며 인프라의 가용성을 극대화합니다.
</p>
<div class="hero-buttons">
<a href="#projects" class="btn-primary" id="hero-btn-projects"><i class="fa-solid fa-code"></i> 프로젝트 보기</a>
<a href="https://github.com/UniqueOnion" class="btn-secondary" target="_blank" id="hero-btn-github"><i class="fa-brands fa-github"></i> GitHub 방문</a>
</div>
</div>
</div>
</section>
<!-- About Me Section -->
<section id="about">
<div class="section-container">
<h2 class="section-title">About Me</h2>
<div class="about-grid">
<div class="about-card card-gradient">
<div class="profile-header">
<div class="profile-info">
<h3>이제훈 <span class="profile-birth">(UniqueOnion)</span></h3>
<p class="profile-p">Cloud & DevOps Engineer</p>
</div>
</div>
<ul class="profile-details">
<li><strong><i class="fa-solid fa-location-dot"></i> 활동 지역:</strong> 서울, 대한민국 (Seoul, KR)</li>
<li><strong><i class="fa-solid fa-envelope"></i> 이메일:</strong> dlwodns5841@naver.com</li>
<li><strong><i class="fa-solid fa-graduation-cap"></i> 학력:</strong> 융합소프트웨어 전공 (공학사)</li>
<li><strong><i class="fa-solid fa-award"></i> 자격 사항:</strong> 1종 보통 운전면허, ITQ 보유</li>
<li><strong><i class="fa-solid fa-shield-halved"></i> 병역 여부:</strong> 병역필 (육군 병장 만기전역)</li>
</ul>
</div>
<div class="about-text">
<h3>인프라 가디언(Guardian)으로서의 철학</h3>
<p>
솔루션 개발 R&D 연구소 및 현장 사업수행팀에서 <strong>AI CCTV 시스템 엔지니어</strong>로 근무하며, 장애가 발생했을 때 비즈니스가 겪는 손실을 가장 가까이서 체감했습니다. 인계 문서가 전무한 척박한 상태에서 솔루션의 코드(C++)와 망 아키텍처를 직접 분석해 **최초의 장애 대응 절차서(SOP)**를 작성하였고, 이를 통해 장애 복구 속도를 획기적으로 향상시켰습니다.
</p>
<p>
이후 클라우드 환경의 중요성을 느끼고 <strong>클라우드 데브옵스 과정</strong>을 이수하며 온프레미스의 유지보수 대응 능력을 AWS 고가용성 설계, Kubernetes EKS 클러스터 제어, 그리고 ArgoCD를 활용한 선언적 GitOps 배포 파이프라인으로 승화시켰습니다. 개발팀의 빌드 속도를 높이고, 인프라의 장애 복원력을 끌어올려 서비스 신뢰도를 극대화하는 데 헌신합니다.
</p>
</div>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills">
<div class="section-container">
<h2 class="section-title">Technical Skills</h2>
<div class="skills-grid">
<div class="skills-category">
<h3><i class="fa-solid fa-cloud-bolt"></i> Cloud Infrastructure</h3>
<div class="skill-tags">
<span class="tag">AWS VPC</span>
<span class="tag">Amazon EC2</span>
<span class="tag">AWS ALB / NLB</span>
<span class="tag">Route 53 (Failover)</span>
<span class="tag">CloudFront (CDN)</span>
<span class="tag">AWS IAM / IRSA</span>
<span class="tag">CloudWatch</span>
<span class="tag">Secrets Manager</span>
</div>
</div>
<div class="skills-category">
<h3><i class="fa-solid fa-cubes"></i> Kubernetes & DevOps</h3>
<div class="skill-tags">
<span class="tag">Amazon EKS</span>
<span class="tag">Docker</span>
<span class="tag">Kubernetes Gateway API</span>
<span class="tag">AWS Load Balancer Controller</span>
<span class="tag">ArgoCD (GitOps)</span>
<span class="tag">KEDA (Autoscale)</span>
<span class="tag">External Secrets Operator</span>
<span class="tag">GitHub Actions CI/CD</span>
</div>
</div>
<div class="skills-category">
<h3><i class="fa-solid fa-code"></i> OS & Scripting</h3>
<div class="skill-tags">
<span class="tag">Linux (Ubuntu/CentOS)</span>
<span class="tag">systemd</span>
<span class="tag">Shell Script</span>
<span class="tag">PowerShell</span>
<span class="tag">Java 17</span>
<span class="tag">Python</span>
<span class="tag">C++ (구조 분석)</span>
</div>
</div>
<div class="skills-category">
<h3><i class="fa-solid fa-database"></i> Database & Cache</h3>
<div class="skill-tags">
<span class="tag">MySQL (RDS Read Replica)</span>
<span class="tag">Redis / Valkey</span>
<span class="tag">Amazon DynamoDB</span>
<span class="tag">Spring Data JPA</span>
</div>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects">
<div class="section-container">
<h2 class="section-title">Featured Projects</h2>
<div class="projects-container">
<!-- Project 1 -->
<div class="project-card">
<div class="project-header">
<span class="project-num">Project 01</span>
<span class="project-date">2026.06 - 2026.07 (5팀)</span>
</div>
<div class="project-body">
<h3 class="project-name">대규모 트래픽 처리 공연 예매 시스템 (Ticket Booking System)</h3>
<p class="project-desc">
대량의 동시 접속자가 발생하는 공연 예매 시나리오에 특화된 고가용성 인프라 및 GitOps 무중단 배포 파이프라인 구축 프로젝트입니다.
</p>
<div class="project-tech-tags">
<span class="tech-tag">AWS EKS</span>
<span class="tech-tag">Terraform</span>
<span class="tech-tag">Gateway API</span>
<span class="tech-tag">ArgoCD</span>
<span class="tech-tag">CloudFront</span>
<span class="tech-tag">RDS (Replica)</span>
<span class="tech-tag">KEDA</span>
<span class="tech-tag">Redis</span>
<span class="tech-tag">PowerShell</span>
</div>
<details class="project-details-diagram">
<summary><i class="fa-solid fa-network-wired"></i> 인프라 아키텍처 다이어그램 (Mermaid 보기)</summary>
<div class="mermaid-container">
<div class="mermaid">
graph TD
User[💻 User Browser] -->|HTTPS| CF[🌐 CloudFront CDN]
CF -->|Cache Miss| ALB[🔌 AWS ALB]
ALB -->|Gateway API| TG[티켓 게이트웨이]
TG -->|HTTPRoute| TS[Spring Boot API]
TS -->|ZSET 토큰 검증| Redis[⚡ ElastiCache Redis]
TS -->|좌석 선점 SETNX| Redis
TS -->|비동기 예매 접수| SQS[📥 SQS FIFO Queue]
SQS -->|메시지 소비| BW[예매 처리 Worker]
BW -->|최종 적재| RDS_M[🗄️ RDS MySQL Master]
TS -->|읽기 쿼리| RDS_R[🗄️ RDS MySQL Replica]
PROM[☸️ Prometheus] -.->|모니터링| TS
PROM -.->|SQS 메트릭 수집| KEDA[☸️ KEDA Autoscale]
KEDA -.->|파드 스케일 아웃| BW
</div>
</div>
</details>
<div class="project-achievements">
<h4><i class="fa-solid fa-circle-check"></i> 주요 기여 및 트러블슈팅 사례</h4>
<ul>
<li>
<strong>Gateway API GatewayClass 호환성 장애 해결:</strong> AWS Load Balancer Controller(LBC) v3.1.0과 기존 구버전 Gateway API CRD 간의 매핑 충돌로 ALB가 자동 생성되지 않던 상태를 감지, CRD를 v1.5.0으로 일괄 갱신하고 LBC CRD를 재적용하여 GatewayClass를 활성화(Accepted=True)시키고 AWS ALB 연동을 보장함.
</li>
<li>
<strong>Readiness Probe 튜닝을 통한 파드 CrashLoopBackOff 복구:</strong> Spring Boot 서버의 무거운 초기 구동 속도(42초)에 비해 헬스체크 대기 시간(30초)이 짧아 무한 재시작이 반복되던 이슈를 분석, `initialDelaySeconds`를 60초로 상향 조정하여 파드 기동을 정상화함.
</li>
<li>
<strong>Grafana ALB 이름 중복 충돌 해결:</strong> 다중 팀 환경에서 동일 네임스페이스에 모니터링을 배포 시 ALB 이름 글자수 32자 제한에 따른 중복 충돌을 감지, Ingress Custom Name 어노테이션을 적용하여 팀 고유의 `t5-prod-grafana-alb`를 독립 구성함.
</li>
<li>
<strong>AWS RDS 이중화 및 전원 일괄 제어 스크립트 작성:</strong> MySQL Multi-AZ 및 Read-Replica를 도입하고 KMS 암호화를 Terraform으로 배포. Multi-AZ화로 정지 명령 충돌이 발생하는 RDS의 기동/정지 예외 상황을 반영해 `aws-power.ps1` PowerShell 스크립트를 작성, 리소스 제어비용 자동화를 완성함.
</li>
</ul>
</div>
</div>
</div>
<!-- Project 2 -->
<div class="project-card">
<div class="project-header">
<span class="project-num">Project 02</span>
<span class="project-date">2026.05 - 2026.06 (4팀)</span>
</div>
<div class="project-body">
<h3 class="project-name">TodoDiary 서비스 인프라 구축 및 EKS 배포</h3>
<p class="project-desc">
일기 및 일정 관리 Spring Boot 백엔드 애플리케이션을 도커라이징하고, AWS 클라우드 인프라를 Terraform으로 정의하여 EKS에 배포한 프로젝트입니다.
</p>
<div class="project-tech-tags">
<span class="tech-tag">Java 17</span>
<span class="tech-tag">Spring Boot</span>
<span class="tech-tag">Docker</span>
<span class="tech-tag">AWS ECR</span>
<span class="tech-tag">Terraform</span>
<span class="tech-tag">AWS EKS</span>
<span class="tech-tag">AWS S3</span>
</div>
<details class="project-details-diagram">
<summary><i class="fa-solid fa-network-wired"></i> 인프라 아키텍처 다이어그램 (Mermaid 보기)</summary>
<div class="mermaid-container">
<div class="mermaid">
graph TD
User[💻 User Browser] -->|Internet| IGW[🌍 Internet Gateway]
IGW --> ALB[🔌 AWS ALB]
ALB -->|EKS Worker Nodes| Pod[☸️ Spring Boot App]
Pod -->|DB Connection| RDS[🗄️ AWS RDS MySQL]
Pod -->|Image Upload| S3[📦 AWS S3 Bucket]
Developer[👨💻 Developer] -->|Code Push| GH[🐙 GitHub Repo]
GH -->|CI Workflow| GHA[⚙️ GitHub Actions]
GHA -->|Docker Push| ECR[📦 AWS ECR]
GHA -->|Manifest Deploy| EKS[☸️ EKS Cluster]
</div>
</div>
</details>
<div class="project-achievements">
<h4><i class="fa-solid fa-circle-check"></i> 주요 기여 및 트러블슈팅 사례</h4>
<ul>
<li>
<strong>Liveness Probe 실패 및 Actuator Security 충돌 원인 분석:</strong> EKS 파드가 기동 후 Liveness Probe 403 에러로 비정상 종료가 반복되던 원인을 규명. Spring Security 정책에서 `/actuator/health` 경로에 접근할 수 없었음을 파악하고, `SecurityConfig`에 `permitAll()`을 추가하고 Actuator의 exposure 설정을 활성화하여 배포 정상화 성공.
</li>
<li>
<strong>멀티 서버 환경 하 로컬 임시 파일 저장 취약성 발견 및 개선 제안:</strong> 다이어리 이미지 업로드 로직이 S3 대신 WAS 로컬 서버 경로(`/uploads`)에 직접 저장되는 구조적 취약점을 도출. 쿠버네티스 파드가 수시로 디스트로이되고 스케일인/아웃되는 가상화 환경에서는 영속성을 확보할 수 없음을 진단하고, 기존 개발된 `S3Service`와 연동하여 S3 버킷에 업로드되도록 개선 설계안을 수립해 공유함.
</li>
<li>
<strong>Dockerfile 멀티스테이지 빌드 구현:</strong> Maven 빌드 레이어와 OpenJDK Slim 런타임 레이어를 완전 격리하여 경량화 및 프로덕션 컨테이너 이미지 크기 절감 달성.
</li>
</ul>
</div>
</div>
</div>
<!-- Project 3 -->
<div class="project-card">
<div class="project-header">
<span class="project-num">Project 03</span>
<span class="project-date">2026.04 - 2026.05 (6팀)</span>
</div>
<div class="project-body">
<h3 class="project-name">DocRate - 병원 및 의사 리뷰 조회 서비스</h3>
<p class="project-desc">
전국의 병원/의사 조회 및 의료 서비스 평가 품질 리뷰를 남겨 건강한 의료 정보를 교환하는 백엔드 웹 애플리케이션 프로젝트입니다.
</p>
<div class="project-tech-tags">
<span class="tech-tag">Java</span>
<span class="tech-tag">Spring Boot</span>
<span class="tech-tag">Spring Security</span>
<span class="tech-tag">JPA</span>
<span class="tech-tag">MySQL</span>
<span class="tech-tag">Redis</span>
<span class="tech-tag">Docker</span>
<span class="tech-tag">Git</span>
</div>
<div class="project-achievements">
<h4><i class="fa-solid fa-circle-check"></i> 주요 기여 성과</h4>
<ul>
<li>
<strong>병원 도메인 전체 DDL/DML 및 REST API 설계:</strong> Hospital 엔티티 및 Repository 구현을 전담하여 병원 데이터베이스 관리 및 관계형 매핑 수행.
</li>
<li>
<strong>조회 성능 향상을 위한 데이터 가공 및 관계 최적화:</strong> 병원 목록 조회 시의 트래픽을 분산하기 위해 필수적으로 Pagination 처리를 구현하고, 병원 상세 페이지 조회 시 소속 의사(Doctor)의 병합 정보가 N+1 쿼리 등의 부하 없이 출력되도록 JPA 연관 관계 쿼리를 설계함.
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Experience Section -->
<section id="experience">
<div class="section-container">
<h2 class="section-title">Work Experience</h2>
<div class="timeline">
<!-- Experience 1 -->
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content card-gradient">
<div class="timeline-header">
<div>
<h3>(주)인피닉 <span class="badge">정규직</span></h3>
<p class="job-title">인공지능 사업본부 사업수행팀 사원</p>
</div>
<span class="job-period">2025.06.16 - 2026.01.31 (8개월, 퇴사)</span>
</div>
<p class="job-desc">
AI CCTV 현장 소프트웨어 설치 및 서버 구축, 백업 및 데이터 플러그인 QA 테스트를 수행했습니다.
</p>
<ul class="job-bullets">
<li><strong>장애 대응 체계 및 표준화 문서(SOP) 최초 구축:</strong> 인수인계 자료와 매뉴얼이 전혀 없는 부서 상황에서 솔루션의 아키텍처와 오류 코드를 분석하여 초기 운영 매뉴얼 및 엑셀 기반 장애 표준 대응 절차서(SOP)를 기획/제작함. 신입 및 동료 사원들의 문제 해결 능력을 비약적으로 단축시키고 부서 생산성 향상에 기여.</li>
<li><strong>기술적 협업 및 QA 지원:</strong> C++과 Python을 연동하여 ONNX 객체 탐지 모델을 구동하는 신규 플러그인 개발 프로젝트에 참여하여 파라미터 튜닝 및 QA 테스트를 담당.</li>
</ul>
</div>
</div>
<!-- Experience 2 -->
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content card-gradient">
<div class="timeline-header">
<div>
<h3>(주)비젼인 <span class="badge">정규직</span></h3>
<p class="job-title">기업부설 R&D 연구소 주임연구원</p>
</div>
<span class="job-period">2025.01 - 2025.06 (5개월)</span>
</div>
<p class="job-desc">
AI CCTV 솔루션 H/W 및 S/W 현장 구축, 유지보수, 예외 로그 분석 및 고객 기술 지원을 담당했습니다. (급여 미지급으로 인한 자진 퇴사)
</p>
<ul class="job-bullets">
<li><strong>독자적 시스템 분석 및 신속 트러블슈팅:</strong> 부족한 인계 자료를 극복하고 시스템 구조를 스스로 파악 및 문서화하여 3개월 만에 주요 시스템 이슈를 독립적으로 해결할 수 있는 역량 확보.</li>
<li><strong>C++ 프로그램 구조 분석 및 버그 리포팅:</strong> 프로그램 크래시나 에외 에러 발생 시 C++ 소스 코드 구조를 파악해 연구소에 정밀 리포팅을 제출하고, 버그 핫픽스에 기여.</li>
</ul>
</div>
</div>
<!-- Experience 3 -->
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content card-gradient">
<div class="timeline-header">
<div>
<h3>케이티씨에스 (KTcs) <span class="badge">계약직</span></h3>
<p class="job-title">컨택O&M 일반상담사</p>
</div>
<span class="job-period">2021.12 - 2022.01 (1개월)</span>
</div>
<p class="job-bullets">
소상공인 대상 IT 요금 및 서비스 기술 상담을 수행하며 연령층에 맞는 **눈높이 설명**을 적용해 상담 만족도를 향상시킴. 귀가 어두운 어르신 고객에게 용어를 풀어서 쉽게 설명하고, 빠른 피드백을 원하는 20대에게 정량적 혜택 수치를 제공해 신뢰 획득.
</p>
</div>
</div>
<!-- Experience 4 -->
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content card-gradient">
<div class="timeline-header">
<div>
<h3>(주)인사이드잡 <span class="badge">인턴</span></h3>
<p class="job-title">한국어촌어항공단 파견 사원</p>
</div>
<span class="job-period">2021.06 - 2021.08 (2.5개월)</span>
</div>
<p class="job-bullets">
공단 웹사이트 정기 콘텐츠 업데이트 및 오류 관리를 전담하였고, 공식 SNS 채널(인스타그램 등) 기획 및 타겟 데이터 분석을 통해 브랜드 팔로워 10% 증가 달성.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer Section -->
<footer id="footer">
<div class="footer-container">
<div class="footer-left">
<h3>이제훈 | Lee Je-hoon</h3>
<p>Cloud & DevOps Engineer</p>
<div class="footer-socials">
<a href="https://github.com/UniqueOnion" target="_blank"><i class="fa-brands fa-github"></i></a>
<a href="mailto:dlwodns5841@naver.com"><i class="fa-solid fa-envelope"></i></a>
</div>
</div>
<div class="footer-right">
<p>© 2026 Lee Je-hoon. All Rights Reserved.</p>
<p class="footer-credits">Powered by GitHub Pages</p>
</div>
</div>
</footer>
<!-- JavaScript for Mobile Menu & Scroll Effect -->
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({
startOnLoad: false,
theme: 'dark',
securityLevel: 'loose',
themeVariables: {
background: '#111827',
primaryColor: '#38bdf8',
primaryTextColor: '#f3f4f6',
lineColor: '#6366f1',
secondaryColor: '#1f2937',
tertiaryColor: '#111827'
}
});
</script>
<script src="script.js"></script>
</body>
</html>