-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathportfolio.html
475 lines (470 loc) · 31.8 KB
/
portfolio.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
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<link rel=apple-touch-icon sizes=76x76 href=assets/img/apple-icon.png> <link rel=icon type=image/png href=assets/img/favicon.png> <meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1>
<title>Jordi Plana - Ecommerce geek&outdoors enthusiast</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no" name=viewport>
<link rel=stylesheet type=text/css href=assets/css/material-kit.css?v=2.0.4> <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src=https://www.googletagmanager.com/gtag/js?id=UA-8563173-27> </script> <script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-8563173-27');
</script>
</head>
<body class="profile-page sidebar-collapse">
<nav class="navbar navbar-transparent navbar-color-on-scroll fixed-top navbar-expand-lg" color-on-scroll=100 id=sectionsNav>
<div class=container>
<div class=navbar-translate> <a class=navbar-brand href=https://jordiplana.com> Hello! I'm Jordi :)</a> <button class=navbar-toggler type=button data-toggle=collapse aria-expanded=false aria-label="Toggle navigation"> <span class=navbar-toggler-icon></span> <span class=navbar-toggler-icon></span> <span class=navbar-toggler-icon></span> </button> </div>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class=nav-item> <a class=nav-link rel=tooltip title data-placement=bottom href=#email data-original-title=Contact> <i class="fa fa-envelope"></i> </a> </li>
<li class=nav-item> <a class=nav-link rel=tooltip title data-placement=bottom href=https://www.linkedin.com/in/jordi-plana-56615b57/?locale=en_US target=_blank data-original-title="LinkedIn Profile"> <i class="fab fa-linkedin"></i> </a> </li>
</ul>
</div>
</div>
</nav>
<div class="page-header header-filter" data-parallax=true style="background-image: url('assets/img/city-profile.jpg');"></div>
<div class="main main-raised">
<div class=profile-content>
<div class=container>
<div class=row>
<div class="col-md-6 ml-auto mr-auto">
<div class=profile>
<div class=avatar> <img src=assets/img/faces/img_profile.jpg alt="Jordi Plana" class="img-raised rounded-circle img-fluid"> </div>
<div class=name>
<h3 class=title>Jordi Plana</h3>
</div>
</div>
</div>
</div>
<div class="row">
<h2>Portfolio</h2>
</div>
<div class="row">
<div class="col-md-6">
<div class="title">
<h3>ISDIN - Pharmacies Loyalty Platform</h3>
</div>
<div class="card card-nav-tabs">
<img src="assets/img/portfolio/thumbs/loveisdinpharm_thumb.png" alt="ISDIN - Pharmacies Loyalty Platform" class="img-raised rounded img-fluid"/>
<div class="card-header card-header-primary">
<div class="nav-tabs-navigation">
<div class="nav-tabs-wrapper">
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="nav-item">
<a class="nav-link active show" href="#summary-0" data-toggle="tab">
<i class="material-icons">computer</i> Summary
<div class="ripple-container"></div></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#responsibilities-0" data-toggle="tab">
<i class="material-icons">person</i> Responsibilities
<div class="ripple-container"></div></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#techspecs-0" data-toggle="tab">
<i class="material-icons">build</i> Tech Specs
<div class="ripple-container"></div></a>
</li>
</ul>
</div>
</div>
</div>
<div class="card-body ">
<div class="tab-content text-left">
<div class="tab-pane active show" id="summary-0">
<p>ISDIN needed to build a new international loyalty platform for pharmacies. The new website had to be fast, easy to extend, and multi-site (one site per country).</p>
<p>Previous platform was built in Magento 1.9, with a big technical debt and on-going issues like performance problems, spaghetti code and coupling.</p>
<ul>
<li><strong>Status:</strong> Online</li>
<li><strong>URL:</strong> <a href="https://love.isdin.com" target="_blank" title="Visit website">https://love.isdin.com</a></li>
</ul>
</div>
<div class="tab-pane" id="responsibilities-0">
<p>Originally I was responsible of managing the outsourced development on a constant basis, contributing to develop funcionality, integrations with third party platforms and ensure a frictionless migration. I currently develop new features for the platform.</p>
<p><strong>Responsibilities:</strong></p>
<ul>
<li>Extend and maintain the new platform, respecting delivery times and budget.</li>
<li>Technical management of outsourced development.</li>
<li>Assist development partner with data migration.</li>
<li>Help developing integration with other third party paltforms, apps and APIs.</li>
</ul>
</div>
<div class="tab-pane" id="techspecs-0">
<p><strong>Technologies and methodologies</strong></p>
<ul>
<li>Magento 2 and Symfony 3 as the preferred frameworks.</li>
<li>High availability hosting in AWS. Deployment using Puppet.</li>
<li>Bitbucket for code version control. Jira for task management and sprint planning. Confluence for documentation.</li>
</ul>
</div>
</div>
<button class="btn btn-round btn-visit" data-url="https://love.isdin.com">Visit website<div class="ripple-container"></div></button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="title">
<h3>ISDIN - USA ecommerce</h3>
</div>
<div class="card card-nav-tabs">
<img src="assets/img/portfolio/thumbs/isdinus_thumb.png" alt="ISDIN - USA ecommerce" class="img-raised rounded img-fluid"/>
<div class="card-header card-header-primary">
<div class="nav-tabs-navigation">
<div class="nav-tabs-wrapper">
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="nav-item">
<a class="nav-link active show" href="#summary-1" data-toggle="tab">
<i class="material-icons">computer</i> Summary
<div class="ripple-container"></div></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#responsibilities-1" data-toggle="tab">
<i class="material-icons">person</i> Responsibilities
<div class="ripple-container"></div></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#techspecs-1" data-toggle="tab">
<i class="material-icons">build</i> Tech Specs
<div class="ripple-container"></div></a>
</li>
</ul>
</div>
</div>
</div>
<div class="card-body ">
<div class="tab-content text-left">
<div class="tab-pane active show" id="summary-1">
<p>ISDIN needed to upgrade their previous ecommerce platform (Magento 1.9) for their US website.</p>
<p>Their business goal was to get a stable and scalable platform with advanced marketing capabilities, that could also integrate easily with their CRM (Salesforce Service).</p>
<ul>
<li><strong>Status:</strong> Online</li>
<li><strong>URL:</strong> <a href="https://www.isdin.com/us" target="_blank" title="Visit website">https://www.isdin.com/us</a></li>
</ul>
</div>
<div class="tab-pane" id="responsibilities-1">
<p>The initial development of the ecommerce website was outsourced. My original role in the project was to support the agency developing the new website, and ensure an easy migration and go-live. On a later stage I was actively contributing to the development of the platform.</p>
<p><strong>Responsibilities:</strong></p>
<ul>
<li>Map and document integrations with third party platforms and customized code.</li>
<li>Assist the agency in charge of development with the migration of the customers data, orders and catalog.</li>
<li>Quality assurance of the funcionality and stability of the platform.</li>
<li>Extend funcionality and develop custom controllers and templates.</li>
</ul>
</div>
<div class="tab-pane" id="techspecs-1">
<p><strong>Technologies and methodologies</strong></p>
<ul>
<li>Salesforce Commerce Cloud as the preferred framework.</li>
<li>Bitbucket for code version control. Jira for task management and sprint planning. Confluence for documentation.</li>
</ul>
</div>
</div>
<button class="btn btn-round btn-visit" data-url="https://www.isdin.com/us">Visit website<div class="ripple-container"></div></button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="title">
<h3>ISDIN - Doctor Loyalty Platform</h3>
</div>
<div class="card card-nav-tabs">
<img src="assets/img/portfolio/thumbs/loveisdinmed_thumb.png" alt="ISDIN - Doctor Loyalty Platform" class="img-raised rounded img-fluid"/>
<div class="card-header card-header-primary">
<div class="nav-tabs-navigation">
<div class="nav-tabs-wrapper">
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="nav-item">
<a class="nav-link active show" href="#summary-2" data-toggle="tab">
<i class="material-icons">computer</i> Summary
<div class="ripple-container"></div></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#responsibilities-2" data-toggle="tab">
<i class="material-icons">person</i> Responsibilities
<div class="ripple-container"></div></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#techspecs-2" data-toggle="tab">
<i class="material-icons">build</i> Tech Specs
<div class="ripple-container"></div></a>
</li>
</ul>
</div>
</div>
</div>
<div class="card-body ">
<div class="tab-content text-left">
<div class="tab-pane active show" id="summary-2">
<p>ISDIN has a loyalty platform for doctors, to help them educate about the latest innovations on skin treatments and and oral hygiene.</p>
<p>The platform is built using Magento 1.9 and has been heavily customized to suit the company's needs.</p>
<ul>
<li><strong>Status:</strong> Online</li>
<li><strong>URL:</strong> <a href="https://love.isdin.com/med" target="_blank" title="Visit website">https://love.isdin.com/med</a></li>
</ul>
</div>
<div class="tab-pane" id="responsibilities-2">
<p>I have been the lead developer for this project since November 2017. The inherited website had many ongoing issues. My main responsability has been keeping it safe, updated and continue to extend it's funcionality.</p>
<p><strong>Responsibilities:</strong></p>
<ul>
<li>Develop new features as per business needs, in a timely manner.</li>
<li>Manage internal team and contractors and balance workload, during busy periods.</li>
<li>Support customer care team on usage of the platform, debugging and fixing any possible issues.</li>
<li>Audit the overall security and apply fixes and updates.</li>
</ul>
</div>
<div class="tab-pane" id="techspecs-2">
<p><strong>Technologies and methodologies</strong></p>
<ul>
<li>Magento 1.9 as the preferred framework.</li>
<li>High availability hosting in AWS. Deployment using Puppet.</li>
<li>Bitbucket for code version control. Jira for task management and sprint planning. Confluence for documentation.</li>
</ul>
</div>
</div>
<button class="btn btn-round btn-visit" data-url="https://love.isdin.com/med">Visit website<div class="ripple-container"></div></button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="title">
<h3>SAXX Underwear - International Ecommerce</h3>
</div>
<div class="card card-nav-tabs">
<img src="assets/img/portfolio/thumbs/saxxunderwear_thumb.png" alt="SAXX Underwear - International Ecommerce" class="img-raised rounded img-fluid"/>
<div class="card-header card-header-primary">
<div class="nav-tabs-navigation">
<div class="nav-tabs-wrapper">
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="nav-item">
<a class="nav-link active show" href="#summary-3" data-toggle="tab">
<i class="material-icons">computer</i> Summary
<div class="ripple-container"></div></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#responsibilities-3" data-toggle="tab">
<i class="material-icons">person</i> Responsibilities
<div class="ripple-container"></div></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#techspecs-3" data-toggle="tab">
<i class="material-icons">build</i> Tech Specs
<div class="ripple-container"></div></a>
</li>
</ul>
</div>
</div>
</div>
<div class="card-body ">
<div class="tab-content text-left">
<div class="tab-pane active show" id="summary-3">
<p>SAXX Underwear was quickly escalating their online business and were looking for a robust platform that could deal with the traffic and all the marketing needs.</p>
<p>They had already used Magento 1.9 Community Edition and we decided to upgrade to Magento 2 Cloud Enterprise Edition.</p>
<ul>
<li><strong>Status:</strong> Deprecated. They migrated to Shopify Plus.</li>
<li><strong>URL:</strong> <a href="https://www.saxxunderwear.com" target="_blank" title="Visit website">https://www.saxxunderwear.com</a></li>
</ul>
</div>
<div class="tab-pane" id="responsibilities-3">
<p>The development of the new platform and the migration of all custom funcionality to the new framework was done by our internal team, which I was leading. We used a contractor to help us with the data migration.</p>
<p><strong>Responsibilities:</strong></p>
<ul>
<li>Analyse custom funcionality and integrations of the old website, and prepare specification requirements for the new website.</li>
<li>Develop custom modules for the new platform.</li>
<li>Lead, support and mentoring of the internal development team.</li>
<li>Quality assurance of the funcionality and stability of the new platform.</li>
</ul>
</div>
<div class="tab-pane" id="techspecs-3">
<p><strong>Technologies and methodologies</strong></p>
<ul>
<li>Magento 2 Cloud Enterprise Edition.</li>
<li>Blackfire for code profiling and performance analysis.</li>
<li>Bitbucket for code version control. Jira for task management and sprint planning. Confluence for documentation.</li>
</ul>
</div>
</div>
<button class="btn btn-round btn-visit" data-url="assets/img/portfolio/saxxunderwear.png">View screenshot<div class="ripple-container"></div></button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="title">
<h3>Sanuk - Canadian ecommerce</h3>
</div>
<div class="card card-nav-tabs">
<img src="assets/img/portfolio/thumbs/shopsanuk_thumb.png" alt="Sanuk - Canadian ecommerce" class="img-raised rounded img-fluid"/>
<div class="card-header card-header-primary">
<div class="nav-tabs-navigation">
<div class="nav-tabs-wrapper">
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="nav-item">
<a class="nav-link active show" href="#summary-4" data-toggle="tab">
<i class="material-icons">computer</i> Summary
<div class="ripple-container"></div></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#responsibilities-4" data-toggle="tab">
<i class="material-icons">person</i> Responsibilities
<div class="ripple-container"></div></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#techspecs-4" data-toggle="tab">
<i class="material-icons">build</i> Tech Specs
<div class="ripple-container"></div></a>
</li>
</ul>
</div>
</div>
</div>
<div class="card-body ">
<div class="tab-content text-left">
<div class="tab-pane active show" id="summary-4">
<p>No Limits Sportswear (no longer in business) was responsible for the distribution and marketing of the footwear company Sanuk, in the Canadian market.</p>
<p>The previous website had serious security problems and had to be rebuilt.</p>
<ul>
<li><strong>Status:</strong> Deprecated. </li>
<li><strong>URL:</strong> <a href="https://shopsanuk.ca" target="_blank" title="Visit website">https://shopsanuk.ca</a></li>
</ul>
</div>
<div class="tab-pane" id="responsibilities-4">
<p>I was the lead developer and technical manager of the platform from April 2015 to June 2017.</p>
<p><strong>Responsibilities:</strong></p>
<ul>
<li>Extend the functionality of the website to keep up with the business needs.</li>
<li>Meeting with customer care and marketing teams and analyse new requirements.</li>
<li>Manage internal development team.</li>
<li>Responsible for server administration, and security.</li>
<li>Audit the overall security and performance.</li>
</ul>
</div>
<div class="tab-pane" id="techspecs-4">
<p><strong>Technologies and methodologies</strong></p>
<ul>
<li>Magento 1.9 as the preferred framework.</li>
<li>High availability hosting in Rackspace.</li>
<li>CentOs + Nginx + PHPfpm+ MariaDB.</li>
<li>Github for code version control. Asana for task management and sprint planning.</li>
</ul>
</div>
</div>
<button class="btn btn-round btn-visit" data-url="assets/img/portfolio/shopsanuk.png">View screenshot<div class="ripple-container"></div></button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="title">
<h3>No Limits - Company website</h3>
</div>
<div class="card card-nav-tabs">
<img src="assets/img/portfolio/thumbs/nolimits_thumb.png" alt="No Limits - Company website" class="img-raised rounded img-fluid"/>
<div class="card-header card-header-primary">
<div class="nav-tabs-navigation">
<div class="nav-tabs-wrapper">
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="nav-item">
<a class="nav-link active show" href="#summary-5" data-toggle="tab">
<i class="material-icons">computer</i> Summary
<div class="ripple-container"></div></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#responsibilities-5" data-toggle="tab">
<i class="material-icons">person</i> Responsibilities
<div class="ripple-container"></div></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#techspecs-5" data-toggle="tab">
<i class="material-icons">build</i> Tech Specs
<div class="ripple-container"></div></a>
</li>
</ul>
</div>
</div>
</div>
<div class="card-body ">
<div class="tab-content text-left">
<div class="tab-pane active show" id="summary-5">
<p>No Limits Sportswear closed down in the last quarter of 2017, after selling SAXX Underwear to a group of investors. The company was responsible for distribution and marketing of apparel brands in the Canadian market.</p>
<p>They needed a new website, aligned with their new brand image, that showcased the services and portfolio of brands.</p>
<ul>
<li><strong>Status:</strong> Deprecated. They stop operating in late 2017.</li>
<li><strong>URL:</strong> <a href="#" target="_blank" title="Visit website">https://nolimits.ca</a></li>
</ul>
</div>
<div class="tab-pane" id="responsibilities-5">
<p>I was responsible for developing the company website, with a portfolio of brands, and services.</p>
<p><strong>Responsibilities:</strong></p>
<ul>
<li>Setup website based on Wordpress.</li>
<li>Adjust Wordpress theme to suit company's brand book.</li>
<li>SEO optimization and performance using W3 Total Cache.</li>
</ul>
</div>
<div class="tab-pane" id="techspecs-5">
<p><strong>Technologies and methodologies</strong></p>
<ul>
<li>Wordpress.</li>
<li>CentOs + Nginx + PHPfpm+ MariaDB.</li>
<li>Github for code version control. Asana for task management and sprint planning.</li>
</ul>
</div>
</div>
<button class="btn btn-round btn-visit" data-url="assets/img/portfolio/nolimits.png">View screenshot<div class="ripple-container"></div></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer footer-default">
<div class=container>
<nav class=float-left>
<ul>
<li> <a href=https://www.linkedin.com/in/jordi-plana-56615b57/?locale=en_US> <i class="fab fa-linkedin" target=_blank></i> LinkedIn Profile </a> </li>
</ul>
</nav>
<div class="copyright float-right"> © <script>
document.write(new Date().getFullYear())
</script>, made with <i class=material-icons>favorite</i> from Barcelona. </div>
</div>
</footer> <noscript id=deferred-styles>
<link rel=stylesheet type=text/css href=https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons> <link rel=stylesheet href=https://use.fontawesome.com/releases/v5.0.13/css/all.css integrity=sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp crossorigin=anonymous> </noscript>
<script>
var loadDeferredStyles = function() {
var addStylesNode = document.getElementById("deferred-styles");
var replacement = document.createElement("div");
replacement.innerHTML = addStylesNode.textContent;
document.body.appendChild(replacement)
addStylesNode.parentElement.removeChild(addStylesNode);
};
var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
else window.addEventListener('load', loadDeferredStyles);
</script> <!-- Core JS Files -->
<script src=assets/js/core/jquery.min.js type=text/javascript> </script> <script src=assets/js/core/popper.min.js type=text/javascript> </script> <script src=assets/js/core/bootstrap-material-design.min.js type=text/javascript> </script> <script src=assets/js/plugins/moment.min.js> </script> <!-- Plugin for the Datepicker, full documentation here: https://github.com/Eonasdan/bootstrap-datetimepicker --> <script src=assets/js/plugins/bootstrap-datetimepicker.js type=text/javascript></script> <!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src=assets/js/plugins/nouislider.min.js type=text/javascript> </script> <!-- Control Center for Now Ui Kit: parallax effects, scripts for the example pages etc --> <script src=assets/js/material-kit.js?v=2.0.3 type=text/javascript></script>
<script type="text/javascript">
jQuery( document ).ready(function($) {
$('.btn-visit').click(function(e){
e.preventDefault();
var win = window.open($(this).data('url'), '_blank');
if (win) {
//Browser has allowed it to be opened
win.focus();
} else {
//Browser has blocked it
alert('Please allow popups for this website');
}
});
});
</script>
</body>
</html>