-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
369 lines (344 loc) · 22.6 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
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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Resume of Jon Long, a software engineer working in Philadelphia, PA." />
<meta name="author" content="Jon Long" />
<title>Resumé of Jon Long, a software engineer working in Philadelphia, PA</title>
<link rel="stylesheet" media="screen, print" href="css/screen.css" />
<link rel="stylesheet" media="print" href="css/print.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="http://universal-ie6-css.googlecode.com/files/ie6.1.1.css" />
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<main class="hresume" role="main">
<header class="main-header" role="banner">
<h1 class="hidden">Professional Resumé of Jon Long</h1>
<!-- Contact Info -->
<h2 class="hidden">Contact Information</h2>
<address class="contact vcard">
<div>
<p class="fn n" id="my-name">
<span class="given-name">Jon</span> <span class="family-name">Long</span>
</p>
<p class="web">
<span class="hidden">Web: </span>
<a class="url" href="http://portfolio.linesandwaves.com" rel="external" title="Go to Jon's portfolio">portfolio.linesandwaves.com</a>
</p>
</div>
<div>
<p>
<span class="hidden">Email: </span>
<a class="email" href="mailto:[email protected]" rel="external" title="Send Jon an email">[email protected]</a>
</p>
</div>
</address>
</header>
<section class="vcalendar">
<!-- Education Information -->
<header>
<h2>Education</h2>
</header>
<div class="education vevent">
<p class="summary">
<abbr title="Bachelor of Arts">BA</abbr>, <a class="url" href="https://www.jmu.edu/smad/index.shtml" rel="external" title="Visit the SMAD website">Media Arts and Design</a>, concentration in Interactive Media
</p>
<p class="duration">
<time class="dtstart" datetime="2001-08">August 2001</time>–<time class="dtend" datetime="2005-06">June 2005</time>
</p>
<p class="location">
<a class="url" href="http://www.jmu.edu" rel="external" title="Visit the JMU website">James Madison University</a>
</p>
</div>
</section>
<section>
<!-- Work History -->
<header>
<h2>Experience</h2>
</header>
<!-- linesandwaves -->
<div class="vcalendar">
<div class="experience vevent vcard">
<a href="#my-name" class="include hidden" title="Jon Long"></a>
<hgroup class="position">
<h3 class="title">Founder and Software Engineer</h3>
<h4 class="org summary">
<a class="url" href="http://portfolio.linesandwaves.com" title="Visit linesandwaves' portfolio">linesandwaves, LLC</a>
</h4>
</hgroup>
<div class="timespan">
<p class="duration">
<time class="dtstart" datetime="2014-09">September 2014</time>–<time class="dtend" datetime="2019-03">March 2019</time>
</p>
<p class="adr location">
<span class="locality">Philadelphia</span>, <abbr class="region" title="Pennsylvania">PA</abbr>
</p>
</div>
<ul class="description">
<li>Linesandwaves is a consultancy specializing in freelance web development, user experience design, and technical consulting, with deep experience in both large technology organizations and small agencies.</li>
<li>Technical specialities include API-driven web apps, responsive design, back-end architecture with Node.js, CI/CD pipelines, large-scale CSS approaches (BEM, OOCSS, CSS modules), ES6 Javascript, and modern web tools including React, Angular.js, Webpack, CSS-in-JS, Sass, and LESS.</li>
<li>Project management experience includes agile methodology utilizing scrum planning, post-sprint demos, kanban-style issue tracking, and regular backlog grooming sessions.</li>
<li>Client projects include:
<ul>
<li><strong>The Criterion Collection</strong>: worked to launch to the first redesign of <a class="url" href="https://criterion.com" title="Visit Criterion Collection's website">criterion.com</a> in a decade, complete with a scratch-built Laravel CMS.</li>
<li><strong>Roxborough PA Development Corporation</strong>: front-end and Node.js-based backend builds of <a class="url" href="https://roxboroughpa.com" title="Visit Roxborough's website">roxboroughpa.com</a>, along with onsite technical training.</li>
<li><strong>Service Year Alliance</strong>: front-end builds of account management and registration portals for <a class="url" href="https://serviceyear.org" title="Visit Service Year's website">serviceyear.org</a></li>
<li><strong>Stealth healthcare startup focused on Home Care providers</strong>: assisted with creation of React.js and React Native-based minimum viable products.</li>
<li><strong>P'unk Avenue</strong>: front-end component libraries built with ES6 JavaScript, Sass, and Nunjucks templating, used as living design systems for various organizations (<a class="url" href="https://portfolio.linesandwaves.com/work/component-libraries" title="Visit Component Library case studies">portfolio.linesandwaves.com/work/component-libraries</a>).</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- Remedy Plan -->
<div class="vcalendar">
<div class="experience vevent vcard">
<a href="#my-name" class="include hidden" title="Jon Long"></a>
<hgroup class="position">
<h3 class="title">Digital Lead</h3>
<h4 class="org summary">
<a class="url" href="https://remedyplan.com" title="Visit Remedy Plan's website">Remedy Plan Therapeutics</a>
</h4>
</hgroup>
<div class="timespan">
<p class="duration">
<time class="dtstart" datetime="2014-10">October 2014</time>–<time class="dtend" datetime="2015-01">January 2016</time>
</p>
<p class="adr location">
<span class="locality">Washington</span>, <abbr class="region" title="District of Columbia">DC</abbr>
</p>
</div>
<ul class="description">
<li>Worked with a small founding team to launch Remedy Plan Therapeutics, a Maryland-based biotech startup developing the first drugs that prevent cancer cells from multiplying.</li>
<li>Led the company's branding and digital efforts and played a critical role in developing a crowdfunding campaign which raised over $100k in seed money to kickstart the venture.
<li>Led discovery exercises that helped us to find a name, build a narrative around the company, develop pitches tailored to public and private investors, and brand Remedy Plan as a serious, professional operation with world-changing potential.</li>
<li>Created all of Remedy Plan's visual design assets, designed and developed <a class="url" href="https://remedyplan.com" title="Visit Remedy Plan's website">remedyplan.com</a> (Sass/Browserify/jQuery/Node.js static site), and shot, directed, and edited a 90-second pitch video for our Indiegogo campaign.</li>
</ul>
</div>
</div>
<!-- ISL -->
<div class="vcalendar">
<div class="experience vevent vcard">
<a href="#my-name" class="include hidden" title="Jon Long"></a>
<hgroup class="position">
<h3 class="title">Product Manager</h3>
<h4 class="org summary">
<a class="url" href="https://www.crunchbase.com/organization/istrategylabs" title="Visit ISL's profile on Crunchbase">ISL</a>
</h4>
</hgroup>
<div class="timespan">
<p class="duration">
<time class="dtstart" datetime="2013-08">August 2013</time>–<time class="dtend" datetime="2014-09-01">September 2014</time>
</p>
<p class="adr location">
<span class="locality">Washington</span>, <abbr class="region" title="District of Columbia">DC</abbr>
</p>
</div>
<ul class="description">
<li>First full-time member supporting ISL's new product-focused division.</li>
<li>Led a small team in the research, prototype, and release of internal products. Focused on tools to take the pain out of daily reporting and balance workloads across teams. The resulting data was designed to provide managers with actionable insights and heads-up notifications to uncover workflow trends and enable proactive decision-making.</li>
<li>Followed a Lean Startup metholodogy to identify success factors, and used extensive prototyping and research sessions to validate them through build-measure-learn feedback loops.</li>
<li>Lo-fidelity prototypes built using Omnigraffle, Keynote, Sketch, and After Effects. MVP prototypes built using Meteor.js and Sails.js realtime frameworks (Node.js, MongoDB, Socket.io)</li>
</ul>
</div>
</div>
<!-- ISL -->
<div class="vcalendar">
<div class="experience vevent vcard">
<a href="#my-name" class="include hidden" title="Jon Long"></a>
<hgroup class="position">
<h3 class="title">VP of Engineering</h3>
<h4 class="org summary">
<a class="url" href="https://www.crunchbase.com/organization/istrategylabs" title="Visit ISL's profile on Crunchbase">ISL</a>
</h4>
</hgroup>
<div class="timespan">
<p class="duration">
<time class="dtstart" datetime="2012-03">March 2012</time>–<time class="dtend" datetime="2013-07-01">July 2013</time>
</p>
<p class="adr location">
<span class="locality">Washington</span>, <abbr class="region" title="District of Columbia">DC</abbr>
</p>
</div>
<ul class="description">
<li>Led a team of 8 software engineers in the creation of internal projects and external client campaigns for some of the world's largest brands.</li>
<li>Projects shipped include:
<ul>
<li><strong>Redd's Apple Launcher</strong>: a campaign for MillerCoors in which participants could use their web browsers to fire an internet-connected apple launcher at a livestreamed, custom built bar (physically located inside a warehouse in NE DC). The bar featured trigger targets that would automatically assign, fulfill, and distribute prizes to the participant once hit. Featured an in-browser FPS-style game using AngularJS and Socket.IO, Facebook Connect, a third-party prizing API, and Grandstand hardware integration.</li>
<li><strong>DUPress</strong>: a publishing platform for built for Deloitte to house original thought leadership, periodicals, and reports on a variety of topics in the public and private sectors. Featured a custom publishing workflow in WordPress, a responsive front end, and an auto-ingestion plugin to create site articles from internal InDesign templates.</li>
<li><strong>SimplyGifted</strong>: a gift card platform designed for local businesses, and powered by Gannet's third-party deals API. Included integration with an in-progress internal API, client-side site development, a Yii-based backend, and the development of a JavaScript widget that vendors could use to sell gift cards on their own sites with a single line of code.</li>
<li><strong>Yappem</strong>: a mobile application with the goal of incentivizing brand and product feedback. I led the UX and IA for this project, delivering wireframes, workflow diagrams, interactive mockups, and detailed spec sheets.</li>
</ul>
</li>
<li>In addition to full-stack software development, I focused on company-wide technical direction, team dynamics, staffing, and technical project management.</li>
</ul>
</div>
</div>
<!-- ISL -->
<div class="vcalendar">
<div class="experience vevent vcard">
<a href="#my-name" class="include hidden" title="Jon Long"></a>
<hgroup class="position">
<h3 class="title">Creative Technologist</h3>
<h4 class="org summary">
<a class="url" href="https://www.crunchbase.com/organization/istrategylabs" title="Visit ISL's profile on Crunchbase">ISL</a>
</h4>
</hgroup>
<div class="timespan">
<p class="duration">
<time class="dtstart" datetime="2010-12">December 2010</time>–<time class="dtend" datetime="2012-04-01">April 2012</time>
</p>
<p class="adr location">
<span class="locality">Washington</span>, <abbr class="region" title="District of Columbia">DC</abbr>
</p>
</div>
<ul class="description">
<li>Led the in-house development efforts for ISL's client projects. Built websites, services, social campaigns, and on-site installations for brands including Pinkberry, Ford, Deloitte, Hilton, Honest Tea, Volkswagen, and GE.</li>
<li>Focus on front-end engineering with significant backend experience across Node.js/MongoDB/nginx and <abbr title="Linux, Apache, MySQL, PHP">LAMP</abbr> stacks.</li>
<li>Responsible for technical direction, application development, platform selection, project scoping, and elements of user interface design.</li>
<li>Conceived and initially developed ISL's flagship service offering, <a href="https://isl.co/products/grandstand/" title="Visit the ISL product page for more about Grandstand">Grandstand</a> — a Node.js-based tool for building real-time applications using various social media actions as event triggers. Grandstand powered many of ISL's web and physical campaigns, from social data visualization to Internet-of-Things-style hardware installations, and has since been deployed for customers including Microsoft, Ford, Hess, Hilton, AT&T, and GE.</li>
</ul>
</div>
</div>
<!-- CDIA -->
<div class="vcalendar">
<div class="experience vevent vcard">
<a href="#my-name" class="include hidden" title="Jon Long"></a>
<hgroup class="position">
<h3 class="title">Instructor</h3>
<h4 class="org summary">
<a class="url" href="http://www.cdiabu.com" title="Visit CDIA's website">Boston University Center for Digital Imaging Arts</a>
</h4>
</hgroup>
<div class="timespan">
<p class="duration">
<time class="dtstart" datetime="2010-08-01">August 2010</time>–<time class="dtend" datetime="2010-12-01">December 2010</time>
</p>
<p class="adr location">
<span class="locality">Washington</span>, <abbr class="region" title="District of Columbia">DC</abbr>
</p>
</div>
<ul class="description">
<li>Part-time teacher of standards-based web design at CDIA's Georgetown campus.</li>
<li>
Courses taught include:
<ul>
<li><strong>GWD208</strong>: Portfolio Presentation I and II</li>
<li><strong>WD101</strong>: Intro to Web Design, HTML & CSS</li>
<li><strong>WD103</strong>: HTML & CSS II</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- National Geographic Society -->
<div class="vcalendar">
<div class="experience vevent vcard">
<a href="#my-name" class="include hidden" title="Jon Long"></a>
<hgroup class="position">
<h3 class="title">User Interface Developer</h3>
<h4 class="org summary">
<a class="url" href="https://www.nationalgeographic.com" title="Visit the National Geographic website">National Geographic Society</a>
</h4>
</hgroup>
<div class="timespan">
<p class="duration">
<time class="dtstart" datetime="2009-01-01">January 2009</time>–<time class="dtend" datetime="2010-11-01">November 2010</time>
</p>
<p class="adr location">
<span class="locality">Washington</span>, <abbr class="region" title="District of Columbia">DC</abbr>
</p>
</div>
<ul class="description">
<li>Led the front-end development of <a class="url" href="https://www.nationalgeographic.com" rel="external" title="Visit the National Geographic website">nationalgeographic.com's</a> 2010 redesign, creating a highly modular framework using an object-oriented CSS approach combined with the flexibility of the Django templating system.</li>
<li>Devised a page layout system within our custom CMS to allow the team's content producers freedom and versatility in presenting their work, while also helping them to build pages that remained true to the design team's original vision.</li>
</ul>
</div>
</div>
<div class="vcalendar">
<div class="experience vevent vcard">
<a href="#my-name" class="include hidden" title="Jon Long"></a>
<hgroup class="position">
<h3 class="title">Web Designer</h3>
<h4 class="org summary">
<a class="url" href="https://www.nationalgeographic.com" title="Visit the National Geographic website">National Geographic Society</a>
</h4>
</hgroup>
<div class="timespan">
<p class="duration">
<time class="dtstart" datetime="2007-02-01">February 2007</time>–<time class="dtend" datetime="2009-01-01">January 2009</time>
</p>
<p class="adr location">
<span class="locality">Washington</span>, <abbr class="region" title="District of Columbia">DC</abbr>
</p>
</div>
<ul class="description">
<li>Produce visual designs ranging from exhibition, advertising, and franchise sites to Flash games and modules, banner advertisements, maps, and process charts.</li>
<li>Develop front-end XHTML, CSS and Javascript solutions, program Flash/XML modules, troubleshoot and edit site-wide CSS/HTML bugs, and develop Javascript/Applescript automation solutions for Photoshop batch processes.</li>
<li>Generate sitemaps, wireframes, mockups, detailed spec sheets, data models and technical annotations for projects across the Digital Media division.</li>
<li>Developed and maintained a system for treating and formatting images across <a class="url" href="https://www.nationalgeographic.com" rel="external" title="Visit the National Geographic website">nationalgeographic.com</a>, including color correction, organizational specifications, and an automated application for processing and branding each of the site's eight required sizes.</li>
</ul>
</div>
</div>
</section>
<section>
<!-- Affiliations -->
<header>
<h2>Affiliations</h2>
</header>
<div class="vcard">
<hgroup class="position">
<h3 class="title">Volunteer</h3>
<h4 class="org summary affiliation">
<a class="url" href="https://papermillfoodhub.com" title="Visit the Papermill Food Hub's site">Papermill Food Hub</a>
</h4>
</hgroup>
<ul class="description">
<li>The Papermill Food Hub is a mutual aid organization serving Philadelphia residents in need. We provide food, diapers, and other essential items to in-need families in Kensington, North Philadelphia, and other parts of the city all delivered by our volunteer drivers every Sunday.</li>
<li>Driver and volunteer since 2020, administrator of <a class="url" href="https://papermillfoodhub.com" title="Visit the Papermill Food Hub's site">papermillfoodhub.com</a> and donation/communication platforms.</li>
</ul>
</div>
<div class="vcard">
<hgroup class="position">
<h3 class="title">Volunteer</h3>
<h4 class="org summary affiliation">
<a class="url" href="http://www.visionworkshops.org" title="Visit the Vision Workshops site">National Geographic/Vision Workshops Photo Camp</a>
</h4>
</hgroup>
<ul class="description">
<li>The Photo Camp program teaches students in underserved communities all over the world how to express themselves and their surroundings through the creative arts of storytelling and photography.</li>
<li>Traveled with groups to Seattle, Washington; Miami, Florida, and Chad, Central Africa.</li>
</ul>
</div>
<div class="vcard">
<hgroup class="position">
<h3 class="title">Founder and Organizer</h3>
<h4 class="org summary affiliation">
<a class="url" href="http://phillypinball.club" title="Visit the Philly Pinball Club's site">Philly Pinball Club</a>
</h4>
</hgroup>
<ul class="description">
<li>The PPC is a city-wide pinball league in Philadelphia, PA</li>
</ul>
</div>
</section>
</main>
<!-- Google Analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1091211-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>