-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·350 lines (299 loc) · 18.9 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
<!DOCTYPE HTML>
<html style="background:#342833;">
<head>
<!--metas-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
<title>Andrew Baldock. Boss-Level Javascript/Web/Front-End Developer.</title>
<meta content="Andrew Baldock. I really really really really really love Javascript. And HTML and CSS. And building world-class things with great people who are having as much fun as I am!" name="description">
<meta property="og:image" content="http://andrewbaldock.com/img/sitepreview.png">
<!--favicon-->
<link rel="shortcut icon" href="/img/favicon.ico">
<!--fonts-->
<link href='http://fonts.googleapis.com/css?family=Codystar|Open+Sans:400,300,700,900' rel='stylesheet' type='text/css'>
<!--styles-->
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/longshadow.css" type="text/css" media="screen">
<!--browser eldercare-->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.src.js"></script>
<![endif]-->
</head>
<body>
<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
<div class="NOTeffect_2">
<div class="container clearfix">
<div id="content" class="grid_12">
<div class="filtr_bg">
<h1 class="colormebadd" style="text-shadow: 0px 0px 30px #D746EB;">Andrew Baldock</h1>
<div class="slogan"><div class="center_bord"></div></div>
<span>
BOSS-LEVEL WEB DEVELOPER<BR>
Javascript—UX—FrontEnd
</span>
<br>
<a class="button" title="" data-slide="2"><span class="fontawesome-double-angle-down"></span></a>
<div id="v-spacer"> </div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="inset_shadow"></div>
</div>
</div>
<div class="menu effect_menu">
<div class="container clearfix">
<div id="nav">
<a class="btn_dropdown" data-toggle="collapse" data-target=".nav-collapse_"><span class="fontawesome-reorder"></span></a>
<ul class="navigation">
<li data-slide="1" id="toplink"><span class="fontawesome-double-angle-up"></span></li>
<li data-slide="2">Who?</li>
<li data-slide="8">Resume</li>
<li data-slide="10">Portfolio</li>
<li data-slide="12">Contact</li>
<div class="clear"></div>
</ul>
</div>
</div>
</div>
<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.8">
<div class="container clearfix">
<div id="content" class="grid_12">
<h2><span>WHO IS ANDREW BALDOCK?</span></h2>
</div>
<div class="clear"></div>
<div id="content">
<div class="grid_7">
<h4 class="sherbert">About Me</h4>
<p>Hi! I'm a design-savvy web developer seeking a JavaScript focused position.</p>
<p>I started building web pages in 1995, eventually launching a new homepage website for UC Berkeley in 2000, with a curious feature at the time: a UC Berkeley search engine by then-unheard-of Google. This website stood for 8 years. EIGHT YEARS. </p>
<p>On the success of that site I went to work for Macys.com to build their retail website, building two generations of the Macys.com in-house Content Management System in two completely different technology stacks (first FileMaker, then in Java/Spring/YUI).</p>
<p>Most recently I worked on the <a style="font-weight:bold;color:#8A1B80;" href="http://www.mindjet.com" target="_blank">Mindjet.com</a> website, where I replatformed and optimized the entire site, bringing the global page load time down from 12 seconds (ouch) to just 3 (yay!), built out the signup flows as a single-page Ajax application, and architected a custom WebTrends tracking breadcrumbs installation in JavaScript.</p>
<p>I love JavaScript: building beautiful, performant, visual, world-class web applications is what I want to be doing. What are we building today?</p>
<a class="praiselink" href="http://www.linkedin.com/profile/recommendations?id=554668&trk=NUS_PREC-more">
<div id="praise">
<p style="font-style:italic;font-size:17px;">
"One of the most passionate and committed developers I've ever worked with... a joy to work with and his team adores him!"
</p> —Jascha Kaykas-Wolff, Mindjet CMO
</div>
</a>
</div>
<div id="slide2-1200-spacer" class="grid_1"></div>
<div class="grid_4 omega">
<h4 class="sherbert">Skills</h4>
JavaScript, HTML5, CSS3, jQuery, able to work in any JavaScript project or framework; able to code vanilla JS without jQuery. Photoshop wiz. Apache configuration. Some PHP, interested in more. Some JSP. Skilled at page optimization and load times.
<ul id="skills_block" style="margin-top:18px;">
<p>HTML5 <b>100%</b></p>
<div class="progress progress-striped active">
<div class="bar" style="width: 100%"></div>
</div>
<p>CSS3 <b>95%</b></p>
<div class="progress progress-striped active">
<div class="bar" style="width: 95%"></div>
</div>
<p>JavaScript <b>90%</b></p>
<div class="progress progress-striped active">
<div class="bar" style="width: 90%"></div>
</div>
<p>Backend Technologies <b>75%</b></p>
<div class="progress progress-striped active">
<div class="bar" style="width: 75%"></div>
</div>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="slide" id="slide8" data-slide="8" data-stellar-background-ratio="0.1">
<div class="container clearfix">
<div id="content" class="grid_12">
<span class="nombre">Andrew Baldock</span>
<h2><span>Resume</span></h2>
</div>
<div class="clear"></div>
<div id="content">
<div class="grid_12">
<h4>Experience</h4>
<div class="accordion">
<div class="vert_line"></div>
<h3>
<div class="ac_date">2010—now</div>
<div class="ac_plmin"></div>
<span><div class="left_bord_ac_title"></div>Senior Web Developer, Mindjet LLC</span>
</h3>
<div class="accord_cont" style="text-align:left;">
<ul style="list-style-type:circle">
<li>Responsible for <a href="www.mindjet.com" target="_blank">www.mindjet.com</a>.</li>
<li>Migrated the website from an unversioned, aging Java CMS to a clean static Apache website, versioned in Github. Removing the CMS, combined with rewriting the site HTML, organizing page structure, moving static contents to a CDN, and optimizing JavaScript brought global page load time down from 12 seconds to 3. The SEO improvements were felt immediately.</li>
<li>Wrote Apache configuration files to handle localization of site in 7 languages.</li>
<li>Namespaced the core mindjet.com javascript functions – go to <a href="www.mindjet.com" target="_blank">www.mindjet.com</a>, open your browser console, and type in <code>mindJet</code> (that’s a capital J) and you can see the mindjet global JavaScript object.</li>
<li>Built the Mindjet.com user signup flows as single-page javascript applications. The user flow starts in a lightbox, captures form information, alters the presentation based on user input, validates the form entries, sends values over AJAX to a REST api to check status, uses callbacks to validate the status, fires a tracking breadcrumb for each step of the path down the funnel, and eventually deposits the user at either the software download page or inside the cloud application.
<ul style="list-style-type:square; margin-left:30px;">
<li>Mindjet.com download trial flow, authored entirely by me:
<a href="http://www.mindjet.com/start" target="_blank">http://www.mindjet.com/start</a></li>
<li>see it in a lightbox:
<a href="http://www.mindjet.com/products/mindmanager" target="_blank">http://www.mindjet.com/products/mindmanager</a> (click the TRY FREE button)</li>
<li>Mindjet.com cloud application signup flow:
<a href="http://www.mindjet.com" target="_blank">http://www.mindjet.com/</a> (click Try ProjectDirector for Free)</li>
<li>Keep your browser JS console open to see the tracking breadcrumbs</li>
</ul>
</li>
<li>Wired social signup via FB or G+ into the signup using JanRain platform</li>
<li>Wrote a custom installation of Tealium (www.tealium.com) so marketing data folks could manage their own tracking tags. The standard installation calls for every page on the website to be tagged; instead I wrote a singlepage javascript that does the job. <a href="http://www.mindjet.com/js/trackstar.js" target="_blank">http://www.mindjet.com/js/trackstar.js</a>
works with <a href="http://www.mindjet.com/js/trackstar-secure.js" target="_blank">http://www.mindjet.com/js/trackstar-secure.js</a>
and <a href="http://www.mindjet.com/js/trackstar-www.js" target="_blank">http://www.mindjet.com/js/trackstar-www.js</a> to track the user across multiple domains as they approach conversion.</li>
<li>Redesigned <a href="http://www.mapsforthat.com/" target="_blank">www.mapsforthat.com</a> to align to new company branding. This involved rewriting lots of PHP in an existing LAMP stack.</li>
</ul>
</div>
<h3>
<div class="ac_date">2000—2010</div>
<div class="ac_plmin"></div>
<span><div class="left_bord_ac_title"></div>Senior Developer / Web Developer Macys, Inc.</span>
</h3>
<div class="accord_cont">
<ul style="list-style-type:circle">
<li><b>2000-2006</b>: Responsible for the design, implementation, and uptime of a 15gb, 200+ user FileMaker application called OZ, used for managing the content of the retail website at Macys.com. The application use(d) FileMaker in every conceivable way including connections to external databases using SQL and ODBC, instant web publishing, XML, PHP, PERL, and others. </li>
<li><b>2007</b>: Authored Technical Requirements, Use Cases, UML Diagrams, Business Workflows, Functional Specifications, Design Documents, Domain Models, Information Architecture, UI, and Usability documentation to support construction of the replacement application for the above OZ system. </li>
<li><b>2008-2009</b>: The replacement for OZ, a web-based application named STELLA, was built running Oracle 10 and Java for the backend;
<ul style="list-style-type:square; margin-left:30px;">
<li>I was responsible for the STELLA web client front end. At that time YUI was the reigning champ of datatables, so I chose YUI for the JavaScript framework.</li>
<li>I used YUI to AJAX data in and out of the app as JSON via a Spring dispatch servlet.</li>
<li>I wrote a navigation system for the app that would AJAX in the clicked content, so that the site would run as a single-page application with as few full-screen refreshes as possible.</li>
<li>Objects in YUI get a rich set of properties and functions to manipulate them, so with YUI it was easy to build an entire UI for the app: it could instantiate dialogs, send alerts, pass JSON around, and especially render datatables with sortable column headers and filterable content. </li>
</ul>
</li>
<li><b>I also and built related websites using PHP and JSP</b>. One example was a PHP based site that would retrieve an internal report with the latest figures from the Content Management System.</li>
<li><b>I’m good at math: in 2002</b> I built macys.com retail pricing management application. Previously limited to creating one sale for one product at a time, the new application allowed users to creates sales for multiple products at once. This single change increased the product managers velocity by 100x, transforming days of work into single stroke operations taking just minutes. Retail pricing, if you aren’t aware, is VERY complex, with many many restrictions and limitations. <span style="font-style:italic">Example: you can’t say something is the lowest price of the season more than once in a season.</span> I wrote a pricing rules validation engine that made it very hard for Macys product managers to mess up. This application was written in FileMaker but I could do it in JavaScript, the maths are the same.</li>
</ul>
</div>
<h3>
<div class="ac_date">1998 - 2000</div>
<div class="ac_plmin"></div>
<span><div class="left_bord_ac_title"></div>Web Director, UC Berkeley</span>
</h3>
<div class="accord_cont">
<ul style="list-style-type:circle">
<li>Built the official UC Berkeley website at www.berkeley.edu, which was the online face of the University for EIGHT YEARS. The site stood with almost no change from 2000-2008.</li>
<li>Roles included Web/UI Developer in XHTML/CSS/SQL/JavaScript/FileMaker, IA of Site Architecture, and Manager.</li>
</div>
<h3>
<div class="ac_date">1995 - 1998</div>
<div class="ac_plmin"></div>
<span><div class="left_bord_ac_title"></div>Web Developer, UC Santa Cruz</span>
</h3>
<div class="accord_cont">
<ul style="list-style-type:circle">
<li>Responsible for the design and execution of 10+ websites. </li>
<li>Managed multiple departmental servers and supported 100+ workstations.</li>
</ul>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="slide" id="slide10" data-slide="10" data-stellar-background-ratio="0.1">
<div class="container clearfix">
<div id="content" class="grid_12">
<span class="nombre">Andrew Baldock</span>
<h2>Portfolio</h2>
</div>
<div class="clear"></div>
<div id="contenet">
<div class="overflow_hidden">
<!-- portfolio_block -->
<!-- <div class="gallery-list">
<div class="img_block">
<div class="hover_img">
<img class="portf_img" src="images/portfolio/1.jpg" alt="" />
<span class="portfolio_zoom"><a href="images/portfolio/full/1.jpg" rel="prettyPhoto[portfolio1]"></a></span>
<span class="portfolio_link"><a href="javascript:void(0);">View item</a></span>
</div>
<div class="item_description">
BETA ember app
</div>
</div>
<div class="img_block">
<div class="hover_img">
<img class="portf_img" src="images/portfolio/2.jpg" alt="" />
<span class="portfolio_zoom"><a href="images/portfolio/full/2.jpg" rel="prettyPhoto[portfolio1]"></a></span>
<span class="portfolio_link"><a href="javascript:void(0);">View item</a></span>
</div>
<div class="item_description">
www.mindjet.com
</div>
</div>
<div class="img_block">
<div class="hover_img">
<img class="portf_img" src="images/portfolio/3.jpg" alt="" />
<span class="portfolio_zoom"><a href="images/portfolio/full/3.jpg" rel="prettyPhoto[portfolio1]"></a></span>
<span class="portfolio_link"><a href="javascript:void(0);">View item</a></span>
</div>
<div class="item_description">
www.macys.com
</div>
</div>
<div class="img_block">
<div class="hover_img">
<img class="portf_img" src="images/portfolio/4.jpg" alt="" />
<span class="portfolio_zoom"><a href="images/portfolio/full/4.jpg" rel="prettyPhoto[portfolio1]"></a></span>
<span class="portfolio_link"><a href="javascript:void(0);">View item</a></span>
</div>
<div class="item_description">
www.berkeley.edu
</div>
</div>
<div class="clear"></div>
</div> -->
<!-- //portfolio_block -->
<div id="construction" style="width:100%;display:block;text-align:center;">
<h4 style="font-size:24px;width:50%;display:inline-block;">
<br><br><a href="/soundora" class="sherbert" style="font-size:46px;">ONLINE APP: Soundora</a><br><br>This is my effort to build a fully modern web app using backbone, require, soundcloud and a cloud-based data store to build a Pandora clone. Began Mon Aug 5.<br><br><a href="mindjet.html" class="sherbert" style="font-size:46px;">CASE STUDY: Mindjet.com Page Load Speed</a><br><br>Also, please try resizing the <-- browser window --> to see JavaScript and CSS work together in this fully responsive website.<br><br>Also look in the browser .js console and type 'andrew' to see inside my object (so intimate!). <br><br><span style="color:white;float:right;font-size:34px;" class="sherbert">Andrew</span> </h4><br><br><br>
</div>
</div>
</div>
</div>
</div>
<div class="slide" id="slide12" data-slide="12" data-stellar-background-ratio="0.1">
<div class="container clearfix">
<div id="content" class="grid_12">
<h2>Contact</h2>
</div>
<div class="clear"></div>
<div class="grid_12">
<h5 style="color:#DD23B0;line-height:40px;">Andrew <span style="color:rgb(184, 0, 184)">Baldock</span></h5>
<span class="subtag" style="font-size:18pt">Senior Web / Javascript Developer<br>San Francisco Bay Area</span>
<p style="display:inline-block;font-size:14pt;width:75%;">Drop me a line and let me know what you're interested in. How can I shape the web for you today?</p><br><br>
<div class="contact_det">
<a href="mailto:andrewbaldock3@gmail.com">a n d r e w b a l d o c k 3 @ g m a i l . c o m</a>
<p>5 1 0 - 5 4 5 - D R E W</p>
</div>
<div class="socials">
<a class="soc1" href="mailto:andrewbaldock3@gmail.com"></a>
<a class="soc2" href="http://www.linkedin.com/in/andrewbaldock/"></a>
</div>
</div>
<div class="clear"></div>
</div>
<div id="map_block">
<iframe width="100%" height="722" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=El+Cerrito%2C+CA&aq=&sll=38.0087954%2C-122.25259740000004&sspn=0.09062480904973585%2C0.23041146777431168&ie=UTF8&hq=&hnear=El+Cerrito,+California&&t=m&z=10&output=embed"></iframe>
</div>
</div>
<div id="footer">
<div class="container clearfix">
<div class="copyright">Andrew Baldock © <script>var bestYearEvar = new Date().getFullYear();document.write(bestYearEvar)</script><!-- | <a href="javascript:void(0);">Privacy Policy</a>--></div>
<div id="back_top"><a class="button" title="" data-slide="1"></a></div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>
<script type="text/javascript" src="js/andrew.js"></script>
</body>
</html>