-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
396 lines (388 loc) · 27.1 KB
/
Copy pathindex.html
File metadata and controls
396 lines (388 loc) · 27.1 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
---
layout: default
title: Mark DeHate
---
<!-- Header -->
<header class="masthead">
<div class="container">
<img class="img-fluid rounded-circle profile-pic" src="img/profile.jpg" alt="">
<div class="intro-text">
<span class="name">Mark DeHate</span>
<hr class="star-light">
<span class="skills">Product Manager - UX Designer - Problem Solver</span>
</div>
</div>
</header>
<!-- Portfolio Grid Section -->
<section id="portfolio">
<div class="container">
<h2 class="text-center">My Projects</h2>
<hr class="star-primary">
<p class="text-center">My <a href="https://www.linkedin.com/in/markdehate/">professional career</a> thus far is full of b2b employers, so as a result, I'm unable to disclose most of my day-to-day work on a public website. So here are a few interesting things that I can show you, more around my hobbies and how I spend my free time.</p>
<div class="row">
<div class="col-sm-4 portfolio-item">
<div class="portfolio-link" href="#portfolioModal1" data-toggle="modal">
<div class="caption port-tgux">
<div class="caption-content port-tgux">
<i class="fa fa-search-plus fa-3x port-tgux"></i>
</div>
</div>
<img class="img-fluid" src="img/portfolio/tgux.jpg" alt="">
</div>
</div>
<div class="col-sm-4 portfolio-item">
<div class="portfolio-link" href="#portfolioModal2" data-toggle="modal">
<div class="caption port-singletasker">
<div class="caption-content port-singletasker">
<i class="fa fa-search-plus fa-3x port-singletasker"></i>
</div>
</div>
<img class="img-fluid" src="img/portfolio/singletasker.jpg" alt="">
</div>
</div>
<div class="col-sm-4 portfolio-item">
<div class="portfolio-link" href="#portfolioModal3" data-toggle="modal">
<div class="caption port-carswbrakes">
<div class="caption-content port-carswbrakes">
<i class="fa fa-search-plus fa-3x port-carswbrakes"></i>
</div>
</div>
<img class="img-fluid" src="img/portfolio/carswithbrakes.jpg" alt="">
</div>
</div>
<div class="col-sm-4 portfolio-item">
<div class="portfolio-link" href="#portfolioModal4" data-toggle="modal">
<div class="caption port-radio">
<div class="caption-content port-radio">
<i class="fa fa-search-plus fa-3x port-radio"></i>
</div>
</div>
<img class="img-fluid" src="img/portfolio/radio.jpg" alt="">
</div>
</div>
<div class="col-sm-4 portfolio-item">
<div class="portfolio-link" href="#portfolioModal5" data-toggle="modal">
<div class="caption port-albumart">
<div class="caption-content port-albumart">
<i class="fa fa-search-plus fa-3x port-albumart"></i>
</div>
</div>
<img class="img-fluid" src="img/portfolio/albumart.jpg" alt="">
</div>
</div>
<!-- <div class="col-sm-4 portfolio-item">
<div class="portfolio-link" href="#portfolioModal6" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="img/portfolio/submarine.png" alt="">
</div>
</div>
-->
</div>
</div>
</section>
<!-- About Section -->
<section class="success" id="about">
<div class="container">
<h2 class="text-center">My Career Journey</h2>
<hr class="star-light">
<div class="row">
<div class="col-lg-12">
<p>
Hi! I'm Mark DeHate - currently I work as a Product Manager. Each of my past careers (even as a DJ!) has provided me invaluable experience on the way. All in all I get immense satisfaction out of helping other people do amazing things, and my career journey so far highlights that as a common thread.
</p>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-4">
<h3>Sysadmin/Developer</h3>
<p>
My professional career started as a "full-stack" system administrator and computer technician, managing a Mac OS X Server and countless desktops and laptops at a K-12 school district. Later I moved on as a true developer - first on the back end, working on COBOL and Java, and gradually working towards the front end, JavaScript, HTML, and CSS.
</p>
<p>
In addition to a deep appreciation of well-organized network racks, the main takeaway I have from this experience is how <i>technology serves people</i>, and not the other way around.
</p>
</div>
<div class="col-lg-4">
<h3>UX Designer</h3>
<p>
My front-end development experience led me to a decade of work as a UX Designer, all in the enterprise space. Most of my time as a designer has been with a small supporting team, so I've had the opportunity to experience the whole gamut of UX - from product discovery to usability studies to high fidelity mockups. The enterprise space has a ton of really crunchy problems to gnaw on that are super satisfying to take on.
</p>
<p>
As a UX Designer (particularly in the enterprise), I've learned a lot about balancing business and user needs, and the role of UX being a facilitator to get the whole team on the same page.
</p>
</div>
<div class="col-lg-4">
<h3>Product Manager</h3>
<p>
As a UX Designer, I loved the ability to remove barriers for other people's success. I get the same feeling as a Product Manager, just with way more immediate results! This role has me diving into understanding users in a similar way as a UX Designer, but adding in a slightly different spin when thinking about priorities for the product, and the business.
</p>
<p>
As my career has moved into the Product space, I've really honed my skills at focusing what's critical - for the user AND the business - and what's just noise.
</p>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact">
<div class="container">
<h2 class="text-center">Contact Me</h2>
<hr class="star-primary">
<div class="row">
<div class="col-lg-12 text-center">
<ul class="list-inline">
<li class="list-inline-item">
<a class="btn-social btn-outline" href="http://facebook.com/mrdehate"><i class="fa fa-fw fa-facebook"></i></a>
</li>
<li class="list-inline-item">
<a class="btn-social btn-outline" href="https://www.instagram.com/mrdehate"><i class="fa fa-fw fa-instagram"></i></a>
</li>
<li class="list-inline-item">
<a class="btn-social btn-outline" href="http://twitter.com/mrdehate"><i class="fa fa-fw fa-twitter"></i></a>
</li>
<li class="list-inline-item">
<a class="btn-social btn-outline" href="https://www.linkedin.com/in/markdehate/"><i class="fa fa-fw fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="text-center">
<div class="footer-below">
<div class="container">
<div class="row">
<div class="col-lg-12">
Copyright © Mark DeHate 2021. Hi Mom! =)
</div>
</div>
</div>
</div>
</footer>
<!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
<div class="scroll-top hidden-lg-up">
<a class="btn btn-primary page-scroll" href="#page-top">
<i class="fa fa-chevron-up"></i>
</a>
</div>
<!-- Portfolio Modals -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-2">
<div class="modal-body">
<h2>That Game's UX</h2>
<hr class="star-primary">
<img class="img-fluid img-centered" src="img/portfolio/tgux.jpg" alt="">
<p><a href="http://www.thatgamesux.com">That Game's UX</a> is a blog about usability and user experience in gaming ("Because Gamers are Users Too!"). I love all forms of gaming, so I started writing this blog to have a valid excuse to game more and call it work :). It's...let's say "less active" these days, but I do value the experience that this was, and still get inspired to write an article from time to time.</p>
<p>This experience was (and is!) a great chance to practice my writing, about a topic I love. I also administer the server myself, so I've learned a lot about proper(-ish) Wordpress, Linux, and Apache server adminstration. And how to deal with spam! So much spam.</p>
<ul class="list-inline item-details">
<li>Website:
<strong><a href="http://thatgamesux.com">thatgamesux.com</a>
</strong>
</li>
<li>Twitter:
<strong><a href="http://twitter.com/thatgamesux">@thatgamesux</a>
</strong>
</li>
</ul>
<button class="btn btn-success" type="button" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-2">
<div class="modal-body">
<h2>#singletasker Stickers</h2>
<hr class="star-primary">
<img class="img-fluid img-centered" src="img/portfolio/singletasker.jpg" alt="The text #singletasker">
<p>One of my personal goals is to multitask less. To help motivate me (and because it sounded like fun), I made up some small #singletasker stickers. It's been a hit with lots of people that I've shared them with (turns out you can't easily buy a handful of custom stickers!), and I'm thinking about bigger plans for this. It's a movement that will be <em>sweeping the globe!!!</em></p>
<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/Bd1AMiPjQHn/" data-instgrm-version="8" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50.0% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/Bd1AMiPjQHn/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">What do you think, the #singletasker revolution? We have stickers that pretty much makes it official right??</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">A post shared by <a href="https://www.instagram.com/mrdehate/" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px;" target="_blank"> Mark DeHate</a> (@mrdehate) on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2018-01-11T23:48:08+00:00">Jan 11, 2018 at 3:48pm PST</time></p></div></blockquote> <script async defer src="//platform.instagram.com/en_US/embeds.js"></script>
<p>Projects like these I tend to learn a lot about the Adobe Creative Suite. Having a more technical background - not so much graphic design - I'm still fairly low on the Adobe suite learning curve. But I'm moving up! I also am a sucker for a good hashtag, so I couldn't let this idea go un-finished :)</p>
<ul class="list-inline item-details">
<li>Proof:
<strong><a href="https://www.instagram.com/p/Bd1AMiPjQHn/">Instagram Post</a>
</strong>
</li>
</ul>
<button class="btn btn-success" type="button" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-2">
<div class="modal-body">
<h2>We Build Cars with Brakes</h2>
<hr class="star-primary">
<img class="img-fluid img-centered" src="img/portfolio/carswithbrakes.jpg" alt="Vector image of a user icon with a brake pad on its head, and the text 'we build cars with brakes' surrounding it">
<p>This was a guerrilla internal marketing campaign that I started. At a department-wide meeting, my Vice President at the time was using this analogy to encourage everyone to push back against changes that would end up being detrimental to the company or the users (or both). If you were building a car, and someone told you to leave off the brakes, you wouldn't do it right?</p>
<p>And so, I was inspired to build this design based on the WorkForce Software logo. It eventually made its way onto buttons and stickers, many laptops are still adorned with it, and we may have gotten it framed once or twice!</p>
<img class="img-fluid img-centered" src="img/portfolio/carswithbrakes-photo.jpg" alt="Buttons with the phrase 'we build cars with brakes'">
<ul class="list-inline item-details">
<li>Date:
<strong>Spring 2017</strong>
</li>
</ul>
<button class="btn btn-success" type="button" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-2">
<div class="modal-body">
<h2>Radio Upgrade</h2>
<hr class="star-primary">
<img class="img-fluid img-centered" src="img/portfolio/radio.jpg" alt="">
<p>I've always wanted a jukebox. Not really for the magic of getting CDs or vinyl played by a mechanical arm, but I love the idea of music having a physical home in the house. So I ran across an old Philco 1940's era radio in a Salvation Army once, and I couldn't resist the chance to give it a new life.</p>
<p>I disassembled this radio, then stripped, sanded, and stained it black. I also have a soft spot for car audio (even better when it's not in my car to be honest), so I built a box for the subwoofer, attached a car audio amplifier, and two speakers. It's obnoxiously loud, which is ideal :)</p>
<p>The tube-filled radio, also gone, replaced with a tablet running Spotify, and a Chromecast Audio so I can bump my jams from any room in the house! It works quite well! The frame surrounding the tablet is a laser-cut piece of MDF from <a href="http://www.ponoko.com">Ponoko.com</a> (a site that I wholeheartedly recommend for your laser-cutting needs!)</p>
<p>I've got photos of the whole process, and am working to better document the effort. Stay tuned!</p>
<p>I love projects like this for so many reasons. Obviously, I ended up with this amazing piece in my living room, which is great. But I learned so much along the way - from how to (safely!) power a car amplifier with AC power, to designing and making a laser-cut frame, to what nasty chemicals to use to strip 70+ year old veneers, and of course how to dispose of said nasty chemicals. Each step of the process is a new challenge, and it's extremely satisfying!</p>
<ul class="list-inline item-details">
<li>Date:
<strong>Summer 2017</strong>
</li>
</ul>
<button class="btn btn-success" type="button" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-2">
<div class="modal-body">
<h2>What's Playing?</h2>
<hr class="star-primary">
<img class="img-fluid img-centered" src="img/portfolio/albumart.jpg" alt="">
<p>Sometimes I have weird thoughts while walking around the office. One of those persistent ones is: if everybody in the office collectively had a radio station filled with what they are listening to right now, what would it sound like?</p>
<p>So I set out to make the tunes we're bumping at our desks a little more social. I wrote a little JavaScript-based app to query <a href="http://www.last.fm">last.fm</a>, a website that allows users to track their listening habits across a whole range of devices. My script pulls down album art for anything that is marked as 'now playing'.</p>
<p>I have this running on a Raspberry Pi hooked up to a spare monitor in a central location - so as you're walking around the office, you can see at a glance what people are listening to at the current moment! I would say it turns into a game of "who's listening to Carly Rae Jepsen again", but at this point everybody knows it's probably me :)</p>
<p>This project gives me a chance to dive into JavaScript every once in a while. I miss web development occasionally, and this lets me scratch my itch in a manageable, non-destructive way. It's also been a great introduction to source control, and it's helped me learn a lot about how Git works (among other dev tooling items).
<p>And of course, I do find it endlessly fascinating what music others are listening to, and have found a few new bands by randomly walking by the monitor!</p>
<ul class="list-inline item-details">
</li>
<li>Date:
<strong>Summer 2015 - Summer 2020
</strong>
</li>
<li>Link:
The source code is currently not hosted publicly, but I'm working on that!
</strong>
</li>
</ul>
<button class="btn btn-success" type="button" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-2">
<div class="modal-body">
<h2>Project Title</h2>
<hr class="star-primary">
<img class="img-fluid img-centered" src="img/portfolio/submarine.png" alt="">
<p>Use this area of the page to describe your project. The icon above is part of a free icon set by <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
<ul class="list-inline item-details">
<li>Client:
<strong><a href="http://startbootstrap.com">Start Bootstrap</a>
</strong>
</li>
<li>Date:
<strong><a href="http://startbootstrap.com">April 2014</a>
</strong>
</li>
<li>Service:
<strong><a href="http://startbootstrap.com">Web Development</a>
</strong>
</li>
</ul>
<button class="btn btn-success" type="button" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>