-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathold.html
127 lines (115 loc) · 4.79 KB
/
old.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bailey Chittle</title>
<meta property="og:site_name" content="Bailey Chittle" />
<meta property="og:title" content="Bailey Chittle" />
<meta property="og:description" content="This is the site of Bailey Chittle, the Software and Web Developer that everyone should hire!" />
<meta property="og:image" content="./assets/img/profile.JPG" />
<meta property="og:type" content="website" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="./assets/old/style.css">
<!--
development version, includes helpful console warnings
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-->
<!--
production version, optimized for size and speed
-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Kanit Font -->
<link href="https://fonts.googleapis.com/css?family=Kanit&display=swap" rel="stylesheet">
<!-- VueTyper -->
<script src="https://unpkg.com/vue-typer/dist/vue-typer.min.js"></script>
<!--fuzzy search-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.4.6/fuse.min.js"></script>
<!-- particles.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/particles.min.js"></script>
</head>
<body>
<div id="app">
<div id="left-panel">
<article>
<vue-typer
class="h1"
text='Bailey Chittle'
:repeat='0'
:pre-type-delay='70'
>
</vue-typer>
<br>
<vue-typer
class="h2"
id="typewriter"
:text='[
"The Software and Web Developer that everyone should hire!",
"Motivated to Make a Better Tomorrow",
"while(isAlive) {eat();code();sleep();}",
"Star Web Designer",
"My CSS is !important",
`$("#Github").click();`,
`"The more you know, the more you realize you know nothing" -Socrates`,
]'
:repeat='Infinity'
:shuffle='true'
:pre-type-delay='1000'
:pre-erase-delay='5000'
@typed-char="onTypedChar"
@erased="onErased"
>
</vue-typer>
<h1 v-if="false">Bailey Chittle</h1>
<h2 v-if="false">The Software and Web Developer that everyone should hire!</h2>
<br>
<div id="images">
<a href="https://www.github.com/bachittle">
<img id="Github" src="img/github.png" alt="Github">
</a>
<a href="https://linkedin.com/in/bailey-chittle">
<img id="LinkedIn" src="img/linkedin.png" alt="LinkedIn">
</a>
<a href="mailto:[email protected]">
<img id="Mail" src="img/mail.png" alt="Mail">
</a>
</div>
</article>
</div>
<div id="right-panel">
<p id="terminal-user">bailey@chittle:~$</p>
<input
v-model="input"
v-on:input="updateDropdown"
type="text"
autocomplete="off"
id="terminal-input"
maxlength="20"
@focus="inputIsFocused=true"
>
<div v-if="itemsOnDom[0].length != 0 && inputIsFocused" id="input-results">
<div v-for="item in itemsOnDom">
<span v-if="item.length != 0" @click="updateContent(item)">{{ item }}</span>
</div>
</div>
<div id="content" v-if='contentVal == "home"'>
<p>
Type in "projects" in the terminal to see a list of projects I've worked on,
or "help" for everything else.
</p>
<img src="img/profile.JPG" alt="profile pic">
</div>
<div id="content" v-else-if='contentVal == "help"'>
<vue-particles></vue-particles>
</div>
<div id="content" v-else-if='contentVal == "pong"'>
<pong></pong>
</div>
<div id="content" v-else>
<p>not implemented yet :(</p>
</div>
</div>
</div>
<script src="./assets/old/pong.js"></script>
<script src="./assets/old/script.js"></script>
</body>
</html>