<head>
  <meta name="url" content="" />
  <meta name="save_as" content="index.html" />
  <meta name="title" content="Homepage" />
  <meta name="template" content="page-home">
</head>
<body>
  <header class="bg-primary">
    <div class="header-content">
      <div class="header-content-inner">
        <h1>{{ AUTHOR }}</h1>
        <hr>
        <p>Full-stack Developer, Hardware tinkerer, <i>Hacker</i> of all the things</p>
      </div>
    </div>
    <a href="#about" class="page-scroll">
      <i class="fa fa-chevron-down animated pulse infinite" aria-hidden="true"></i>
    </a>
  </header>

  <section class="bg-primary" id="about">
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-lg-offset-2 text-center">
          <h2 class="section-heading">About</h2>
          <hr class="light">
          <p>
            Hi, I'm Jake. I've been working as a full-stack developer for just over a year. This is my website, where all my projects, blog posts, and other stuff live. Some of it useful, some not so much!
          </p>
          <a href="/about/" class="btn btn-primary-dark btn-xl">More Info</a>
        </div>
      </div>
    </div>
  </section>

  <section id="skills">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h2 class="section-heading">Skills</h2>
          <hr class="primary">
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-lg-3 col-md-6 text-center">
          <div class="service-box">
            <i class="fa fa-4x fa-server wow bounceIn text-primary" data-wow-delay=".3s"></i>
            <h3>Server</h3>
            <p>Designing and building high-performance server applications and environments</p>
          </div>
        </div>
        <div class="col-lg-3 col-md-6 text-center">
          <div class="service-box">
            <i class="fa fa-4x fa-firefox wow bounceIn text-primary" data-wow-delay=".5s"></i>
            <h3>Client</h3>
            <p>Creating functional, fast, and responsive websites</p>
          </div>
        </div>
        <div class="col-lg-3 col-md-6 text-center">
          <div class="service-box">
            <i class="fa fa-4x fa-mobile wow bounceIn text-primary" data-wow-delay=".7s"></i>
            <h3>Mobile</h3>
            <p>Building lightweight, cross-platform mobile applications</p>
          </div>
        </div>
        <div class="col-lg-3 col-md-6 text-center">
          <div class="service-box">
            <i class="fa fa-4x fa-usb wow bounceIn text-primary" data-wow-delay=".9s"></i>
            <h3>Hardware</h3>
            <p>Constructing workflow-specific Desktops, Servers and Notebooks</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="projects">
    <div class="container-fluid">
      <div class="row no-gutter">
        {% for project in INDEX_PROJECTS %}
          <div class="col-lg-4 col-sm-6">
            <a href="{{ project.url }}" class="portfolio-box image" data-image="{{ project.image }}">
              <div class="portfolio-box-caption">
                <div class="portfolio-box-caption-content">
                  <div class="project-name">
                    <h2>
                      {{ project.name }}
                    </h2>
                  </div>
                </div>
              </div>
            </a>
          </div>
        {% endfor %}
      </div>
      <div class="row">
        <div class="col-xs-12 text-center">
          <a href="/projects/" class="btn btn-primary btn-xl margin">
            View all projects
          </a>
        </div>
      </div>
    </div>
  </section>

  <section class="bg-primary" id="blog">
    <div class="container">
      <div class="row">
        <div class="col-lg-10 col-lg-offset-1 text-center">
          <h2 class="section-heading">Blog</h2>
          <hr class="light">
          <div class="row">
            <div class="col-sm-10 col-sm-offset-1">
              {% for article in categories|category_find("blog")|limit(4) %}
                <div class="row">
                  <div class="col-xs-12">
                    <p class="h3"><a href="{{ article.url }}">{{ article.title }}</a></p>
                    <p>{{ article.summary|striptags|e }}</p>
                  </div>
                </div>
                <hr class="light">
              {% endfor %}
            </div>
          </div>
          <a href="/blog/" class="btn btn-primary-dark btn-xl">View all posts</a>
        </div>
      </div>
    </div>
  </section>

  <section id="more">
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-lg-offset-2 text-center">
          <h2 class="section-heading">More Content</h2>
          <hr class="primary">
          <p>There's more than just my project and blog!</p>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12 text-center">
          <a class="btn btn-primary btn-xl margin" href="/college/">
            College
          </a>
          <a class="btn btn-primary btn-xl margin" href="/setup/">
            Setup
          </a>
          <a class="btn btn-primary btn-xl margin" href="/work/">
            Work
          </a>
        </div>
      </div>
    </div>
  </section>
</body>