-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
261 lines (261 loc) · 11.5 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
256
257
258
259
260
261
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<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=Texturina:ital,opsz,wght@0,12..72,100..900;1,12..72,100..900&display=swap"
rel="stylesheet"
/>
<title>Harmony Morse</title>
<link
rel="stylesheet"
href="styles.css"
/>
</head>
<!-- Google tag (gtag.js) -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-PPV9JJG6Q2"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-PPV9JJG6Q2");
</script>
<body>
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#about">About Me</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="topImage">
<div class="intro">
<h1>Harmony Morse</h1>
<p>iOS | Full-Stack | DevOps</p>
</div>
</section>
<section id="skills">
<h2>Skills</h2>
<div>
<label>Filters:</label>
<button onclick="filter(event)" class="all filterOption basic" id="filterSelected">All</button>
<button onclick="filter(event)" class="ios filterOption basic">iOS Development</button>
<button onclick="filter(event)" class="web filterOption basic">Web Development</button>
<button onclick="filter(event)" class="devops filterOption basic">DevOps</button>
<!-- <button onclick="filter(event)" class="cs filterOption basic">Computer Science</button> -->
<br>
<button onclick="filter(event)" class="specialty filterOption">Specialties</button>
<button onclick="filter(event)" class="progLanguage filterOption">Programming Languages</button>
<button onclick="filter(event)" class="tool filterOption">Tools</button>
<button onclick="filter(event)" class="libAndFramework filterOption">Libraries/Frameworks</button>
<button onclick="filter(event)" class="database filterOption">Databases</button>
<button onclick="filter(event)" class="softSkill filterOption">Soft Skills</button>
<button onclick="filter(event)" class="other filterOption">Other</button>
</div>
<ul id="skillsList">
<!-- colors: softSkill, other, tool, libAndFramework, progLanguage, specialty, database -->
<!-- filters: cs, ios, devops, web -->
<li class="skill softSkill">Adaptable</li>
<li class="skill other cs">Algorithms</li>
<li class="skill softSkill">Analytical</li>
<li class="skill softSkill">Articulative</li>
<li class="skill tool ios">Auto Layout</li>
<li class="skill libAndFramework web">Axios</li>
<li class="skill tool devops">Bash</li>
<li class="skill tool devops">CLI</li>
<li class="skill progLanguage web">CSS</li>
<li class="skill other cs">Data Structures</li>
<li class="skill softSkill">Detail Oriented</li>
<li class="skill specialty devops">DevOps</li>
<li class="skill libAndFramework web">Django</li>
<li class="skill other web">DOM</li>
<li class="skill softSkill">Eager and Quick Learner</li>
<li class="skill progLanguage web">EJS</li>
<li class="skill libAndFramework web">Express.js</li>
<li class="skill tool">Figma</li>
<li class="skill specialty web">Front-End Development</li>
<li class="skill specialty web">Full-Stack Development</li>
<li class="skill tool devops">Git</li>
<li class="skill tool devops">GitHub</li>
<li class="skill progLanguage web">HTML</li>
<li class="skill tool web">Heroku</li>
<li class="skill specialty ios">iOS Development</li>
<li class="skill libAndFramework ios">iOS SDK</li>
<li class="skill specialty ios">iOS</li>
<li class="skill progLanguage web ios">JSON</li>
<li class="skill progLanguage web">JavaScript</li>
<li class="skill specialty web ios cs">MVC</li>
<li class="skill specialty ios">Mobile Application Development</li>
<li class="skill specialty ios">Mobile Design</li>
<li class="skill database web">MongoDB</li>
<li class="skill tool devops">Multipass</li>
<li class="skill tool devops">Nginx</li>
<li class="skill libAndFramework web">Node.js</li>
<li class="skill database web">noSQL</li>
<li class="skill specialty cs">OOP</li>
<li class="skill database web">PostgreSQL</li>
<li class="skill softSkill cs">Project Management</li>
<li class="skill progLanguage web">Python</li>
<li class="skill other web ios">REST APIs</li>
<li class="skill libAndFramework web">React</li>
<li class="skill specialty web">Responsive Design</li>
<li class="skill progLanguage web">SQL</li>
<li class="skill progLanguage ios">Swift</li>
<li class="skill libAndFramework ios">UIKit</li>
<li class="skill tool devops">Virtual Machines</li>
<li class="skill tool web">VS Code</li>
<li class="skill specialty web">Web Development</li>
<li class="skill tool">Wireframe</li>
<li class="skill progLanguage web">XML</li>
<li class="skill tool ios">Xcode</li>
<li class="skill progLanguage devops">zsh</li>
</ul>
</section>
<section id="projects">
<h2>Projects</h2>
<div
class="project"
id="tiletap"
>
<div class="projectImg">
<h1>Tile Tap</h1>
</div>
<p>
An adaptive front-end browser game inspired by the
classic “Whack-a-Mole” arcade game.
</p>
<a
href="http://tiletap.surge.sh/"
target="_blank"
>Launch App</a
>
<a
href="https://github.com/HarmonyMorse/TileTap"
target="_blank"
>GitHub Repo</a
>
<div class="projectDetails">
<ul class="projectSpecs">
<li class="progLanguage">HTML</li>
<li class="progLanguage">CSS</li>
<li class="progLanguage">JavaScript</li>
</ul>
</div>
</div>
<div
class="project"
id="relativepath6"
>
<div class="projectImg">
<h1>Relative Path 6</h1>
</div>
<p>
Scripts to host a virtual machine, launch a web server
on the VM, and destroy the VM when finished.
</p>
<a
href="https://github.com/slashrelativepath/relativepath-cycle-6"
>GitHub Repo</a
>
<div class="projectDetails">
<ul class="projectSpecs">
<li class="progLanguage">Shell</li>
<li class="tool">Multipass</li>
<li class="tool">Nginx</li>
</ul>
</div>
</div>
</section>
<section id="about">
<h2>About Me:</h2>
<p>
A summary about myself. My experience, personal interests,
and professional goals.
</p>
<a
href="/assets/HarmonyMorseResume.pdf"
target="_blank"
>See Resume</a
>
<a
href="/assets/HarmonyMorseResume.pdf"
download="HarmonyMorseResume.pdf"
>Download Resume</a
>
</section>
<section id="contact">
<h2>Contact</h2>
<p>
Email me at
<a href="mailto:[email protected]"
>
</p>
<p>
Connect with me on
<a href="http://linkedin.com/in/HarmonyMorse"
>my LinkedIn</a
>
</p>
<p>
Check out my projects on
<a href="https://github.com/HarmonyMorse">my GitHub</a>
</p>
</section>
</main>
<footer>
<p>
Connect with me on
<a href="http://linkedin.com/in/HarmonyMorse">LinkedIn</a>,
<a href="https://github.com/HarmonyMorse">GitHub</a>, or via
email at
<a href="mailto:[email protected]"
>.
</p>
</footer>
</body>
<script>
const filterOption = document.getElementsByClassName("filterOption");
const skills = document.getElementsByClassName("skill");
const filter = (e) => {
for (const option of filterOption) {
option.id = "";
}
e.target.id = "filterSelected";
const curFilter = e.target.classList[0];
for (const skill of skills) {
if (curFilter === "all") {
skill.style.display = "block";
} else if (skill.classList.contains(curFilter)) {
skill.style.display = "block";
} else {
skill.style.display = "none";
}
}
}
</script>
</html>