-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
360 lines (357 loc) · 13.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="src/style/globals.css" />
<link rel="stylesheet" href="src/style/header.css" />
<link rel="stylesheet" href="src/style/main.css" />
<link rel="stylesheet" href="src/style/about.css" />
<link rel="stylesheet" href="src/style/develop.css" />
<link rel="stylesheet" href="src/style/design.css" />
<link rel="stylesheet" href="src/style/contact.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="theme-color"
content="#1d212a"
media="(prefers-color-scheme: dark)"
/>
<meta name="color-scheme" content="dark" />
<meta name="author" content="박범수" />
<meta
name="keywords"
content="프론트앤드 웹개발 웹디자인 퍼블리셔 포트폴리오 웹사이트"
/>
<meta
name="description"
content="박범수의 프론트앤드 개발 & 웹디자인 포트폴리오
페이지입니다. 라이브러리 없이 오직 html + css + JS 만으로 구현하였습니다."
/>
<title>박범수 포트폴리오 | 개발 & 디자인</title>
</head>
<body>
<header>
<nav>
<a href="/">
<span>home</span>
</a>
<menu id="nav__menu">
<li>about</li>
<li>develop</li>
<li>design</li>
<li>contact</li>
</menu>
</nav>
<img class="banner" src="src/assets/images/banner.svg" alt="banner" />
</header>
<main id="main">
<section id="section__main">
<article id="article__main">
<div class="sticky__wrapper">
<div id="viewport__main" class="viewport">
<video
class="main__background"
src="src/assets/videos/ocean.mp4"
autoplay
loop
muted
playsinline
></video>
<div id="scroll-down">
<div class="mouse"></div>
<p>drive slow...</p>
</div>
</div>
</div>
</article>
</section>
<section id="section__about">
<article id="article__about">
<div class="sticky__wrapper">
<div id="viewport__about" class="viewport">
<div class="about__container">
<img
id="target__img"
class="about__profile"
src="src/assets/images/profile.webp"
/>
<div class="about__form">
<h2>creativity meets technology</h2>
<p>
개발과 디자인을 넘나드는 융합형 인재를 목표합니다. 직관적인
디자인, 딜레이 없는 서비스 제공을 최우선으로 생각합니다.
</p>
<p>
JS 기반의 프론트앤드 프레임워크에 능숙하며 api 작업, DB 쿼리
작성 등 일부 백앤드 작업 또한 가능합니다. Figma와 Clip
studio paint를 활용하여 UI/UX 디자인, 일러스트 작업 등이
가능합니다.
</p>
<hr />
</div>
</div>
</div>
</div>
</article>
</section>
<section id="section__develop">
<article id="article__develop__1">
<div id="project__1" class="sticky__wrapper">
<div id="viewport__develop__1" class="viewport">
<img class="damn" src="src/assets/images/wave.webp" />
</div>
<div class="smartphone__wrapper">
<div class="smartphone">
<div class="face front">
<div class="smartphone__button">
<a href="https://chocoham.dev" target="_blank">
<button>view more</button>
</a>
</div>
<img
class="smartphone__footer"
src="src/assets/images/Mobile_footer.svg"
/>
<div class="carousel">
<img src="src/assets/images/blog_1.webp" alt="Image 1" />
<img src="src/assets/images/blog_2.webp" alt="Image 2" />
<img src="src/assets/images/blog_3.webp" alt="Image 3" />
</div>
</div>
<div class="face back"></div>
<div class="face left"></div>
<div class="face right"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
<div class="title">
<h2>chocoham blog</h2>
</div>
</div>
<div class="develop__form">
<div class="hashtag__wrapper">
<tag># Next.js</tag>
<tag># typescript</tag>
<tag># SCSS</tag>
<tag># node.js</tag>
<tag># mongoDB</tag>
</div>
<li>
<strong>SEO</strong> 최적화와 필요 요소들을 배웠습니다.
<strong>Google PageSpeed Insights</strong> 기준 검색엔진 최적화
<strong>100점</strong>, 성능 <strong>90점</strong>을 받았습니다.
</li>
<li>
외부 호스팅 서버 <strong>CDN</strong>을 구성, 기존에 비해
<strong>이미지 로딩</strong> 시간을
<strong>1초 이상</strong> 줄였습니다.
<strong>AWS S3 bucket</strong>의 <strong>JS SDK</strong>를
블로그, CDN 서버와 연동해 포스트 작성시 썸네일 및 포스트 이미지
첨부를 구현했습니다.
</li>
<li>
사용 모듈의 버전업에 근거한 <strong>리팩토링</strong> 및
<strong>migration</strong>을 경험하였습니다. 신규 문법과 개선된
메소드 사용은 곧 <strong>성능 개선</strong>으로 이어졌습니다.
</li>
<li>
<strong>계층형 트리구조</strong>를 활용한
<strong>대댓글 시스템</strong>을 직접 구현하여
<strong>비관계형 DB</strong> 스키마의 설계 및
<strong>쿼리문</strong>, <strong>api</strong> 작성에 관해
배웠습니다.
</li>
</div>
</div>
</article>
<article id="article__develop__2">
<div id="project__2" class="sticky__wrapper">
<div id="develop__2" class="viewport">
<img class="damn" src="src/assets/images/wave.webp" />
</div>
<div class="smartphone__wrapper">
<div class="smartphone">
<div class="face front">
<div class="smartphone__button">
<a href="https://chocoham.dev" target="_blank">
<button>view more</button>
</a>
</div>
<img
class="smartphone__footer"
src="src/assets/images/Mobile_footer.svg"
/>
<div class="carousel">
<img
src="src/assets/images/portfolio_1.webp"
alt="Image 1"
/>
<img
src="src/assets/images/portfolio_2.webp"
alt="Image 2"
/>
<img
src="src/assets/images/portfolio_3.webp"
alt="Image 3"
/>
</div>
</div>
<div class="face back"></div>
<div class="face left"></div>
<div class="face right"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
<div class="title">
<h2>2025 portfolio</h2>
</div>
</div>
<div class="develop__form">
<div class="hashtag__wrapper">
<tag># javascript</tag>
<tag># CSS</tag>
<tag># vite</tag>
<tag># CI/CD</tag>
</div>
<li>
<strong>vanila JS, CSS</strong>만을 이용한 싱글페이지
애플리케이션입니다. 모든 기능을
<strong>라이브러리 없이</strong> 구현하였습니다.
<strong>vite</strong> 번들러를 활용해 페이지의 크기를
줄였습니다.
</li>
<li>
<strong>html, CSS</strong>만으로 실제 3D 모델과 유사한
컴포넌트를 작성했습니다. 실제 모델보다
<strong>퍼포먼스</strong>가 뛰어나고 캐러셀과 같이
<strong>interactive</strong>한 효과를 모델에 줄 수 있습니다.
</li>
<li>
<strong>intersection observer</strong>와
<strong>wheel 이벤트</strong>를 적절히 활용해 부드러운 스크롤을
구현했습니다. 스크립트를 통한 스크롤 이동시 스크롤 완료를
감지하여 로직을 <strong>동기적</strong>으로 수행합니다.
</li>
</div>
</div>
</article>
</section>
<section id="section__design">
<article id="article__design">
<div class="sticky__wrapper">
<div id="viewport__design" class="viewport">
<div class="belt__slow">
<div class="belt__slow__container">
<div class="card">
<img
id="target__img"
src="src/assets/images/design_1.webp"
alt="design"
/>
</div>
<div class="card">
<img
id="target__img"
src="src/assets/images/design_2.webp"
alt="design"
/>
</div>
<div class="card">
<img
id="target__img"
src="https://chocoham.dev/_next/image?url=https%3A%2F%2Fchoco-image-server.cdn.ntruss.com%2Fbuild%2Fbanner.png&w=1920&q=75"
alt="design"
/>
</div>
<div class="card">
<img
id="target__img"
src="src/assets/images/design_3.webp"
alt="design"
/>
</div>
<div class="card">
<img
id="target__img"
src="src/assets/images/design_4.webp"
alt="design"
/>
</div>
<div class="card">
<img
id="target__img"
src="src/assets/images/design_5.svg"
alt="design"
/>
</div>
</div>
</div>
<div class="belt">
<div class="belt__container">
<h2>design & illust</h2>
<h2>design & illust</h2>
<h2>design & illust</h2>
<h2>design & illust</h2>
<h2>design & illust</h2>
<h2>design & illust</h2>
</div>
</div>
</div>
</div>
</article>
</section>
<section id="section__contact">
<article id="article__contact">
<div class="sticky__wrapper">
<div id="viewport__contact" class="viewport">
<h2>thank you</h2>
<div class="contact__link">
<li>
<a href="https://github.com/banma1234" target="_blank">
<custom-svg
title="github"
size="1.6rem"
className="bi bi-x"
/>
</a>
</li>
<li>
<a href="https://chocoham.dev/" target="_blank">
<custom-svg title="web" size="1.6rem" className="bi bi-x" />
</a>
</li>
<li>
<a
href="https://www.linkedin.com/in/%EB%B2%94%EC%88%98-%EB%B0%95-abb51b260/"
target="_blank"
>
<custom-svg
title="linkedIn"
size="1.6rem"
className="bi bi-x"
/>
</a>
</li>
</div>
</div>
</div>
</article>
</section>
<div class="modal">
<div id="modal_body">
<div class="btn_container_modal">
<p id="modal_close">
<custom-svg title="cancel" size="2rem" className="bi bi-x" />
</p>
</div>
<img src="" alt="" />
<div class="btn_container_modal"></div>
</div>
</div>
</main>
<script type="module" src="src/script/global.js"></script>
<script type="module" src="src/script/animation.js"></script>
<script type="module" src="src/script/smoothScrollAction.js"></script>
<script type="module" src="src/script/intersectionObserver.js"></script>
<script type="module" src="src/script/components.js"></script>
</body>
</html>