index.html

---
layout: base
---

<div class="container-fluid">
  <div class="header">
    {% if site.personal_site %}
    <p><a href="{{site.personal_site.url}}">&#x2190; {{site.personal_site.title}}</a></p>
    {% endif %}
    <h1>{{ site.title }}</h1>
    <p>Timelines are a fun way to visualize someone's life and get to know them quickly. This is my timeline, as of <a href="#bottom" title="Scroll to bottom">{{ site.time | date: '%B %Y' }}</a>.
      {% if site.linkedin %}
        For professional milestones, see <a href="{{site.linkedin}}" target="_blank" rel="noopener noreferrer">LinkedIn</a>.
      {% endif %}
    </p>
  </div>

  <ul class="timeline timeline-split">
    {% for period in site.periods %}
      {% if period.name %}
        <li class="timeline-item period">
          <div class="timeline-info"></div>
          <div class="timeline-marker"></div>
          <div class="timeline-content">
            <h2 class="timeline-title">{{ period.name }}</h2>
          </div>
        </li>
      {% endif %}
      {% for event_hash in period.events %}
        {% for event in event_hash %}
        <li class="timeline-item">
          <div class="timeline-info">
            <span>{{ event[0] }}</span>
          </div>
          <div class="timeline-marker"></div>
          <div class="timeline-content">
            <h3 class="timeline-title">{{ event[1] }}</h3>
          </div>
        </li>
        {% endfor %}
      {% endfor %}
    {% endfor %}

    {% if site.show_today %}
      <li class="timeline-item inactive">
        <div class="timeline-info">
          <span>Today</span>
        </div>
        <div class="timeline-marker"></div>
        <div class="timeline-content">
          <h3 class="timeline-title">&nbsp;</h3>
        </div>
      </li>
    {% endif %}
  </ul>

  <a id="bottom"></a>
  <p class="footer">
    &copy; {{ site.author }} {{ site.time | date: '%Y' }}<br/>
    Made with ♥ and <a href="https://github.com/neilgupta/timeliner" target="_blank" rel="noopener noreferrer" title="Make your own!">Timeliner</a>
  </p>
</div>