<!doctype html>
<html class="no-js" lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="author" content="Fernando Lira">
  <meta name="description" content="Fernando Lira UX designer online Portfolio">
  <meta name="keywords" content="user experience, ux design, design, frontend"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fernando Lira UX designer</title>
  <!-- Custom fonts loader -->
  <script>
  !function(e){var t,a={kitId:"xux8teb",scriptTimeout:1500,async:!0},c=e.documentElement,i=setTimeout(function(){c.className=c.className.replace(/\bwf-loading\b/g,"")+" wf-inactive"},a.scriptTimeout),n=e.createElement("script"),s=!1,o=e.getElementsByTagName("script")[0];c.className+=" wf-loading",n.src="https://use.typekit.net/"+a.kitId+".js",n.async=!0,n.onload=n.onreadystatechange=function(){if(t=this.readyState,!(s||t&&"complete"!=t&&"loaded"!=t)){s=!0,clearTimeout(i);try{Typekit.load(a)}catch(e){}}},o.parentNode.insertBefore(n,o)}(document);
  </script>
  <!--above the fold style-->
  <style>
    
  </style>
  <!-- Open Graph metadata -->
  <meta property="og:title" content="Fernando Lira - UX designer"/>
  <meta property="og:url" content="https://fernando.lira.etc.br"/>
  <meta property="og:image" content="images/touch/chrome-touch-icon-192x192.png"/>
  <meta property="og:description" content="Fernando Lira UX designer online Portfolio"/>

  <!-- Twitter metadata -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="Fernando Lira - UX designer">
  <meta name="twitter:description" content="Fernando Lira UX designer online Portfolio">
  <meta name="twitter:image" content="images/touch/chrome-touch-icon-192x192.png">

  <!-- Disable tap highlight on IE -->
  <meta name="msapplication-tap-highlight" content="no">

  <!-- Web Application Manifest -->
  <link rel="manifest" href="manifest.json">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="application-name" content="Fernando Lira - UX designer">
  <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Fernando Lira UX designer">
  <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
  <meta name="msapplication-TileColor" content="#edecea">

  <!-- Color the status bar on mobile devices -->
  <meta name="theme-color" content="#edecea">

  <!-- links -->
  <link type="text/plain" rel="author" href="humans.txt" />
  <base href="/">
</head>

