-
Notifications
You must be signed in to change notification settings - Fork 10
/
modal.html
456 lines (442 loc) · 26.5 KB
/
modal.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
<!-- MODAL IMAGE 0-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
Usuallee
</h4>
</div>
<div class="modal-body">
<p>
<img class="img-responsive" src="assets/img/portfolio/usuallee1.jpg" alt="">
</p>
<p>
Usuallee is a startup I co-founded in 2010. As VP of Product of Usuallee I lead al the products effort and initiatives. I also supported the operational and financial tasks that helped us to raise $200K to develop the main app concept, user experience, logic and initial traction<br>
</p><b>Roles:</b> Product Leader, UX Designer, Operational Manager<br>
<b>Achievements:</b> Succesfully Designed and Launched a Social App<br>
Raised $200K seed round.
<p><br>
<b><a href="http://www.usuallee.com">Visit Site</a></b>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- MODAL IMAGE 1-->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
CONTACTIVE
</h4>
</div>
<div class="modal-body">
<p>
<img class="img-responsive" src="assets/img/portfolio/contactive1.jpg" alt="">
</p>
<p>
Contactive is a startup based on NYC acquired by ThinkingPhones. Contactive's main product is CallerID the leading inbound call identication solution for Android users with over a million downloads. As a Product Manager of Contactive I was in charge of two main projects: 1) Creating the API product, based on their own private API. 2) Designing the Contactive App for the Amazon Fire Phone.<br>
</p><b>Roles:</b> Product Manager, Prototype Designer (Frontend Dev)<br>
<b>Achievements:</b> Succesfully Designed and Launched the API product.<br>
Acquired the first 300 developers for the API Product.<br>
Designed the Amazon Fire Phone CallerID App.
<p><br>
<b><a href="http://developer.contactive.com">Visit Site</a></b>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- MODAL IMAGE 2-->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
SAZHIMI
</h4>
</div>
<div class="modal-body">
<p>
<img class="img-responsive" src="assets/img/portfolio/sazhimi1.jpg" alt="">
</p>
<p>
Sazhimi is a personal project that I started on December of 2014. Sazhimi helps you to bulk export Shazam Tags into Spotify Playlists. This feature is just partially implemented in Shazam (single exports, playback only within the app), likely beause of the license restrictions. While doing Sazhimi I explored and experimented with different methods for procedural flows, and created my own flow method called "restrictive progress" in which users are restricted from going back in the flow and repeat an action.<br>
</p><b>Roles:</b> Product Designer, Full-Stack Developer<br>
<b>Technologies:</b> Python / Flask Framework, HTML, CSS, jQuery<br>
<p><br>
<b><a href="http://www.sazhimi.com">Visit Site</a></b>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- MODAL IMAGE 3-->
<div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
EDUCATIONAL DOME
</h4>
</div>
<div class="modal-body">
<p>
<img class="img-responsive" src="assets/img/portfolio/dome1.jpg" alt="">
</p>
<p>
InfinitE (Fall 2014) was a Carnegie Mellon University project in joint with Chevron and Elizabeth Forward School District. The goal of the project was creating the first installation of an Energy Lab that would teach kids about Energy. We created an 48 inch touch interactive dome and a game that teaches about solar energy. We also created a companion app that wraps up the experience and tracks the scores obtained in the lab activities.<br>
</p><b>Roles:</b> Product Designer, UX Designer<br>
<b>Achievements:</b> Succesfully designed the companion app and integration logic, including a persistent database that is asynchronously updated from the physical installations.<br>
Co-created the designs of an interactive touch-dome based on a computer vision setup that consisted of 4 tracking cameras and a wrapper to map the blob detection into reactive inputs.
<p><br>
<b><a href="http://www.etc.cmu.edu/projects/infinite">Visit Site</a></b>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- MODAL IMAGE 4-->
<div class="modal fade" id="myModal5" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
THE LAST EGG
</h4>
</div>
<div class="modal-body">
<p>
<img class="img-responsive" src="assets/img/portfolio/egg1.jpg" alt="">
</p>
<p>
The Last Egg is a digital playground game for two teams of 3 players that uses the PlayStation Move Motion Controllers. The game consists of 3 rounds of 1 minute each.Both teams have to compete to get the last egg : a randomly chosen PS Move with the white light. We created the game as a project in Carnegie Mellon University and ket working on it. The game was chosen as a finalist of the IndieCade Game Festival 2014.<br>
</p><b>Roles:</b> Game Designer, Sound Designer<br>
<b>Achievements:</b> Succesfully Co-designed a unique Digital Playgroung Game with hundreds of the positive reviews form the independent game development community.<br>
Desgined an immersive sound experience that is crucial for the understanding and development of the game.
<p><br>
<b><a href="http://mjlst89.wix.com/thelastegg">Visit Site</a></b>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- MODAL IMAGE 5-->
<div class="modal fade" id="myModal6" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
TETRONIC
</h4>
</div>
<div class="modal-body">
<p>
<img class="img-responsive" src="assets/img/portfolio/tetronic1.jpg" alt="">
</p>
<p>
Tetronic is a game created on top of a physical interactive platform known as the Jam-O-Drum. In Tetronic 4 players have to simultaneously play a circular tetris game and collaborate while the circumstances of the game change unexpectedly.<br>
</p>Roles: Game Designer, Sound Designer<br>
Achievements: Succesfully Co-designed a challenging collaborative and physical tetris game.<br>
Created a sound-responsive environment that changes the dynamics of the game and mixed the music to create that environment
<p><br>
<b><a href="https://vimeo.com/76536164">Watch Video</a></b>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- MODAL IMAGE 6-->
<div class="modal fade" id="myModal7" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
OH CRAB! (KINECT GAME)
</h4>
</div>
<div class="modal-body">
<p>
<img class="img-responsive" src="assets/img/portfolio/crab1.jpg" alt="">
</p>
<p>
Oh Crab! is a game that uses Kinect as input and is build around the story of a little crab that needs help to reach the ocean. The game is based on a novel mechanic that involves the juxtaposition of the body silhoutte above the game environment.<br>
</p><b>Roles:</b> Game Designer, Sound Designer<br>
<b>Achievements:</b> Co-Designed the game mechanics and main levels.<br>
Created all the mixes and the general sound design for the game.
<p><br>
<b><a href="http://youtu.be/LStdvJYBV48">Watch Video</a></b>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- MODAL IMAGE 7-->
<div class="modal fade" id="myModal8" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
AGAINST ALL ODDS (VR)
</h4>
</div>
<div class="modal-body">
<p>
<img class="img-responsive" src="assets/img/portfolio/vr1.jpg" alt="">
</p>
<p>
Against all Odds is a VR Game that uses Playstation Move Controllers as input. The idea of the game is to guide an little spermatozoid through the journey of fecundation<br>
</p><b>Roles:</b> Game Designer, Sound Designer<br>
<b>Achievements:</b> Co-Designed the game mechanics and main level.<br>
Created all the mixes and the general sound design for the game using immersive sound techniques. Created a synthetic voice using a special mix of sound effects and tools.
<p>
<b><a href="https://vimeo.com/79898511">Watch Video</a></b>
</p>
</div><br>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- MODAL IMAGE 8-->
<div class="modal fade" id="myModal9" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
REMIXER
</h4>
</div>
<div class="modal-body">
<p>
<img class="img-responsive" src="assets/img/portfolio/remixer1.jpg" alt="">
</p>
<p>
Remixer is a a Human Computer Interaction project in which we explored the different uses of prototying techniques + novel interaction methodologies to come up with a sample product that helps users to mix cocktails.<br>
</p><b>Roles:</b> Product Designer, UX Designer, Prototyper<br>
<b>Achievements:</b> Co-created the designs of an App and companion shaker that helps user to mix cocktails.<br>
Prototyped the actual shaker using a 3D-Printer and a Laser-cutter.<br>
Created an actual app with different cocktail recipes.
<p><br>
<b><a href="https://vimeo.com/102769056">Watch Video</a></b>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- MODAL IMAGE 9-->
<div class="modal fade" id="myModal10" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
SURICATE
</h4>
</div>
<div class="modal-body">
<p>
<img class="img-responsive" src="assets/img/portfolio/suricate.jpg" alt="">
</p>
<p>
Suricate is a Meerkat Livestream curated aggregator that I created to take advantage of Meerkat's initial growth. The curation comes from an internat system that ranks the livestreams based on time, votes and categories.<br>
</p><b>Roles:</b> Full Stack Developer, Product Designer<br>
<b>Achievements:</b> Designed the website frontend and main backend functionality using Telescope as boilerplate.<br>
Created all launch and product strategy that supported a growth from 0 to +200 users in less than 24 hours.
<p><br>
<b><a href="http://www.suricate.com">Visit Site</a></b>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- MODAL IMAGE 11-->
<div class="modal fade" id="myModal11" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
SAVING HEARTS
</h4>
</div>
<div class="modal-body">
<p>
<img class="img-responsive" src="assets/img/portfolio/savinghearts.png" alt="">
</p>
<p>
Saving-Hearts was a CMU project in Joint with AHN to create a mobile app that supports patient education and behavior change in adult patients suffering from heart failure<br>
</p><b>Roles:</b> UX and Product Designer<br>
<b>Achievements:</b> Designed all the initial concept of the app and all its main
mechanics.<br>
Designed all the UX Flow, Product Logic and Content Layout. Tested the product with
real users and gather all the dat to create relevant iterations.
<p><br>
<b><a href="http://www.etc.cmu.edu/projects/heart-rate-cafe/">Visit Site</a></b>
<br>
<b><a href="http://whoisjuan.github.io/design-hrc">View Process Docs</a></b>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- MODAL IMAGE 12-->
<div class="modal fade" id="myModal12" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
Age-Insight
</h4>
</div>
<div class="modal-body">
<p>
<img class="img-responsive" src="assets/img/portfolio/ageinsight.png" alt="">
</p>
<p>
Age-Insight for LinkedIn is a Chrome Extension I developed as a side project in the Fall of 2015.
The extension went viral and it got thousands of downloads. A very interesting debate around how appropiate
was this extension when it comes to recruiting and the possibility of the extension being a facilitator for
discrimination. As a result of the discussion and the feedback I shut down the extension.<br>
</p><b>Roles:</b> Developer, Product Designer, UX Designer<br>
<b>Achievements:</b> - Created a super viral Chrome Extension that was downloaded thousand of times.<br>
- Succesfully created a digital product from the initial idea to its launch in a personal record time.
<p><br>
<b><a href="http://whoisjuan.github.io/age-insight-linkedin/">Visit Website</a></b>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- MODAL IMAGE 13-->
<div class="modal fade" id="myModal13" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
THE SCORE BUG
</h4>
</div>
<div class="modal-body">
<p>
<img class="img-responsive" src="assets/img/portfolio/scorebug.png" alt="">
</p>
<p>
A design case-study on creating insightful and interactive on-screen interfaces for the upcoming internet TV era.<br>
In this design excercise I worked on the "score bug", one of the most iconical and used on-screen digital graphics.
</p><b><a href="https://medium.com/@juanjramirez/the-football-score-bug-a-case-study-on-creating-innovative-digital-on-screen-interfaces-9da29101c92a">Read Case Study</a></b>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- MODAL IMAGE 14-->
<div class="modal fade" id="" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
Contactive
</h4>
</div>
<div class="modal-body">
<p>
<img class="img-responsive" src="assets/img/portfolio/contactive1.jpg" alt="">
</p>
<p>
Contactive is a startup based on NYC acquired by ThinkingPhones. Contactive's main product is CallerID the leading inbound call identication solution for Android users with over a million downloads. As a Product Manager of Contactive I was in charge of two main projects: creatinh the API product based on their own private API, and designing the Contactive App for the Amazon Fire Phone.<br>
</p><b>Roles:</b> Product Manager, Prototype Designer (Frontend Dev)<br>
<b>Achievements:</b> Succesfully Designed and Launched the API product.<br>
Acquired the first 300 developers for the API Product.<br>
Designed the Amazon Fire Phone CallerID App.
<p>
<b><a href="http://developer.contactive.com">Visit Site</a></b>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- MODAL IMAGE 15-->
<div class="modal fade" id="2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
SAZHIMI
</h4>
</div>
<div class="modal-body">
<p>
<img class="img-responsive" src="assets/img/portfolio/sazhimi1.jpg" alt="">
</p>
<p>
Sazhimi is a personal project that I started on December of 2014. Sazhimi helps you to bulk export Shazam Tags into Spotify Playlists. This feature is just partially implemented in Shazam (single exports, playback only within app), likely beause of the license restrictions. While doing Sazhimi I explored and experimented with different methods for procedural flows, and created my own flow method called "restrictive progress" in which users are restricted from going back in the flow and repeat and action.<br>
</p><b>Roles:</b> Product Designer, Full-Stack Developer<br>
<b>Technologies:</b> Python / Flask Framework, HTML, CSS, jQuery<br>
<b>Achievements:</b> Succesfully Designed and Launched the API product.<br>
Acquired the first 300 developers for the API Product.<br>
Designed the Amazon Fire Phone CallerID App.
<p>
<b><a href="http://www.sazhimi.com">Visit Site</a></b>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->