-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
304 lines (286 loc) · 14.4 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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link rel="stylesheet" href="css/common.css?v08241516">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/xeicon.min.css">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/index.js?v08241441"></script>
<script src="http://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>
<script src="https://use.fontawesome.com/50f7c135f7.js"></script>
<title>SungHoon's profile</title>
</head>
<body>
<!-- header -->
<header id="header">
<nav class="gnb">
<ul class="main clear">
<li class="menu left m1">main</li>
<li class="menu left m2">skills</li>
<li class="menu left m3">portfolio</li>
<li class="menu left m4">contact</li>
</ul>
</nav>
</header>
<div class="left mb"><span></span><span></span><span></span></div>
<nav class="mo_gnb">
<div class="mo_gnb_wrap">
<ul class="mo_menu_wrap">
<li class="mo_menu left mm1">main</li>
<li class="mo_menu left mm2">skills</li>
<li class="mo_menu left mm3">portfolio</li>
<li class="mo_menu left mm4">contact</li>
</ul>
<ul class="mo_tnb_wrap">
<li class="mo_tnb left ">
<a href="mailto:[email protected]">
<i class="fa fa-envelope-o" aria-hidden="true">
</i></a></li>
<li class="mo_tnb left ">
<a href="https://github.com/sh-oon/github_test.git">
<i class="xi-github" aria-hidden="true">
</i></a>
</li>
<li class="mo_tnb left ">
<a href="tel:010-9737-2483">
<i class="xi-mobile" aria-hidden="true" >
</i></a>
</li>
<li class="mo_tnb left ">
<a href="https://open.kakao.com/o/sFE3PPfb" target="new">
<i class="xi-kakaotalk" aria-hidden="true">
</i></a>
</li>
</ul>
</div>
</nav>
<!-- introduce -->
<section id="introduce">
<div class="typo">
<div class="t-text" data-text="안녕하세요 <br> 저는 신입 프론트앤드 개발자를 희망하는 <br> 정 성 훈 입니다."></div>
</div>
</section>
<!-- stacks -->
<section id="career">
<!-- history -->
<div class="history clear">
<h2>career</h2>
<div class="cc">
<ul>
<li class="cl">
<div class="cd">14.03 ~ 16.02</div>
<div class="hc">산곡고등학교 졸업</div>
</li>
<li class="cl">
<div class="cd">16.03 ~ 17.12</div>
<div class="hc">평택대학교 재학</div>
</li>
<li class="cl">
<div class="cd">18.04 ~ 19.12</div>
<div class="hc">육군 만기전역</div>
</li>
<li class="cl">
<div class="cd">20.03 ~ 20.12</div>
<div class="hc">평택대학교 중퇴</div>
</li>
<li class="cl">
<div class="cd">21.03 ~ 21.09</div>
<div class="hc">인천그린컴퓨터아카데미 프론트엔드(Front-end)실무 양성과정 수료(예정)</div>
</li>
</ul>
</div>
</div>
<!-- skills -->
<div class="skills clear">
<h2>stacks</h2>
<dl>
<dt>Skills</dt>
<dd>
<ul>
<li class="skill">
<h3>HTML5</h3>
<div class="progressArea">
<div class="progress">
<div class="bar html_bar">
<div class="label sh">0%</div>
</div>
</div>
</div>
</li>
<li class="skill">
<h3>CSS3</h3>
<div class="progressArea">
<div class="progress">
<div class="bar css_bar">
<div class="label sc">0%</div>
</div>
</div>
</div>
</li>
<li class="skill">
<h3>jQuery</h3>
<div class="progressArea">
<div class="progress">
<div class="bar jquery_bar">
<div class="label sq">0%</div>
</div>
</div>
</div>
</li>
<li class="skill">
<h3>Javascript</h3>
<div class="progressArea">
<div class="progress">
<div class="bar js_bar">
<div class="label ss">0%</div>
</div>
</div>
</div>
</li>
<li class="skill">
<h3>VUE.js</h3>
<div class="progressArea">
<div class="progress">
<div class="bar vue_bar">
<div class="label sv">0%</div>
</div>
</div>
</div>
</li>
</ul>
</dd>
</dl>
</div>
<div class="mo_skills clear">
<h2>stacks</h2>
<ul>
<li class="mo_skill left">html5</li>
<li class="mo_skill left">css3</li>
<li class="mo_skill left">jq</li>
<li class="mo_skill left">js</li>
<li class="mo_skill left">vue</li>
</ul>
</div>
</section>
<!-- portfolio -->
<section id="portfolio">
<h2 class="p_title">Portfolio</h2>
<div class="p_wrap"> <!-- 모달 -->
<div class="p_con p1 ">
<a href="#" class="p_link" target="new">adererror</a>
<div class="p_cover">아더에러</div>
</div>
<div class="p_con p2 ">
<a href="#" class="p_link" target="new">cafe erip</a>
<div class="p_cover">카페 이립</div>
</div>
<div class="p_con p3 ">
<a href="#" class="p_link" target="new">Design profile</a>
<div class="p_cover">디자인 프로필</div>
</div>
</div>
</section>
<!-- adererror modal -->
<div class="modal adererror">
<div class="m_con" style="overflow-y:scroll;">
<i class="close">x</i>
<div class="m_ing m_ad">
<div></div>
<p>Adererror 프로젝트 20210702 ~ 20210714 <br><br> html과 css를 이용해 처음 도전한 클론 코딩입니다. 네비게이션의 모션과 구성에 더 많은 시간을 할애하여 하드코딩으로만 이루어져 만들어 보았습니다. 반응형 웹에 대하여 인지하지 못했을 시기에 한 클론사이트 입니다. html과 css에 대하여 많은 공부가 되었던 프로젝트입니다.
</p>
<a href="http://wooreeweb.com/pf/2614/adererror" target="new">Click me!!</a>
</div>
</div>
</div>
<!-- cafeefrip modal -->
<div class="modal cafeerip">
<div class="m_con" style="overflow-y:scroll;">
<i class="close">x</i>
<div class="m_ing m_ce">
<div></div>
<p>Cafe erip 프로젝트 20210726 ~ 20210730 <br><br> 작은 개인 카페의 홍보라는 컨셉으로 시작한 프로젝트입니다. 반응형웹사이트이며 컴퓨터와 모바일 모두 고려하여 만들어 졌습니다. 여유로움이라는 컨셉을 가지고 여백을 최대한 많이 두었고 간결하고 부드럽게 작성했습니다. 안정감을 주는 색상인 갈색계열의 색상을 사용하였고, 친근함을 위해 손글씨체를 사용했습니다. swiper-slider, kakaomap등 다양한 플러그인을 사용하는 방법과 종류에 대해서 배웠습니다.</p>
<a href="http://wooreeweb.com/pf/2614/cafeerip" target="new">Click me!!</a>
</div>
</div>
</div>
<!-- profile modal -->
<div class="modal profile">
<div class="m_con" style="overflow-y:scroll;">
<i class="close">x</i>
<div class="m_ing m_pr">
<div></div>
<p>profile 20210815 ~ <br><br>
디자인프로필 프로젝트로 저의 이력서입니다. 모바일과 컴퓨터를 고려한 반응형 웹사이트 입니다. 다양한 애니메이션과 트랜지션, 모달레이어로 구성된 페이지 입니다.
</div>
</div>
</div>
<!-- contact -->
<section id="contact">
<!-- comment -->
<div class="comment_wrap">
<h2>I am</h2>
<ul class="faq ">
<li class="qna q1">
<p class="qna_title qt1">프론트엔드에 지원을 하게된 동기가 무엇인지? <button class="op_answer"></button></p>
<div class="qna_answer qa1">평소 웹사이트, 다양한 콘텐츠를 즐겨보고 있습니다. 그러다 보니 사용자입장에서 불편한점, 아쉬운 점, 좋은 점 등을 발견하게 되었습니다. 더 나은 웹사이트, UI/UX을 만들어 보면 좋을 것 같다는 막연한 생각에서 직접 제작을 해보고 싶은 생각이 들었습니다. 그래서 관련 학원을 알아보던 중 프론트엔드 개발 수업을 수강하였습니다.
코로나로 인한 대면/비대면 수업을 오가며 작업 결과물을 내기 위해 노력했습니다. html5/CSS3, j-Query, Java script와 Vue.js를 다루어 보고 웹퍼블리싱의 개념에 대해 배웠습니다. My sql을 이용해 데이터베이스 입력, 관리와 Github를 이용한 오픈소스 이용, 협업과 퍼블리싱에 대해 배웠습니다.
주변 실무자와 강사님께 피드백을 수시로 요청하여 더 나은 홈페이지를 만들기 위해 노력했습니다. 위 경험을 통해 저의 성향과 잘 맞는다고 생각하여 지원하게 되었습니다.</div>
</li>
<li class="qna q2">
<p class="qna_title qt2">업무를 진행하면서 겪었던 어려움이나 그 어려움을 해결하기위해 어떤 노력을 했는지?<button class="op_answer"></button></p>
<div class="qna_answer qa2">대학시절 의사소통과 사회성을 기르기 위해 호프집에서 홀 서빙 아르바이트를 6개월 가량 했습니다. 의사소통의 중요성을 인지하지 못했었기 때문에 제 일만 잘 하면 된다고 생각했었습니다.
하지만 실제로 일을 해보니 의사소통이 잘 이루어지지 않는다면, 업무상 안맞는 점이 생겨 손해가 생길 수도 있고, 또한 팀원과의 불화가 생기게 된다는 것을 깨달았습니다. 그래서 사소한 점이라도 대화나 메모를 통해 인수인계하고 업무중에도 서로 충분한 대화를 통해 업무분담이나 서로 보완해야 할 점을 채워 나갔습니다. 그러다 보니 업무 실수도 줄고 그로 인해 손해도 줄었습니다. 손해가 줄어들자 매출이 올라가게 되는 것을 직접 경험하게 되었고, 의사소통의 중요성을 깨닫게 되었습니다.</div>
</li>
<li class="qna q3">
<p class="qna_title qt3">본인의 장단점이 무엇이라고 생각하는지?<button class="op_answer"></button></p>
<div class="qna_answer qa3">직무를 수행하는것에 있어서 중요한 태도 중 하나는 책임감이라고 생각합니다.
대학 생활 중 동아리 임원을 하게 되었습니다. 전임자로부터 인수인계도 받지 못하고, 정확히 어떠한 일을 해야 하는지 역할을 듣지 못했습니다. 하지만 임원이라는 책임감 덕분에 동아리 회원모집, 입부자 면접, 동아리 공연 홍보 등을 진행하였고, 그 결과 최근 4년사이에 동아리 신입 입부자가 최대였으며 공연도 성황리에 마무리하는 등 여러 성과를 내보였습니다.
저의 단점으로는 공과 사의 구분이 잘 한다는 것입니다. 하지만 전역 후 사회에 나와 사회생활도 하고 여러 사람들과 만남으로서 상황에 따라 융통성을 갖기 위해 노력하고 있습니다.</div>
</li>
<li class="qna q4">
<p class="qna_title qt4">입사를 하게 된다면 어떤 포부나 계획이 있는지?<button class="op_answer"></button></p>
<div class="qna_answer qa4">최근 공부하면서 느낀 것은 ‘배움에는 끝이 없다’ 는 것입니다. 다양한 프로그래밍 언어를 활용하는 만큼 끊임없는 공부와 자기발전을 통해서 정체 되어 있지 않고 경력과 능력을 꾸준히 쌓아 나아갈 수 있는 인재가 되겠습니다.
선임들과 함께 일하게 된다면, 항상 자기발전을 위해 노력하는 신입이 될 것입니다. 프론트엔드와 백엔드를 모두 다룰 줄 아는 풀스택 개발자가 되겠습니다.</div>
</li>
<li class="qna q5">
<p class="qna_title qt5">어떤 프로젝트가 가장 기억에 남는지?<button class="op_answer"></button></p>
<div class="qna_answer qa5">'Adererror'라는 의류브랜드의 홈페이지를 클론코딩한 것이 기억에 남습니다. 가장처음으로 만들어본 홈페이지기도 하고, 아무것도 모르는 상태였지만 일단 해보자 라는 생각을 가지고 임하게 되었습니다. 여러 태그들의 특징들도 알게 되었고, 프론트엔드와 백엔드의 차이점도 명확하게 알게된 계기가 되었습니다. 이 프로젝트를 하고나서 그 다음의 목표도 생기게 되어 시작하는 계기를 만들어준 고마운 프로젝트입니다.</div>
</li>
</ul>
</div>
<div class="contact_wrap clear">
<h2>Contact me</h2>
<div class="con_method">
<ul>
<li class="cm">
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<a href="mailto:[email protected]"><p>[email protected]</p></a>
</li>
<li class="cm">
<i class="fa fa-github" aria-hidden="true"></i>
<a href="https://github.com/sh-oon/github_test.git" target="new">Github</a>
</li>
<li class="cm">
<i class="fa fa-mobile" aria-hidden="true" style="font-size: 18px;"></i>
<a href="tel:010-9737-2483">
<p>010-9737-2483</p>
</a>
</li>
<li class="cm">
<i class="xi-kakaotalk" aria-hidden="true"></i>
<a href="https://open.kakao.com/o/sFE3PPfb" target="new">
<p>kakao talk</p>
</a>
</li>
</ul>
</div>
</div>
</section>
<!-- footer -->
<footer id="footer">© made by Jung SungHoon</footer>
</body>
</html>