{% extends "base.html" %}

{# Additional metadata for Google #}
{% block head %}
{{ super() }}

{# Override title format for homepage #}
{% block title %}<title>{{config.title}}</title>{% endblock title %}

<script type="application/ld+json">
    {% set person_ld = load_data(path="static/person.jsonld")%}
    {% if person_ld %}{{person_ld | safe}}{% endif %}
  </script>
<script type="application/ld+json">
    {# Import our template file #}
    {% set template = load_data(path="jsonld_templates/website.jsonld") %}
    {# Now we can fill in any additional data #}
    {{ template | 
        replace(from="{{url}}", to=config.base_url) | 
        replace(from="{{title}}", to=section.title) | 
        replace(from="{{description}}", to=config.description) | 
        replace(from="{{avatar}}", to=config.extra.profile_photo) | 
        safe 
    }}
  </script>
{% endblock head %}



{# Pass data through to the base template #}
{% block variable_wormhole %}
{{ super() }}
{% set page_path = "/" %}
{% set title = section.title %}
{% set description = config.description %}
{% if section.extra.uses %}
{% set feature_flags = section.extra.uses %}
{% endif %}
{% if section.extra.announcement %}
{% set announcement = section.extra.announcement %}
{% endif %}
{% endblock variable_wormhole %}

{# Page content #}
{% block page_start %}
{# {% include "components/about-card.html" %} #}
{% endblock page_start %}
{% block content %}
{# {{ section.content | safe }} #}

<div class="home-page">
  <div class="hello">
    <h1>Hi, I'm Evan Pratten</h1>
  </div>

  <div class="home-cards">
    <ul class="home-big-cards">
      <li>
        <a href="/software">
          <div class="big-card">
            <div class="card-image"></div>
            <div class="card-title"><span>Software</span></div>
          </div>
        </a>
      </li>
      <li>
        <a href="/blog">
          <div class="big-card">
            <div class="card-image"></div>
            <div class="card-title"><span>Blog</span></div>
          </div>
        </a>
      </li>
      <li>
        <a href="/music">
          <div class="big-card">
            <div class="card-image"></div>
            <div class="card-title"><span>Music</span></div>
          </div>
        </a>
      </li>
    </ul>
    <ul class="home-small-cards">
      <li>
        <a href="/radio">
          <div class="small-card">
            <div class="card-title">
              <span>Radio</span>
            </div>
          </div>
        </a>
      </li>
      <li>
        <a href="/network">
          <div class="small-card">
            <div class="card-title">
              <span>Network</span>
            </div>
          </div>
        </a>
      </li>
      <li>
        <a href="/photos">
          <div class="small-card">
            <div class="card-title">
              <span>Photography</span>
            </div>
          </div>
        </a>
      </li>
    </ul>
  </div>
</div>

{% endblock content %}