-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
207 lines (190 loc) · 8.81 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
<!DOCTYPE html>
<html lang="en">
<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" />
<title>Danah's Portfolio</title>
<meta name="description" content="Frontend developer Danah's portfolio" />
<meta name="author" content="Danah" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Danah's Portfolio" />
<meta property="og:title" content="Danah's Portfolio" />
<meta property="og:description" content="Frontend developer Danah's portfolio" />
<meta property="og:image" content="imgs/home-background.png" />
<!-- 파비콘 -->
<link rel="icon" type="image/png" href="imgs/favicon.png" />
<!-- 구글폰트 -->
<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=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<!-- 스타일css -->
<link rel="stylesheet" href="style.css" />
<!-- fontawesome -->
<script src="https://kit.fontawesome.com/8fc437851e.js" crossorigin="anonymous"></script>
<script src="main.js" defer></script>
</head>
<body>
<!-- navbar -->
<nav class="navbar">
<div class="navbar__logo">
<img src="imgs/favicon.png" alt="logo" width="30" height="30">
<a href="#">DanAh</a>
</div>
<ul class="navbar__menu">
<li class="navbar__menu__item active" data-link=".home">Home</li>
<li class="navbar__menu__item" data-link=".about">About</li>
<li class="navbar__menu__item" data-link=".skills">Skills</li>
<li class="navbar__menu__item" data-link=".projects">Projects</li>
<li class="navbar__menu__item" data-link=".contact">Contact</li>
</ul>
<!-- navbar Toggle button -->
<button class="navbar__toggle-btn">
<i class="fas fa-bars"></i>
</button>
</nav>
<!-- Home -->
<section class="home">
<div class="home__container">
<img src="imgs/profile.png" alt="DanAh's profile photo" class="home__avatar">
<h1 class="home__title">Hello, <br/> I'm Kwon DanAh</h1>
<!-- <h2 class="home__description"></h2> -->
<button class="home__contact" data-link=".contact">Contact Me</button>
</div>
</section>
<!-- about -->
<section class="about section section__container">
<h1>About me</h1>
<!-- <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit vitae cupiditate labore sint exercitationem eos quia porro, voluptate culpa tempora possimus laborum reprehenderit ex odit totam facere dolorem. Quos, officiis.</p> -->
<ul class="about__list">
<li class="about__list__item about__list__Interval">
<div><i class="fas fa-user"></i></div>
<div class="about__list__common">
<b>이름 <br> <span>권단아</span></b>
</div>
</li>
<li class="about__list__item about__list__Interval">
<div><i class="fas fa-calendar"></i></div>
<div class="about__list__common">
<b>생년월일 <br> <span>97.08.29</span></b>
</div>
</li>
<li class="about__list__item about__list__Interval">
<div><i class="fas fa-map-marker-alt"></i></div>
<div class="about__list__common">
<b>주소지 <br> <span>경기도 광주시</span></b>
</div>
</li>
<li class="about__list__item about__list__Interval">
<div><i class="fas fa-phone-alt phone__icon"></i></div>
<div class="about__list__common">
<b>연락처 <br> <span>Please contact me by email</span></b>
</div>
</li>
<li class="about__list__item about__list__Interval">
<div><i class="fas fa-envelope email__icon"></i></div>
<div class="email about__list__common">
<b>이메일 <br> <span>thdgus0829@gmail.com</span></b>
</div>
</li>
<li class="about__list__item">
<div><i class="fas fa-dumbbell hobby__icon"></i></div>
<div class="about__list__common">
<b>취미 <br> <span>운동하기</span></b>
</div>
</li>
</ul>
</section>
<!-- skills -->
<section class="skills section">
<div class="section__container">
<h1>skills</h1>
<!-- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae soluta, architecto in saepe labore facere aliquam, error numquam dignissimos provident deleniti explicabo incidunt officia praesentium voluptates consequatur quaerat asperiores eaque!</p> -->
<div class="skillset">
<div class="skillset__left">
<h2>Front-end</h2>
<img src="imgs/html_누끼.png" alt="html로고" width="150" height="170" class="html__logo">
<img src="imgs/css_누끼.png" alt="css로고" width="150" height="170" class="css__logo">
<img src="imgs/js_누끼.png" alt="js로고" width="150" height="170"> <br>
<img src="imgs/scss-icon.png" alt="scss로고" width="170" height="130">
<img src="imgs/react-icon.png" alt="react로고" width="300" height="115" class="react__logo">
</div>
<div class="skillset__right">
<h2>Version Control</h2>
<img src="imgs/git-icon.png" alt="git로고" width="275" height="170" class="git__logo__icon">
<img src="imgs/github-icon.png" alt="github로고" width="140" height="110" class="github__logo__icon">
</div>
</div>
</div>
</section>
<!-- projects -->
<section class="works__projects projects section section__container">
<h1>Projects</h1>
<div class="work__projects">
<a href="https://dan9708.github.io/momentum/" class="project" target="_blank">
<img src="imgs/projects/Momentum_laptop.png" alt="" class="project__img">
<div class="project__description">
<h3>Momentum App</h3>
<p> - JS미니 프로젝트 - <br> DOM을 공부하기 위해서 <br> 크롬 확장프로그램에 있는 Momentum을 html, css, Js를 사용하여서 만들어보았습니다.</p>
</div>
</a>
<a href="https://dan9708.github.io/shopping-list/" class="project" target="_blank">
<img src="imgs/projects/shopping_phone.png" alt="" class="project__img project__phone">
<div class="project__description">
<h3>Shopping List</h3>
<p>- JS미니 프로젝트 - <br> 일상생활에서 많이 사용되는 쇼핑목록을 만들어서 물건을 사는 것을 잊지않기 위해서 쇼핑리스트를 만들었다.</p>
</div>
</a>
<a href="https://dan9708.github.io/React-movie/" class="project" target="_blank">
<img src="imgs/projects/movie_laptop.png" alt="" class="project__img">
<div class="project__description">
<h3>Movie</h3>
<p>영화 API를 불러와서 별점이 <br> 8.5점 이상인 영화들을 html, css, js, react를 사용해서 만들었다.</p>
</div>
</a>
<a href="https://dan9708.github.io/coordinates/" class="project" target="_blank">
<img src="imgs/projects/coordinates_laptop.png" alt="" class="project__img">
<div class="project__description">
<h3>좌표를 찾아라</h3>
<p>- JS미니 프로젝트 - <br> 마우스를 움직이면 <br> 해당 좌표의 값을 알려준다.</p>
</div>
</a>
<a href="https://dan9708.github.io/carrot_game/" class="project" target="_blank">
<img src="imgs/projects/carrot_laptop.png" alt="" class="project__img">
<div class="project__description">
<h3>당근게임</h3>
<p>- JS미니 프로젝트 - <br> 시간안에 당근을 모두 클릭하는 것 벌레를 누르면 게임종료<br> </p>
</div>
</a>
<a href="https://dan9708.github.io/rabbit/" class="project" target="_blank">
<img src="imgs/projects/rabbit_phone.png" alt="" class="project__img project__phone">
<div class="project__description">
<h3>토끼를 찾아라!!!</h3>
<p>버튼을 누르면 <br> 토끼가 있는 곳으로 이동</p>
</div>
</a>
</div>
</section>
<!-- contact -->
<section class="contact section">
<div class="contact__links">
<a href="https://github.com/dan9708" target="_blank">
<i class="fab fa-github"></i>
</a>
<a href="https://www.notion.so/9bc7db845dbf489dae3e351018f3c4ce" target="_blank">
<img src="imgs/notion.png"노션아이콘" class="notion__icon">
</a>
<a href="https://velog.io/@dan9708" target="_blank">
<img src="imgs/velog-icon-green.png" alt="벨로그아이콘" class="velog__icon">
</a>
</div>
<p class="contact__rights">
ⓒ 2022. Kwon Dan Ah - All rights reserved
</p>
</section>
<!-- Arrow Up Button -->
<button class="arrow-up">
<i class="fas fa-arrow-up"></i>
</button>
</body>
</html>