-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
441 lines (432 loc) · 19.5 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
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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0">
<title>Anna's Portfolio</title>
<link rel="icon" type="image/svg+xml" href="images/favicon.svg">
<link rel="icon" type="image/png" href="images/favicon.png">
<!--FONT-->
<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=Bricolage+Grotesque:opsz,[email protected],400;12..96,700;12..96,800&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin="anonymous" />
<link rel="preload" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/wanteddev/[email protected]/packages/wanted-sans/fonts/webfonts/variable/complete/WantedSansVariable.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wanteddev/[email protected]/packages/wanted-sans/fonts/webfonts/variable/complete/WantedSansVariable.min.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--CSS-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
<link rel="stylesheet" href="css/common.css">
<!--JS-->
<script defer src="js/common.js"></script>
</head>
<body>
<div id="wrap">
<!--HEADER-->
<header class="en-font">
<div class="inner">
<h1 class="header-logo">
<a href="/">Anna's Portfolio</a>
</h1>
<nav class="header-menu">
<ul>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</div>
</header>
<!--INTRO-->
<section class="intro">
<div class="inner">
<div class="intro-en en-font">
<p>Welcome! I'm Yeonju An,</p>
<p>a Web Publisher.</p>
</div>
<div class="intro-ko">
<p>
웹표준과 웹접근성을 준수하고, 반응형과 인터랙션을 구현할 수 있습니다.<br>
웹 에이전시에서 2년 동안 프론트엔드 및 백엔드 개발자, 기획자와 함께 다양한 프로젝트를 진행했습니다.<br>
새로운 기술을 배우는 것에 두려움이 없습니다. 그 자리에 멈춰있지 않고 앞으로 계속 나아가고자 함입니다.
</p>
<div class="intro-menu en-font">
<a href="about.html">
<span class="material-icons">
face_retouching_natural
</span>
About me
</a>
<a href="mailto:[email protected]">
<span class="material-icons">
alternate_email
</span>
</a>
</div>
</div>
</div>
</section>
<!--SKILL-->
<section class="skill">
<div class="inner">
<h2 class="en-font">Skills</h2>
<div class="skill-wrap">
<article>
<h3>Publishing</h3>
<ul class="skill-list">
<li><img src="images/logo_html5.svg" alt="html5 로고"></li>
<li><img src="images/logo_css3.svg" alt="css3 로고"></li>
<li><img src="images/logo_javascript.svg" alt="javascript 로고"></li>
<li><img src="images/logo_sass.svg" alt="sass 로고"></li>
<li><img src="images/logo_bootstrap.svg" alt="bootstrap 로고"></li>
<li><img src="images/logo_jquery.svg" alt="jquery 로고" class="full-img"></li>
<li><img src="images/logo_gsap.png" alt="gsap 로고" class="full-img"></li>
</ul>
</article>
<article>
<h3>with Frontend</h3>
<ul class="skill-list">
<li><img src="images/logo_vue.svg" alt="vue 로고" class="full-img"></li>
<li><img src="images/logo_node.svg" alt="node 로고" class="full-img"></li>
<li><img src="images/logo_nuxt.svg" alt="nuxt 로고" class="full-img"></li>
<li><img src="images/logo_vuetify.svg" alt="vuetify 로고" class="full-img"></li>
<li><img src="images/logo_bootstrapVue.svg" alt="bootstrapVue 로고"></li>
<li><img src="images/logo_quasar.svg" alt="quasar 로고"></li>
<li><img src="images/logo_vant.png" alt="vant 로고"></li>
</ul>
</article>
<article>
<h3>with Design</h3>
<ul class="skill-list">
<li><img src="images/logo_figma.svg" alt="figma 로고"></li>
<li><img src="images/logo_zeplin.svg" alt="zeplin 로고" class="full-img"></li>
<li><img src="images/logo_photoshop.svg" alt="photoshop 로고"></li>
<li><img src="images/logo_illustrator.svg" alt="illustrator 로고"></li>
<li><img src="images/logo_xd.svg" alt="xd 로고"></li>
</ul>
</article>
<article>
<h3>Version Control</h3>
<ul class="skill-list">
<li><img src="images/logo_git.svg" alt="git 로고"></li>
<li>
<img src="images/logo_github.svg" alt="github 로고" style="max-width: 50px;">
<img src="images/logo_github2.svg" alt="github 로고2">
</li>
<li><img src="images/logo_gitlab.svg" alt="gitlab 로고" class="full-img"></li>
</ul>
</article>
</div>
</div>
</section>
<!--PROJECT-->
<section class="project">
<div class="inner">
<h2 class="en-font">Projects</h2>
<div class="title">
<h3>👩 프리랜서</h3>
<p>(2023.11 ~)</p>
</div>
<ul>
<li>
<div class="image">
<img src="images/@img_incheon.jpg" alt="인천광역시">
</div>
<div class="badge-group">
<span># 반응형</span>
<span># PC</span>
<span># MOBILE</span>
</div>
<h3>인천광역시 중대재해 예방체계 통합관리시스템</h3>
<p>2023.11 ~ 2023.12</p>
</li>
</ul>
<div class="title">
<h3>💻 (주) 아이디벨</h3>
<p>(2021.09 ~ 2023.11)</p>
</div>
<ul>
<li>
<div class="image">
<img src="images/@img_okta.jpg" alt="세계한인경제인대회">
</div>
<div class="badge-group">
<span># 반응형</span>
<span># PC</span>
<span># MOBILE</span>
</div>
<h3>세계한인경제인대회 참가 신청 페이지 구축</h3>
<p>2023.08 ~ 2023.09</p>
</li>
<li>
<a href="https://www.inter-m.com/product/" target="_blank">
<div class="image">
<img src="images/@img_interM.png" alt="인터엠">
</div>
<div class="badge-group">
<span># 적응형</span>
<span># PC</span>
<span># MOBILE</span>
</div>
<h3>inter-M 제품 · 기업 · 조달청 홈페이지 리뉴얼 및 관리자 페이지 구축</h3>
<p>2023.05 ~ 2023.08</p>
<div class="more-icon">
<span class="material-icons">
north_east
</span>
</div>
</a>
</li>
<li>
<a href="https://www.sejongpac.or.kr/portal/main/contents.do?menuNo=200223" target="_blank">
<div class="image">
<img src="images/@img_sejong.jpg" alt="세종문화회관">
</div>
<div class="badge-group">
<span># MOBILE</span>
<span># TABLET</span>
</div>
<h3>세종문화회관 디지털 티켓 UI 화면 구축 및 좌석현황 화면 리뉴얼</h3>
<p>2023.06</p>
<div class="more-icon">
<span class="material-icons">
north_east
</span>
</div>
</a>
</li>
<li>
<a href="https://www.bondosirak-start.co.kr/" target="_blank">
<div class="image">
<img src="images/@img_bonif.jpg" alt="본도시락">
</div>
<div class="badge-group">
<span># 반응형</span>
<span># PC</span>
<span># MOBILE</span>
<span># GSAP</span>
</div>
<h3>본도시락 랜딩페이지 구축</h3>
<p>2023.05</p>
<div class="more-icon">
<span class="material-icons">
north_east
</span>
</div>
</a>
</li>
<li>
<a href="https://miut.golfzonmarket.com/home" target="_blank">
<div class="image">
<img src="images/@img_miut.jpg" alt="골프">
</div>
<div class="badge-group">
<span># MOBILE</span>
<span># WEBAPP</span>
<span># VUE</span>
</div>
<h3>골프존마켓이웃 WEB & APP 리뉴얼</h3>
<p>2023.03</p>
<div class="more-icon">
<span class="material-icons">
north_east
</span>
</div>
</a>
</li>
<li>
<a href="http://baristella.co.kr/" target="_blank">
<div class="image">
<img src="images/@img_baristella.png" alt="바리스텔라">
</div>
<div class="badge-group">
<span># 반응형</span>
<span># PC</span>
<span># MOBILE</span>
</div>
<h3>바리스텔라 홈페이지 구축</h3>
<p>2023.03</p>
<div class="more-icon">
<span class="material-icons">
north_east
</span>
</div>
</a>
</li>
<li>
<div class="image">
<img src="images/@img_kepco.png" alt="한국전력공사">
</div>
<div class="badge-group">
<span># PC</span>
<span># VUE</span>
</div>
<h3>한전 5G망 운영관리시스템 구축</h3>
<p>2022.12 ~ 2023.02</p>
</li>
<li>
<a href="http://www.ggotti.co.kr" target="_blank">
<div class="image">
<img src="images/@img_ggotti.png" alt="꽃그리는 아이">
</div>
<div class="badge-group">
<span># 적응형</span>
<span># PC</span>
<span># MOBILE</span>
<span># GSAP</span>
</div>
<h3>꽃그리는아이 홈페이지 구축</h3>
<p>2022.12</p>
<div class="more-icon">
<span class="material-icons">
north_east
</span>
</div>
</a>
</li>
<li>
<div class="image">
<img src="images/@img_honda.jpg" alt="혼다 자동차">
</div>
<div class="badge-group">
<span># PC</span>
</div>
<h3>혼다코리아 온라인 플랫폼 관리자 페이지 구축</h3>
<p>2022.10 ~ 2023.05</p>
</li>
<li>
<div class="image">
<img src="images/@img_goongneung.jpg" alt="건원릉">
</div>
<div class="badge-group">
<span># PC</span>
<span># VUE</span>
</div>
<h3>궁능유적본부 전산발권 관리시스템 구축</h3>
<p>2022.10 ~ 2022.12</p>
</li>
<li>
<div class="image">
<img src="images/@img_lasola.jpg" alt="한솔홈데코">
</div>
<div class="badge-group">
<span># PC</span>
</div>
<h3>한솔홈데코 관리자 페이지 구축</h3>
<p>2022.07 ~ 2022.09</p>
</li>
<li>
<a href="https://www.imfactory.or.kr/" target="_blank">
<div class="image">
<img src="images/@img_imate.jpg" alt="인천테크노파크">
</div>
<div class="badge-group">
<span># 반응형</span>
<span># PC</span>
<span># MOBILE</span>
<span># VUE</span>
</div>
<h3>인천테크노파크 제조기술 연계 플랫폼 I-Mate<br> 리뉴얼</h3>
<p>2022.05 ~ 2022.11</p>
<div class="more-icon">
<span class="material-icons">
north_east
</span>
</div>
</a>
</li>
<li>
<div class="image">
<img src="images/@img_kcp.jpg" alt="반포한강공원">
</div>
<div class="badge-group">
<span># 반응형</span>
<span># PC</span>
<span># MOBILE</span>
<span># VUE</span>
</div>
<h3>코리아시티패스 스마트 투어 플랫폼 구축</h3>
<p>2022.01 ~ 2022.03</p>
</li>
<li>
<a href="https://m.golping.golfzon.com/" target="_blank">
<div class="image">
<img src="images/@img_golping.jpg" alt="골프">
</div>
<div class="badge-group">
<span># MOBILE</span>
<span># WEBAPP</span>
<span># VUE</span>
</div>
<h3>골핑 WEB & APP 리뉴얼</h3>
<p>2021.10 ~ 2022.01</p>
<div class="more-icon">
<span class="material-icons">
north_east
</span>
</div>
</a>
</li>
<li>
<a href="https://www.toyotakoreaapp.co.kr/main.do" target="_blank">
<div class="image">
<img src="images/@img_toyota.jpg" alt="토요타 자동차">
</div>
<div class="badge-group">
<span># MOBILE</span>
<span># WEBAPP</span>
</div>
<h3>TOYOTA 앱 마일리지시스템 구축</h3>
<p>2021.09 ~ 2022.02</p>
<div class="more-icon">
<span class="material-icons">
north_east
</span>
</div>
</a>
</li>
<li>
<div class="image">
<img src="images/@img_nmfk.jpg" alt="국립박물관문화재단">
</div>
<div class="badge-group">
<span># 반응형</span>
<span># PC</span>
<span># PDA</span>
</div>
<h3>국립박물관 문화재단 물류정보시스템 구축</h3>
<p>2021.09 ~ 2021.11</p>
</li>
<li>
<div class="image">
<img src="images/@img_itp.jpg" alt="인천테크노파크">
</div>
<div class="badge-group">
<span># 반응형</span>
<span># PC</span>
<span># MOBILE</span>
</div>
<h3>인천지역 시제품 제작/양산 제조기업 온라인 플랫폼 구축</h3>
<p>2021.09 ~ 2021.11</p>
</li>
</ul>
</div>
</section>
<!--CONTACT-->
<section class="contact">
<div class="inner">
<h2 class="en-font">Contact</h2>
<a href="mailto:[email protected]" class="en-font email">[email protected]</a>
<p class="text">
합류 혹은 협업을 제안하고자 하신다면 메일을 보내주세요.<br>
멋진 프로젝트를 함께할 동료들을 기다리고 있습니다!
</p>
</div>
</section>
<!--FOOTER-->
<footer>
<p class="en-font">© <span class="year"></span> Anna. All Rights Reserved.</p>
</footer>
</div>
</body>
</html>