-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
369 lines (324 loc) · 17.3 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">
<head>
<meta charset="UTF-8">
<title>MKTLR</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Web Designer Living in Vancouver, BC">
<meta name="keywords" content="Web Design, Web Development, UX Research, UX Design, Vancouver, BC, British Columbia, HTML, CSS, Javascript, JS, Frontend, Front-end">
<meta name="author" content="Mike Taylor">
<meta property="og:title" content="MKTLR">
<meta property="og:description" content="Web Designer Living in Vancouver, BC">
<meta property="og:image" content="http://mktlr.com/img/social/preview.jpg">
<meta property="og:image:secure_url" content="https://mktlr.com/img/social/preview.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1497">
<meta property="og:image:height" content="779">
<meta property="og:url" content="https://mktlr.com">
<meta name="twitter:title" content="MKTLR">
<meta name="twitter:description" content="Web Designer Living in Vancouver, BC">
<meta name="twitter:image" content="http://mktlr.com/img/social/preview.jpg">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" href="img/favicons/favicon-happy.png?v=1" type="image/png">
</head>
<body>
<!--
_.' : `._
.-.'`. ; .'`.-.
__ / : ___\ ; /___ ; \ __
,'_ ""--.:__;".-.";: :".-.":__;.--"" _`,
:' `.t""--.. '<@.`;_ ',@>` ..--""j.' `;
`:-.._J '-.-'L__ `-- ' L_..-;'
"-.__ ; .-" "-. : __.-"
L ' /.------.\ ' J
"-. "--" .-"
__.l"-:_JL_;-";.__
.-j/'.; ;"""" / .'\"-.
.' /:`. "-.: .-" .'; `.
.-" / ; "-. "-..-" .-" : "-.
.+"-. : : "-.__.-" ;-._ \
; \ `.; ; : : "+. ;
: ; ; ; : ; : \:
: `."-; ; ; : ; ,/;
; -: ; : ; : .-"' :
:\ \ : ; : \.-" :
;`. \ ; : ;.'_..-- / ;
: "-. "-: ; :/." .' :
\ .-`.\ /t-"" ":-+. :
`. .-" `l __/ /`. : ; ; \ ;
\ .-" .-"-.-" .' .'j \ / ;/
\ / .-" /. .'.' ;_:' ;
:-""-.`./-.' / `.___.'
\ `t ._ / bug :F_P:
"-.t-._:'
Red <-- Make something
Green <-- Make something better
Refactor <-- Convert to Vue.js
-->
<main>
<header class="banner">
<h1 class="mktlr collapsed">M<span class="hidden">I</span>K<span class="hidden">E </span>T<span class="hidden">A</span><span class="hidden">Y</span>L<span class="hidden">O</span>R</h1>
<div class="masked">
<h2>Design, <br>Marketing, <br> Development</h2>
</div>
</header>
<article class="linkedin hidden">
<a id="linkedin-qr" target="_blank" href="https://linkedin.com/in/MikeTLR"><img src="img/my_linkedin_qr_code.jpeg" alt="LinkedIn Profile"></a>
<a id="linkedin-logo" target="_blank" href="https://linkedin.com/in/MikeTLR"><i class="fab fa-linkedin"></i></a></article>
<article class="bio">
<div class="bio-wrapper">
<div class="headshot"></div>
<h1>Hello World,</h1>
<p>I'm Mike, a <strong>Web Designer</strong> living in beautiful <strong>Vancouver, British Columbia</strong>.</p>
<p>In addition to coding layouts and interactions, I also have a diploma in <strong>Marketing Management</strong> with a focus on <strong>Entrepreneurship</strong>. As you can imagine, this gives me some deep insights into business and consumer motivations.</p>
<p>While capable of performing a variety of tasks, from strategic planning all the way to backend development, I have a passion for <strong>User Experience Research and Design</strong>.</p>
<p>If this sounds useful for your business, please don't hesitate to...</p>
</div>
<a class="contact-button" href="#contact">
<div class="line-left"></div>
<div class="line-right"></div>Drop Me A Line!</a>
</article>
<article class="customers">
<header class="heading-wrapper">
<h1><strong>Each Story</strong> <br/> <strong>Truly Unique</strong></h1>
</header>
<div class="background">
<div class="foreground"></div>
</div>
<footer class="footer-wrapper">
<p>It is impossible to live a pleasant life without living wisely and well and justly. And it is impossible to live wisely and well and justly without living a pleasant life.<br/> - <i>Epicurus</i></p>
</footer>
</article>
<article class="blogging">
<h1><a target="_blank" href="https://medium.com/@mktlr"><img src="img/medium.png" alt="Medium Logo"></a></h1>
<div class="blog-post-grid">
<section id="backendification">
<img class="publication-badge" src="img/HackerNoon-logo.png" alt="Listed on HackerNoon">
<h1><a id="bloggin-header-image" target="_blank" href="https://medium.com/@mktlr/the-backendification-of-frontend-development-62f218a773d4">The <strong>"Backendification"</strong> of Frontend Development</a></h1>
</section>
<div id='medium-stats'>
<h2>2 Articles<br/>+ 1 Month<br/>=</h2>
<ul>
<li>> 10,000 Views</li>
<li>> 4,000 Reads</li>
<li>> 1,000 Claps</li>
</ul>
</div>
<section id="simulations">
<h1><a target="_blank" href="https://medium.com/@mktlr/how-to-create-hyper-realistic-ux-simulations-using-cypress-io-part-1-cf3a9267f41b">Creating Hyper-Realistic <strong>"UX Simulations"</strong> using Open Source Software</a></h1>
</section>
<img id="medium-stats-image" src="img/medium-31-31.png" alt="Image of Medium Statistics Page for Backendification showing 10.3k, 30% read ratio. The line graph shows a peak daily volume occuring on Feb 7, 2019. On that day, there was 1.8K visitors (1.2K organic referal + 537 via Medium).">
</div>
</article>
<article id="coming-soon">
<header>
<h1>Coming Soon...</h1>
<p>"A Vue into the Future"</p>
</header>
<img src="img/spa-evolution.png" alt="">
</article>
<article class="services">
<section class="grid">
<header class="content" tabindex="0">
<h1>Win-Win Experiences</h1>
<p>An Exceptional User Experience Creates Better Outcomes</p>
</header>
<article class="item" tabindex="0">
<h1>Research Driven</h1>
<div class="centered">
<p>Test assumptions before you commit</p>
</div>
<i class="fa fa-glasses"></i>
</article>
<article class="item" tabindex="0">
<h1>Intuitive Hierarchies</h1>
<div class="centered">
<p>Don't leave users guessing where to go next</p>
</div>
<i class="fa fa-sitemap"></i>
</article>
<article class="item" tabindex="0">
<h1>Meaningful Content</h1>
<div class="centered">
<p>Deliver messaging targeted for your audience</p>
</div>
<i class="fa fa-bullseye"></i>
</article>
<article class="item" tabindex="0">
<h1>Conversion Optimized</h1>
<div class="centered">
<p>Help guide your users towards their goals</p>
</div>
<i class="fa fa-project-diagram"></i>
</article>
<article class="item" tabindex="0">
<h1>Technical Awareness</h1>
<div class="centered">
<p>Explore the edges of technology</p>
</div>
<i class="fa fa-code"></i>
</article>
<article class="item" tabindex="0">
<h1>Web Accessibility</h1>
<div class="centered">
<p>Accessible websites benefit all users</p>
</div>
<i class="fab fa-accessible-icon"></i>
</article>
<article class="item" tabindex="0">
<h1>Reduced Frustration</h1>
<div class="centered">
<p>User frustration equals user drop-off</p>
</div>
<i class="fa fa-puzzle-piece"></i>
</article>
<article class="item" tabindex="0">
<h1>Inspired Design</h1>
<div class="centered">
<p>Give users a sense of delight</p>
</div>
<i class="fa fa-magic"></i>
</article>
</section>
</article>
<article class="tech">
<header class="text">
<h1><strong>5+ Years</strong>
<br>Web Development Experience</h1><br>
<p>“The tools we choose affect our careers.”</p>
<p>-Jose J. Perez Aguinaga</p>
<p><a target="_blank" href="https://www.youtube.com/watch?v=4zhDQe8Bvnw">'I’m good at JavaScript, I swear', jsday2017</a></p>
</header>
<section class="tools">
<img src="../../img/icons/html5.png" alt="html5">
<img src="../../img/icons/css3.png" alt="css3">
<img src="../../img/icons/js.jpg" alt="js">
<img src="../../img/icons/es6.png" alt="es6">
<img src="../../img/icons/jquery.jpg" alt="jquery">
<img src="../../img/icons/sass.png" alt="sass">
<img src="../../img/icons/git.png" alt="git">
<img src="../../img/icons/github.png" alt="github">
<img src="../../img/icons/gitlab.png" alt="gitlab">
<img src="../../img/icons/php.png" alt="php">
<img src="../../img/icons/nodejs.png" alt="nodejs">
<img src="../../img/icons/npm.png" alt="npm">
<img src="../../img/icons/mysql.jpg" alt="mysql">
<img src="../../img/icons/mongodb.png" alt="mongodb">
<img src="../../img/icons/wordpress.png" alt="wordpress">
<img src="../../img/icons/express.png" alt="express">
<img src="../../img/icons/react.png" alt="react">
<img src="../../img/icons/electron.jpg" alt="electron">
<img src="../../img/icons/gulp.jpg" alt="gulp">
<img src="../../img/icons/webpack.gif" alt="webpack">
<img src="../../img/icons/docker.jpg" alt="docker">
<!-- <img src="../../img/icons/babel.png" alt="babel">-->
</section>
</article>
<article class="contact" id="contact">
<h1>Say Hello!</h1>
<p>If you feel I can help,<br/> don't hesitate to reach out.</p>
<button class="testimonials-button">Still Not Convinced?</button>
<section class="testimonials closed">
<blockquote>
<img src="img/testimonials/david.jpg" alt="">
<p>Mike was a valued member of our developer team in the Education Support and Innovation group at the British Columbia Institute of Technology (BCIT). <strong>He was the go-to guy for gnarly problems inviting a solution that required sophisticated coding skills along with some creative space to try out a few strategies.</strong> There are not enough "Mike's" around, so if you can snag him, you win.</p>
<footer>David Porter, AVP at BCIT</footer>
</blockquote>
<blockquote>
<img src="img/testimonials/aaron.jpg" alt="">
<p>Mike was always a ray of sunshine at the HiVE. <strong>His big personality, willingness to roll up his sleeves and tackle any problem (either mechanical or philosophical) made him a big part of the community at HiVE Vancouver when I was there.</strong> Always grateful that he kept coming back and giving us his energy. First guy to volunteer for everything and always quick with a smile. Wonderful human being. Can't wait to see what he does next.</p>
<footer>Aaron Cruikshank, Director at HiVE Vancouver</footer>
</blockquote>
<blockquote>
<img src="img/testimonials/kyle.jpg" alt="">
<p>I’ve had the privilege of working with Mike in BCIT’s Learning and Teaching Centre for the better part of four years, both as a colleague in Educational Technology Services and as a supervisor in Course Production. <strong>Mike has been a valuable contributor to our organization, and I have no hesitation recommending his work ethic, keenly analytical perspective, and very capable technical skill set.</strong></p>
<footer>Kyle Hunter, Supervisor at BCIT</footer>
</blockquote>
<blockquote>
<img src="img/testimonials/arvin.jpg" alt="">
<p>Mike was my mentor while he was working at BCIT. He has an easy-going personality and a unique perspective on how to solve a problem. He gave me many constructive criticisms and immediate feedback on all of my work, which helped me a lot to improve my skills. <strong>Also if you want someone who is pixel perfect then he is the person that you are looking for. One time he saw a 0.2 seconds difference between an animation that I made.</strong> It was unbelievable.</p>
<footer>Arvin Rolos, Co-worker at BCIT</footer>
</blockquote>
<blockquote>
<img src="img/testimonials/chelsea.jpg" alt="">
<p>Mike demonstrated some positive qualities that you can easily detect and measure for-- <strong>a good head on his shoulders, engineering skills, and strong logical reasoning</strong>-- as well as some you can't measure as easily for, like his <strong>dedication to teamwork and unabating work ethic</strong>.</p>
<footer>Chelsea Palmer, Organizer of DogeCon</footer>
</blockquote>
<blockquote>
<img src="img/testimonials/tristan.jpg" alt="">
<p>I met Mike at the BCIT Technical Web Designer program. He was a top-tier student for the SEO, Social Media and Web Analytics classes I taught. <strong>Mike delivered creative solutions for the assignments, often challenging himself to go beyond what was asked.</strong> Furthermore, his technical and creative prowess were evident in the online portfolio he was building. With his robust skill set and unique approach, Mike would be an asset for any forward-thinking organization.</p>
<footer>Tristan Jutras, Instructor at BCIT</footer>
</blockquote>
</section>
<form name="contact" method="POST" netlify netlify-honeypot="bot-field" action="/contact-success.html">
<div class="name">
<label for="name" title="required">Name *</label><input id="name" type="text" name="name" required placeholder="required" />
</div>
<div class="email">
<label for="email" title="required">Email *</label>
<input id="email" type="email" name="email" required placeholder="required" />
</div>
<div class="company">
<label for="company">Company</label>
<input id="company" type="text" name="company" />
</div>
<div class="phone">
<label for="phone">Phone</label>
<input id="phone" type="tel" name="phone" />
</div>
<div class="hidden">
<label for="bot-field">Don’t fill this out if you're human: <input name="bot-field" /></label>
</div>
<div class="message">
<label for="message" title="required">Message *</label><textarea name="message" id="message" required minlength="20" placeholder="required"></textarea>
</div>
<div class="recaptcha" data-netlify-recaptcha></div>
<div class="submit">
<button type="submit">Send <i class="fas fa-envelope"></i></button>
</div>
</form>
</article>
<div class="footer-gap"></div>
<footer id="footer">
<h1>Designed<br/> with</h1>
<div class="flip-container">
<div class="flipper">
<i class="far fa-heart"></i>
<i class="hidden fas fa-brain"></i>
<i class="hidden fas fa-fist-raised"></i>
<i class="hidden fas fa-glasses"></i>
<i class="hidden fas fa-headphones"></i>
<i class="hidden fas fa-pencil-alt"></i>
<i class="hidden fas fa-coffee"></i>
<i class="hidden fas fa-mouse-pointer"></i>
<i class="hidden far fa-keyboard"></i>
</div>
</div>
</footer>
</main>
<div class="warning">
<p>Please Note: This site was designed for modern web browsers.</p>
<p>Your browser is missing a critical feature necessary for modern web layouts.</p>
<p>Please upgrade your browser or lower your expectations.</p>
</div>
<div class="loading-screen">
<p class="message">Loading<span class="dots">...</span></p>
<canvas class="particles"></canvas>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.3/particles.min.js"></script>
<script src="js/loading-screen.js"></script>
<script src="js/page-links.js"></script>
<script src="js/bio.js"></script>
<script src="js/banner.js"></script>
<script src="js/customers.js"></script>
<script src="js/services.js"></script>
<script src="js/tech.js"></script>
<script src="js/footer.js"></script>
<script src="js/favicon.js"></script>
<script src="js/linkedin.js"></script>
<script src="js/testimonials.js"></script>
</body>
</html>