-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
355 lines (311 loc) · 18.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
342
343
344
345
346
347
348
349
350
351
352
353
354
355
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Portfolio By Kimyujin</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- =======================================================
* Template Name: iPortfolio - v3.7.0
* Template URL: https://bootstrapmade.com/iportfolio-bootstrap-portfolio-websites-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
======================================================== -->
</head>
<body>
<!-- ======= Mobile nav toggle button ======= -->
<i class="bi bi-list mobile-nav-toggle d-xl-none"></i>
<!-- ======= Header ======= -->
<header id="header">
<div class="d-flex flex-column">
<div class="profile">
<img src="assets/img/profile-img.jpg" alt="" class="img-fluid rounded-circle">
<h1 class="text-light"><a href="index.html">Kim YuJin</a></h1>
<div class="social-links mt-3 text-center">
<a href="https://github.com/yujin981126" class="github" target="_blank"><i class="bx bxl-github"></i></a>
</div>
</div>
<nav id="navbar" class="nav-menu navbar">
<ul>
<li><a href="#hero" class="nav-link scrollto active"><i class="bx bx-home"></i> <span>Home</span></a></li>
<li><a href="#about" class="nav-link scrollto"><i class="bx bx-user"></i> <span>About</span></a></li>
<li><a href="#resume" class="nav-link scrollto"><i class="bx bx-file-blank"></i> <span>Resume</span></a></li>
<li><a href="#portfolio" class="nav-link scrollto"><i class="bx bx-book-content"></i> <span>Portfolio</span></a></li>
<li><a href="#contact" class="nav-link scrollto"><i class="bx bx-envelope"></i> <span>Contact</span></a></li>
</ul>
</nav>
<!-- .nav-menu -->
</div>
</header>
<!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex flex-column justify-content-center align-items-center">
<div class="hero-container" data-aos="fade-in">
<h1>Kim YuJin</h1>
<p>I'm <span class="typed" data-typed-items="Web Developer"></span></p>
</div>
</section>
<!-- End Hero -->
<main id="main">
<!-- ======= About Section ======= -->
<section id="about" class="about">
<div class="container">
<div class="section-title">
<h2>About</h2>
</div>
<div class="row">
<div class="col-lg-4" data-aos="fade-right">
<img src="assets/img/profile-img.jpg" class="img-fluid" alt="">
</div>
<div class="col-lg-8 pt-4 pt-lg-0 content" data-aos="fade-left">
<h3>Web Developer</h3>
<p class="fst-italic">
창의 융합적인 인재, 바로 저 김유진을 이르는 말입니다.
<br>코드를 짜는 것에 흥미를 느끼고 요구사항을 파악하고 기능을 구현하고 그것들을 사용하기 좋게 만드는 과정을 반복해왔습니다.
<br>차근차근 순서에 따라 개발의 시작부터 끝까지 확실하게 마무리하는 빈틈없는 인재라고 확신하여 말씀드릴 수 있습니다.
</p>
<div class="row">
<div class="col-lg-6">
<ul>
<li><i class="bi bi-chevron-right"></i> <strong>Birthday:</strong> <span>1998 / 11 / 26</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>Age:</strong> <span>25</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>Phone:</strong> <span>010-0000-0000</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>City:</strong> <span>Suwon, Gyeonggi-do</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>Email:</strong> <span>yujin6612@gmail.com</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End About Section -->
<!-- ======= Skills Section ======= -->
<section id="skills" class="skills section-bg">
<div class="container">
<div class="section-title">
<h2>Skills</h2>
</div>
<div class="row skills-content">
<div class="col-lg-6 text-center" data-aos="fade-up" data-aos-delay="100">
<img src="https://img.shields.io/badge/java-007396?style=for-the-badge&logo=java&logoColor=white">
<img src="https://img.shields.io/badge/spring-6DB33F?style=for-the-badge&logo=spring&logoColor=white">
<br><br>
<img src="https://img.shields.io/badge/html5-E34F26?style=for-the-badge&logo=html5&logoColor=white">
<img src="https://img.shields.io/badge/css-1572B6?style=for-the-badge&logo=css3&logoColor=white">
<img src="https://img.shields.io/badge/javascript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black">
<br><br>
<img src="https://img.shields.io/badge/bootstrap-7952B3?style=for-the-badge&logo=bootstrap&logoColor=white">
<img src="https://img.shields.io/badge/jquery-0769AD?style=for-the-badge&logo=jquery&logoColor=white">
<br><br>
<img src="https://img.shields.io/badge/mariaDB-003545?style=for-the-badge&logo=mariaDB&logoColor=white">
<img src="https://img.shields.io/badge/oracle-F80000?style=for-the-badge&logo=oracle&logoColor=white">
<br><br>
<img src="https://img.shields.io/badge/Python-3776AB?style=for-the-badge&logo=Python&logoColor=white">
<img src="https://img.shields.io/badge/C-A8B9CC?style=for-the-badge&logo=C&logoColor=black">
<img src="https://img.shields.io/badge/C++-00599C?style=for-the-badge&logo=C++&logoColor=black">
</div>
</div>
</div>
</section>
<!-- End Skills Section -->
<!-- ======= Resume Section ======= -->
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>Resume</h2>
</div>
<div class="row">
<div class="col-lg-12" data-aos="fade-up">
<h3 class="resume-title">Education</h3>
<div class="resume-item">
<h4>구디아카데미 교육 수료 예정</h4>
<h5>2022.02 - 2022.07</h5>
<p><em><b>[스마트혼합] 공공데이터 융합 자바/스프링 개발자 양성과정</b></em>
<br>- 디지털 융합 SW 개발 방법인 자바, 스프링 프레임워크, 디지털기기에 적합한 자바스크립트 중심의 웹 표준 및 접근성 기술을 학습하여 실무에 활용할 수 있는 SW 융합 전문가를 양성
</p>
</div>
<div class="resume-item">
<h4>안양대학교 </h4>
<h5>2017.03 - 2022.02</h5>
<p>
<em><b>디지털미디어디자인전공</b></em>
<br>- 디자인의 전반적인 영역과 다양한 콘텐츠 및 디지털 영상 문화를 총체적으로 이해하는 글로벌 디지털미디어 시대를 선도하고 역량 있는 디자이너 양성
<br><br>
<em><b>컴퓨터공학전공</b></em>
<br>- 정보화 사회를 능동적으로 선도함으로써 인류 공영에 기여하는 전문 인력의 양성을 목표로, 기본적인 컴퓨터 관련 기술에 대한 체계적인 학습과 급변하는 학문을 연구
</p>
</div>
<div class="resume-item">
<h4>경기모바일과학고등학교</h4>
<h5>2014.03 - 2017.01</h5>
<p><em><b>모바일그래픽디자인과</b></em>
<br>- 그래픽 디자인 콘텐츠를 제작하고 멀티미디어에 UI(사용자중심) 디자인을 수행할 수 있는 전문 디자이너 양성으로 목표로 시각 미디어 디자인 분야의 현장 적응 능력을 갖춘 직무 중심 인재 양성
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4" data-aos="fade-up">
<h3 class="resume-title">Certificate</h3>
<div class="resume-item">
<h4>SQLD 개발자</h4>
<h5>2022.06</h5>
<p><em>한국데이터산업진흥원</em></p>
</div>
<div class="resume-item">
<h4>정보처리기사(필기)</h4>
<h5>2022.05</h5>
<p><em>한국산업인력공단</em></p>
</div>
<div class="resume-item">
<h4>웹디자인기능사</h4>
<h5>2021.09</h5>
<p><em>한국산업인력공단</em></p>
</div>
<div class="resume-item">
<h4>운전면허 2종보통</h4>
<h5>2019.05</h5>
<p><em>경찰청(운전면허시험관리단)</em></p>
</div>
<div class="resume-item">
<h4>컴퓨터그래픽스운용기능사</h4>
<h5>2016.07</h5>
<p><em>한국산업인력공단</em></p>
</div>
</div>
<div class="col-lg-8" data-aos="fade-up">
<h3 class="resume-title">Experience</h3>
<div class="resume-item">
<h4>안양대학교 73대 외침 총학생회 홍보국장</h4>
<h5>2021.01 - 2021.12</h5>
<p>- 총학생회가 진행하는 사업, 교내 행사 등 학교 생활에 필요한 유익한 정보들을 빠르게 전달하는 홍보물 제작</p>
</div>
<div class="resume-item">
<h4>안양대학교 응원단 고구려 제 20대 응원단장</h4>
<h5>2018.12 - 2019.11</h5>
<p>- 교내외 행사를 통해 본교 학우들을 하나로 묶는 고리 역할을 맡고 학교 홍보로 교내의 위상을 높임
<br>- 공연 기획 및 응원단의 모든 일을 총괄</p>
</div>
</div>
</div>
</div>
</section>
<!-- End Resume Section -->
<!-- ======= Portfolio Section ======= -->
<section id="portfolio" class="portfolio section-bg">
<div class="container">
<div class="section-title">
<h2>Portfolio</h2>
<p>- 이미지를 누르면 이동합니다.</p>
</div>
<div class="row portfolio-container" data-aos="fade-up" data-aos-delay="100">
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<a href="portfolio-details-lms.html">
<img src="assets/img/portfolio/portfolio-0.jpg" class="img-fluid" alt="">
</a>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<a href="portfolio-details-mokroPub.html">
<img src="assets/img/portfolio/portfolio-1.jpg" class="img-fluid" alt="">
</a>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<a href="portfolio-details-cashbook.html">
<img src="assets/img/portfolio/portfolio-2.png" class="img-fluid" alt="">
</a>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<a href="portfolio-details-blog.html">
<img src="assets/img/portfolio/portfolio-3.png" class="img-fluid" alt="">
</a>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<a href="portfolio-details-brick-breaking.html">
<img src="assets/img/portfolio/portfolio-4.jpg" class="img-fluid " alt=" ">
</a>
</div>
</div>
</div>
</section>
<!-- End Portfolio Section -->
<!-- ======= Contact Section ======= -->
<section id="contact" class="contact">
<div class="container">
<div class="section-title">
<h2>Contact</h2>
</div>
<div class="row" data-aos="fade-in">
<div class="col-lg-12 d-flex align-items-stretch">
<div class="info">
<div class="address">
<i class="bi bi-geo-alt"></i>
<h4>Location:</h4>
<p>경기도 수원시 권선구</p>
</div>
<div class="email">
<i class="bi bi-envelope"></i>
<h4>Email:</h4>
<p>yujin6612@gmail.com</p>
</div>
<div class="phone">
<i class="bi bi-phone"></i>
<h4>Call:</h4>
<p>010-0000-0000</p>
</div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3175.2101264518146!2d126.99721901558223!3d37.266444049013984!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357b431dc95bf41f%3A0x403c6958afecff71!2z7IiY7JuQ7Jet!5e0!3m2!1sko!2sbg!4v1653954550782!5m2!1sko!2sbg "
frameborder="0 " style="border:0; width: 100%; height: 290px;" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</section>
<!-- End Contact Section -->
</main>
<!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="container">
<div class="copyright">
© Copyright <strong><span>iPortfolio</span></strong>
</div>
<div class="credits ">
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/iportfolio-bootstrap-portfolio-websites-template/ -->
Designed by <a href="https://bootstrapmade.com/ ">BootstrapMade</a>
</div>
</div>
</footer>
<!-- End Footer -->
<a href="# " class="back-to-top d-flex align-items-center justify-content-center "><i class="bi bi-arrow-up-short "></i></a>
<!-- Vendor JS Files -->
<script src="assets/vendor/purecounter/purecounter.js "></script>
<script src="assets/vendor/aos/aos.js "></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js "></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js "></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js "></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js "></script>
<script src="assets/vendor/typed.js/typed.min.js "></script>
<script src="assets/vendor/waypoints/noframework.waypoints.js "></script>
<script src="assets/vendor/php-email-form/validate.js "></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js "></script>
</body>
</html>