-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
230 lines (228 loc) · 14 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
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>이호연 - 포트폴리오</title>
</head>
<body>
<div id="gnb">
<div class="logo">JASON LEE</div>
<ul>
<li><a href="#section-1">Home</a></li>
<li><a href="#section-2">About</a></li>
<li><a href="#section-3">Projects</a></li>
<li><a href="#section-4">Contact</a></li>
</ul>
</div>
<div class="parent row">
<section id="section-1" class="hero center">
<div class="info-container">
<div class="greeting">
<span>안녕하세요! 저는</span>
<h1><b>이호연</b>입니다.</h1>
<p>
단국대학교 18학년도 입학생, 프론트엔드 웹 개발자,<br />열정
넘치는 주니어 개발자입니다. 엔드 유저들을 위한 심리스한 웹
경험을 만들기 위해 노력하고 있습니다.
</p>
<div class="button-container">
<a
href="https://ho991217.notion.site/61a473a8e9bb415fa4f9908609215e3a"
target="_blank"
class="button filled"
>About Me<svg
xmlns="http://www.w3.org/2000/svg"
height="25"
viewBox="0 96 960 960"
width="25"
fill="#fefefe"
>
<path
d="M480 575.333q-66 0-109.667-43.666Q326.667 488 326.667 422t43.666-109.666Q414 268.667 480 268.667t109.667 43.667Q633.333 356 633.333 422t-43.666 109.667Q546 575.333 480 575.333ZM226.666 896Q199 896 179.5 876.5 160 857 160 829.334V796q0-36.666 18.5-64.166T226.667 690Q292 659.667 354.333 644.5 416.667 629.334 480 629.334t125.333 15.5q62 15.5 127.334 45.166Q763 704.334 781.5 731.834 800 759.334 800 796v33.334Q800 857 780.5 876.5 761 896 733.334 896H226.666Z"
/></svg
></a>
<a
target="_blank"
href="https://github.com/ho991217"
class="button outline"
>Projects<svg
xmlns="http://www.w3.org/2000/svg"
height="20"
viewBox="0 96 960 960"
width="20"
fill="#fefefe"
>
<path
d="m330 970-60.667-103.333L150 842q-12.333-2.333-20.333-13.167-8-10.833-6-23.166l13-117.667L59 598q-8.667-9-8.667-22T59 554l77.667-89.333-13-117.667q-2-12.333 6-23.167 8-10.833 20.333-13.166L269.333 286 330 182q6.667-11 18.667-15.167 12-4.166 24 1.167L480 216.667 587.333 168q12-5.333 24-1.5T630 181.333L691.333 286 810 310.667q12.333 2.333 20.333 13.166 8 10.834 6 23.167l-13 117.667L901 554q8.667 9 8.667 22T901 598l-77.667 90 13 117.667q2 12.333-6 23.166-8 10.834-20.333 13.167l-118.667 24.667-61.333 104q-6.667 11-18.667 14.833-12 3.833-24-1.5L480 935.333 372.667 984q-12 5.333-24 1.167Q336.667 981 330 970Zm44.667-60.666L480 864.667l108 44.667 63.334-98.667L766 782l-11.333-116.667L833.334 576l-78.667-91.333L766 368l-114.666-26.667L586 242.666l-106 44.667-108-44.667-63.334 98.667L194 368l11.333 116.667L126.666 576l78.667 89.333L194 784l114.666 26.667 66.001 98.667ZM480 576Zm-42.667 40.667-68-69.667q-9.667-10.333-23.833-10.333-14.167 0-24.833 10-10.334 10.333-10.334 24.666T320.667 596L414 688.667q10 10 23.333 10 13.334 0 23.334-10l178.666-178.001q10-10 9.834-23.999-.167-14-10.5-24-10-9.334-23.833-9.167-13.834.167-23.167 9.5L437.333 616.667Z"
/></svg
></a>
</div>
</div>
<div class="profile-pic">
<img src="/assets/profile.png" alt="프로필사진" />
</div>
</div>
</section>
<section id="section-2">
<div class="second-container">
<div class="info-head">
<h3>About Me:</h3>
<p>
안녕하세요, 제 이름은 이호연입니다. 저는 프론트엔드 웹
개발자이자, 약간의 백엔드 업무를 할 수 있는 풀스택 웹
개발자입니다. 저는 웹 개발을 통해 엔드 유저들에게 심리스한
경험을 제공하고 싶습니다. 단국대학교 컴퓨터공학과 3학년
재학 중이며,<br />
저의 기술 스택들은 다음과 같습니다.
</p>
</div>
<div class="info-array">
<h3>2+</h3>
<p>
년간의 웹 개발 경험이 있고, 다양한 프레임워크와
라이브러리를 활용하여 엔드 유저들에게 더 나은 경험을 제공할
수 있습니다. 주로 데스크탑에 또는 모바일에 최적화 된 웹
서비스를 제작합니다.
</p>
</div>
<div class="box-container">
<div class="box">
<p>
<svg
xmlns="http://www.w3.org/2000/svg"
height="48"
viewBox="0 96 960 960"
width="48"
fill="#fefefe"
>
<path
d="M140 896q-24 0-42-18t-18-42V316q0-24 18-42t42-18h680q24 0 42 18t18 42v520q0 24-18 42t-42 18H140Zm0-60h461V673H140v163Zm521 0h159V450H661v386ZM140 613h461V450H140v163Z"
/></svg
><br />FRONTEND<br />DEVELOPMENT
</p>
</div>
<div class="box">
<p>
<svg
xmlns="http://www.w3.org/2000/svg"
height="48"
viewBox="0 96 960 960"
width="48"
fill="#fefefe"
>
<path
d="M480 976q-84 0-157-31.5T196 859q-54-54-85-127.5T80 574q0-84 31-156.5T196 291q54-54 127-84.5T480 176q84 0 157 30.5T764 291q54 54 85 126.5T880 574q0 84-31 157.5T764 859q-54 54-127 85.5T480 976Zm0-58q35-36 58.5-82.5T577 725H384q14 60 37.5 108t58.5 85Zm-85-12q-25-38-43-82t-30-99H172q38 71 88 111.5T395 906Zm171-1q72-23 129.5-69T788 725H639q-13 54-30.5 98T566 905ZM152 665h159q-3-27-3.5-48.5T307 574q0-25 1-44.5t4-43.5H152q-7 24-9.5 43t-2.5 45q0 26 2.5 46.5T152 665Zm221 0h215q4-31 5-50.5t1-40.5q0-20-1-38.5t-5-49.5H373q-4 31-5 49.5t-1 38.5q0 21 1 40.5t5 50.5Zm275 0h160q7-24 9.5-44.5T820 574q0-26-2.5-45t-9.5-43H649q3 35 4 53.5t1 34.5q0 22-1.5 41.5T648 665Zm-10-239h150q-33-69-90.5-115T565 246q25 37 42.5 80T638 426Zm-254 0h194q-11-53-37-102.5T480 236q-32 27-54 71t-42 119Zm-212 0h151q11-54 28-96.5t43-82.5q-75 19-131 64t-91 115Z"
/></svg
><br />BACKEND<br />DEVELOPMENT
</p>
</div>
<div class="box">
<p>
<svg
xmlns="http://www.w3.org/2000/svg"
height="48"
viewBox="0 96 960 960"
width="48"
fill="#fefefe"
>
<path
d="M766 936q-41 0-71.5-24.5T656 852H443q-66 0-109.5-43.5T290 699q0-66 43.5-109.5T443 546h77q41 0 67-26t26-67q0-41-26-67t-67-26H304q-9 35-39 59.5T194 444q-48 0-81-33t-33-81q0-48 33-81t81-33q41 0 71 24.5t39 59.5h216q66 0 109.5 43.5T673 453q0 66-43.5 109.5T520 606h-77q-41 0-67 26t-26 67q0 41 26 67t67 26h213q9-35 39-59.5t71-24.5q48 0 81 33t33 81q0 48-33 81t-81 33ZM194 384q23 0 38.5-15.5T248 330q0-23-15.5-38.5T194 276q-23 0-38.5 15.5T140 330q0 23 15.5 38.5T194 384Z"
/></svg
><br />VERSION CONTROL<br />WITH GIT
</p>
</div>
<div class="box">
<p>
<svg
xmlns="http://www.w3.org/2000/svg"
height="48"
viewBox="0 96 960 960"
width="48"
fill="#fefefe"
>
<path
d="M251 896q-88 0-149.5-61.5T40 685q0-78 50-137t127-71q20-97 94-158.5T482 257q112 0 189 81.5T748 534v24q72-2 122 46.5T920 727q0 69-50 119t-119 50H251Z"
/></svg
><br />WEB SCRAPING<br />WITH PYTHON
</p>
</div>
</div>
</div>
</section>
<section id="section-3">
<div class="second-container">
<div class="info-head">
<h3>Featured Projects:</h3>
<p>
웹 개발자로서 다양한 프로젝트에 참여 하였습니다. 그 중 일부
현재 서비스 중이거나 배포되어 있는 라이브-프로젝트 세가지
입니다. 아래 버튼을 클릭하여 실제 웹 사이트에 접근하여볼
수도 있고, 깃허브 레포지토리를 통해 실제 소스코드 또한
확인해보실 수 있습니다.
</p>
</div>
<div class="card-container">
<div class="card">
<div class="thumbnail-container"><img src="/assets/thumbnail_dkustu.png" alt="" /></div>
<h5 class="title">단국대학교 총학생회 홈페이지</h5>
<p class="card-body">54대, 55대 총학생회 홈페이지 웹 개발 프론트엔드 제작 총괄을 맡았습니다.</p>
<div class="button-container">
<a href="https://www.dkustu.com" target="_blank" rel="noopener noreferrer" class="button filled"
>Live Preview</a
>
<a href="https://github.com/EveryUniv/student-council-homepage-frontend" target="_blank" rel="noopener noreferrer" class="button outline"
>Github Repo</a
>
</div>
</div>
<div class="card">
<div class="thumbnail-container"><img src="/assets/thumbnail_danfesta.png" alt="" /></div>
<h5 class="title">Danfesta</h5>
<p class="card-body">2023년 단국대학교 대동제 모바일 티켓 서비스 프론트엔드 부문 단독 제작하였습니다.</p>
<div class="button-container">
<a href="https://danfesta.dkustu.com" target="_blank" rel="noopener noreferrer" class="button filled"
>Live Preview</a
>
<a href="https://github.com/EveryUniv/danfesta" target="_blank" rel="noopener noreferrer" class="button outline"
>Github Repo</a
>
</div>
</div>
<div class="card">
<div class="thumbnail-container"><img src="/assets/thumbnail_pr6.png" alt="" /></div>
<h5 class="title">Project6</h5>
<p class="card-body">업계 최초 정가제 서비스 개발 / 의뢰 서비스 Project6에서 풀스택 개발을 맡았습니다. </p>
<div class="button-container">
<a href="https://pr6.kr" target="_blank" rel="noopener noreferrer" class="button filled"
>Live Preview</a
>
<a href="https://github.com/Croar-Creative/pr6-frontend" target="_blank" rel="noopener noreferrer" class="button outline"
>Github Repo</a
>
</div>
</div>
</div>
</section>
<section id="section-4">
<div class="third-container">
<div class="info-head">
<h3>Contact Me At:</h3>
<p>
Did you like my work? Want to work with me?<br/> 아래의 연락처로 연락주시면 감사하겠습니다.
</p>
<a class="mail-link contact-info" href="mailto:ho991217@kakao.com"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24" fill="#3B1F1E"><path d="M140 896q-24 0-42-18t-18-42V316q0-24 18-42t42-18h680q24 0 42 18t18 42v520q0 24-18 42t-42 18H140Zm340-302 340-223v-55L480 534 140 316v55l340 223Z"/></svg> ho991217@kakao.com</a>
<span class="phone-info contact-info" ><svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M260 1016q-24 0-42-18t-18-42V196q0-24 18-42t42-18h440q24 0 42 18t18 42v760q0 24-18 42t-42 18H260Zm220-75q13 0 21.5-8.5T510 911q0-13-8.5-21.5T480 881q-13 0-21.5 8.5T450 911q0 13 8.5 21.5T480 941ZM260 806h440V286H260v520Z"/></svg>010-8916-4754</span>
</div>
</div>
</section>
</div>
</body>
</html>