-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
219 lines (185 loc) · 10.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="./views/img/favicon.ico">
<title>Kim Portfolio</title>
<!-- scss -->
<link rel="Stylesheet" href="./views/css/style.css"/>
<!-- Bootstrap CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- google font -->
<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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
<!-- script -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- ASOS -->
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<!-- fontawesome -->
<script src="https://kit.fontawesome.com/b0671e4f35.js" crossorigin="anonymous"></script>
</head>
<body class="body">
<div class="cursor" id="cursor"></div>
<!-- <div class="d-flex h-100 p-3 mx-auto flex-column"> -->
<div class="d-flex flex-column">
<nav class="navbar">
<div class="logo">
<h1 class="float-md-start mb-0">K<span>I</span>M</h1>
</div>
<ul class="nav nav-items nav-masthead justify-content-center float-md-end">
<li class="nav-link active" aria-current="page"><a href="../index.html">Home</a></li>
<li class="nav-link"><a href="./views/work.html">Work</a></li>
<li class="nav-link"><a href="./views/about.html">About</a></li>
</ul>
<div class="hamburger">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
</nav>
<!-- main typo -->
<section class="hero animate p-2 w-100" data-animate="motion">
<div class="hero-section">
<h2 class="hero__title" data-aos="fade-down"
data-aos-easing="linear"
data-aos-duration="5000">Hello, I am Kim👋 </h2>
<h2 class="hero-ratate-section">I mainly do
<span
class="txt-rotate"
data-period="2000"
data-rotate='[ "Design.", "Coding."]'></span>
</h2>
</div>
</section>
<!-- Featured Work Card -->
<section class="featured-card p-2 w-100">
<div class="featured-title aos-init aos-animate">
<h2 data-aos="fade-up" data-aos-duration="5000">FEATURED WORK</h2>
</div>
<div class="zero featured" data-aos="flip-left" data-aos-duration="8000">
<img class="featured-profile-img" src="./views/img/moviesite.jpg" alt="">
<div class="featured-description-bk"></div>
<div class="featured-logo">
<img src="./views/img/dev-img-bn.jpg" alt="">
</div>
<div>
<div class="featured-description">
<p class="featured-description-title">Front-end Development</p>
<h1>Movie Website</h1>
</div>
<p class="featured-date">January 2023</p>
<button type="button" class="featured-btn">
<a href="./views/moviesite.html">View Project</a>
</button>
</div>
</div>
<div class="first featured" data-aos="flip-left" data-aos-duration="8000">
<img class="featured-profile-img" src="./views/img/twitter_mockup.jpg" alt="">
<div class="featured-description-bk"></div>
<div class="featured-logo">
<img src="./views/img/dev-img-bn.jpg" alt="">
</div>
<div>
<div class="featured-description">
<p class="featured-description-title">Front-end Development</p>
<h1>Twitter</h1>
</div>
<p class="featured-date">September 2022</p>
<button type="button" class="featured-btn">
<a href="./views/twitterproject.html">View Project</a>
</button>
</div>
</div>
<div class="second featured" data-aos="flip-left" data-aos-duration="8000">
<img class="featured-profile-img" src="./views/img/expensetracker-mockup.jpg" alt="">
<div class="featured-description-bk"></div>
<div class="featured-logo">
<img src="./views/img/dev-img-bn.jpg" alt="">
</div>
<div>
<div class="featured-description">
<p class="featured-description-title">Front-end Development</p>
<h1>Kims Pocket</h1>
</div>
<p class="featured-date">December 2022</p>
<button type="button" class="featured-btn">
<a href="./views/expensetracker.html">View Project</a>
</button>
</div>
</div>
<div class="third featured" data-aos="flip-left" data-aos-duration="8000">
<img class="featured-profile-img" src="./views/img/blog-workpage.jpg" alt="">
<div class="featured-description-bk"></div>
<div class="featured-logo">
<img src="./views/img/dev-img-bn.jpg" alt="">
</div>
<div>
<div class="featured-description">
<p class="featured-description-title">Full Stack Development</p>
<h1>Blog</h1>
</div>
<p class="featured-date">March 2021</p>
<button type="button" class="featured-btn">
<a href="./views/blogproject.html">View Project</a>
</button>
</div>
</section>
<section class="loading">
<div id="loading-page">
<div id="loader">
<div class="particles element">
<div class="spark1 spark element"><div class="particle1 particle element"></div></div>
<div class="spark2 spark element"><div class="particle2 particle element"></div></div>
<div class="spark3 spark element"><div class="particle3 particle element"></div></div>
<div class="spark4 spark element"><div class="particle4 particle element"></div></div>
<div class="spark5 spark element"><div class="particle5 particle element"></div></div>
<div class="spark6 spark element"><div class="particle6 particle element"></div></div>
<div class="spark7 spark element"><div class="particle7 particle element"></div></div>
<div class="spark8 spark element"><div class="particle8 particle element"></div></div>
<div class="spark9 spark element"><div class="particle9 particle element"></div></div>
<div class="spark10 spark element"><div class="particle10 particle element"></div></div>
<div class="spark11 spark element"><div class="particle11 particle element"></div></div>
<div class="spark12 spark element"><div class="particle12 particle element"></div></div>
</div>
<div class="ray element"></div>
<div class="sphere element"></div>
</div>
</div>
<div id="lastray" class="element"></div>
</section>
<footer class="footer">
<div class="footer-content aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000">
<h1> Let's Connect! </h1>
<p>If your're interested in working with me,<br/> please feel free to reach out to me at</p>
<a href="mailto://[email protected]"><span class="highlight">[email protected]</span></a>
<ul class="footer-link">
<li>
<a href="">
<i class="fab fa-instagram">
</i>
</a>
</li>
<li>
<a href="https://github.com/Kimmyyoung">
<i class="fab fa-github">
</i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/kimmy-kim/">
<i class="fab fa-linkedin-in">
</i>
</a>
</li>
</ul>
</div>
</footer>
</div>
<script type="module" src="./views/js/app.js"></script>
<script type="module" src="./views/js/index.js"></script>
<script>AOS.init();</script>
</body>
</html>