-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
286 lines (282 loc) · 20.7 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
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Frederick Meyer</title>
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is my personal site. Newly redesigned with CSS3D! Take a look around and check out my Github!">
<meta name="author" content="Frederick Meyer">
<meta property="og:site_name" content="Frederick Meyer"/>
<meta property="og:title" content="Frederick Meyer"/>
<meta property="og:description" content="This is my personal site. Newly redesigned with CSS3D! Take a look around and check out my Github!"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.fmeyer.com"/>
<meta property="og:image" content="http://www.fmeyer.com/img/share_pic.jpg"/>
<meta property="og:image:width" content="4160"/>
<meta property="og:image:height" content="2340"/>
<link href="/src/master.styl" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ZGL0RV57M1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-ZGL0RV57M1');
</script>
</head>
<body>
<div class="viewport">
<div onclick="setCubeState(true)" id="cube-1" class="cube">
<div onclick="goToLink('https://github.com/fireph')" class="cube-side front">
<div class="background-logo-small github-cube-icon"></div>
</div>
<div onclick="toggleHash('about-content')" class="cube-side left">
<p class="overlay-text">About Me</p>
<div class="background-logo-text about-cube-icon"></div>
</div>
<div class="right">
<div onclick="goToLink('https://www.linkedin.com/in/meyerfrederick/')" class="cube-side back">
<div class="background-logo-xsmall li-cube-icon"></div>
</div>
<div onclick="toggleHash('myprojects-content')" class="cube-side">
<p class="overlay-text">My Projects</p>
<div class="background-logo-text myprojects-cube-icon"></div>
</div>
</div>
<div onclick="toggleHash('resume-content')" class="cube-side top">
<p class="overlay-text">Resume</p>
<div class="background-logo-text resume-cube-icon"></div>
</div>
<div onclick="toggleHash('contactme-content')" class="cube-side bottom">
<p class="overlay-text">Contact Me</p>
<div class="background-logo-text contactme-cube-icon"></div>
</div>
</div>
</div>
<img id="close-button" onclick="setCubeState(false)" src="img/close_button.png">
<label id="theme-switch" class="switch">
<input type="checkbox" onchange="toggleTheme()" id="slider">
<span class="slider round"></span>
</label>
<div id="fading-overlay" onclick="removeHash()"></div>
<div id="about-content" class="content">
<div class="content-container">
<div style="position: relative;">
<img class="back-button" onclick="removeHash()" src="img/back-arrow.png">
<h1>About Me</h1>
</div>
<p>
<div class="project-img-wrap freddie-skiing">
<picture>
<source srcset="avif/img/projects/freddie-skiing.avif" type="image/avif">
<source srcset="webp/img/projects/freddie-skiing.webp" type="image/webp">
<img class="project-img" src="jpg/img/projects/freddie-skiing.jpg" loading="lazy">
</picture>
</div>
Hi, I am a software engineer! I enjoy skiing, biking, hiking, and video games. But most of all, I love to code. I am a proficient Android and Javascript web developer (front-end and back-end) and 3D graphics programmer. The challenge of discovering and building amazing UI experiences is what drives me. Developing a UI into a cohesive and intentional experience is incredibly satisfying and I have accomplished this process across many different interface paradigms (Mobile, Web, VR/AR).<br><br>No matter the field or technology stack, I strive to learn, grow, and excel to create the best user experiences and most polished products possible!<br><br>I am currently building games and working on personal projects after selling Quordle to Merriam-Webster, but I am always on the lookout for any fun new challenges that I can sink my teeth into.
</p>
</div>
</div>
<div id="resume-content" class="content">
<div class="content-container">
<div style="position: relative;">
<img class="back-button" onclick="removeHash()" src="img/back-arrow.png">
<img class="print-button" onclick="printResume()" src="img/print.png">
<h1>Resume</h1>
</div>
<div id="resume-container">
<!--build-resume-start-->
<div data-include="resume/index.html"></div>
<!--build-resume-end-->
</div>
</div>
</div>
<div id="contactme-content" class="content">
<div class="content-container">
<div style="position: relative;">
<img class="back-button" onclick="removeHash()" src="img/back-arrow.png">
<h1>Contact Me</h1>
</div>
<div style="text-align: center">
<form action="https://formspree.io/xzbdygko" method="POST">
<fieldset>
<input placeholder="Your name" type="text" name="name" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<input placeholder="Your Email Address" type="email" name="_replyto" tabindex="2" required>
</fieldset>
<fieldset>
<input placeholder="Your Phone Number (optional)" type="tel" name="phone" tabindex="3">
</fieldset>
<fieldset>
<input placeholder="Your Web Site (optional)" type="url" name="website" tabindex="4">
</fieldset>
<fieldset>
<textarea placeholder="Type your message here...." minlength="20" name="message" tabindex="5" required></textarea>
</fieldset>
<fieldset>
<button type="submit">Submit</button>
</fieldset>
</form>
</div>
</div>
</div>
<div id="myprojects-content" class="content">
<div class="content-container">
<div style="position: relative;">
<img class="back-button" onclick="removeHash()" src="img/back-arrow.png">
<h1>My Projects</h1>
</div>
<div class="content-subcontainer">
<h3>Quordle</h3>
<p>
<a class="project-img-wrap quordle" href="https://www.merriam-webster.com/games/quordle" target="_blank">
<picture>
<source srcset="avif/img/projects/quordle.avif" type="image/avif">
<source srcset="webp/img/projects/quordle.webp" type="image/webp">
<img class="project-img" src="jpg/img/projects/quordle.jpg" loading="lazy">
</picture>
</a>
I created Quordle at the beginning of 2022 as a fun side project. My friends and I found Wordle to be too easy, so I made Quordle to create a real challenge for ourselves. Quordle's popularity exploded over the next couple months and reached 2 million active daily players. Quordle was even trending on Twitter every single day. It was so fun to see my creation getting played so much and it was very exciting having a side project be used by so many people! (But there were plenty of bug reports to go along with it 😅) Later, Merriam Webster offered to acquire Quordle and the announcement of the acquisition was written about on many news sites: <a href="https://techcrunch.com/2023/01/20/wordle-clone-quordle-acquired-by-merriam-webster/">Techcrunch</a>, <a href="https://www.theverge.com/2023/1/22/23566622/merriam-webster-acquires-quordle-wordle-clone">The Verge</a>, <a href="https://www.engadget.com/wordle-clone-quordle-merriam-webster-210051171.html">Engadget</a>, <a href="https://www.bbc.com/news/technology-64374278">BBC</a>, <a href="https://arstechnica.com/gaming/2023/01/dictionary-biz-finally-infiltrates-gaming-as-merriam-webster-buys-quordle/">Ars Technica</a>, <a href="https://kotaku.com/quordle-wordle-clone-sold-merriam-webster-nyt-1850019009">Kotaku</a>, <a href="https://www.techradar.com/news/dont-worry-quordle-is-not-going-behind-a-paywall-says-merriam-webster">Techradar</a>. Quordle has been a wild ride and I am excited to see what's next for the word game in the hands of Merriam Webster!
</p>
</div>
<div class="content-subcontainer">
<h3>OBS Auto Record</h3>
<p>
<a class="project-img-wrap obs-auto-record" href="https://github.com/fireph/OBS-Auto-Record" target="_blank">
<picture>
<source srcset="avif/img/projects/obs-auto-record.avif" type="image/avif">
<source srcset="webp/img/projects/obs-auto-record.webp" type="image/webp">
<img class="project-img" src="jpg/img/projects/obs-auto-record.jpg" loading="lazy">
</picture>
</a>
A Windows/Mac application written in C++ and Qt that is designed to automatically start recording specific games in <a href="https://obsproject.com/">OBS</a> when they are running. The idea of this app was to learn how to use Qt to write a native Windows app as well as recording all of my gameplay automatically so that any fun moment with friends would always be recorded.
</p>
</div>
<div class="content-subcontainer">
<h3>NauticusClassic</h3>
<p>
<a class="project-img-wrap nauticusclassic" href="https://www.curseforge.com/wow/addons/nauticusclassic" target="_blank">
<picture>
<source srcset="avif/img/projects/nauticusclassic.avif" type="image/avif">
<source srcset="webp/img/projects/nauticusclassic.webp" type="image/webp">
<img class="project-img" src="jpg/img/projects/nauticusclassic.jpg" loading="lazy">
</picture>
</a>
A World of Warcraft Classic addon that tracks the precise arrival & departure schedules of boats and Zeppelins in the game and displays them on the Mini-Map and World Map in real-time. I have released it on the <a href="https://www.curseforge.com/">CurseForge</a> and it currently has over 30K downloads.
</p>
</div>
<div class="content-subcontainer">
<h3>Photo Geotagger</h3>
<p>
<a class="project-img-wrap geotagger" href="https://github.com/fireph/geotagger" target="_blank">
<picture>
<source srcset="avif/img/projects/geotagger.avif" type="image/avif">
<source srcset="webp/img/projects/geotagger.webp" type="image/webp">
<img class="project-img" src="jpg/img/projects/geotagger.jpg" loading="lazy">
</picture>
</a>
Tagging many photos with the correct geolocation can be quite the hassle (especially if they were taken with a camera that has no geotagging built in). This app makes it easy and quick to tag many photos with geolocation data, and it even supports raw files! This project was also a great way to learn how to create an electron app.
</p>
</div>
<div class="content-subcontainer">
<h3>Hacker News Reader Android App</h3>
<p>
<a class="project-img-wrap hackernews" href="https://github.com/fireph/HackerNews" target="_blank">
<picture>
<source srcset="avif/img/projects/hackernews.avif" type="image/avif">
<source srcset="webp/img/projects/hackernews.webp" type="image/webp">
<img class="project-img" src="jpg/img/projects/hackernews.jpg" loading="lazy">
</picture>
</a>
A Hacker News reader app written for Android. The idea of this app was to take advantage of the Firebase api to allow quick and asynchronous fetching of stories/comments/etc. As a result, I use this app as my primary Hacker News reader app because it loads comments much more quickly than any other app. The simplicity of the design is also easy on the eyes and matches the original aesthetic of the Hacker News website. It is currently not on the Google Play Store just yet, but I plan on uploading it once a few more features are completed.
</p>
</div>
<div class="content-subcontainer">
<h3>TrafficSweetSpot</h3>
<p>
<a class="project-img-wrap trafficsweetspot" href="https://github.com/fireph/TrafficSweetSpot" target="_blank">
<picture>
<source srcset="avif/img/projects/trafficsweetspot.avif" type="image/avif">
<source srcset="webp/img/projects/trafficsweetspot.webp" type="image/webp">
<img class="project-img" src="jpg/img/projects/trafficsweetspot.jpg" loading="lazy">
</picture>
</a>
This is simple Mac status bar app that can give driving times between two places. It will track the driving time in a graph so that you can see the historical data for your route. I use it to track my commute and know the best time to leave the office!
</p>
</div>
<div class="content-subcontainer">
<h3>JelloSimulator</h3>
<p>
<a class="project-img-wrap jello" href="https://github.com/fireph/JelloSimulator" target="_blank">
<picture>
<source srcset="avif/img/projects/jello.avif" type="image/avif">
<source srcset="webp/img/projects/jello.webp" type="image/webp">
<img class="project-img" src="jpg/img/projects/jello.jpg" loading="lazy">
</picture>
</a>
This is a small hack to do jello simulation in javascript using spring grid meshes. It works pretty well but the values don't like to be messed with that much at the moment sadly. :/<br><br>You can check out the <a href="https://fireph.github.io/JelloSimulator/">demo</a> or go to the github page directly to see the beautiful sphagetti code!<br><br>The current demo simulates a jello cube falling and colliding with a plane and rolling around a bit. The left mouse can also be clicked to "poke" the cube and cause it to wobble around a bit.<br><br>I hope you enjoy and I plan to someday fix this up to be faster and much more robust and useful!
</p>
</div>
<div class="content-subcontainer">
<h3>Chessnut</h3>
<p>
<a class="project-img-wrap chessnut" href="https://github.com/fireph/chessnut" target="_blank">
<picture>
<source srcset="avif/img/projects/chessnut.avif" type="image/avif">
<source srcset="webp/img/projects/chessnut.webp" type="image/webp">
<img class="project-img" src="jpg/img/projects/chessnut.jpg" loading="lazy">
</picture>
</a>
Chess playing matchmaking website written in Node.js, MongoDB, and Three.js. This was done at a hack-a-thon with a few others friends and was our first attempt at creating a realtime game that also used Three.js to implement the 3D graphics.
</p>
</div>
<div class="content-subcontainer">
<h3>SASStore</h3>
<p>
<a class="project-img-wrap sasstore" href="https://github.com/fireph/SASStore" target="_blank">
<picture>
<source srcset="avif/img/projects/sasstore.avif" type="image/avif">
<source srcset="webp/img/projects/sasstore.webp" type="image/webp">
<img class="project-img" src="jpg/img/projects/sasstore.jpg" loading="lazy">
</picture>
</a>
I'm sure it bugs you every day when you run out of room because using 1s and 0s as strings in place of binary in Local Storage consumes too much space. Well, now SASStore (Sticks and Stones Store) can solve this pressing issue in your life! SASStore stores binary string data in the yEnc encoding format so that it will now be 7x (soon to be closer to 8x) fewer characters to store binary data than storing 1s and 0s as strings.
</p>
</div>
<div class="content-subcontainer">
<h3>DrawMyShit</h3>
<p>
<a class="project-img-wrap drawmyshit" href="https://github.com/fireph/DrawMyShit" target="_blank">
<picture>
<source srcset="avif/img/projects/drawmyshit.avif" type="image/avif">
<source srcset="webp/img/projects/drawmyshit.webp" type="image/webp">
<img class="project-img" src="jpg/img/projects/drawmyshit.jpg" loading="lazy">
</picture>
</a>Simple multiplayer drawing app for Android (with a great name).
</p>
</div>
<div class="content-subcontainer">
<h3>TreeGen.js</h3>
<p>
<a class="project-img-wrap trees" href="https://github.com/fireph/TreeGen.js" target="_blank">
<picture>
<source srcset="avif/img/projects/trees.avif" type="image/avif">
<source srcset="webp/img/projects/trees.webp" type="image/webp">
<img class="project-img" src="jpg/img/projects/trees.jpg" loading="lazy">
</picture>
</a>
This is a new and revolutionary tree generation library that uses complex and sophisticated fractal mathematics to create realistic trees in WebGL using THREE.js and TWEEN.js.
</p>
</div>
</div>
</div>
<script src="csi.min.js"></script>
<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' lazyload>
</body>
</html>