-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
255 lines (215 loc) · 11.6 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
<!--
무엇을 추가할 것인가?
- nav 섹션
- 전체 콘텐츠 페이지를 감싸는 div
불러올 각각의 페이지는 모두 'page' 클래스를 가지고 있다.
Dependency: FontAwesome, Marked
-->
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css" />
<!-- Start Single Page Apps for GitHub Pages -->
<script type="text/javascript">
// Single Page Apps for GitHub Pages
// MIT License
// https://github.com/rafgraph/spa-github-pages
// This script checks to see if a redirect is present in the query string,
// converts it back into the correct url and adds it to the
// browser's history using window.history.replaceState(...),
// which won't cause the browser to attempt to load the new url.
// When the single page app is loaded further down in this file,
// the correct url will be waiting in the browser's history for
// the single page app to route accordingly.
(function (l) {
if (l.search[1] === '/') {
var decoded = l.search.slice(1).split('&').map(function (s) {
return s.replace(/~and~/g, '&')
}).join('?');
window.history.replaceState(null, null,
l.pathname.slice(0, -1) + decoded + l.hash
);
}
}(window.location))
</script>
<!-- End Single Page Apps for GitHub Pages -->
<script src="https://kit.fontawesome.com/4ad9fc3082.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
<div class="wrapper">
<div class="loader-wrapper page">
<span class="loader"><span class="loader-inner"></span></span>
</div>
<!-- ----------------------------------------------------------------------- -->
<!-- 사이드바 영역 -->
<!-- ----------------------------------------------------------------------- -->
<div class="sidebar">
<div class="logo"> <span class="logo-text">zzunebye</span><svg aria-hidden="true" focusable="false"
data-prefix="fad" data-icon="angle-double-right" role="img" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512" class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x">
<g class="fa-group">
<path fill="currentColor"
d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
class="fa-secondary"></path>
<path fill="currentColor"
d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
class="fa-primary"></path>
</g>
</svg></div>
<ul>
<li><a href="#readme" class="link"><i class="fab fa-markdown"></i><span class="link-text">ReadMe</span></a></li>
<li><a href="#articles" class="link"><i class="fab fa-pied-piper-square"></i><span class="link-text">Articles</span></a></li>
<li><a href="#travel" class="link" onclick="menuClicked(this.id)"><i class="fas fa-globe-europe"></i><span class="link-text">Travel</span></a></li>
<li><a href="#tasks" class="link" onclick="menuClicked(this.id)"><i class="fas fa-tasks"></i><span class="link-text">Tasks</span></a></li>
<li><a href="#portfolio" class="link" onclick="menuClicked()"><i class="fas fa-user"></i><span class="link-text">Portfolio</span></a></li>
<li><a href="#about" class="link" onclick="menuClicked(this.id)"><i class="fas fa-address-card"></i><span class="link-text">About</span></a></li>
</ul>
<div class="social_media">
<a href="https://www.facebook.com/june6young"><i class="fab fa-facebook-f"></i></a>
<a href="https://www.linkedin.com/in/jun-young-bang-429328132/"><i class="fab fa-linkedin"></i></a>
<a href="https://www.instagram.com/zzunebye/"><i class="fab fa-instagram"></i></a>
</div>
</div>
<!-- ----------------------------------------------------------------------- -->
<!-- 컨텐츠 영역 -->
<!-- ----------------------------------------------------------------------- -->
<div class="main_content">
<!-- Front Page -->
<div id="readme" class="page active">
<div id="readme-page">
<article id="readme-wrapper">
<h2 id=readme-head></h2>
<div id=readme-content></div>
</article>
</div>
</div>
<div id="articleList" class="page">
<h1 id="articles-title">Blog Articles</h1>
<div class="photo-grid" id="grid-blog">
</div>
<div id="grid-content-page">
<a href="#articles" id="backBtArticle" class="blur" onclick="backToArticles()">< Back to the list</a>
<article id="article-wrapper">
<h2 id=article-head></h2>
<div id=article-content></div>
</article>
</div>
</div>
<div id="practice" class="page">
<h1>Practice for my Webpage</h1>
<p>
This webpage is my own modified homepage of the guideline page from <a
href="https://javascript.christmas/2020">JavaScript Chirstmas</a>. The purpose of building this website is
to bootstrap the Mid project of Web Development Course.
</p>
<br />
<a href="#portfolio" class="click-me">Is Kensy On9?</a>
<br />
<br />
<a href="#denne-siden-finnes-ikke" class="click-me">404</a>
<div id="markdownprac">
</div>
</div>
<!-- ----------------------------- Travel Page ----------------------------- -->
<div id="travel" class="page">
<h1>Travel Note</h1>
<section id="travel-cards" class="travelcards">
</section>
</div>
<!-- ----------------------------- Task Page ----------------------------- -->
<div id="tasks" class="page">
<h1>Tasks</h1>
<div class="card" id="input-task">
<label for="new-task">Add Item</label>
<input id="new-task" type="text">
<button onclick="addTask()">Add</button>
</div>
<section id="tasks-cards" class="cards container">
<h3>Todo</h3>
<!-- <div class="travelcards" id="incomplete-tasks"> -->
<ul class="travelcards" id="incomplete-tasks">
</ul>
<h3>Completed</h3>
<ul class="travelcards" id="completed-tasks">
</ul>
</section>
</div>
<!-- ------------------------------ Toll Page ------------------------------ -->
<div id="portfolioPage" class="page">
<h1>Portfolio</h1>
<div id="tollStations"></div>
</div>
<!-- ----------------------------- About Page ------------------------------ -->
<div id="about" class="page">
<div class="backwards">
<a href="#main" style="color:aliceblue">< Portal to 404 Page🤘</a>
</div>
<h1>About Me</h1>
<div id="profile">
<div id="pic-name">
<img src="./img/profile.png" alt="profile img">
<span>Hi! My name is June, 4th year student of Computing Department of PolyU of Hong Kong. I am interested
in Web Development, and looking for an internship. Feel free to contact me through Social Networt!</span>
</div>
<div id="biography">
<h2>Bio!</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate consectetur cumque earum aut rerum
voluptatum dolores repellendus illum, deserunt quibusdam officia. Exercitationem rem inventore dolore
voluptates? Eius esse voluptatum dolores.
Eligendi suscipit veritatis pariatur laborum sed voluptate itaque accusamus rerum inventore laboriosam
corrupti temporibus, soluta earum sit exercitationem illum! Magnam dolore accusamus nisi sequi veritatis
labore accusantium explicabo dicta rerum?
Excepturi, dolore illo. Iusto optio nemo aut, necessitatibus facere nisi odio animi quidem mollitia vero?
Molestiae sapiente minima exercitationem corrupti unde necessitatibus aspernatur tempore provident, ipsam
quisquam rerum esse vel.
Quas quae vitae nesciunt. Deleniti qui ipsa, quia enim, rem necessitatibus voluptas neque, obcaecati ab
dolor consectetur corporis quis. Dicta ad deleniti veritatis possimus aperiam rem qui natus laborum
facilis.
Saepe ducimus perferendis, itaque nemo minima nihil! Rem consequuntur, temporibus dolor dolore eaque
doloribus obcaecati odit illo quibusdam quod suscipit maiores atque alias quae voluptates rerum
perferendis aperiam fuga magnam?
Accusantium laudantium dolor soluta culpa quisquam suscipit placeat doloribus. Beatae voluptas atque
molestias corporis ipsam corrupti facilis tenetur possimus, placeat quos nemo expedita harum eveniet amet,
nam dolor, quidem animi!
Accusantium cupiditate ullam, vitae saepe in id assumenda quibusdam hic a. Nemo, accusamus illum officia
totam cumque porro, earum maxime cupiditate est dicta dolore eligendi in expedita quod voluptatem
accusantium?
Tenetur eveniet sunt soluta omnis asperiores nostrum quam sapiente veritatis, nemo exercitationem
reiciendis nulla ea ad laudantium animi nobis itaque rerum aut aperiam dignissimos minus! Non sapiente
sunt itaque nam!
Doloribus explicabo praesentium corporis quibusdam saepe omnis, delectus nobis aliquam aliquid pariatur
atque, minima optio fugit consequatur enim? Perspiciatis, consequuntur voluptate. Enim odit eligendi velit
optio, ex deleniti aliquam dolor.
</p>
<p>
Quasi ipsum reiciendis cupiditate sed, aperiam tempora voluptate quo inventore nostrum libero fugit facere
in, nam omnis voluptatibus natus consequuntur vel ea! Facere vel sunt omnis excepturi consectetur, ipsa
voluptatem.
Maxime veritatis qui possimus expedita, voluptatibus nemo quam id quod corporis atque deserunt et eum aut
magni cupiditate nisi? Blanditiis nemo, culpa dolores magni labore iure provident harum repellat
exercitationem!
Totam odit cupiditate vitae quibusdam, a ad, quo reprehenderit quaerat, incidunt modi nostrum. Rem ullam
quas facilis iure, architecto dolores molestiae animi, veniam beatae eligendi, officiis possimus laborum
atque pariatur.
Porro dolor aut consectetur possimus eius quos minus. Eveniet saepe ullam magni molestiae quidem quod,
accusamus facilis cum omnis cupiditate aperiam libero laboriosam, quae harum itaque velit dolores mollitia
dolore!
Quae ullam neque iusto, iste ipsum quod officia aperiam repellat sequi eos tempora tenetur. Porro sint
nobis iste temporibus adipisci provident qui illo consequatur?
</p>
</div>
</div>
</div>
<!-- --------------------------- 404 ERROR page ---------------------------- -->
<div id="page404" class="page">
<h1>404</h1>
<h2 id="page404-error"></h2>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>