Cointr – Startup

Hackathon project
Won first place in the contest Masters of Code by Master Card and Angelhack.

Related: Meet Cointr. The winners of Masters of Code: Sydney Date: 12/Feb/2015

Ten cities, nine countries, eight time zones.
I was part of the team of 4 that won the first place in Australia. I was the only designer in the team, so it was a great responsibility, performed flawlessly in the short amount of time with a great group dynamic, we got selected as the best startup/project among 15 teams and 76 developers.

The idea: The team got in the zone and created an app that can be described as a digital piggy bank that allows the user to save money by topping-up their coin change into their digital wallet in any MasterCard RePower enabled location.

Best UX/UI Design. (#Selfie #winner)

This is the winning design (done in less than 10 hours):

Coinr-App-3 Coinr-App-4 Coinr-App-6 Coinr-App-7 Coinr-App-8

Designing Aeromental

Aeromental is a high traffic news site. All the designs and coding were made by me through 7 years of work, targeting trends and new web technologies since 2006:

[Zoom] Visit

It has several CSS3 effects, for example when you hover the logo:

The Mobile version:

mobile Aeromental

Previous Design (2013):
Aeromental 2013

Web Design, Logos and Wireframing

Collection of other projects including digital designs, Photoshop creations, web design, and wireframing:

(please scroll through the images below) [Zoom]

Wireframe desktop:
Wireframe desktop

Wireframe mobile:


3D Render

3D Render and Animation made with Maya.
Concept: Giant Sachiel destroying a city

Flash Animations

Concept: Science Fiction animated buildings for a MMORPG Game.
Game: GAIA Online
Made with Adobe Flash

This is a sample of 20 animations.

PHP Coding and CSS3

Auto generate thumbs from Youtube and Imgur

Auto generates the img code for a HTML URL of Youtube and Imgur inside a page.

function vp_get_thumb_url($text)
  global $post;
  // extracts images fro HTML
  $allimages =&get_children('post_type=attachment&post_mime_type=image&post_parent=' . $post->ID );        
  foreach ($allimages as $img){                
     $img_src = wp_get_attachment_image_src($img->ID);
  // tries to capture the img unique id

   if (!$imageurl)
    preg_match("/([a-zA-Z0-9\-\_]+\.|)\i.imgur\.com\/([a-zA-Z0-9\-\_]{7})([^< \s]*)/", $text, $matches2);
    $imgurlink = $matches2[0];
    if ($imgurlink)
     $imageurl = "{$matches2[2]}b.jpg"; 

  if (!$imageurl)
    preg_match('/<\s*img [^\>]*src\s*=\s*[\""\']?([^\""\'>]*)/i' ,  $text, $matches);
  // searchs a thumbnail ID from youtube
  if (!$imageurl)
    preg_match("/([a-zA-Z0-9\-\_]+\.|)youtube\.com\/watch(\?v\=|\/v\/)([a-zA-Z0-9\-\_]{11})([^< \s]*)/", $text, $matches2);
    $youtubeurl = $matches2[0];
    if ($youtubeurl)
     $imageurl = "{$matches2[3]}/1.jpg"; 
   else preg_match("/([a-zA-Z0-9\-\_]+\.|)youtube\.com\/(v\/)([a-zA-Z0-9\-\_]{11})([^<\s]*)/", $text, $matches2);
   $youtubeurl = $matches2[0];
   if ($youtubeurl)
     $imageurl = "{$matches2[3]}/0.jpg"; 
  if (!$imageurl)
  // in case nothing is found
     $imageurl = "";

return $imageurl;

Animating thumbs with CSS3

CSS3 for animated thimbs on rollover (hover)

	.entry .thumbox{
border-radius:6px 6px 0 0;
overflow: hidden; /* Prevents zoomed images to grow outside */
background-image:repeating-linear-gradient(45deg, transparent, transparent 7px, rgba(255,255,255,.3) 7px, rgba(255,255,255,.3) 14px);

.entry .thumbox img{
margin:0 auto; 
clip:rect(0, 320px, 160px, 0);
/* border-radius:3px 3px 0 0; */

.entry .thumbox img:hover{
-webkit-transition:all ease .7s;
transition:all ease .7s;

Continue reading