{% extends "base.html" %}

{% load wagtailcore_tags wagtailimages_tags %}

{% block body_class %}template-homepage{% endblock %}

{% block content %}
  <header class="bg-primary">
    <div class="header-content">
      <div class="header-content-inner">
        <h1>Jake Howard</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">
          {{ page.body|richtext }}
          <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 projects %}
          <div class="col-sm-4">
            {% image project.image max-1000x1000 as project_image %}
            <a href="{{ project.url }}" class="portfolio-box image" data-image="{{ project_image.url }}">
              <div class="portfolio-box-caption">
                <div class="portfolio-box-caption-content">
                  <div class="project-name">
                    <h2>
                      {{ project.title }}
                    </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 post in blog_posts %}
                <div class="row">
                  <div class="col-xs-12">
                    <p class="h3"><a href="{{ post.url }}">{{ post.title }}</a></p>
                    <p>{{ post.get_meta_description }}</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>
{% endblock %}