<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <title>Jubilee Austen | Portfolio</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>
    </head>

    <body>
      <header>
        <div class="full-width">
          <div class="half-width">
            <h1>Jubilee Austen</h1>
          </div>
          <div class="half-width">
            <nav>
              <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="portfolio/index.html">Portfolio</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#work">Work</a></li>
                <li><a href="#contact">Contact</a></li>
              </ul>
            </nav>
          </div>
          <h2><span>Hi,</span> I'm a developer that loves clean &amp; elegant code.</h2>
        </div>
      </header>

      <main>
        <section id="about">
          <div class="full-width">
            <h2>A little about me.</h2>
            <div class="half-width">
              <p>I've made my home base in Providence, Rhode Island, with my small growing family. My journey into tech started with a degree in journalism. As I started sharing my writing online, I was fascinated with how easily I could get my voice out there. I was hooked and wanted to learn how to build my own site to fit my own specific needs.</p>
            </div>
            <div class="half-width">
              <p>That curiosity then opened a door that could never be shut. When I learned how to build my first website, I realized I found something that gave me the freedom & versatility I was looking for in my work. Now I've made a full switch to front-end development, where I can use my organization skills and eye for detail to write clean, elegant code.</p>
            </div>
          </div>
        </section>

        <section id="work">
          <div class="full-width">
            <div class="third-width">
              <img src="img/html-icon.png" alt="HTML icon" />
              <h3>Hand-Coded HTML</h3>
              <p>My focus is writing clean, well-formatted, semantic HTML5 by hand to make sure that the content is easy to read, easy to collaborate, trouble-shoot and accessible.</p>
            </div>
            <div class="third-width">
              <img src="img/css-icon.png" alt="CSS icon" />
              <h3>Well-Organized CSS</h3>
              <p>I pride myself on writing CSS that is easy to read and build on. I focus on keeping my CSS lean and fast to load, and I make it a habit to stay up to date on current best practices.</p>
            </div>
            <div class="third-width">
              <img src="img/pencil-icon.png" alt="Pencil icon" />
              <h3>Ease Converting Design into Code</h3>
              <p>You can trust me to take a designer's PSD and quickly & accurately convert it into a webpage that is pixel-perfect match.</p>
            </div>
          </div>
        </section>

        <footer id="contact">
          <div class="full-width">
            <div class="half-width">
              <img src="img/contact-image.png" id="contact-img" alt="Contact Image icon" />
            </div>
            <div class="half-width" id="contact-info">
              <h2> Like what you see?</h2>
              <h3 id="email-header">Let's meet for a cup of coffee.</h3>
                <a href="mailto:hi@jubileeausten.com"><img src="img/envelope.png" id="envelope" alt="Envelope icon" />hi [@] jubileeausten.com</a>
                <h3 id="socialmedia-header">Or, find me on the interwebs.</h3>
                <ul>
                  <li><a href="https://twitter.com/Dannie_McClain"><img src="img/twitter.png" alt="Twitter icon" /></a></li>
                  <li><a href=""><img src="img/tumblr.png" alt="Tumblr icon" /></a></li>
                  <li><a href="https://www.instagram.com/readingapageturner/"><img src="img/instagram.png" alt="Instagram icon" /></a></li>
                  <li><a href="https://www.linkedin.com/in/danniemcclain/"><img src="img/linkedin.png" alt="Linkedin icon" /></a></li>
                  <li><a href="https://github.com/dmmcclain01"><img src="img/github.png" alt="Github icon" /></a></li>
                </ul>
              </div>
            </div>
        </footer>
      </main>
    </body>

</html>
