-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
159 lines (140 loc) · 7.35 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Full-stack software developer personal portfolio for Matt Westwick" />
<meta name="robots" content="index, archive" />
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="manifest" href="site.webmanifest">
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="clouds.css">
<script src="script.js"></script>
<title>Super Matt Westwick World</title>
</head>
<body>
<h1 style="display:none;">Matt Westwick</h1>
<h2 style="display:none;">Full Stack Developer</h2>
<div id="rightButton"></div>
<div id="leftButton"></div>
<div id="messageOverlay"
onclick="document.getElementById('messageOverlay').classList.remove('active'); document.getElementById('messageBox').classList.remove('active');window.INPUT.keys.allowInput = true;document.getElementById('formSubmitButton').style.visibility = 'hidden';">
<div id="messageBox" class="messageBox" onclick="event.stopPropagation()">
<div id="messageText" class="messageText"></div>
<div style="width:100%;display:flex;flex:row;justify-content:space-evenly;">
<div id="formSubmitButton" class="messageCloseButton" onclick="(() => {submitForm()})()"
style="visibility: hidden;">SUBMIT</div>
<div class="messageCloseButton"
onclick="event.stopPropagation(); document.getElementById('messageOverlay').classList.remove('active'); document.getElementById('messageBox').classList.remove('active');window.INPUT.keys.allowInput=true;document.getElementById('formSubmitButton').style.visibility = 'hidden';">
CLOSE</div>
</div>
</div>
</div>
<div class='sprite' id='sprite'></div>
<div id='background-container'>
<div id='level-container'>
<div class="pages">
<div class="page home">
<div class="title-container">
<img class="small-title" src="./images/super.png" alt="super">
<img src="./images/matt_world.png" alt="matt world">
<div class="subheader">Swipe to find out more! ></div>
</div>
</div>
<div class="page bio">
<div class="title-container">
<img src="./images/about_me.png" alt="about me">
<div class="page-info message-text">Hey! I’m Matt!<br><br>I’m a Mechanical-turned-Software engineer who absolutely loves to solve problems (no matter how big or small). <br><br>Feel free to get in touch using the links below!</div>
</div>
<div class="obstacle-container">
<div class="github obstacle">
<a title="Github" target="_blank" rel="noopener noreferrer" href="https://github.com/prphntm63">
<div style="height:100%;width:100%;"></div>
</a>
</div>
<div class="linkedin obstacle">
<a title="LinkedIn" target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/mattwestwick/">
<div style="height:100%;width:100%;">
</div>
</a>
</div>
<div class="mail obstacle">
<div
title="Contact"
style="height:100%;width:100%;cursor:pointer;"
onclick="(function(){
document.getElementById('messageOverlay').classList.add('active');
document.getElementById('messageBox').classList.add('active');
document.getElementById('messageText').innerHTML = `${email_form_html}`;
document.getElementById('formSubmitButton').style.visibility = 'visible';
})();return false;"
>
</div>
</div>
</div>
</div>
<div class="page brewing">
<div class="title-container">
<img src="./images/brewing.png" alt="brewing">
<div class="page-info message-text">One of my favorite pastimes is homebrewing. I am deeply involved in the local community, have won multiple awards for my recipes, and am an experienced <a target=_blank class=underline href=https://www.bjcp.org/> BJCP judge</a>. <br><br> One thing I particularly love to do is integrate IoT technology into my workflow; every step of the process is measured and digitalized so I can keep accurate measurements.<br><br>You can find all my recipes and past brew sessions on my <a target=_blank class=underline href=https://www.brewersfriend.com/homebrew/brewer/224060/matlab->BrewersFriend</a> page!</div>
</div>
<div class="obstacle-container">
<div class="brewersfriend obstacle">
<a title="BrewersFriend" target="_blank" rel="noopener noreferrer" href="https://www.brewersfriend.com/homebrew/brewer/224060/matlab-">
<div style="height:100%;width:100%;"></div>
</a>
</div>
</div>
</div>
<div class="page code">
<div class="title-container">
<img class="small-title" src="./images/code.png" alt="code">
<div class="page-info message-text">I really do love doing passion projects in my spare time. It is a great way to learn new technologies and to give back to the communities you are a part of.<br><br> I would consider my forte to be Typescript and Javascript using React/Redux, Angular, and NodeJS. However, I have a great working knowledge of Python and Golang along with popular frameworks. I’m also pretty handy when it comes to DevExp, with some substantial experience with Docker, Kubernetes, and Google Cloud Platform!<br><br>Feel free to check out my <a target=_blank class=underline href=https://github.com/prphntm63>Github Profile</a> for a more detailed view of my current and past work.</div>
</div>
<div class="obstacle-container">
<div class="github obstacle">
<a title="Github" target="_blank" rel="noopener noreferrer" href="https://github.com/prphntm63">
<div style="height:100%;width:100%;"></div>
</a>
</div>
</div>
</div>
</div>
<div class='floor' id="floor">
<div id="navselector"></div>
<div class='navlink' id="home">Home</div>
<div class='navlink' id="bio">Bio</div>
<div class='navlink' id="brew">Brew</div>
<div class='navlink' id="code">Code</div>
</div>
</div>
<div id="scenery-container"></div>
<div id="background-wrap">
<div class="x1">
<div class="cloud"></div>
</div>
<div class="x2">
<div class="cloud"></div>
</div>
<div class="x3">
<div class="cloud"></div>
</div>
<div class="x4">
<div class="cloud"></div>
</div>
<div class="x5">
<div class="cloud"></div>
</div>
</div>
</div>
<script>
setCurrentPage(0)
setupButtons()
</script>
</body>
</html>