-
Notifications
You must be signed in to change notification settings - Fork 1
/
남정욱.html
245 lines (234 loc) · 8.66 KB
/
남정욱.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>남정욱INFO</title>
<link rel="stylesheet" href="./css/남정욱.css" />
<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=Bagel+Fat+One&family=Bungee+Spice&family=Kanit:ital,wght@0,400;1,200&family=Luckiest+Guy&family=Nanum+Pen+Script&family=Open+Sans:wght@300&display=swap"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"
/>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
/* 모달 스타일 */
.modal {
border: 1px ;
border-radius: 8px;
box-shadow: 0 0 3px black;
display: none;
position: fixed;
z-index: 1;
left: 10%;
top: -100%;
width: 80%;
height: 60%;
overflow: auto;
background-color: #fefefe;
}
/* 닫기 버튼 스타일 */
.close {
color: #aaa;
float: right;
font-size: 50px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.modal h1{
font-size: 50px;}
.modal .자기소개
{
font-family: 'Bagel Fat One', cursive;
margin-top: 3%;
font-size: 25px;
display: flex;
transition: all 0.5s;
transition-delay: 0.4s;
justify-content: center;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div class="title">
<h1></h1>
</div>
<header>
<nav class="popo_nav">
<div class="nav_content">
<ul>
<li class="헤더">
<a href="index.html">팀 홈페이지</a>
</li>
<li class="남정욱">
<a href="남정욱.html">남정욱</a>
</li>
<li class="김현승"><a href="김현승.html">김현승</a></li>
</ul>
</div>
</nav>
</header>
<div class="chart-wrap">
<h1>Used Language</h1>
<canvas id="myChart" width="400" height="400"></canvas>
</div>
<section id="about" >
<div class="about_profile" >
<div class="property">
<div class="property_box" onclick="openModal()">
<div class="poster">
<h2>망곰이</h2>
<figure class="item">
<img src="./images/망곰.png" alt="">
<p>LIKE</p>
</figure>
</div>
</div>
<div class="property_box "onclick="openModal2()" >
<div class="poster">
<h2>컴공</h2>
<figure class="item">
<img src="./images/icon.jpg" alt="">
<p>MAJOR</p>
</figure>
</div>
</div>
<div class="property_box" onclick="openModal3()" >
<div class="poster">
<h2>INFP</h2>
<figure class="item">
<img src="./images/infp.png" alt="">
<p>MBTI</p>
</figure>
</div>
</div>
<div class="property_box" onclick="openModal4()">
<div class="poster">
<h2>FnDev</h2>
<figure class="item">
<img src="./images/react-logo.png" alt="">
<p>Dream</p>
</figure>
</div>
</div>
</section>
<div class="chat-wrap">
<div class="title-wrap pt-4">
<h1>Contact Me 👋</h1>
</div>
<div class="form-wrap my-4 p-4">
<form style="width: 100%" id="contact-form">
<div id="tagArea" style="padding: 0 4px"></div>
<div class="form-floating mb-3">
<input type="text" class="form-control" id="inputName" name="name" aria-describedby="emailHelp" placeholder="Your name" />
<label for="inputName" class="form-label">Your name</label>
</div>
<div class="form-floating mb-3" style="margin-left: auto; margin-right: auto">
<input type="email" class="form-control" id="inputEmail" name="email" aria-describedby="emailHelp" placeholder="Your phone number" value="[email protected]" readonly />
<label for="inputPhone" class="form-label">Your email address</label>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" id="inputPhone" name="phone" aria-describedby="emailHelp" placeholder="Your email address" />
<label for="inputEmail" class="form-label">Your phone number</label>
</div>
<div class="form-floating mb-3">
<textarea class="form-control" style="height: 13rem; resize: none" name="message" id="floatingTextarea" placeholder="Comments"></textarea>
<label for="floatingTextarea">Comments</label>
</div>
<div class="nav justify-content-end px-2">
<button name="submit" class="btn btn-outline-success">전송</button>
</div>
</form>
</div>
<div>
<div id="LIKE" class="modal">
<span class="close" onclick="closeModal()">×</span>
<h1>about</h1>
<div class="자기소개">
최근에 망고미란 캐릭터에 빠졌습니다.<br />
망고미의 발랄할 매력과 친구 햄찌와의 케미는 정말 재밌습니다.<br />
또 막상 귀여운 내용뿐 아니라 교훈적인 부분도 심금을 울립니다.<br />
인스타 @yurang을 검색해서 망고미 만화를 한 번 보시는걸 추천합니다.<br />
<br />
</div>
</div>
<div id="MAJOR" class="modal">
<span class="close" onclick="closeModal2()">×</span>
<h1>about</h1>
<div class="자기소개">
어릴적부터 무언갈 만드는 걸 좋아했습니다.
<br />
매우 어릴때는 조각가가 되고 싶었지만 저는 손재주가
<br />
너무 심할정도로 없었고 손재주 없이 무언갈 만드는 직업을 가지고 싶다
<br />
생각했고 그때 떠올랐던게 컴퓨터 공학과입니다.
<br />
그렇게 컴퓨터 공학을 선택하게 되었고
<br />
지금은 아주 훌륭한 선택이었다 생각합니다.
</div>
</div>
<div id="HOBBY" class="modal">
<span class="close" onclick="closeModal3()">×</span>
<h1>about</h1>
<div class="자기소개">
인프피입니다.
<br />
어떨때는 isfp가 나오기도 하는데
<br />
10번 중 7번은 infp가 나오는 것 같습니다.
<br />
프로그래머스에서 주최한 개발자 mbti 분표 비율을 보니 infp가 2등
<br />
이던데 그래서 그런지 개발자랑 나랑 잘맞는것 같습니다
</div>
</div>
<div id="DREAM" class="modal">
<span class="close" onclick="closeModal4()">×</span>
<h1>about</h1>
<div class="자기소개">
프론트 개발자가 목표입니다.
<br />
백엔드나 데브옵스도 분명 멋진 일이지만
<br />
클라이언트와 가장 가까우면서 무언갈 제작했을때
<br />
가시적으로 보여지는 프론트 엔드야 말로 저랑 가장
<br />
잘 맞는 직종인것 같습니다.
<br />
좋은 fn 개발자가 되기 위해 함수형 프로그래밍, 클린코드
<br />
디자인 패턴에 큰 관심이 있습니다.
</div>
</div>
</div>
<script src="./js/typing.js"></script>
<script src="./js/script1.js"></script>
<script src="./js/chart.js"></script>
<script src="./js/email_wook.js"></script>
<script src="./js/modal.js"></script>
<script src="./js/modal2.js"></script>
<script src="./js/modal3.js"></script>
<script src="./js/modal4.js"></script>
</body>
</html>