-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
235 lines (217 loc) · 8.43 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex, nofollow">
<title>Matthew Tesch - Product Manager</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1, h2 {
color: #2c3e50;
margin-bottom: 10px;
}
header {
text-align: center;
margin-bottom: 30px;
}
.contact-info {
margin-bottom: 10px;
}
.links {
font-size: 0.9em;
color: #666;
}
.links a {
color: #3498db;
text-decoration: none;
margin: 0 10px;
}
.links a:hover {
text-decoration: underline;
}
.project {
margin-bottom: 30px;
}
.project h3 {
margin-bottom: 10px;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
cursor: pointer;
}
.video-container img,
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 68px;
height: 48px;
background-color: rgba(0,0,0,0.7);
border-radius: 14px;
z-index: 1;
}
.play-button:before {
content: "";
border-style: solid;
border-width: 15px 0 15px 26px;
border-color: transparent transparent transparent white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<header>
<h1>Matthew Tesch</h1>
<p class="links">
<a href="https://www.linkedin.com/in/matt-tesch/" target="_blank">LinkedIn</a> |
<a href="https://github.com/augmentedminds" target="_blank">GitHub</a>
</p>
</header>
<section id="about">
<h2>About Me</h2>
</p>As an experienced product leader, I specialize in creating innovative solutions using cutting-edge technologies. My mission is to develop products that push the boundaries of technology while delivering meaningful value to users.</p>
</section>
<section id="education">
<h2>Education</h2>
<ul>
<li>
<strong>The George Washington University</strong><br>
Master of Science (MS) in Computer Science
</li>
<li>
<strong>DePaul University</strong><br>
Bachelor of Science (BS) in Computer Science
</li>
</ul>
</section>
<section id="courses">
<h2>Courses</h2>
<ul>
<li>
<a href="https://coursera.org/share/a63ab3887362e3849366b6eecfcbd791" target="_blank">
Supervised Machine Learning: Regression and Classification
</a>
</li>
</ul>
</section>
<section id="projects">
<h2>Misc. Projects</h2>
<div class="project">
<h3>Bay Lens</h3>
<p>Prototype AR feature for Topgolf that shows the path of the ball in realtime as you hit it.</p>
<div class="video-container" data-video-id="MdLVXLk8i-c">
<img src="https://img.youtube.com/vi/MdLVXLk8i-c/0.jpg" alt="Bay Lens">
<div class="play-button"></div>
</div>
</div>
<div class="project">
<h3>Gmail Quick Reply</h3>
<p>An AI-powered tool that generates contextual quick replies for Gmail, enhancing productivity.</p>
<p><a href="https://www.linkedin.com/pulse/openai-powerful-tool-toolbox-product-managers-engineers-matthew-tesch/?trackingId=gqM2n1A2stf9Cll34xs7SA%3D%3D" target="_blank">Read more about this on LinkedIn</a></p>
</div>
<div class="project">
<h3>Mythic Golf</h3>
<p>One of our prototype projects at Liquid Bit, Mythic Golf was a unique multiplayer fantasy deck building golf game.</p>
<div class="video-container" data-video-id="mUfgZp7gtfE">
<img src="https://img.youtube.com/vi/mUfgZp7gtfE/0.jpg" alt="Mythic Golf">
<div class="play-button"></div>
</div>
</div>
<div class="project">
<h3>Killer Queen Black</h3>
<p>A home version of the classic Killer Queen Arcade game. KQB is multiplayer strategy game that combines teamwork and competitive gameplay.</p>
<div class="video-container" data-video-id="VifxppQEP34">
<img src="https://img.youtube.com/vi/VifxppQEP34/0.jpg" alt="Killer Queen Black">
<div class="play-button"></div>
</div>
</div>
<div class="project">
<h3>Headgear</h3>
<p>An augmented reality prototype using facial feature detection and orientation to position 3D elements on your head.</p>
<div class="video-container" data-video-id="gVhlRPW13vU">
<img src="https://img.youtube.com/vi/gVhlRPW13vU/0.jpg" alt="Headgear">
<div class="play-button"></div>
</div>
</div>
<div class="project">
<h3>Wave Alarm</h3>
<p>An innovative alarm system that uses gesture recognition for a more natural wake-up experience.</p>
<div class="video-container" data-video-id="qtIjsHhlM5A">
<img src="https://img.youtube.com/vi/qtIjsHhlM5A/0.jpg" alt="Wave Alarm">
<div class="play-button"></div>
</div>
</div>
<div class="project">
<h3>Twitter Stream</h3>
<p>A zen like real-time visualization of Twitter data.</p>
<div class="video-container" data-video-id="tXKIiyaTSh0">
<img src="https://img.youtube.com/vi/tXKIiyaTSh0/0.jpg" alt="Twitter Stream">
<div class="play-button"></div>
</div>
</div>
<div class="project">
<h3>Wheremark</h3>
<p>My first take at AR, Wheremark was a location-based service that allows users to mark and share interesting spots with others.</p>
<div class="video-container" data-video-id="BkHfS4yubgc">
<img src="https://img.youtube.com/vi/BkHfS4yubgc/0.jpg" alt="Wheremark">
<div class="play-button"></div>
</div>
</div>
<div class="project">
<h3>CES</h3>
<p>An interview with Nintendo Treehouse on Killer Queen Black gameplay at CES.</p>
<div class="video-container" data-video-id="nLesb8wo0uo">
<img src="https://img.youtube.com/vi/nLesb8wo0uo/0.jpg" alt="CES Project">
<div class="play-button"></div>
</div>
</div>
</section>
<footer>
<p>© 2024 Matthew Tesch. All rights reserved.</p>
</footer>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
const videoContainers = document.querySelectorAll('.video-container');
videoContainers.forEach(container => {
container.addEventListener('click', function() {
const videoId = this.getAttribute('data-video-id');
const iframe = document.createElement('iframe');
iframe.setAttribute('src', `https://www.youtube.com/embed/${videoId}?autoplay=1`);
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('allow', 'autoplay; encrypted-media');
iframe.setAttribute('allowfullscreen', '');
// Clear the container and add the iframe
this.innerHTML = '';
this.appendChild(iframe);
// Remove the click event listener after playing
this.removeEventListener('click', arguments.callee);
});
});
});
</script>
</body>
</html>