-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
312 lines (298 loc) · 12.5 KB
/
index.html
File metadata and controls
312 lines (298 loc) · 12.5 KB
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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>Sera portfolio</title>
<meta name="title" content="Sera portfolio" />
<meta name="author" content="lee sera" />
<meta name="description" content="Sera portfolio" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link href="css/import.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header id="include" data-include-path="gnb.html"></header>
<main id="content">
<article class="title">
<div>
<h2>
안녕하세요 :D<br />웹 퍼블리셔를 하고 있는 <br />이세라입니다.
</h2>
<h2>
6년 이상의 경력을 가지고 있으며<br />웹 퍼블리싱 및 프론트 엔드 개발
분야에<br />관심이 있습니다.
</h2>
</div>
</article>
<article class="introduce">
<h2>This is what i loved</h2>
<div class="text_box">
<p class="txt">
기획, 디자인, 퍼블리싱 및 홈페이지 관리를 포함하여 6년 이상의 경험을
가지고 있습니다.<br /><br />UX/UI 디자인 및 마크업, 애니메이션 등
역동적인 사이트를 개발해보았습니다. <br /><br />저는 웹 에이전시에서
기획, 디자인, 개발로 구성된 팀과 같이 일했습니다.
</p>
<p class="txt">
작든 크든 내가 한 모든 일은 오늘의 내가 있기 위한 중요한 디딤돌이라
생각합니다.<br /><br />
명확한 답이 없던 고시 논술에서 저를 구해준 건 코드였습니다.
<br /><br />목적이 있고 문제를 해결할 수 있는 것을 만들 수 있다는
점이 매력적이었습니다.
</p>
<p class="txt">
지금도 세상에 중요하고 긍정적인 영향을 미치는 아이디어와 제품을
만들고 디자인하고 만들고 싶습니다.<br /><br />
현재 프론트 엔드 개발 분야에 관심이 있으며, 역동적인 홈페이지를
만들어 <br />사람들이 더 나은 시각적 효과를 즐기며 보다 쉽게 내용을
이해할 수 있게 만드는 데 관심이 있습니다.
</p>
</div>
<div class="device_fix">
<div class="slide_wrap">
<div class="slide">
<figure>
<img src="images/main/bg1.jpg" />
</figure>
<figure>
<img src="images/main/bg2.jpg" />
</figure>
<figure>
<img src="images/main/bg3.jpg" />
</figure>
</div>
</div>
</div>
</article>
<article class="personality" id="personality">
<div class="box">
<span>저는</span>
<span>#예리한</span>
<span>#친절한</span>
<span>#조용한</span>
<span>#끈기있는</span>
<span>#센스있는</span>
<span>#일머리있는</span>
<span>#집순이</span>
<span>#야무진</span>
<span>#노력하는</span>
<span>사람 입니다.</span>
</div>
</article>
<article class="interest">
<h2>what i'm interested in</h2>
<ul>
<!-- <li>
<i></i>
<figure class="landing">
<a href="product_page.html"
><img src="images/main/shopping.jpg" alt="쇼핑몰"
/></a>
<figcaption><span>product pages</span></figcaption>
</figure>
<figure class="figma">
<a href="https://url.kr/jbay2e" target="_blank"
><img src="images/main/figma.jpg" alt=""
/></a>
<figcaption><span>figma</span></figcaption>
</figure>
<dl class="design">
<dt>
UX/UI 기반, 직관적이고 실용적인 디자인, 단순하고 화려한 디자인
</dt>
<dd>사진 편집, 보정, 합성.</dd>
<dd>
홈페이지(관공서/일반 기업/쇼핑몰) 이벤트 페이지 디자인 제작 등
</dd>
<dd>photoshop, 전문가 수준(디자인 할 때 주로 사용)</dd>
<dd>figma, 실무 사용 가능(프로토타입 만들 때 사용)</dd>
</dl>
</li> -->
<li>
<i></i>
<figure class="figma">
<a
href="http://breezeciel.dothome.co.kr/iherb/index.html"
target="_blank"
><img src="images/main/bootstrap.jpg" alt=""
/></a>
<figcaption><span>bootstrap</span></figcaption>
</figure>
<figure class="landing">
<a href="https://seraphinaciel.github.io/the_J/" target="_blank"
><img src="images/main/figma.jpg" alt=""
/></a>
<figcaption>
<span>React&<br />Tailwind</span>
</figcaption>
</figure>
<dl class="design">
<dt>
responsive, W3C Recommendations, Web Content Accessibility
Guidelines (WCAG)
</dt>
<dd>웹 접근성 인증 마크 다수 획득</dd>
<dd>반응형 웹 페이지를 구현 가능</dd>
<dd>가독성 있는 문서를 만들기 지향</dd>
</dl>
</li>
<li>
<figure class="bootstrap">
<a href="product_page.html"
><img src="images/main/shopping.jpg" alt="쇼핑몰"
/></a>
<figcaption><span>product pages</span></figcaption>
</figure>
<figure class="javascript">
<a
href="https://github.com/seraphinaciel/p2023.git"
target="_blank"
><img src="images/main/javascript.jpg" alt=""
/></a>
<figcaption><span>javascript</span></figcaption>
</figure>
<dl class="phublising">
<dt>interactive, parallax scroll</dt>
<dd>UX/UI 기반, 직관적인 클린 코드를 지향</dd>
<dd>다양한 시각적 효과를 역동적인 애니메이션으로 구현 가능</dd>
<dd>photoshop, figma 등을 사용하여 원활한 소통</dd>
</dl>
</li>
</ul>
</article>
<article class="project">
<div>
<p>
웹 퍼블리싱에서 관리에 이르기까지 그 동안 해왔던 작업들을
모아두었습니다.<br /><br />디지털 세계는 지난 10년 동안 매우 빠른
속도로 성장해왔으며 제 목표는 함께 진화하는 것이었습니다.<br /><br />저는
매일 새로운 기술을 배우고 습득하고 있습니다.🤞
</p>
</div>
<div class="proList">
<ul></ul>
<button>more</button>
</div>
</article>
<article class="storyGraph">
<div class="history">
<ul>
<li>
<strong>(재) 백제직업전문학교</strong>
<em>2014. 8 ~ 2015. 1</em>안드로이드 앱 개발 과정으로 java, mysql,
oracle을 배웠다. 앱을 홍보하는 수단으로 사이트를 만들어봤는데,
여기에 흥미가 생겨 본격적으로 html, css, javascript를 독학하기
시작했다.
</li>
<li>
<strong>GTQ 그래픽기술자격1급</strong>
<em>2015. 6. 12</em>컴퓨터그래픽 디자인 능력을 평가하는
국가공인자격시험.
</li>
<li>
<strong>Sharp Seven</strong> <em>2015. 12 ~ 2016. 5</em>반응형 웹
전문으로 만드는 웹에이전시. 메인 디자이너, 코딩(javascript) 및
기획 업무를 했다. 고객을 어떻게 대해야 하는지, 사회 생활 전반을
배웠다. <br />-- 경영 악화로 퇴직하게 되었다.
</li>
<li>
<strong>(주) 사각</strong> <em>2016. 6 ~ 2017. 6</em>15명 인원의
디자인 전문 회사. <br />쇼핑몰 및 배너, SNS 홍보 디자인을 하면서
코딩을 했다. 디자인을 제대로 배워본 시간이었다.<br />-- 큰
회사에서 일해보고 싶었고, 내 실력을 향상시키고 싶은 열망에
이직하였다.
</li>
<li>
<strong>웹디자인기능사</strong> <em>2017. 9. 29</em>시스템자원 &
웹 S & W 활용능력, 웹표준 접근성을 평가하는 국가기술자격증.
</li>
<li>
<strong>(주) 스코인포</strong> <em>2017. 11 ~ 2022.6</em>30명 이상
인원의 웹에이전시. <br />웹접근성을 준수하며 인증 마크도 획득해봄.
마크업을 깊게 공부해보고 다양한 UX/UI를 기획하고 만들어 보는
시간이었다.<br />-- 획일화된 작업에 회의를 느껴 본격적으로 Front
end를 공부하기 위해 이직하였다.
</li>
<li>
<em>2022. 6. ~ 2023. 3</em>그 동안 열심히 일한 나에게 쉬어가는
시간을 선물.<br />미뤄두었던 여행 등 다양한 경험을 즐기는
중이다.<br />javascript를 공부하는 중
</li>
<li>
<strong>더제이</strong>
<em>2023. 4. ~ 현재</em>React, Pug, Vite 등 새로운 언어를
경험중이다.<br />
</li>
</ul>
</div>
<div class="pieBox">
<div>
<div class="pieContainer">
<p id="pieSlice1" class="pieSlice" data-degree="0">
<span
class="pie"
data-color="#31A8FF"
data-rotate="105"
data-percent="23.8"
></span>
</p>
<p id="pieSlice2" class="pieSlice" data-degree="105">
<span
class="pie"
data-color="#7952B3"
data-rotate="105"
data-percent="23.8"
></span>
</p>
<p id="pieSlice3" class="pieSlice" data-degree="210">
<span
class="pie"
data-color="#FCC832"
data-rotate="45"
data-percent="16.6"
></span>
</p>
<p id="pieSlice4" class="pieSlice" data-degree="255">
<span
class="pie"
data-color="#34A352"
data-rotate="60"
data-percent="19"
></span>
</p>
<p id="pieSlice5" class="pieSlice" data-degree="315">
<span
class="pie"
data-color="#CC6699"
data-rotate="45"
data-percent="16.6"
></span>
</p>
</div>
<div class="colorSign">
<ul class="pieName">
<li data-percent=""><i></i>photoshop</li>
<li data-percent=""><i></i>HTML / CSS</li>
<li data-percent=""><i></i>javascript, react etc.</li>
<li data-percent=""><i></i>figma</li>
<li data-percent=""><i></i>scss</li>
</ul>
</div>
</div>
</div>
</article>
</main>
<div class="cursor"></div>
<div class="cursor-follower"></div>
<footer id="include" data-include-path="fnb.html"></footer>
<a href="javascript:void(0);" class="btnTop">Top</a>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="js/include.js"></script>
<script src="js/common.js"></script>
<script src="js/main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
</body>
</html>