-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
341 lines (221 loc) · 16.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ynokim</title>
<link rel="stylesheet" href="assets/css/tailwind.css">
<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=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.28.0/feather.min.js" integrity="sha512-7x3zila4t2qNycrtZ31HO0NnJr8kg2VI67YLoRSyi9hGhRN66FHYWr7Axa9Y1J9tGYHVBPqIjSE1ogHrJTz51g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body class="bg-gray-100">
<section class="py-10 md:py-16">
<div class="container max-w-screen-xl mx-auto px-4">
<nav class="flex items-center justify-between mb-40">
<!-- <img src="assets/image/navbar-logo.png" alt="Logo"> -->
<button class="px-7 py-3 md:px-9 md:py-4 bg-white font-medium md:font-semibold text-gray-700 text-md rounded-md hover:bg-gray-700 hover:text-white transition ease-linear duration-500">BLOG</button>
</nav>
<div class="text-center">
<div class="flex justify-center mb-16">
<img src="assets/image/MINT.png" alt="Image">
</div>
<h6 class="font-medium text-gray-600 text-lg md:text-2xl uppercase mb-8">I AM : Hoyeon Kim</h6>
<h1 class="font-normal text-gray-900 text-4xl md:text-7xl leading-none mb-8">ynokim, c_type</h1>
<p class="font-normal text-gray-600 text-md md:text-xl mb-16">국립목포대학교 정보보호학과에 재학중인 김호연입니다 :)</p>
<!--- <a href="#" class="px-7 py-3 md:px-9 md:py-4 font-medium md:font-semibold bg-gray-700 text-gray-50 text-sm rounded-md hover:bg-gray-50 hover:text-gray-700 transition ease-linear duration-500">Hire me</a> --->
</div>
</div>
</section>
<section class="py-10 md:py-16">
<div class="container max-w-screen-xl mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-50 px-8 py-10 rounded-md">
<div class="w-20 py-6 flex justify-center bg-gray-100 rounded-md mb-4">
<i data-feather="activity"></i>
</div>
<h4 class="font-medium text-gray-700 text-lg mb-4">주요 분야</h4>
<p class="font-normal text-gray-500 text-md">웹 상의 취약점 분석에 대한 관심이 많습니다. <br> 이외에도 Backend 개발 및 CERT, <br> 침해사고대응 분야도 학습하고 있습니다. </p>
</div>
<div class="bg-gray-50 px-8 py-10 rounded-md">
<div class="w-20 py-6 flex justify-center bg-gray-100 rounded-md mb-4">
<i data-feather="codesandbox"></i>
</div>
<h4 class="font-medium text-gray-700 text-lg mb-4">관심 분야</h4>
<p class="font-normal text-gray-500 text-md"> 사진 촬영, 콘솔 게임 등을 즐겨 합니다. <br> 다양한 장르의 음악을 듣는 것도 좋아합니다. <br> </p>
</div>
<div class="bg-gray-50 px-8 py-10 rounded-md">
<div class="w-20 py-6 flex justify-center bg-gray-100 rounded-md mb-4">
<i data-feather="globe"></i>
</div>
<h4 class="font-medium text-gray-700 text-lg mb-4">Language</h4>
<p class="font-normal text-gray-500 text-md">한국어(Korean) - Native <br> English - Middle <br> 日本語(Japanese) - Beginner</p>
</div>
</div>
</div>
</section>
<section class="py-10 md:py-16">
<div class="container max-w-screen-xl mx-auto px-4">
<div class="text-center">
<h1 class="font-bold text-gray-400 text-3xl md:text-6xl lg:text-7xl mb-20 md:mb-32 lg:mb-24">백문이 불여일타(打).</h1>
<p class="font-medium text-gray-700 text-xs md:text-base">이론적인 부분을 잘 숙지하는 것도 매우 중요하지만, <br> <b>직접 분석을 진행하며 부딛치고 행동하는 것</b>이 없으면 성장할 수 없다고 생각합니다. <br> 이러한 가치관에 따라 저는 무언가를 배울 때나, 직접 무언가를 만들어 볼 때 다방면으로 문제를 이해하고 <br> 직접 설계하고 만들어보며, 만들어진 것을 다시 분석해 취약한 부분을 찾고 이를 직접 해결합니다. <br> 이러한 일련의 과정들을 반복하며 저는 새로운 것들을 배우고, 알고 있었던 내용들을 보완하면서 성장할 수 있었습니다. </p>
</div>
</div>
</section>
<!-- <section class="py-10 md:py-16">
<div class="container max-w-screen-xl mx-auto px-4">
<h1 class="font-medium text-gray-700 text-3xl md:text-4xl mb-5">Education</h1>
<p class="font-normal text-gray-500 text-xs md:text-base mb-20">Below is a summary of the places I studied</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-50 px-8 py-10 rounded-md">
<h4 class="font-medium text-gray-700 text-lg mb-4">2021 ~ </h4>
<p class="font-normal text-gray-500 text-md mb-4">정보보호학과 학부생 <br> <br> <br> </p>
<div class="relative">
<h6 class="font-semibold text-gray-500 text-md relative z-10">국립목포대학교</h6>
<span class="w-20 h-1 bg-blue-200 absolute bottom-1 left-0 z-0"></span>
</div>
</div>
<div class="bg-gray-50 px-8 py-10 rounded-md">
<h4 class="font-medium text-gray-700 text-lg mb-4">2018 ~ 2020</h4>
<p class="font-normal text-gray-500 text-md mb-4">무안고등학교 졸업 <br> <br> <br> </p>
<div class="relative">
<h6 class="font-semibold text-gray-500 text-md relative z-10">See the place here</h6>
<span class="w-32 h-1 bg-blue-200 absolute bottom-1 left-0 z-0"></span>
</div>
</div>
<div class="bg-gray-50 px-8 py-10 rounded-md">
<h4 class="font-medium text-gray-700 text-lg mb-4">2015 – 2016</h4>
<p class="font-normal text-gray-500 text-md mb-4">Lorem ipsum dolor sit amet, consectetur <br> adipiscing elit, sed do eiusmod tempor <br> incididunt ut labore et dolore magna aliqua.</p>
<div class="relative">
<h6 class="font-semibold text-gray-500 text-md relative z-10">See the place here</h6>
<span class="w-32 h-1 bg-blue-200 absolute bottom-1 left-0 z-0"></span>
</div>
</div>
<div class="bg-gray-50 px-8 py-10 rounded-md">
<h4 class="font-medium text-gray-700 text-lg mb-4">2015 – 2016</h4>
<p class="font-normal text-gray-500 text-md mb-4">Lorem ipsum dolor sit amet, consectetur <br> adipiscing elit, sed do eiusmod tempor <br> incididunt ut labore et dolore magna aliqua.</p>
<div class="relative">
<h6 class="font-semibold text-gray-500 text-md relative z-10">See the place here</h6>
<span class="w-32 h-1 bg-blue-200 absolute bottom-1 left-0 z-0"></span>
</div>
</div>
<div class="bg-gray-50 px-8 py-10 rounded-md">
<h4 class="font-medium text-gray-700 text-lg mb-4">2015 – 2016</h4>
<p class="font-normal text-gray-500 text-md mb-4">Lorem ipsum dolor sit amet, consectetur <br> adipiscing elit, sed do eiusmod tempor <br> incididunt ut labore et dolore magna aliqua.</p>
<div class="relative">
<h6 class="font-semibold text-gray-500 text-md relative z-10">See the place here</h6>
<span class="w-32 h-1 bg-blue-200 absolute bottom-1 left-0 z-0"></span>
</div>
</div>
<div class="bg-gray-50 px-8 py-10 rounded-md">
<h4 class="font-medium text-gray-700 text-lg mb-4">2015 – 2016</h4>
<p class="font-normal text-gray-500 text-md mb-4">Lorem ipsum dolor sit amet, consectetur <br> adipiscing elit, sed do eiusmod tempor <br> incididunt ut labore et dolore magna aliqua.</p>
<div class="relative">
<h6 class="font-semibold text-gray-500 text-md relative z-10">See the place here</h6>
<span class="w-32 h-1 bg-blue-200 absolute bottom-1 left-0 z-0"></span>
</div>
</div>
</div>
</div>
</section>
-->
<section class="py-10 md:py-16">
<div class="container max-w-screen-xl mx-auto px-4">
<div class="flex flex-col lg:flex-row justify-between">
<div class="mb-10 lg:mb-0">
<h1 class="font-medium text-gray-700 text-3xl md:text-4xl mb-5">Education</h1>
<p class="font-normal text-gray-500 text-xs md:text-base"></p>
</div>
<div class="space-y-24">
<div class="flex space-x-6">
<h1 class="font-normal text-gray-700 text-3xl md:text-4xl">2021 ~ </h1>
<span class="w-20 h-0.5 bg-gray-300 mt-5"></span>
<div>
<h1 class="font-normal text-gray-700 text-3xl md:text-4xl mb-5">Mokpo National University</h1>
<p class="font-normal text-gray-500 text-sm md:text-base">국립목포대학교 정보보호학과에 재학중입니다.</p>
</div>
</div>
<div class="flex space-x-6">
<h1 class="font-normal text-gray-700 text-3xl md:text-4xl">2018 <br>~ 2020</h1>
<span class="w-20 h-0.5 bg-gray-300 mt-5"></span>
<div>
<h1 class="font-normal text-gray-700 text-3xl md:text-4xl mb-5">Muan HS</h1>
<p class="font-normal text-gray-500 text-sm md:text-base">무안고등학교를 졸업했습니다.</p>
</div>
</div>
<div class="flex space-x-6">
<h1 class="font-normal text-gray-700 text-3xl md:text-4xl">2017 <br>~ 2020</h1>
<span class="w-20 h-0.5 bg-gray-300 mt-5"></span>
<div>
<h1 class="font-normal text-gray-700 text-3xl md:text-4xl mb-5">Information Security <br>Gifted Edu. Center</h1>
<p class="font-normal text-gray-500 text-sm md:text-base">국가에서 시행한 정보보호영재교육에 참여했습니다. <br> 목포대학교에서 진행하였습니다.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-10 md:py-16">
<div class="container max-w-screen-xl mx-auto px-4">
<h1 class="font-medium text-gray-700 text-3xl md:text-4xl mb-5">Awards</h1>
<p class="font-normal text-gray-500 text-xs md:text-base mb-20"></p>
<div class="flex flex-col lg:flex-row justify-between">
<div class="space-y-8 md:space-y-16 mb-16 md:mb-0">
<h6 class="font-medium text-gray-400 text-base uppercase">Events</h6>
<p class="font-semibold text-gray-600 text-base">호남지역 정보보호 해커톤 <span class="font-normal text-gray-300">/ 광양</span></p>
<p class="font-semibold text-gray-600 text-base">목포대학교 정보보호 페스티벌 모의해킹 경진대회 <span class="font-normal text-gray-300">/ 무안</span></p>
</div>
<div class="space-y-8 md:space-y-16 mb-16 md:mb-0">
<h6 class="font-medium text-gray-400 text-base uppercase">Grades</h6>
<p class="font-normal text-gray-400 text-base">우수상(3rd)</p>
<p class="font-normal text-gray-400 text-base">금상(1st)</p>
</div>
<div class="space-y-8 md:space-y-16">
<h6 class="font-medium text-gray-400 text-base uppercase">Year</h6>
<p class="font-normal text-gray-400 text-base">2023</p>
<p class="font-normal text-gray-400 text-base">2021</p>
</div>
</div>
</div>
</section>
<section class="py-10 md:py-16">
<div class="container max-w-screen-xl mx-auto px-4">
<h1 class="font-medium text-gray-700 text-3xl md:text-4xl mb-5">Bio</h1>
<p class="font-normal text-gray-500 text-xs md:text-base mb-10 md:mb-20"></p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-50 px-8 py-10 rounded-md">
<p class="font-normal text-gray-500 text-md mb-4">2021 ~ <br>정규 스터디, 멘토링 <br> <br> </p>
<h6 class="font-semibold text-gray-500 text-md">SecuMaster <span class="font-medium text-gray-300 text-sm">- Mokpo National Univ.</span></h6>
</div>
<div class="bg-gray-50 px-8 py-10 rounded-md">
<p class="font-normal text-gray-500 text-md mb-4">2021 ~ <br>정기 성과 발표화, 외부 행사(INCOGNITO 등)<br> <br> </p>
<h6 class="font-semibold text-gray-500 text-md">Dropper Lab <span class="font-medium text-gray-300 text-sm" onclick="window.open('https://dropper.tech');" style="cursor:pointer;">- dropper.tech</span></h6>
</div>
<div class="bg-gray-50 px-8 py-10 rounded-md">
<p class="font-normal text-gray-500 text-md mb-4">2021 ~ <br> A CTF Player. <br> <br> </p>
<h6 class="font-semibold text-gray-500 text-md">Senko <span class="font-medium text-gray-300 text-sm">- Dropper Lab</span></h6>
</div>
</div>
</div>
</section>
<footer class="py-10 md:py-16 mb-20 md:mb-40 lg::mb-52">
<div class="container max-w-screen-xl mx-auto px-4">
<div class="text-center">
<h1 class="font-medium text-gray-700 text-4xl md:text-5xl mb-5">Contact Me!</h1>
<p class="font-normal text-gray-400 text-md md:text-lg mb-20"></p>
<div class="flex items-center justify-center space-x-8">
<a href="https://t.me/ynokim" target="_blank" class="w-16 h-16 flex items-center justify-center rounded-full hover:bg-gray-200 transition ease-in-out duration-500">
<i data-feather="send" class="text-gray-500 hover:text-gray-800 transition ease-in-out duration-500"></i>
</a>
<a href="mailto:ynokim07@gmail.com" class="w-16 h-16 flex items-center justify-center rounded-full hover:bg-gray-200 transition ease-in-out duration-500">
<i data-feather="at-sign" class="text-gray-500 hover:text-gray-700 transition ease-in-out duration-500"></i>
</a>
</div>
</div>
</div>
</footer>
<script>
feather.replace()
</script>
</body>
</html>