<body>
  <header class="main-header" id="home">
    <h1 class="site-title">
        <span class="site-title-symb logo"></span>
        <span class="site-title-name">Fernando Lira</span>
        <span class="site-title-pos"><abbr title="User Experience">UX</abbr> designer</span>
    </h1>
    <div class="main-menu" id="main-menu" data-selective-fix>
      <nav>
        <h2 class="main-menu-h" data-toggle-for="main-menu">Menu</h2>
        <ul class="main-menu-ul" data-scroll-nav data-scroll-nav-speed=".75">
          <li class="main-menu-li"><a href="#home" class="main-menu-a logo">home</a></li>
          <li class="main-menu-li"><a href="#works" class="main-menu-a" data-toggle-for="main-menu" data-toggle-close-only>works</a></li>
          <li class="main-menu-li"><a href="#about" class="main-menu-a" data-toggle-for="main-menu" data-toggle-close-only>about</a></li>
          <li class="main-menu-li"><a href="#contact" class="main-menu-a" data-toggle-for="main-menu" data-toggle-close-only>contact</a></li>
        </ul>
      </nav>
      <!--
        About the datas:
        Selective-fix:
          Makes the element fixed or static, based if the page is being
          scrolled up or down.
        
        Scroll-nav: 
          Regular window scroll to the element with the same id of the hash reference
          but animated.
          !optional:
          data-scroll-nav-speed:
            Set the speed that the page will scroll, in pixels per second
        
        Toggle-menu-for: 
          Toggle menus while they're hidden by media queries. Works provinding an ID,
          just like the "for" attribute for labels.
      -->
    </div>
  </header>
  <main class="main" id="main-content">
    <section class="main-encap" id="works">
      <h2>Works</h2>
      <div data-load-work>
        <span id="load-msg">Loading...</span>
      </div>

      <!--
        About the data:
          Client side loader for the portfolios cards.
      -->
    </section>
    <section class="main-encap" id="about">
      <h2>About</h2>
      <dl>
        <dt>Name</dt>
        <dd>Fernando Lira</dd>
        <dt>Location</dt>
        <dd>Brasília - Brazil</dd>
        <dt>Languages</dt>
        <dd>Portuguese (native)</dd>
        <dd>English</dd>
        <dt>Technologies</dt>
        <dd class="table-encap">
          <table class="tech-table">
            <thead>
              <tr>
                <th>Name</th>
                <th>Frameworks</th>
                <th>Preprocessors</th>
                <th>Others</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>HTML 5</td>
                <td>
                  <ul>
                    <li>Google WSK</li>
                  </ul>
                </td>
                <td class="empty" colspan="2"></td>
              </tr>
              <tr>
                <td>CSS 3</td>
                <td>
                  <ul>
                    <li>Bootstrap 4</li>
                    <li>Material Design Lite</li>
                  </ul>
                </td>
                <td>
                  <ul>
                    <li>Less</li>
                    <li>Sass / Scss</li>
                  </ul>
                </td>
                <td class="empty"></td>
              </tr>
              <tr>
                <td>ECMAScript 5 / 6 (2015)</td>
                <td>
                  <ul>
                    <li>Angular 1 / 2</li>
                    <li>jQuery</li>
                  </ul>
                </td>
                <td>
                  <ul>
                    <li>CoffeeScript</li>
                    <li>TypeScript</li>
                  </ul>
                </td>
                <td>
                  <dl>
                    <dt>Task Runners</dt>
                    <dd>
                      <ul>
                        <li>Grunt</li>
                        <li>Gulp</li>
                      </ul>
                    </dd>
                  </dl>
                </td>
              </tr>
              <tr>
                <td>Git 2</td>
                <td colspan=3 class="empty"></td>
              </tr>
              <tr>
                <td>PHP 5</td>
                <td>
                  <ul>
                    <li>Wordpress</li>
                  </ul>
                </td>
                <td class="empty" colspan="2"></td>
              </tr>
            </tbody>
          </table>
        </dd>
        <dt>Bio</dt>
        <dd class="fluid-txt">
          <p>Fernando Lira is a designer who is concerned about the many aspects of user experience in websites, including accessibility, user feedback, information architecture and usability.
          <p>He obtained his bachelor degree in visual communications design in 2010, but since 2009 he continuously works as an <abbr title="User Experience">UX</abbr> designer - assisting and complementing other <abbr title="User Interface">UI</abbr> designers projects - and as a frontend developer. His main focus is to guarantee acessible, responsive and comprehensible UI coding, and consequently, great websites.
          <p>He also seems to like to talk about himself in the third person. Go figure.</p>
        </dd>
      </dl>
    </section>
    <section class="main-encap" id="contact">
      <h2>Contact</h2>
      <dl>
        <dt>Email / hangouts</dt>
        <dd>fernando@lira.etc.br</dd>
        <dt>Social networks</dt>
        <dd>
          <ul class="network">
            <li><a class="icon behance" href="https://www.behance.net/flira" target="_blank" title="behance">Behance</a></li>
            <li><a class="icon git" href="https://github.com/flira" target="_blank" title="github">Github</a></li>
            <li><a class="icon linkedin" href="https://linkedin.com/in/liraetc" target="_blank" title="linkedIn">LinkedIn</a></li>
            <li><a class="icon insta" href="https://www.instagram.com/usuario_generico/" target="_blank" title="instagram">Instagram</a></li>
            <li><a class="icon lastfm" href="http://www.last.fm/user/Aristiades" target="_blank" title="last.fm">Last.fm</a></li>
            <li><a class="icon steam" href="http://steamcommunity.com/id/flira" target="_blank" title="steam">Steam</a></li>
          </ul>
        </dd>
      </dl>
    </section>
  </main>
  <footer class="main-footer">
    <section id="colophon">
      <h2>Colophon</h2>
      <div class="fluid-txt">
        <p>All fonts are hosted at <a href="https://typekit.com" target="_blank">Adobe TypeKit</a>.</p>
        <p>The typeface used for the text is <em>Alegreya</em>, designed by <a href="http://www.huertatipografica.com/en" target="_blank">Huerta Tipográfica</a>. It is an Argentinian Type foundry that was founded in 2009, during the first year of the MA of Type Design in
          the University of Buenos Aires (CDT-UBA). It is formed by Juan Pablo del Peral, Carolina Giovagnoli, Sol Matas and Andrés Torresi, all of whom are Graphic and Type designers.</p>
        <p>Headings uses <em>Abril Titling Narrow</em>, by <a href="http://www.type-together.com/" target="_blank">TypeTogether</a>. The owners, Veronika Burian and José Scaglione, met at the University of Reading whilst completing their MAs in Type Design, launching the
          independent type foundry TypeTogether in 2006.</p>
        <p>This website is hosted in a homemade server, made by Saulo Paiva.</p>
        <p>You can find more at <a href="humans.txt" target="_blank">humans.txt</a>.</p>
      </div>
    </section>
  </footer>
  <link type="text/css" rel="stylesheet" href="styles/style.css" />
  <script src="scripts/bundle.js" async></script>
  <script>!function(e,t){var s=t.getElementsByTagName("html")[0];s.className=s.className.substring(3),setTimeout(function(){parseInt(e.getComputedStyle(t.body).opacity)||(s.className+=" fl-visible")},7500)}(window,document);</script>
  <script>
    (function(i, s, o, g, r, a, m) {
      i['GoogleAnalyticsObject'] = r;
      i[r] = i[r] || function() {
        (i[r].q = i[r].q || []).push(arguments)
      }, i[r].l = 1 * new Date();
      a = s.createElement(o),
        m = s.getElementsByTagName(o)[0];
      a.async = 1;
      a.src = g;
      m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
    ga('create', 'UA-30704721-1', 'auto');
    ga('send', 'pageview');
  </script>
  <!-- Built with love using Web Starter Kit -->
</body>

</html>