-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
364 lines (292 loc) · 16.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<!--
/*
* ORTONOMY.CO
* Gregory Orton
* September 2017
* Github: @ortonomy, Twitter: @ortonomy_
*
*/
-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<meta property="og:image" content="/assets/images/preview.png" />
<title>gregory j. orton | product | development | design</title>
<meta name="description" content="Personal site of Gregory J. Orton, Product owner & software engineer.">
<!-- vendor css files -->
<link rel="stylesheet" href="/assets/css/vendor/font-awesome/font-awesome.min.css" />
<link rel="stylesheet" href="/assets/css/vendor/aos/aos.css" />
<link rel="stylesheet" href=" /assets/css/vendor/normalize-css/normalize.css" />
<!-- end vendor css -->
<!-- app css -->
<link rel="stylesheet" href="/assets/css/main.css">
<!-- end app css -->
<link rel="canonical" href="http://ortonomy.co/">
<link rel="alternate" type="application/rss+xml" title="gregory j. orton | product | development | design" href="/feed.xml">
</head>
<body>
<!-- uses _MainNavigation SCSS partial for styles -->
<aside class="sidebar no-mobile">
<div class="sidebar-content">
<div class="logo-wrapper">
<img src="/assets/images/logo.svg">
</div>
<div class="sidebar-titles">
<!-- <h1 class="sidebar-title">- Gregory J. Orton -</h1> -->
<h2 class="sidebar-subtitle"><span>product</span><span> | </span><span>design</span> <span> | </span><span>front-end dev</span></h2>
</div>
<nav class="sidebar-nav">
<ul>
<a href="#about"><li data-key="1" class="active">About</li></a>
<a href="#portfolio"><li data-key="2">Portfolio</li></a>
<a href="#experience"><li data-key="2">Experience</li></a>
<a href="https://medium.com/@ortonomy" target="_blank"><li data-key="3">Blog</li></a>
<div class="active-marker"></div>
</ul>
</nav>
</div>
<div class="sidebar-footer">
<div class="contact-links-wrapper">
<a href="https://github.com/ortonomy" target="_blank" class="contact-link"><p class="contact-link-container"><i class="fa fa-github contact-icon"></i><span>ortonomy</span></p></a>
<a href="https://twitter.com/ortonomy_" target="_blank" class="contact-link"><p class="contact-link-container"><i class="fa fa-twitter contact-icon"></i><span>@ortonomy_</span></p></a>
<a href="https://www.linkedin.com/in/gregoryjorton/" target="_blank" class="contact-link"><p class="contact-link-container"><i class="fa fa-linkedin contact-icon"></i><span>gregoryjorton</span></p></a>
</div>
<img class="contact-avatar" src="/assets/images/avatar.svg">
</div>
</aside>
<section class="all-content">
<header class="content-header-main">
<h1 class="header-text">Let's build nice things.</h1>
<div>
<a href="./assets/pdfs/resume_gregoryorton_201801_website.pdf"><button class="download-resume">Download my résumé</button></a>
</div>
</header>
<article class="content-section " id="about">
<h2 class="content-title" id="hi-there">Hi there!</h2>
<div class="content-title-sub"><span class="content-title-decorator"></span><i class="fa fa-commenting-o"></i><span class="content-title-decorator"></span></div>
<p><strong>So, do you? Like to build nice things, that is?</strong> As a product owner & manager, and as a software engineer, it’s what I do! Whether I’m creating for a global user base, or supporting an internal team, I strive to build delightful experiences that make peoples’ lives easier.</p>
<p><strong>With 10 years of experience</strong> in the digital education space, my milestones include: shaping a product vision on web and on mobile devices for a leading corporation, delivering features and products used globally by over 200k students, and writing classroom content used by more than 3000 teachers worldwide.</p>
<p><strong>Want to know more?</strong> Shoot me a message on <a href="https://twitter.com/ortonomy_" target="blank">Twitter</a> or <a href="https://www.linkedin.com/in/gregoryjorton/" target="blank">LinkedIn</a>, or explore my <a href="https://github.com/ortonomy" target="blank">Github</a> repositories (links open in a new window.)</p>
</article>
<article class="content-section dark">
<h2 class="content-title" id="skills">Skills</h2>
<div class="content-title-sub"><span class="content-title-decorator"></span><i class="fa fa-graduation-cap"></i><span class="content-title-decorator"></span></div>
<p><strong>I am able to wear many hats.</strong> I have a professional level of expertise as a product manager, web developer, and as an academic editor & manager.</p>
<div class="skills-list-wrapper">
<div class="content-column">
<div>
<img alt="mobile device icon" src="assets/images/planner.svg" data-aos="flip-down" data-aos-easing="ease-in-out-quart" data-aos-once="false" data-aos-delay="0" />
</div>
<p><strong>I can manage it.</strong> I facilitate communication between disciplines with ease, helping stakeholders, engineers, and designers define vision and value, by talking in their language.</p>
</div>
<div class="content-column">
<div>
<img alt="digital product icon" src="assets/images/designer.svg" data-aos="flip-down" data-aos-easing="ease-in-out-quart" data-aos-once="false" data-aos-delay="150" />
</div>
<p><strong>I can design it.</strong> From user research, to wireframes & mockups, or interactive rapid prototypes I can bring ideas to life and maximise buy-in, using the tools of the trade such as <em>Sketch, Flinto, and Zeplin</em>.</p>
</div>
<div class="content-column">
<div>
<img alt="rubkiks cube icon" src="assets/images/executor.svg" data-aos="flip-down" data-aos-easing="ease-in-out-quart" data-aos-once="false" data-aos-delay="300" />
</div>
<p><strong>I can develop it.</strong> I use the latest technologies such as <em>graphQL, react.js, and react-native</em> to deliver delightful experiences on web and mobile. I solve design problems with creativity and data-driven analysis.</p>
</div>
</div>
</article>
<article class="content-section golden" id="portfolio">
<h2 class="content-title" id="projects--portfolio">Projects & portfolio</h2>
<div class="content-title-sub"><span class="content-title-decorator"></span><i class="fa fa-pencil"></i><span class="content-title-decorator"></span></div>
<p><strong>Boosting organizational memory and resource planning:</strong> Working with freelancers means an inevitable level of flux in availability of quality talent. Teams with even a modest number of freelancer relationships find this data difficult to manage. To solve this, I started <strong>fling.work</strong>, the first ‘freelancer relationship management’ system.</p>
<div class="portfolio-image-container">
<div class="portfolio-image">
<img class="portfolio-real-image" alt="fling.work landing page" src="assets/images/fling_shot.png" data-aos="flip-down" data-aos-easing="ease-in-out-quart" data-aos-once="false" data-aos-delay="0" />
<div class="portfolio-image-popout"></div>
</div>
<div class="portfolio-image">
<img class="portfolio-real-image" alt="fling.work freelancer data" src="assets/images/fling_shot_2.png" data-aos="flip-down" data-aos-easing="ease-in-out-quart" data-aos-once="false" data-aos-delay="0" />
<div class="portfolio-image-popout"></div>
</div>
</div>
<p><strong>Open-source & collaborative:</strong> I have open-sourced the app on <a href="https://github.com/ortonomy/flingapp-frontend" target="blank">GitHub</a>. It’s developed with one full-time collaborator and several other freelance developers and tech enthusiasts from a Shanghai-local coding collective called <a href="https://coderbunker.com/" target="blank">Coderbunker</a>.</p>
<div class="content-title-sub"><span class="content-title-decorator"></span><i class="fa fa-pencil"></i><span class="content-title-decorator"></span></div>
<p><strong>Fixing the oldest problem:</strong> In digital language instruction, the biggest barrier to learning is the lack of opportunity to practice and test speaking. We fixed that for mobile users, by creating a new decision-based speaking activity with asynchronous teacher grading and feedback.</p>
<div class="portfolio-image-container_2by3">
<div class="portfolio-image_2by3">
<a href="assets/images/scc_1.png" data-desc="speaking task intro">
<img class="portfolio-real-image_2by3" alt="speaking task intro" src="assets/images/scc_1.png" />
</a>
</div>
<div class="portfolio-image_2by3">
<a href="assets/images/scc_2.png" data-desc="speaking task prompt">
<img class="portfolio-real-image_2by3" alt="speaking task prompt" src="assets/images/scc_2.png" />
</a>
</div>
<div class="portfolio-image_2by3">
<a href="assets/images/scc_3.png" data-desc="speaking task choice">
<img class="portfolio-real-image_2by3" alt="speaking task choice" src="assets/images/scc_3.png" />
</a>
</div>
<div class="portfolio-image_2by3">
<a href="assets/images/scc_4.png" data-desc="speaking task response">
<img class="portfolio-real-image_2by3" alt="speaking task response" src="assets/images/scc_4.png" />
</a>
</div>
<div class="portfolio-image_2by3">
<a href="assets/images/scc_5.png" data-desc="speaking task self assessment I">
<img class="portfolio-real-image_2by3" alt="speaking task self assessment I" src="assets/images/scc_5.png" />
</a>
</div>
<div class="portfolio-image_2by3">
<a href="assets/images/scc_6.png" data-desc="speaking task self assessment II">
<img class="portfolio-real-image_2by3" alt="speaking task self assessment II" src="assets/images/scc_6.png" />
</a>
</div>
<div class="portfolio-image_2by3">
<a href="assets/images/scc_7.png" data-desc="speaking task teacher grading I">
<img class="portfolio-real-image_2by3" alt="speaking task teacher grading I" src="assets/images/scc_7.png" />
</a>
</div>
<div class="portfolio-image_2by3">
<a href="assets/images/scc_8.png" data-desc="speaking task teacher grading II">
<img class="portfolio-real-image_2by3" alt="speaking task teacher grading II" src="assets/images/scc_8.png" />
</a>
</div>
<div class="portfolio-image_2by3">
<a href="assets/images/scc_9.png" data-desc="speaking task teacher grading III">
<img class="portfolio-real-image_2by3" alt="speaking task teacher grading III" src="assets/images/scc_9.png" />
</a>
</div>
</div>
<p>Students are asked to spontaneously produce language they’ve been learning and teachers listen to the production giving grades and specific feedback on their errors and areas for improvement.</p>
<div class="content-title-sub"><span class="content-title-decorator"></span><i class="fa fa-pencil"></i><span class="content-title-decorator"></span></div>
<p><strong>Centre of innovation:</strong> as a product designer and part of a cross-functional team, we innovated to bring practice and examination of reading and writing onto the mobile platform. A real challenge given the affordance and constraints of mobile devices.</p>
<div class="portfolio-image-container_2by3">
<div class="portfolio-image_2by3">
<a href="assets/images/reading_1.png" data-desc="reading question collapsed">
<img class="portfolio-real-image_2by3" alt="reading question collapsed" src="assets/images/reading_1.png" />
</a>
</div>
<div class="portfolio-image_2by3">
<a href="assets/images/reading_2.png" data-desc="reading question expanded">
<img class="portfolio-real-image_2by3" alt="reading question expanded" src="assets/images/reading_2.png" />
</a>
</div>
<div class="portfolio-image_2by3">
<a href="assets/images/reading_3.png" data-desc="reading text as email">
<img class="portfolio-real-image_2by3" alt="reading text as email" src="assets/images/reading_3.png" />
</a>
</div>
<div class="portfolio-image_2by3">
<a href="assets/images/writing_1.png" data-desc="writing intro">
<img class="portfolio-real-image_2by3" alt="writing intro" src="assets/images/writing_1.png" />
</a>
</div>
<div class="portfolio-image_2by3">
<a href="assets/images/writing_2.png" data-desc="writing prompt">
<img class="portfolio-real-image_2by3" alt="writing prompt" src="assets/images/writing_2.png" />
</a>
</div>
<div class="portfolio-image_2by3">
<a href="assets/images/writing_3.png" data-desc="writing input example">
<img class="portfolio-real-image_2by3" alt="writing input example" src="assets/images/writing_3.png" />
</a>
</div>
</div>
<div class="content-title-sub"><span class="content-title-decorator"></span><i class="fa fa-code"></i><span class="content-title-decorator"></span></div>
<p><strong>Creativity and code:</strong> A collection of my software development projects built for <a href="https://freecodecamp.com/" target="blank">FreeCodeCamp</a></p>
<div class="portfolio-image-container_2by3">
<div class="portfolio-image_2by3">
<a href="https://codepen.io/ortonomy/details/qNjEzX/" data-desc="JS calculator">
<img class="portfolio-real-image_2by3" alt="JS calculator" src="assets/images/codepen_1.png" />
</a>
</div>
<div class="portfolio-image_2by3">
<a href="https://codepen.io/ortonomy/details/KvOeYb" data-desc="procedurally generated cloudscape">
<img class="portfolio-real-image_2by3" alt="procedurally generated cloudscape" src="assets/images/codepen_2.png" />
</a>
</div>
<div class="portfolio-image_2by3">
<a href="https://codepen.io/ortonomy/details/owMBpL/" data-desc="pomodoro timer">
<img class="portfolio-real-image_2by3" alt="pomodoro timer" src="assets/images/codepen_3.png" />
</a>
</div>
</div>
<p>You can find more examples of my work on <a href="https://github.com/ortonomy" target="blank">Github</a> or <a href="https://codepen.io/ortonomy/" target="blank">Codepen</a>.</p>
</article>
<article class="content-section" id="experience">
<h2 class="content-title">Experience & Education</h2>
<div class="content-title-sub"><span class="content-title-decorator"></span><i class="fa fa-briefcase"></i><span class="content-title-decorator"></span></div>
<p><strong>All these things that I've done</strong> - a visual history of my work experience and time spent gaining valuable skills</p>
<template id="divider">
<section class="row divider">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</section>
</template>
<template id="divider-icon">
<section class="row divider icon">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</section>
</template>
<template id="entry-start-left">
<section class="row entry left">
<div class="left role">
<h1 class="title"> </h1>
<h2 class="company"></h2>
<h3 class="location"></h3>
<p class="date"></p>
</div>
<div class="center line"></div>
<div class="right details">
<p class="description"></p>
</div>
</section>
</template>
<template id="entry-start-right">
<section class="row entry right">
<div class="left details">
<p class="description"></p>
</div>
<div class="center line"></div>
<div class="right role">
<h1 class="title"> </h1>
<h2 class="company"></h2>
<h3 class="location"></h3>
<p class="date"></p>
</div>
</section>
</template>
<article class="container"></article>
<script src="assets/scripts/visual_resume.js"></script>
</article>
<footer class="content-section dark">
<div>
<p class="content-title-sub">© Gregory Orton, 2018</p>
</div>
</footer>
</section>
<div class="mobile-navigation">
<span class="mob-nav-text">NAV</span>
<div class="mob-nav-group">
<div class="mob-nav-item"><a href="#about" class="mob-nav-item-a"><span>About</span></a></div>
<div class="mob-nav-item"><a href="#portfolio" class="mob-nav-item-a"><span>Portfolio</span></a></div>
<div class="mob-nav-item"><a href="#experience" class="mob-nav-item-a"><span>Experience</span></a></div>
<div class="mob-nav-item"><a href="https://medium.com/@ortonomy" target="_blank" class="mob-nav-item-a"><span>Blog</span></a></div>
</div>
</div>
</body>
<!-- vendor scripts -->
<script src="/assets/scripts/vendor/jquery/jquery-3.3.1.min.js"></script>
<script src="/assets/scripts/vendor/aos/aos.js"></script>
<script src="/assets/scripts/vendor/waypoints/jquery.waypoints.min.js"></script>
<!-- end vendor scripts -->
<!-- app scripts -->
<script src="/assets/scripts/app.js"></script>
<!-- end app scripts -->
</html>