-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
530 lines (506 loc) · 31.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
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
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<!-- 최소/최대 스케일 1x, 확대/축소 불가 -->
<title>Portfolio of SoRaang</title>
<link rel="shortcut icon" href="./images/icons/favicon.ico" />
<link rel="stylesheet" type="text/css" href="./css/normalize.css" /> <!-- 브라우저별 태그 형태 통일 -->
<link rel="stylesheet" type="text/css" href="./css/default.css" /> <!-- 공통 CSS -->
<link rel="stylesheet" type="text/css" href="./css/layout_index.css" /> <!-- 개별 페이지 CSS -->
<!-- 모듈 CSS -->
<link rel="stylesheet" type="text/css" href="./css/mq.css" /> <!-- 미디어 쿼리 CSS -->
<link rel="stylesheet" type="text/css" href="./css/animation.css" /> <!-- 애니메이션 키프레임 CSS -->
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- jQuery -->
<script src="./js/default.js"></script> <!-- 공통 JS -->
<!--[if lt IE 9]>
<script src="./js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div id="wrap">
<header id="headBase" class="head_index">
<h1 id="logo" class="logo">
<a class="scr_alt" href="#wrap">로고 - SoRaang</a>
</h1>
<nav id="navBase" class="txtenlight">
<a class="target_about" href="#secAbout"><span class="icon_about"></span><p>About</p></a>
<hr class="vf" />
<a class="target_portfolio" href="#secPortfolio"><span class="icon_portfolio"></span><p>Portfolio</p></a>
<hr class="vf" />
<a class="target_contact" href="#secContact"><span class="icon_contact"></span><p>Contact</p></a>
</nav>
</header> <!-- Header -->
<!-- Page Main Contents Start -->
<div id="contentBase">
<section id="secHero">
<svg class="hero_title txtenbold" x="0" y="0" width="100%" height="100%">
<text x="23%" y="50%" fill="white" text-anchor="middle">{</text>
<text x="50%" y="50%" fill="white" text-anchor="middle">web_designer.SoRaang</text>
<text x="77%" y="50%" fill="white" text-anchor="middle">}</text>
</svg>
<p class="hurry_scroll txtenlight">Scroll</p>
</section>
<section id="secAbout" class="int_wrap">
<h2>About.Myself</h2>
<div class="about_win portrait_container">
<img class="about_img" src="./images/portrait.png" alt="프로필 이미지" />
</div>
<div class="about_win">
<h4>Profile</h4>
<table class="about_table">
<tr>
<th scope="row">
이름
</th>
<td>
김창완 (金昶完 · Kim Chang Wan)
</td>
</tr>
<tr>
<th scope="row">
활동지역
</th>
<td>
대한민국 부산광역시
</td>
</tr>
<tr>
<th scope="row">
현재 소속
</th>
<td>
프리랜서
</td>
</tr>
</table>
</div>
<!-- 1 -->
<div class="about_win">
<h4>주요 소프트웨어 활용 능력</h4>
<table class="about_table left">
<tr>
<td>
Visual Studio Code (HTML5 / CSS3 · 4)
</td>
<td>
상
</td>
<td>
코딩 및 각종 플러그인 활용
</td>
</tr>
<tr>
<td>
jQuery
</td>
<td>
중상
</td>
<td>
스크립트 제작 및 커스텀 디자인
</td>
</tr>
<tr>
<td>
Adobe Photoshop
</td>
<td>
중상
</td>
<td>
이미지 편집 및 제작
</td>
</tr>
<tr>
<td>
Adobe Illurstrator
</td>
<td>
중
</td>
<td>
이미지 편집 및 인쇄물 디자인
</td>
</tr>
<tr>
<td>
Adobe Premier / After Effects
</td>
<td>
중하
</td>
<td>
기초 영상 편집
</td>
</tr>
<tr>
<td>
Adobe XD
</td>
<td>
상
</td>
<td>
컴포넌트를 활용한 인터랙티브 인터페이스 디자인
</td>
</tr>
<tr>
<td>
Adobe Dimension
</td>
<td>
하
</td>
<td>
어셋을 활용한 기초적인 수준의 목업 제작
</td>
</tr>
<tr>
<td>
Word / Excel / Powerpoint 등 오피스 소프트웨어
</td>
<td>
중
</td>
<td>
기초적인 문서 작성 및 관리
</td>
</tr>
</table>
</div>
<!-- 2 -->
<div class="about_win">
<h4>디자인 철학</h4>
<p>
국어국문학을 전공하였으며, 문장과 문법이 유려하고 이해하기 쉽게 이어지는 것을 매력적으로 여기다 보니 코딩에까지 연을 두기에 이르렀습니다.
</p>
<p>
심플한 디자인을 통한 UI / UX 접근성 및 시인성을 주안점으로 하여, 이미지를 많이 사용하거나 화려한 것보다는 트래픽 발생량이 적으면서도 TPO에 맞는 디자인을 추구합니다.
</p>
<p>
PHP, MySQL 등 백엔드 프로세스에 대한 기초적 이해를 바탕으로 상호간의 코드 리딩이 유연하게 이루어지는 것 ― 협업 면에서도, 개인적인 작업 면에서도 ― 을 코딩의 주 목표로 삼고 있으며, 기본에 충실하면서도 세련된 코딩을 하기 위해 늘 새로운 기술을 탐색하고 연구합니다.
</p>
<p>
요컨대, <strong>저는 제가 재미있다고 여기는 일을 업으로 삼고자 합니다.</strong>
</p>
</div>
<!-- 3 -->
</section>
<section id="secPortfolio" class="int_wrap">
<h2>My.Portfolio</h2>
<div class="port_sel">
<button class="btnall on">All</button>
<button class="btnweb">Web</button>
<button class="btnim">Image Manipulation</button>
<button class="btnis">Logos / Icons</button>
<button class="btnetc">Ad. Design</button>
</div>
<div class="port_tab">
<div class="port_win" data-category="web">
<img src="./images/portfolio/web_03_thumb.jpg" full-src="./images/portfolio/web_03_full.png" alt="세상의 모든 글, 모글" />
<p><span class="txtbold">mogle · 2021. 01</span><br />
웹 프로젝트 #03</p>
<span class="port_tool">
사용 툴 : HTML · CSS · jQuery · Adobe Photoshop · ETC
</span>
<div class="port_description">
<p>작업기간 : 약 2주</p>
2021년 상반기에 진행한 프론트엔드 디자인 교육 과정의 세 번째 프로젝트로, 서비스에 대한 기획부터 모든 것을 처음부터 직접 구성해야 했던
최초의 프로젝트였습니다. 이 프로젝트에서는 서버 및 데이터베이스와 웹 프로그램에 대한 학습을 병행하면서, 이러한 데이터를 연동하게 될
경우를 상정한 코딩과 디자인을 하는 데에 심혈을 기울였습니다.<br />
해당 프로젝트를 진행하는 과정에서 하드 디스크 손상으로 모든 데이터를 잃어버리는 큰 사고를 겪는 탓에 일정에 다소 차질이 있었으며, 데이터 백업의
중요성을 다시 한 번 깨달았습니다.
<div class="btnPort_container">
<a class="btnPort" href="https://soraang.github.io/proj3" target="_blank">프로젝트 사이트 방문</a>
</div>
</div>
</div>
<!-- 1 -->
<div class="port_win" data-category="web">
<img src="./images/portfolio/web_02_thumb.jpg" full-src="./images/portfolio/web_02_full.png" alt="이노스 TV" />
<p><span class="txtbold">이노스 TV · 2020. 12</span><br />
웹 프로젝트 #02</p>
<span class="port_tool">
사용 툴 : HTML · CSS · jQuery · Adobe Photoshop · ETC
</span>
<div class="port_description">
<p>작업기간 : 약 2주</p>
2020년 하반기에 진행한 프론트엔드 디자인 교육 과정의 두 번째 프로젝트로, 로고 디자인과 브랜드 아이덴티티 어플리케이션을 비롯한
기획과 레퍼런스 자료 수집의 많은 부분을 처음으로 접하고 시도해 보았던 프로젝트였습니다.<br />
해당 프로젝트는 특히 코딩과 이미지 편집 외에도 브랜드 아이덴티티 어플리케이션을 위하여 Adobe Dimension을 이용한 목업 제작과 인쇄물 디자인 등을 배워,
디자이너로서 보다 폭넓은 시각과 다양한 분야의 기능을 갖출 수 있는 계기가 되었습니다.
<div class="btnPort_container">
<a class="btnPort" href="https://soraang.github.io/proj2" target="_blank">프로젝트 사이트 방문</a>
</div>
</div>
</div>
<!-- 2 -->
<div class="port_win" data-category="web">
<img src="./images/portfolio/web_01_thumb.jpg" full-src="./images/portfolio/web_01_full.png" alt="스타美 피부과" />
<p><span class="txtbold">스타美 피부과 · 2020. 11</span><br />
웹 프로젝트 #01</p>
<span class="port_tool">
사용 툴 : HTML · CSS · jQuery · Adobe Photoshop · ETC
</span>
<div class="port_description">
<p>작업기간 : 약 1주</p>
2020년 하반기에 진행한 프론트엔드 디자인 교육 과정의 첫 번째 프로젝트로, 로고부터 배너까지 직접 디자인을 진행하면서
최근 웹 디자인의 추세 및 반응형 웹의 기초 개념을 익히는 데에 큰 도움이 되었습니다.<br />
jQuery 및 미디어 쿼리를 통한 화면 구성의 변화와 스크롤 폭에 따라 각각의 이미지나 네비게이션의 레이아웃이 깨지지 않도록 조정하는 부분이 흥미로웠으며,
향후 프로젝트에서 사용될 기술을 익힐 수 있었던 유익한 기간이었습니다.
<div class="btnPort_container">
<a class="btnPort" href="https://soraang.github.io/proj1" target="_blank">프로젝트 사이트 방문</a>
</div>
</div>
</div>
<!-- 3 -->
<div class="port_win" data-category="manipulation">
<img src="./images/portfolio/mani_02_thumb.jpg" full-src="./images/portfolio/mani_02.jpg" alt="Backstreet Punk" />
<p><span class="txtbold">Backstreet Punk</span><br />
이미지 합성</p>
<span class="port_tool">
사용 툴 : Adobe Photoshop · Adobe Illurstrator
</span>
<div class="port_description">
<img src="./images/portfolio/mani_02_source.jpg" alt="원본 소스" />
<p>합성에 사용한 원본 소스들</p>
</div>
</div>
<!-- 4 -->
<div class="port_win" data-category="manipulation">
<img src="./images/portfolio/mani_03_thumb.jpg" full-src="./images/portfolio/mani_03.jpg" alt="Royal Canin" />
<p><span class="txtbold">Royal Canin</span><br />
이미지 합성</p>
<span class="port_tool">
사용 툴 : Adobe Photoshop · Adobe Illurstrator
</span>
<div class="port_description">
<img src="./images/portfolio/mani_03_source.jpg" alt="원본 소스" />
<p>합성에 사용한 원본 소스들</p>
</div>
</div>
<!-- 5 -->
<div class="port_win" data-category="manipulation">
<img src="./images/portfolio/mani_04_thumb.jpg" full-src="./images/portfolio/mani_04.jpg" alt="The New Face of Speed" />
<p><span class="txtbold">The New Face of Speed</span><br />
이미지 합성</p>
<span class="port_tool">
사용 툴 : Adobe Photoshop · Adobe Illurstrator
</span>
<div class="port_description">
<p>이미지 합성 - The New Face of Speed</p>
</div>
</div>
<!-- 6 -->
<div class="port_win" data-category="manipulation">
<img src="./images/portfolio/mani_01_thumb.jpg" full-src="./images/portfolio/mani_01.jpg" alt="In The Forest" />
<p><span class="txtbold">In The forest</span><br />
이미지 합성</p>
<span class="port_tool">
사용 툴 : Adobe Photoshop · Adobe Illurstrator
</span>
<div class="port_description">
<p>이미지 합성 - In The Forest</p>
</div>
</div>
<!-- 7 -->
<div class="port_win" data-category="iconset">
<img src="images/portfolio/bi_thumb.jpg" full-src="./images/portfolio/bi_full.jpg" alt="Logos / Icons" />
<p><span class="txtbold">Logo / BI Design - 이노스 TV</span><br />
로고를 활용한 브랜드 아이덴티티 디자인</p>
<span class="port_tool">
사용 툴 : Adobe Photoshop · Adobe Illurstrator
</span>
<div class="port_description">
"이노스 TV" 가상 리뉴얼 프로젝트를 진행하는 과정에서 디자인된 해당 기업의 BI를 목업으로 어플리케이션한 예시입니다.
</div>
</div>
<!-- 8 -->
<div class="port_win" data-category="iconset">
<img src="images/portfolio/logo_02_thumb.jpg" full-src="./images/portfolio/logo_02_thumb.jpg" alt="Logos / Icons" />
<p><span class="txtbold">Logo Design - mogle</span><br />
프로젝트에 사용된 로고 디자인</p>
<span class="port_tool">
사용 툴 : Adobe Photoshop · Adobe Illurstrator
</span>
<div class="port_description">
"세상의 모든 글, 모글"이라는 주제로 진행한 프로젝트에서 사용하기 위해 제작한 로고로, 도서 리뷰를 작성하거나 관련 정보를
찾아볼 수 있는 사이트라는 컨셉을 살리기 위해 책을 모티브로 m 형태의 아이콘을 제작하였고, 가독성이 높은 폰트와 방점을 곁들여 문장을
"읽는다"는 행위를 표현하고자 하였습니다.
</div>
</div>
<!-- 9 -->
<div class="port_win" data-category="iconset">
<img src="images/portfolio/logo_01_thumb.jpg" full-src="./images/portfolio/logo_01_thumb.jpg" alt="Banners / Posters" />
<p><span class="txtbold">Logo Design - 스타美 피부과</span><br />
프로젝트에 사용된 로고 디자인</p>
<span class="port_tool">
사용 툴 : Adobe Photoshop · Adobe Illurstrator
</span>
<div class="port_description">
"스타美 피부과" 프로젝트를 진행하면서 제작한 로고로, 별 형태를 기초로 하여 얼굴 실루엣과 함께 잎사귀 모양을 추가해 자연미를
나타내고자 하였습니다. 동시에 다이어트 관련 시술에 착안하여 S자를 강조함으로써 S라인을 만들 수 있다는 의미도 담고자 했습니다.
</div>
</div>
<!-- 10 -->
<div class="port_win" data-category="iconset">
<img src="images/portfolio/iconset_01.jpg" full-src="./images/portfolio/iconset_01.jpg" alt="아이콘 셋트 - 스타美 피부과" />
<p><span class="txtbold">Icon Set #01 - 스타美 피부과</span><br />
프로젝트에 사용된 아이콘 셋트</p>
<span class="port_tool">
사용 툴 : Adobe Photoshop · Adobe Illurstrator
</span>
<div class="port_description">
"스타美 피부과" 프로젝트를 진행하면서 사용하기 위해 직접 제작한 아이콘입니다.
</div>
</div>
<!-- 11 -->
<div class="port_win" data-category="iconset">
<img src="images/portfolio/iconset_02.jpg" full-src="./images/portfolio/iconset_02.jpg" alt="아이콘 셋트 - mogle" />
<p><span class="txtbold">Icon Set #02 - mogle</span><br />
프로젝트에 사용된 아이콘 셋트</p>
<span class="port_tool">
사용 툴 : Adobe Photoshop · Adobe Illurstrator
</span>
<div class="port_description">
"mogle" 프로젝트를 진행하면서 모바일 레이아웃에 사용하기 위해 직접 제작한 아이콘입니다.
</div>
</div>
<!-- 12 -->
<div class="port_win" data-category="iconset">
<img src="images/portfolio/iconset_03.jpg" full-src="./images/portfolio/iconset_03.jpg" alt="아이콘 셋트 - 개인 작업" />
<p><span class="txtbold">Icon Set #03 - 개인 작업</span><br />
개인 작업</p>
<span class="port_tool">
사용 툴 : Adobe Photoshop · Adobe Illurstrator
</span>
<div class="port_description">
게시판과 블로그에서 사용하기 위해 직접 제작한 아이콘입니다.
</div>
</div>
<!-- 13 -->
<div class="port_win" data-category="etc">
<img src="images/portfolio/banner_01.jpg" full-src="./images/portfolio/banner_01.jpg" alt="Banners / Posters" />
<p><span class="txtbold">Banners / Posters</span><br />
프로젝트에 사용된 배너 및 포스터 등</p>
<span class="port_tool">
사용 툴 : Adobe Photoshop · Adobe Illurstrator
</span>
<div class="port_description">
쇼핑몰 배너를 구상하고 디자인해보는 과정에서 제작한 배너입니다.
</div>
</div>
<!-- 14 -->
<div class="port_win" data-category="etc">
<img src="images/portfolio/banner_02.jpg" full-src="./images/portfolio/banner_02.jpg" alt="Banners / Posters" />
<p><span class="txtbold">Banners / Posters</span><br />
프로젝트에 사용된 배너 및 포스터 등</p>
<span class="port_tool">
사용 툴 : Adobe Photoshop · Adobe Illurstrator
</span>
<div class="port_description">
쇼핑몰 배너를 구상하고 디자인해보는 과정에서 제작한 배너입니다.
</div>
</div>
<!-- 15 -->
<div class="port_win" data-category="etc">
<img src="images/portfolio/banner_03.jpg" full-src="./images/portfolio/banner_03.jpg" alt="Banners / Posters" />
<p><span class="txtbold">Banners / Posters</span><br />
프로젝트에 사용된 배너 및 포스터 등</p>
<span class="port_tool">
사용 툴 : Adobe Photoshop · Adobe Illurstrator
</span>
<div class="port_description">
쇼핑몰 배너를 구상하고 디자인해보는 과정에서 제작한 배너입니다.
</div>
</div>
<!-- 16 -->
<div class="port_win" data-category="etc">
<img src="images/portfolio/banner_04.png" full-src="./images/portfolio/banner_04.png" alt="Banners / Posters" />
<p><span class="txtbold">Banners / Posters</span><br />
프로젝트에 사용된 배너 및 포스터 등</p>
<span class="port_tool">
사용 툴 : Adobe Photoshop · Adobe Illurstrator
</span>
<div class="port_description">
"스타美 피부과" 프로젝트를 진행하면서 사용하기 위해 직접 제작한 배너입니다.
</div>
</div>
<!-- 17 -->
<div class="port_win" data-category="etc">
<img src="images/portfolio/banner_05.png" full-src="./images/portfolio/banner_05.png" alt="Banners / Posters" />
<p><span class="txtbold">Banners / Posters</span><br />
프로젝트에 사용된 배너 및 포스터 등</p>
<span class="port_tool">
사용 툴 : Adobe Photoshop · Adobe Illurstrator
</span>
<div class="port_description">
"스타美 피부과" 프로젝트를 진행하면서 사용하기 위해 직접 제작한 배너입니다.
</div>
</div>
<!-- 18 -->
<div class="port_win" data-category="etc">
<img src="images/portfolio/banner_06.png" full-src="./images/portfolio/banner_06.png" alt="Banners / Posters" />
<p><span class="txtbold">Banners / Posters</span><br />
프로젝트에 사용된 배너 및 포스터 등</p>
<span class="port_tool">
사용 툴 : Adobe Photoshop · Adobe Illurstrator
</span>
<div class="port_description">
"스타美 피부과" 프로젝트를 진행하면서 사용하기 위해 직접 제작한 배너입니다.
</div>
</div>
<!-- 19 -->
</div>
<article id="portDesc">
<button class="port_desc_close scr_alt">닫기</button>
<dl class="port_dl">
<dt class="txtbold">
</dt>
<dd class="port_desc_tool">
</dd>
<dd>
<img class="port_desc_img" src="" alt="해당 포트폴리오 이미지" />
</dd>
<dd class="port_desc_spec">
</dd>
</dl>
</article>
</section>
<section id="secContact" class="int_wrap">
<h2>Get_In.Touch</h2>
<div class="contact_win">
<a class="contact_mail txtenbold" href="mailto:[email protected]">dsc0320<br />@hotmail.com</a>
<ul class="contact_sns txtenlight">
<li>
...and Follow me on
</li>
<li>
<a href="https://twitter.com/RaangSo" target="_blank"><img src="./images/icons/twitter.gif" alt="트위터" />Twitter</a>
</li>
<li>
<a href="https://www.instagram.com/soraang_lorenzo" target="_blank"><img src="./images/icons/instagram.gif" alt="인스타그램" />Instagram</a>
</li>
<li>
<a href="https://www.behance.net/changwankim" target="_blank"><img src="./images/icons/behance.gif" alt="Behance" />Behance</a>
</li>
</ul>
</div>
</section>
</div> <!-- contentBase -->
<aside id="popNotice">
<p>
본 페이지는 <strong>최신 버전의 Chromium 기반 브라우저</strong>에서 작동합니다.<br />
Internet Explorer에서는 화면이 정상적으로 표시되지 않을 수 있습니다.
</p>
</aside>
<!-- Page Main Contents End -->
<footer id="footBase" class="foot_index">
<span class="txtenlight">© 2021 SoRaang</span>
</footer> <!-- Footer -->
</div> <!-- #wrap -->
</body>
</html>