<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta charset="utf-8" />
  <link rel="icon" type="image/png" href="/images/favicon.png">
  <link rel="stylesheet" href="./css/index.css">
  <script src="./js/dynamics.js"></script>
  <title>Michaël Villar</title>
</head>
<body>
  <div id="page" style="visibility:hidden">
    <header>
      <svg id="logo" width="202px" height="202px" viewBox="0 0 338 338" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
          <!-- Clip paths -->
          <mask id="mask-m">
            <rect fill="white" x="0" y="0" width="200" height="200" />
            <g class="bottom"><path fill="black" transform="translate(0,20)" d="M105.419806,84.4330082 L126.560508,105.573711 L147.839611,84.4264069 L107.544791,44.1315872 L105.426407,42 L86.3315879,61.094819 L84.3550676,63.059097 L63.4264069,42 L21.0658995,84.3605074 L42.2132034,105.63961 L63.2784406,84.5743731 L84.2132034,105.63961 L105.419806,84.4330082 Z"></path></g>
            <g class="top"><path fill="black" transform="translate(-4,-4)" d="M109.619142,25.3940606 L113.225759,21.7874432 L92.1553383,0.431457505 L88.3999996,4.18679618 L84.7874432,0.574239742 L63.4314575,21.6446609 L67.1867962,25.3999996 L67.1867962,25.3999996 L0.374238979,92.2125568 L21.4446602,113.568542 L67.2586347,67.754568 L88.1933975,88.8198052 L109.4,67.6132031 L155.212557,113.42576 L176.568542,92.3553391 L111.524985,27.311782 L109.619142,25.3940606 Z"></path></g>
          </mask>
          <mask id="mask-v">
            <rect fill="white" x="0" y="0" width="200" height="200" />
            <g class="bottom">
              <path fill="black" transform="translate(0,2)" d="M63.3566017,126.369804 L42.2000008,105.213203 L63.4791037,84.0658995 L84.5698052,105.156601 L105.660507,84.0658995 L126.93961,105.213203 L105.783009,126.369804 L105.839611,126.426407 L87.5625358,144.590277 L84.5791022,147.573711 L84.5698052,147.564471 L84.5605081,147.573711 L81.5770745,144.590277 L63.2999992,126.426407 L63.3566017,126.369804 Z"></path>
              <rect fill="black" x="0" y="-80" width="200" height="188" />
            </g>
          </mask>
          <mask id="mask-top">
            <rect fill="white" x="0" y="0" width="200" height="200" />
            <g class="top">
              <path fill="black" transform="translate(-54,-102)" d="M173.052941,60.2775418 L187.897614,75.4328684 L174.613203,88.7172795 L174.613203,88.7172795 L251.31728,165.421356 L236.161953,180.26603 L251.31728,195.421356 L229.884411,216.414895 L159.4,145.930483 L138.193398,167.137085 L117.258635,146.071848 L46.6959228,216.63456 L25.7023844,195.201691 L40.5470578,180.357018 L25.7023844,165.201691 L102.186796,88.7172795 L88.6827202,75.2132034 L103.838047,60.36853 L88.6827202,45.2132034 L110.115589,24.219665 L138.4,52.504076 L166.904076,24 L187.897614,45.4328684 L173.052941,60.2775418 L173.052941,60.2775418 L173.052941,60.2775418 Z"></path>
            </g>
          </mask>
          <mask id="mask-bottom">
            <rect fill="black" x="0" y="0" width="200" height="200" />
            <g class="bottom"><rect fill="white" x="0" y="0" width="150" height="150" transform="translate(84,-67) rotate(45)" /></g>
          </mask>

          <!-- Gradients -->
          <linearGradient x1="100%" y1="74.515605%" x2="0%" y2="74.5156243%" id="linearGradient-1">
            <stop stop-color="#E1AFFA" offset="0%"></stop>
            <stop stop-color="#FFEC51" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="100%" y1="74.515605%" x2="0%" y2="74.5156243%" id="linearGradient-2">
            <stop stop-color="#93CFED" offset="0%"></stop>
            <stop stop-color="#20C2CA" offset="49.3049418%"></stop>
            <stop stop-color="#B1FFB3" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="50%" y1="-10.8573616%" x2="50%" y2="130.652648%" id="linearGradient-3">
            <stop stop-color="#FF0000" stop-opacity="0" 1offset="0%"></stop>
            <stop stop-color="#FF0000" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="50%" y1="8.10626148%" x2="50%" y2="161.927062%" id="linearGradient-4">
            <stop stop-color="#000000" stop-opacity="0" offset="0%"></stop>
            <stop stop-color="#000000" offset="100%"></stop>
          </linearGradient>
        </defs>
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(89,89)">
          <g class="square">
            <g class="top" mask="url(#mask-top)">
              <g class="part"><path d="M-2.77359389,57.4264069 L87.0866122,57.4264069 L87.2264061,27.4264069 L-2.63379995,27.4264069 L-2.77359389,57.4264069 Z" fill="#B1FFB3" transform="translate(42.226406, 42.426407) scale(1, -1) rotate(45.000000) translate(-42.226406, -42.426407) "></path></g>
              <g class="part"><path d="M81.8566017,57.4264069 L171.618242,57.4264069 L171.757882,27.4264069 L81.9962423,27.4264069 L81.8566017,57.4264069 Z" fill="#93CFED" transform="translate(126.856602, 42.426407) scale(-1, -1) rotate(45.000000) translate(-126.856602, -42.426407) "></path></g>
              <g class="part"><path d="M69.5132027,57.2132034 L99.4666047,57.2132034 L99.5132027,27.2132034 L69.5598007,27.2132034 L69.5132027,57.2132034 Z" fill="#20C2CB" transform="translate(84.513203, 42.213203) rotate(-45.000000) translate(-84.513203, -42.213203) "></path></g>
              <g class="part gradient"><path d="M63.5090818,42.3569346 L84.5132027,63.4264069 L105.5783,42.3613091 L147.971064,84.7540729 L169.283009,63.6396103 L105.811944,0.168545969 L84.6485834,21.135802 L84.6485834,21.135802 L84.5132027,21 L84.4755841,21.0376186 L63.3407603,0.0988492412 L-0.200000763,63.6396103 L21.1120519,84.7539645 L63.5090818,42.3569346 Z" opacity="0.727698864" fill="url(#linearGradient-2)"></path></g>
            </g>

            <g class="bottom" mask="url(#mask-bottom)">
              <g class="part"><path d="M-2.77359389,141.426407 L87.0866122,141.426407 L87.2264061,111.426407 L-2.63379995,111.426407 L-2.77359389,141.426407 Z" fill="#FFEC51" transform="translate(42.226406, 126.426407) rotate(45.000000) translate(-42.226406, -126.426407) "></path></g>
              <g class="part"><path d="M81.8566017,141.426407 L171.618242,141.426407 L171.757882,111.426407 L81.9962423,111.426407 L81.8566017,141.426407 Z" fill="#E1AFFA" transform="translate(126.856602, 126.426407) scale(-1, 1) rotate(45.000000) translate(-126.856602, -126.426407) "></path></g>
              <g class="part gradient"><path d="M84.6116353,147.680406 L105.811944,168.684268 L169.283009,105.213203 L147.971064,84.0987408 L84.5415039,147.528301 L21.1120519,84.0988492 L-0.200000763,105.213203 L63.3407603,168.753965 L84.6116353,147.680406 Z" opacity="0.727698864" fill="url(#linearGradient-1)"></path></g>
            </g>
          </g>

          <g class="v" mask="url(#mask-v)">
            <g class="part"><path d="M65.1198044,130.819805 L125.026608,130.819805 L125.119804,100.819805 L65.2130003,100.819805 L65.1198044,130.819805 Z" fill="#9F0052" transform="translate(95.119804, 115.819805) scale(-1, 1) rotate(45.000000) translate(-95.119804, -115.819805) "></path></g>
            <g class="part"><path d="M44.0198059,130.819805 L103.92661,130.819805 L104.019806,100.819805 L44.1130019,100.819805 L44.0198059,130.819805 Z" fill="#BF0C0E" transform="translate(74.019806, 115.819805) rotate(45.000000) translate(-74.019806, -115.819805) "></path></g>
            <g class="part gradient"><path d="M63.3566017,126.369804 L42.2000008,105.213203 L63.4791037,84.0658995 L84.5698052,105.156601 L105.660507,84.0658995 L126.93961,105.213203 L105.783009,126.369804 L105.839611,126.426407 L87.5625358,144.590277 L84.5791022,147.573711 L84.5698052,147.564471 L84.5605081,147.573711 L81.5770745,144.590277 L63.2999992,126.426407 L63.3566017,126.369804 Z" fill="url(#linearGradient-3)"></path></g>
          </g>

          <g class="m" mask="url(#mask-m)">
            <g class="part"><path d="M22.8198052,88.8198052 L82.7266092,88.8198052 L82.8198052,58.8198052 L22.9130011,58.8198052 L22.8198052,88.8198052 Z" fill="#003301" transform="translate(52.819805, 73.819805) rotate(-45.000000) translate(-52.819805, -73.819805) "></path></g>
            <g class="part"><path d="M64.8198052,88.8198052 L124.726609,88.8198052 L124.819805,58.8198052 L64.9130011,58.8198052 L64.8198052,88.8198052 Z" fill="#111301" transform="translate(94.819805, 73.819805) rotate(-45.000000) translate(-94.819805, -73.819805) "></path></g>
            <g class="part"><path d="M86.0198059,88.8198052 L145.92661,88.8198052 L146.019806,58.8198052 L86.1130019,58.8198052 L86.0198059,88.8198052 Z" fill="#020E51" transform="translate(116.019806, 73.819805) rotate(45.000000) translate(-116.019806, -73.819805) "></path></g>
            <g class="part gradient"><path d="M105.419806,84.4330082 L126.560508,105.573711 L147.839611,84.4264069 L107.544791,44.1315872 L105.426407,42 L86.3315879,61.094819 L84.3550676,63.059097 L63.4264069,42 L21.0658995,84.3605074 L42.2132034,105.63961 L63.2784406,84.5743731 L84.2132034,105.63961 L105.419806,84.4330082 Z" fill="url(#linearGradient-4)"></path></g>
          <g>
        </g>
      </svg>
      <h1>Michaël Villar</h1>
      <p>User Interface Developer<br>San Francisco</p>
      <div id="contact">
        <a href="https://twitter.com/michaelvillar" id="twitter"><svg viewBox="0 0 42 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M40.8849767,5.91699317 C39.4176047,6.58149683 37.8403512,7.03040367 36.1853209,7.23236129 C37.8746535,6.19854964 39.1723116,4.56151698 39.7831512,2.61075878 C38.2019093,3.56822173 36.4507558,4.26326345 34.5867302,4.63786331 C33.0942302,3.01426568 30.9675605,2 28.6139442,2 C24.0949698,2 20.4309302,5.74007518 20.4309302,10.3533327 C20.4309302,11.0080646 20.5033209,11.6456958 20.6429186,12.2570647 C13.8421186,11.9087296 7.81269767,8.58294921 3.77673023,3.52893036 C3.07236047,4.76266029 2.66872326,6.19753353 2.66872326,7.72850086 C2.66872326,10.6267484 4.11336047,13.1835837 6.30903023,14.6815676 C4.96769767,14.6382047 3.70593488,14.2623845 2.60271395,13.6367663 C2.60178372,13.6715777 2.60178372,13.7065933 2.60178372,13.7418155 C2.60178372,17.789104 5.42245581,21.1651678 9.16586512,21.9330945 C8.47924419,22.1240576 7.75632791,22.2260537 7.01007674,22.2260537 C6.48279767,22.2260537 5.97027674,22.1735291 5.47051628,22.0762147 C6.51191395,25.3948681 9.53380465,27.8100075 13.1146837,27.8771898 C10.3141558,30.1178565 6.78592558,31.4533808 2.95197442,31.4533808 C2.29147674,31.4533808 1.64015581,31.4136811 1,31.3365204 C4.62136279,33.7068724 8.92256512,35.0898312 13.5436465,35.0898312 C28.5948651,35.0898312 36.8257419,22.3610332 36.8257419,11.3217901 C36.8257419,10.9596116 36.8177651,10.5994676 36.8020116,10.2409547 C38.4006023,9.06341259 39.7878047,7.59229871 40.8848442,5.91699317 L40.8849767,5.91699317 Z"></path></svg></a>
        <a href="mailto:me@michaelvillar.com" id="email"><svg viewBox="0 0 42 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M3.02480833,5.25512193 C3.31405861,5.09263061 3.647661,5 4.00285922,5 L37.9971408,5 C38.3511913,5 38.6846476,5.09293298 38.9741433,5.25589441 L21,18.5 L3.02480833,5.25512193 Z M2.02267382,6.70420703 C2.00774171,6.80306156 2,6.90428642 2,7.00732994 L2,12.64429 L2,18.28125 L2,12.64429 L2,29.9926701 C2,31.1012878 2.90185079,32 4.00285922,32 L37.9971408,32 C39.1032894,32 40,31.1016617 40,29.9926701 L40,12.64429 L40,18.28125 L40,12.64429 L40,7.00732994 C40,6.90432217 39.9922141,6.80312657 39.9772059,6.70429568 L21,20.6875 L2.02267382,6.70420703 Z"></path></svg></a>
      </div>
    </header>
    <div id="content">
      <section id="articles">
        <h2>Articles</h2>
        <ul>
          <li><a href="https://medium.com/@michaelvillar/improve-the-payment-experience-with-animations-3d1b0a9b810e">Improve the payment experience with animations</a></li>
          <li><a href="https://medium.com/@michaelvillar/the-last-63851361aba6">The last %</a></li>
        </ul>
        <a href="https://medium.com/@michaelvillar" class="more">More on Medium<svg viewBox="0 0 10 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path class="arrow" d="M1.01362083,12.9421826 L1,15.6012598 L9.21426767,8.3533766 L1.07301897,1.34639246 L1.05985086,3.91708947 L6.21426767,8.3533766 L1.01362083,12.9421826 Z"></path></svg></a>
      </section>
      <section id="openSource">
        <h2>Open Source</h2>
        <ul>
          <li><a href="https://github.com/michaelvillar/fileshuttle">Fileshuttle</a></li>
          <li><a href="https://github.com/michaelvillar/new-albums-app">NewAlbums iOS</a></li>
          <li><a href="https://github.com/michaelvillar/chat">Chat OS X</a></li>
          <li><a href="https://github.com/stripe/jquery.mobilePhoneNumber">jquery.mobilePhoneNumber</a></li>
        </ul>
        <a href="https://github.com/michaelvillar" class="more">More on GitHub<svg viewBox="0 0 10 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path class="arrow" d="M1.01362083,12.9421826 L1,15.6012598 L9.21426767,8.3533766 L1.07301897,1.34639246 L1.05985086,3.91708947 L6.21426767,8.3533766 L1.01362083,12.9421826 Z"></path></svg></a>
      </section>
      <section id="work">
        <h2>Work</h2>
        <ul>
          <li><a href="https://stripe.com">Stripe</a></li>
          <li><a href="http://kickoffapp.com">Kickoff</a></li>
          <li>PicsEngine</li>
        </ul>
      </section>
    </div>
  </div>
  <script src="./js/index.js"></script>
</body>
</html>
