-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
489 lines (408 loc) · 15.8 KB
/
index.html
File metadata and controls
489 lines (408 loc) · 15.8 KB
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
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
<!DOCTYPE html>
<html>
<head>
<title>Peter Simpson</title>
<meta name="keywords" content="Peter, Simpson, USC, Computer Science, Philosophy">
<meta name="description" content="Peter Simpson is a New York based Software Engineer building beautiful cross-platform apps. Find his contact information, github repos, projects, writing, and more here.">
<link rel="stylesheet" type="text/css" href="style.css">
<style>
#intro{
margin-top: 20px;
margin-bottom: 20px;
}
#introtxt{
float: left;
width: 590px;
}
#headshot{
margin-left: 30px;
margin-bottom: 6px;
float: left;
width: 175px;
border: 2px solid;
}
.iconlink{
text-decoration: none;
}
p{
margin: 0;
padding: 0;
}
input{
display: none;
}
label{
color: white;
position: relative;
margin-top: 20px;
font-size: 20px;
padding-top: 5px;
padding-bottom: 5px;
display: block;
background-color: black;
color: #FAF9F5;
padding-left: 5px;
}
label:after{
position: absolute;
right: 10px;
content:'-';
}
input:checked +label:after{
content:'+';
}
input + label + .dropdown-content{
}
input:checked + label + .dropdown-content{
display: none;
}
#education-text{
width: 580px;
padding-right: 20px;
float: left;
}
#education-image{
padding-top: 10px;
width: 200px;
float: left;
}
#education-image img{
width: 200px;
height: 100%;
}
.resume-title{
font-size: 18px;
padding-top: 10px;
}
li{
margin-top: 2.5px;
padding: 0px;
}
.colHeader{
margin-top: 5px;
margin-bottom: 5px;
font-size: 25px;
text-align: center;
}
#leftcol{
padding-right: 10px;
}
#rightcol{
padding-left: 10px;
}
iframe{
margin-top: 10px;
width: 370px;
height: 207px;
}
.contentTitle{
color: black;
font-size: 20px;
text-align: center;
margin-bottom: 10px;
}
.contentTitle a{
color: black;
text-decoration: none;
}
.contentDescription a{
color:black;
}
#github img{
width: 50px;
height: 100%;
float: left;
}
#github .contentTitle{
padding-top: 13px;
}
audio{
margin-top: 20px;
margin-left: 35px;
}
#hexImage{
margin-left: 85px;
width: 200px;
height: 100%;
}
.snekImg{
margin-left: 25px;
width: 150px;
height: 100%;
float: left;
}
#WMAImg{
margin-left: 0px;
width: 370px;
height: 100%;
}
.imgCaption{
text-align: center;
margin-bottom: 10px;
}
#project-header{
margin-bottom: 20px;
}
#githubTitle{
text-align: center;
}
#experience-content{
margin-bottom: 30px;
}
@media (max-width: 850px){
.col{
float: none;
}
#rightcol{
padding-left: 0px;
}
#introtxt{
float: none;
width: 400px;
}
#textbox{
padding: 3px;
width: 400px;
margin-left: auto;
margin-right: auto;
}
#content{
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
background-color: #FAF9F5;
width: 400px;
}
}
</style>
<script src="https://kit.fontawesome.com/963282c39d.js" crossorigin="anonymous"></script>
</head>
<body>
<div id = "header">
<div id="textbox">
<div id="menu-items">
<a href="index.html"><div id="title"><p>Peter Simpson</p></div></a>
<a href="index.html"><div class="item">Home</div></a>
<a href="#project-header"><div class="item">Projects</div></a>
<a href="#resume-header"><div class="item">Resume</div></a>
</div> <!-- end of #menu-items -->
</div> <!-- end of #textbox -->
</div> <!-- end of #header -->
<div id = "container">
<div id = "content">
<div id = "intro">
<div id="introtxt">
<div class="contentbox">
<h4>Who Am I?</h4>
<p>I'm a software developer producing top-quality mobile and web apps. I also love music, cooking, and studying philosophy.</p>
<p> </p>
<h4>What Am I Up To Right Now?</h4>
<p>I'm currently building beautiful and effective cross-platform apps as a software engineer at Very Good Ventures.</p>
</div> <!-- end of .contentbox -->
<div class="contentbox">
<a href="mailto:simpson.petere@gmail.com" class="iconlink">
<i class="far fa-envelope"></i>
</a>
<a href="mailto:simpson.petere@gmail.com" class="contactCaption">simpson.petere@gmail.com</a>
<br>
<a href="https://github.com/simpson-peter" class="iconlink">
<i class="fab fa-github"></i>
</a>
<a href="https://github.com/simpson-peter" class="contactCaption">
Check out my Github!
</a>
</div> <!-- end of .contentbox -->
</div> <!-- end of #introtxt -->
<img id="headshot" src="img/headshot.jpg" alt="Peter Simpson">
<div class="clearfloat"></div>
</div> <!-- end of #intro -->
</div> <!-- end of #content -->
<!-- BEGIN PROJECTS -->
<div id="content">
<div class="section-header" id="project-header">Projects</div>
<div class="col" id="leftcol">
<div class="d-contentbox">
<div class="contentTitle"><a href="http://drummachine.petersimpson.me/"><strong>Flutter Drum Machine</strong></a></div>
<div class="contentDescription">
<img id="drumImage" src="img/drum_sc_crop.png" alt="Flutter drum machine screenshot">
<div class="clearfloat"></div>
<div class="imgCaption"><i>Screenshot of the Flutter TR-404 Drum Machine Web App.</i></div>
<a href="http://drummachine.petersimpson.me/" class="iconlink">
<i class="fas fa-desktop"></i>
</a>
<strong><a href="http://drummachine.petersimpson.me/" target="_blank">Visit the Site</strong> <i>(chrome reccomended)</i></a>
<br>
<a href="https://github.com/simpson-peter/drum_machine" class="iconlink">
<i class="fab fa-github"></i>
</a>
<strong><a href="https://github.com/simpson-peter/drum_machine">Repository Link</a></strong>
<br>
I made a web app simulating an old-school drum machine using Flutter Web.
<br>
The app utilizes advanced state management techniques to sequence user-created drum patterns, and allows the user to choose between several different kits.
</div><!-- end of .contentDescription -->
</div> <!-- end of .d-contentbox -->
<div class="d-contentbox">
<div class="contentTitle"><a href="https://github.com/simpson-peter/LatinSqSolver"><strong>Latin Square Solver</strong></a></div>
<div class="contentDescription">
<img id="hexImage" src="img/hex_visualization.png" alt="Latin Square Visualization">
<div class="clearfloat"></div>
<div class="imgCaption"><i>Visualization of a Latin square generated by my program from a set of hex codes.</i></div>
<a href="https://github.com/simpson-peter/LatinSqSolver" class="iconlink">
<i class="fab fa-github"></i>
</a>
<strong><a href="https://github.com/simpson-peter/LatinSqSolver">Repository Link</a></strong>
<br>
This is a templated, efficient, implementation of a custom-sizeable <a href="https://en.wikipedia.org/wiki/Latin_square">Latin square</a> solver that I created in C++.
<br>
The Latin square has applications to cryptography, statistics, and telecommunications, but I just made this for fun. I implemented the solver as a backtracking algorithim for increased efficiency in comparison to an all-combinations solution.
</div><!-- end of .contentDescription -->
</div> <!-- end of .d-contentbox -->
<div class="d-contentbox">
<div class="contentTitle"><strong>Speaker at Byteconf Flutter 2020</strong></div>
<div class="contentDescription">
<iframe src="https://www.youtube.com/embed/dvUFVgymG8w?start=9415" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="imgCaption"><i>Recording of my talk from the Byteconf livestream.</i></div>
I was invited to speak to over <strong> 1,000 attendees at <a href="https://www.bytesized.xyz/conferences/byteconf-flutter-2020/">Byteconf Flutter 2020</a> </strong> about my experience as a student developer with Flutter, and why I think Flutter is a great tool for fellow interdisciplinary developers.
</div> <!-- end of .contentDescription -->
</div> <!-- end of .d-contentbox -->
</div> <!-- end of #leftcol -->
<div class="col" id="rightcol">
<div class="d-contentbox">
<div class="contentTitle"><a href="https://github.com/simpson-peter/Snek2D"><strong>Snek 2D</strong></a></div>
<div class="contentDescription">
<img class="snekImg" src="img/snek_screenshots/snek_bw0_mini.png" alt="Snek 2D Screencap">
<img class="snekImg" src="img/snek_screenshots/snek_groovy0_mini.png" alt="Snek 2D Screencap">
<div class="clearfloat"></div>
<div class="imgCaption"><i>Screenshots from Snek 2D.</i></div>
<a href="https://github.com/simpson-peter/Snek2D" class="iconlink">
<i class="fab fa-github"></i>
</a>
<strong><a href="https://github.com/simpson-peter/Snek2D">Repository Link</a></strong>
<p></p>
<a href="https://apps.apple.com/app/id1519035628" target="_blank" class="iconlink">
<i class="fab fa-app-store-ios"></i>
</a>
<strong><a href="https://apps.apple.com/app/id1519035628" target="_blank">Find Snek 2D on the App Store</a></strong>
<p></p>
This is a riff on the classic Snake game that I made for iOS and Android with Dart using the Flutter framework.
Check out groovy and turbo mode in the Settings menu for a new experience!
</div><!-- end of .contentDescription -->
</div> <!-- end of .d-contentbox -->
<div class="d-contentbox">
<div class="contentTitle"><a href="http://whatsmyapp.petersimpson.me"><strong>What's My App?</strong></a></div>
<div class="contentDescription">
<img src="img/WMA_ss0.png" id="WMAImg" alt="production screencap">
<div class="imgCaption"><i>Result Page Screenshot.</i></div>
<a href="https://whatsmyapp.petersimpson.me" class="iconlink">
<i class="fas fa-desktop"></i>
</a>
<strong><a href="http://whatsmyapp.petersimpson.me" target="_blank">Visit the Site</a></strong>
<br>
<a href="https://github.com/simpson-peter/whats_my_app" class="iconlink">
<i class="fab fa-github"></i>
</a>
<strong><a href="https://github.com/simpson-peter/whats_my_app">Repository Link</a></strong>
<p></p>
This is a satirical single-serving website I made using Flutter Web. It generates a stylized generic "flashy" app name and allows the user to send a pre-composed tweet about it. Utilizes browser- and device-specific code to ensure the website displays correctly on as many platforms as possible.
</div>
</div> <!-- end of .d-contentbox -->
<div class="d-contentbox">
<div class="contentTitle"><strong>"Reinforcing a Modal Account of Luck"</strong></div>
<div class="contentDescription">
<a href="projects/simpson_reinforcing_modal_luck.pdf" class="iconlink">
<i class="fas fa-file-alt"></i>
</a>
<strong><a href="projects/simpson_reinforcing_modal_luck.pdf" target="_blank">Download Here</a></strong>
<p></p>
This is an academic philosophy paper presenting my original work on parsing concepts of "luck," building on the work of Duncan Pritchard and the critiques which he spawned.
</div>
</div> <!-- end of .d-contentbox -->
<div class="d-contentbox">
<div class="contentTitle"><strong>"Infant Media Exposure"</strong></div>
<div class="contentDescription">
<a href="projects/simpson_media_exposure.pdf" class="iconlink">
<i class="fas fa-file-alt"></i>
</a>
<strong><a href="projects/simpson_media_exposure.pdf" target="_blank">Download Here</a></strong>
<p></p>
This award-winning paper presents my primary results from two years spent conducting original research at New York University's Neuroscience and Education Lab.
<p></p>
This paper shed light on serious inaccuracies in the widely-used LENA research tool, and presented my findings relating to the relationship between media exposure and sleep in infants.
</div> <!-- end of .contentDescription -->
</div> <!-- end of .d-contentbox -->
</div> <!-- end of #rightcol -->
<div class="clearfloat"></div>
</div> <!--- end of #content -->
<!-- END PROJECTS -->
<!-- BEGIN RESUME -->
<div id = "content">
<div class="section-header" id="resume-header">Resume</div>
<input type="checkbox" id="education-box"/>
<label for="education-box">Education</label>
<div id="education-content" class="dropdown-content">
<div id="education-text">
<div class="resume-title"><strong>University of Southern California</strong> M.Sc.</div>
<ul>
<li>2022 - 2023</li>
<li>Master's in Computer Science</li>
<li>Areas of interest include algorithms and internetworking</li>
</ul>
<div class="resume-title"><strong>University of Southern California</strong> B.A.</div>
<ul>
<li>2018 - 2022</li>
<li>GPA: 3.96</li>
<li><strong>Recipient of a Full-Tuition Trustee Merit Scholarship</strong></li>
<li>Philosophy and Computer Science Student</li>
<li>Selected for the Thematic Option Honors Program</li>
</ul>
</div> <!-- end of #education-text -->
<div class="clearfloat"></div>
</div> <!-- end of #education-content -->
<input type="checkbox" id="skills-box"/>
<label for="skills-box">Skills</label>
<div id="skills-content" class="dropdown-content">
<div class="resume-title"><strong>Languages</strong></div>
<ul>
<li>Dart, C++, SQL, HTML/CSS</li>
</ul>
<div class="resume-title"><strong>Tools and Frameworks</strong></div>
<ul>
<li>Flutter, Git, Figma, Postgres, VirtualBox</li>
</ul>
</div> <!-- end of #skills-content -->
<input type="checkbox" id="experience-box"/>
<label for="experience-box">Experience</label>
<div id="experience-content" class="dropdown-content">
<div class="resume-title"><strong>Software Engineer</strong></div>
<i>Very Good Ventures, 2022 - Present</i>
<ul>
<li>Working with a team of engineers to develop mobile apps in Flutter for clients big and small.</li>
</ul>
<div class="resume-title"><strong>Computer Science Course Producer</strong></div>
<i>University of Southern California, 2021 - 2022</i>
<ul>
<li>Chosen to be an undergraduate teaching assistant based on excellent computer science performance.</li>
<li>Lead weekly labs and office hours where I teach C++ and programming concepts to dozens of students.</li>
</ul>
<div class="resume-title"><strong>Software Engineering Intern</strong></div>
<i>Very Good Ventures, 2021</i>
<div class="resume-title"><strong>Provost's Undergraduate Research Fellow</strong></div>
<i>University of Southern California, 2020 - Present</i>
<ul>
<li><a href="https://www.youtube.com/watch?v=dvUFVgymG8w&feature=youtu.be&t=9415">Invited to speak to over 1,000 attendees at Byteconf Flutter 2020 about my work.</a></li>
<li>Recipient of a funded research fellowship to develop mobile applications to help preserve endangered languages.</li>
<li>Performed field research in Italy and utilized new computational techniques in documenting an endangered language.</li>
</ul>
<div class="resume-title"><strong>Research Assistant</strong></div>
<i>New York University Neuroscience and Education Lab, 2016-2017</i>
<ul>
<li>Conducted award-winning independent cognitive science research into language acquisition among infants in New York.</li>
<li>Responsible for reviewing and parsing thousands of hours of audio data used in published work across the lab.</li>
</ul>
</div> <!-- end of #experience-content -->
</div> <!-- end of #content -->
<!-- END RESUME -->
</div> <!-- end of #container -->
</body>
</html>