-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
392 lines (356 loc) · 19.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
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
<!Doctype HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header class="fullwidth">
<nav>
<div class="togglerow">
<div id="pull" class="menu btn1" data-menu="1">
<div class="icon-left"></div>
<div class="icon-right"></div>
<!-- <a href="#">Menu</a>-->
</div>
</div>
<h2 class="respheading">Philip Chmalts</h2>
<ul>
<li><a href="#about">About</a>
</li>
<li><a href="#projects">Projects</a>
</li>
<li id="logo"><img href="philLogo"><a href="#top">Philip Chmalts</a>
</li>
<li><a href="#music">Music</a>
</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
</nav>
</header>
<section id="bigheading">
<a name="top"></a>
<div class="headwrap">
<div class="frontend">
<h1>FRONT</h1>
<h1 class="end">END</h1>
<h2>DEVELOPER</h2>
</div>
<div class="anddiv">
<h1 class="and">&</h1>
</div>
<div class="musictech">
<h1 class="music">MUSIC</h1>
<h1 class="tech">TECH</h1>
</div>
</div>
</section>
<section class="fullwidth" id="projects">
<a name="projects"></a>
<div class="wrapper projects">
<h1>Projects</h1>
<hr/>
<h3 class="subheading">Check out some of my work.</h3>
<div class="proj-container" id="projclick">
<div class="item">
<div id="proj1" class="cell">
<div class="p1heading">
<h2 class="title">Novel Food Sciences</h2>
</div>
<div class="p1content">
<p>NFS is an online resource for up and coming technologies in the food space that provides education through webinars, online classes, and other resources.</p>
</div>
</div>
</div>
<div class="item">
<div id="proj2" class="cell">
<div class="p2heading">
<h2 class="title">Pursuits</h2>
</div>
<div class="p2content">
<p>Pursuits is a CRM for your Career Search. It's a tool to organize, simplify, and give advice for those searching for a new career.</p>
</div>
</div>
</div>
<div class="proj3 item">
<div id="proj3" class="cell">
<h2 class="title">Go Somewhere</h2>
</div>
</div>
<div class="proj4 item">
<div id="proj4" class="cell">
<h2 class="title">LGN.cl</h2>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="projcontent fullwidth">
<div class="content wrapper">
<div class="con-text half">
<h2>Novel Food Sciences</h2>
<p>Novel Food Sciences is an online resource for innovation in food technology. I have been with this project since its birth in 2011 and it has been awesome to watch it grow. It is more or less a place where food producers, innovators, growers and scientists can learn about the latest advancements in the field. We have gone from providing pre-recorded lectures to webinars and back and now have focused on brining new food technology businesses to light via live webinars, our newsletter, and blog. </p>
</div>
<div class="con-img half pad">
<img src="img/nfs_responsive_showcase.png" />
</div>
<div class="con-img half">
<img src="img/old_nfs.png" />
</div>
<div class="con-text half pad-left">
<h3>The Problem:</h3>
<p>The old website hadn't been updated in 4 years and content organization was becoming difficult. It was time for a new look and I was up for the challenge. Some of the things that needed to change were: </p>
<ul>
<li>Make the website responsive</li>
<li>Provide a better way to organize products</li>
<li>Make social sharing easy and available for every page</li>
<li>Update the Branding</li>
<li>Ensure everything is trackable to increase conversion</li>
</ul>
</div>
<div class="con-text half pad-right">
<h3>Finding a Better Solution</h3>
<p>I began my journey by asking our speakers and content makers what would make their lives easier and would drive their effort to contribute. One item that stood out was a way for them to be post content that was easy and not hard to learn technically. After looking through a couple of CMS Systems, the easiest and most versatile was Wordpress. I pitched a few different options to our speakers and settled on a basic framework that included Woo Commerce, a blog, and a way to sell courses and event tickets.</p>
</div>
<div class="half">
<img class="sixty margin-left" src="img/nfs_wp_notes.png" />
</div>
<div class="con-text thirds">
<h3>Branding</h3>
<p>The NFS brand also needed an update so I worked with our graphic designer to keep our current idea but make it into a flat design. NFS is represented by an atom, an apple and book to symbolize food, science and knowledge. We dropped the book because it wasn't as pleasing aesthetically when flat. The colors remained similar and we kept the light blue and orange.</p>
</div>
<div class="thirds ">
<h3>Old</h3>
<img class="sixty pad-left pad-right margin-left" src="img/nfslogo.png" /> </div>
<div class="con-img thirds">
<h3>New</h3>
<img src="img/NFS_logo_2015_darktext.png" />
<img src="img/NFS_logo_2015_email_darktext.png" />
<img src="img/NFS_logo_2015_email_darktext-google.png" />
</div>
<div class="con-text half">
<h2>Responsive</h2>
<p>I looked at our google analytics and noticed that over 60% of our users were using mobile devices, especially after opening a newsletter. I made sure the website was responsive on every product page and more. I used a mixture of media queries and Javascript to edit the theme to look good on all devices and it led to an increase of traffic and subscribers!</p>
</div>
<div class="half">
<img class="half img-center" src="img/nfs_mobile.png" />
</div>
<div class="half pad-right">
<img class="" src="img/nfs_code.png" />
</div>
<div class="con-text half pad-left">
<h2>< CODE /></h2>
<p>Since this was a wordpress based solution, there was a relatively steep curve of learning how to customize an existing theme. I took the basic layout and functionality from an e-learning theme called University and changed most of the styling. I also learned about PHP and how different functions in WP communicate to each other. I had to edit a few of the functions of our course library to make sure prices of courses transfer over between our product pages, banners, and checkout. </p>
</div>
<div class="con-text half">
<h2>What I Did</h2>
<p>For this project I was in charge of pretty much everything. Aside from some graphic design, I re-designed the product, did the user research, came up with a proof of concept, and eventually designed and developed the website. I wear a lot of hats for NFS and these are just a few. I also organize all of the webinars, create email marketing materials, provide customer support, and manage communications with our speakers. Here are some stats on the right about how we've grown since the redesign. </p>
</div>
<div class="con-text half pad-left">
<h2>Some Stats</h2>
<ul class="growth-stats">
<h3>Since January 21, 2015</h3>
<li class="stat">
<h3>400+ New Twitter Followers</h3>
<progress class="stat-1" max="100" value="60">
<strong>400+ New Twitter Followers</strong>
</progress>
</li>
<li class="stat">
<h3>8 Webinars Put On</h3>
<progress class="stat-2" max="100" value="80">
<strong>8 Webinars Put On</strong>
</progress>
</li>
<li class="stat">
<h3>35% Increase in Email Opens</h3>
<progress class="stat-3" max="100" value="35">
<strong>35% Increase in Email Opens</strong>
</progress>
</li>
<li class="stat">
<h3>150% Growth In Webinar Attendance</h3>
<progress class="stat-4" max="100" value="90">
<strong>150% Growth In Webinar Attendance</strong>
</progress>
</li>
</ul>
</div>
<div class=" cta">
<h2><a href="http://www.novelfoodsciences.com">Novel Food Sciences</a></h2>
<h3>Follow us on Twitter @Novel_Food</h3>
</div>
</div>
</div>
<div class="projcontent fullwidth pursuits">
<div class="content wrapper">
<div class="con-text half white">
<h2 class="white">Pursuits</h2>
<p class="white">On this project we were tasked with working on a landing page and style guide for a yet to come CRM for career management and search. It was also my partner project at StartUp Institute during my time there, and we would spend a day off-site working on a project for our respective startups.</p>
</div>
<div class=" half pad-left">
<img class="eighty" src="img/pursuits_imac.png" />
</div>
<div class="half">
<img class="img-center pad-top" src="img/pursuits_color.png" />
</div>
<div class="con-text half pad-left">
<h3 class="white">Scope</h3>
<p class="white">
I was the lead designer on the project and talked with the founder about the goals of the site and eventually the needs he has for his brand. I was provided with a logo that had an orange color and made some complimentary color suggestions using Adobe Color. After that it was off to the races and we began making some wireframes using UX Pin.
</p>
</div>
<div class="con-text half white">
<h3 class="white">Iterations</h3>
<p class="white">I wanted the website to be modern and simple and only have one page. The layout we came up with included a big hero image to grab attention with a big orange button to learn more. Then it was going to have a section that listed the features and another for the benifits of the product. Lastly we put in a contact form and a link to the twitter account.</p>
</div>
<div class="con-img half pad-left">
<img class="eighty" src="img/pursuits_wf_1.png" />
</div>
<div class="con-img thirds pad-right">
<img class="sixty" src="img/pursuits_wf_2.png" />
</div>
<div class="con-img thirds pad-right">
<img class="sixty" src="img/pursuits_wf_3.png" />
</div>
<div class="con-img thirds pad-right">
<img class="sixty" src="img/pursuits_wf_4.png" />
</div>
<div class="con-text half white">
<h3 class="white">Foundation</h3>
<p class="white">After getting the wireframes approved it was time to make some technical decisios and I decided to use foundation as a framework for the website. The main reason being that it would be easy to create a responsive version and the other reason being that I've been wanting to learn it for a while. My partner Scott and I dove deep into the foundation docs and started to crank out some early versions of the website. </p>
</div>
<div class=" half pad-left">
<img class="half img-center" src="img/pursuits_ipad.png" />
</div>
<div class="con-text half white margin-clear pad-right">
<div data-height="310" data-theme-id="0" data-slug-hash="KwLgwP" data-default-tab="js" data-user="chmaltsp" class='codepen'><pre><code>angular.module('landing', [])
.controller('contact', function ($scope, $http, $log, $timeout) {
// Form submit
$scope.submit = function (form) {
// Trigger validation flag.
$scope.submitted = true;
// If form is invalid, return and let AngularJS show errors.
if (form.$invalid) {
return;
}
// Default values for the request.
var config = {
params: {
'callback': 'JSON_CALLBACK',
'name': $scope.name,
'email': $scope.email,
'company': $scope.company,
'comments': $scope.comments
},
};
// Perform JSONP request.
var send = $http.jsonp('response.json', config)
.success(function (data, status, headers, config) {
if (data.status == 'OK') {
console.log(config);
$scope.name = null;
$scope.email = null;
$scope.company = null;
$scope.comments = null;
$scope.messages = 'Your form has been sent!';
$scope.submitted = false;
} else {
$scope.messages = 'Oops, we received your request, but there was an error processing it.';
$log.error(data);
}
})
.error(function (data, status, headers, config) {
$scope.messages = 'There was a network error. Try again later.';
$log.error(data);
})
.finally(function () {
// Hide status messages after three seconds.
$timeout(function () {
$scope.messages = null;
}, 3000);
});
};
});</code></pre>
<p>See the Pen <a href='http://codepen.io/chmaltsp/pen/KwLgwP/'>Angular Example</a> by Philip Chmalts (<a href='http://codepen.io/chmaltsp'>@chmaltsp</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
</div>
<script async src="http://assets.codepen.io/assets/embed/ei.js"></script>
</div>
<div class="con-text half white pad-left">
<h3 class="white">A little bit of Angular JS</h3>
<p class="white">Since there was a need for a contact form I decided to go ahead and use Angular JS. Since the actual program will eventually be using it I was asked export the data collected from the form in JSON. Also, the live form validation and simplicity of making an AJAX call was a plus. I created a ng-app controller and fed the forms through and had it read a success message on submition. Check out my code on the left. (Form isn't attached to a service in the example) </p>
</div>
<div class="con-text half white pad-right">
<h3 class="white">Finishing Touches</h3>
<p class="white">We ended up scrapping the features section and instead went with a consolidated benefits section instead to keep it concise. Once things were functional, I added wow.js and some CSS3 animations to give the page a little bit of flair. Also, I added a scrollTop function in JQuery to go between sections smoothly. The deliverables included a style guide, the raw files, and documentation of the landing page. </p>
</div>
<div class="con-img half pad-left">
<img class="eighty" src="img/pursuits_browser.png" />
</div>
<div class="con-img half pad-right">
<img class="sixty" src="img/pursuits_mbp.png" />
</div>
<div class="half pad-left">
<img class="half img-center" src="img/pursuits_iphone.png" />
</div>
</div>
</div>
<!--
<div class="content">Content3</div>
<div class="content">Content4</div>
-->
</div>
<section id="about" class="fullwidth">
<div class="about wrapper">
<a name="about"></a>
<h1>About Me</h1>
<hr/>
<p>I'm a musician and producer/engineer with a passion for new and emerging technologies, entrepreneurship, and hot jams. With a background in music production and a degree from Berklee College of Music I would consider myself a self-learner. I've always had an interest in tech since I was a child and have taught myself Front End Web development. I am on a quest to marry my passion for music and the bustling startup/tech world. </p>
<h2>Skills</h2>
<hr/>
<div class="skillwrap">
<div class="skills">
<ul>
<h3>Things I Know</h3>
<li>HTML5</li>
<li>CSS3</li>
<li>JQuery</li>
<li>Photoshop</li>
<li>Javascript</li>
<li>SASS/LESS</li>
</ul>
</div>
<div class="skills">
<ul>
<h3>Things I'm Learning</h3>
<li>Ruby//Rails</li>
<li>Angular</li>
<li>Javascript</li>
<li>Axure</li>
<li>NODE.js</li>
<li>Computer Science</li>
</ul>
</div>
</div>
<h3>Find Me On</h3>
<div class="socials">
<a href="https://github.com/chmaltsp"><img src="img/github.png" alt="github>"/></a>
<a href="http://www.linkedin.com/in/philipchmalts">
<img src="img/linkedin-white-png.png" alt="View Philip Chmalts's profile on LinkedIn"> </a>
</div>
<h3><a href="mailto:[email protected]">Send Me a Note</a></h3>
</div>
</div>
</section>
<section id="music">
<a name="music"></a>
<h1>Music</h1>
<hr/>
<h3>Player Coming Soon</h3>
</section>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/main.js" type="text/javascript"></script>
</body>
</html>