-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathproject-page.html
61 lines (56 loc) · 3.1 KB
/
project-page.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
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Gabs Projects</title>
<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=Pacifico&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Trocchi|Anton" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="curzr" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path class="inner" d="M25,30a5.82,5.82,0,0,1-1.09-.17l-.2-.07-7.36-3.48a.72.72,0,0,0-.35-.08.78.78,0,0,0-.33.07L8.24,29.54a.66.66,0,0,1-.2.06,5.17,5.17,0,0,1-1,.15,3.6,3.6,0,0,1-3.29-5L12.68,4.2a3.59,3.59,0,0,1,6.58,0l9,20.74A3.6,3.6,0,0,1,25,30Z" fill="#F2F5F8" />
<path class="outer" d="M16,3A2.59,2.59,0,0,1,18.34,4.6l9,20.74A2.59,2.59,0,0,1,25,29a5.42,5.42,0,0,1-.86-.15l-7.37-3.48a1.84,1.84,0,0,0-.77-.17,1.69,1.69,0,0,0-.73.16l-7.4,3.31a5.89,5.89,0,0,1-.79.12,2.59,2.59,0,0,1-2.37-3.62L13.6,4.6A2.58,2.58,0,0,1,16,3m0-2h0A4.58,4.58,0,0,0,11.76,3.8L2.84,24.33A4.58,4.58,0,0,0,7,30.75a6.08,6.08,0,0,0,1.21-.17,1.87,1.87,0,0,0,.4-.13L16,27.18l7.29,3.44a1.64,1.64,0,0,0,.39.14A6.37,6.37,0,0,0,25,31a4.59,4.59,0,0,0,4.21-6.41l-9-20.75A4.62,4.62,0,0,0,16,1Z" fill="#111920" />
</svg>
</div>
<!-- partial:index.partial.html -->
<div id="app">
<div :class="['bg', bg]">
<header>
<nav>
<ul>
<li><a class="link-bio" href="#overall" @click="bg = 'overall'">OverAll</a></li>
<li><a class="link-projects" href="#project1" @click="bg = 'project1'">Project1</a></li>
<li><a class="link-find-me" href="#project2" @click="bg = 'project2'">Project2</a></li>
<li><a class="link-find-me" href="#project3" @click="bg = 'project3'">Project3</a></li>
<li><a class="link-find-me" href="#project4" @click="bg = 'project4'">Project4</a></li>
<li><a class="link-find-me" href="#project5" @click="bg = 'project5'">Project5</a></li>
</ul>
</nav>
<div class="transition transition-bio"></div>
<div class="transition transition-projects"></div>
<div class="transition transition-find-me"></div>
<h1>projects</h1>
</header>
<div class="dots dots1"></div>
<div class="dots dots2"></div>
<main>
<transition name="slide-fade" mode="out-in">
<p key="bio" v-if="bg==='bio'"></p>
<p key="projects" v-if="bg==='projects'"></p>
</p>
<p key="find-me" v-if="bg==='find-me'"></p>
</transition>
</main>
</div>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js'></script><script src="./script.js"></script>
</body>
</html>