index.html

---
layout: default
---

<noscript>
  <style>
    .home__avatar__ground {
      background: #0d9fd8;
    }
    .home__air {
      display: none;
    }
  </style>
</noscript>

<section class="home__avatar">
  <img class="home__avatar__img"
    srcset="/images/avatar/avatar_450w.jpg 450w,
      /images/avatar/avatar_300w.jpg 300w,
      /images/avatar/avatar_150w.jpg 150w"
    sizes="150px"
    src="/images/avatar/avatar_150w.jpg"
    alt="">

  <div class="home__avatar__ground"></div>

  <script>
    var colors = [
      '#f24d8f', // pink
      '#0d9fd8', // blue
      '#8ad749'  // green
    ];

    var colorIndex = Math.floor(Math.random() * colors.length);
    var color = colors[colorIndex];

    try {
      if (localStorage.color === color) {
        color = colors[(colorIndex + 1) % colors.length]
      }
    } catch (e) {
    }

    document.querySelector('.home__avatar__ground').style.background = color;

    try {
      localStorage.color = color;
    } catch (e) {
    }
  </script>
</section>

<section>
  <h2 class="home__title">{{ site.title }}</h2>
  <a href="https://github.com/peferron">GitHub</a> /
  <a href="https://www.linkedin.com/in/peferron">LinkedIn</a> /
  <a href="mailto:peferron@gmail.com">peferron@gmail.com</a>
</section>

<section class="home__air">
  <h3 class="home__title">Air quality at my home in San Mateo, CA</h3>

  <script>
    document.domain = 'peferron.com';

    function onGrafanaIFrameLoaded(event) {
      var iframe = event.target;

      var poll = function() {
        if (iframe.contentDocument.querySelector('.panel-loading.ng-hide')) {
          document.querySelector('.home__air__grafana').classList.add('home__air__grafana--loaded');
        } else {
          setTimeout(poll, 0);
        }
      };

      poll();
    }
  </script>

  <div class="home__air__grafana">
    <div class="home__air__grafana__spinner"></div>
    <iframe class="home__air__grafana__iframe" onload="onGrafanaIFrameLoaded(event)"
      src="https://air-quality.peferron.com/grafana/dashboard-solo/db/air-quality?orgId=2&from=1560063600000&to=1560150000000&panelId=1&theme=light"></iframe>
    <a class="home__air__grafana__link"
      href="https://air-quality.peferron.com/grafana/dashboard/db/air-quality?orgId=2&from=1557471600000&to=1560150000000&theme=light"></a>
  </div>

  <!-- Hack to prevent this caption from dictating the page width. -->
  <table class="home__air__caption">
    <caption>
      <small>
        Sent from a Raspberry Pi using Rust, Redis, InfluxDB and Grafana.
        <span class="home__air__caption__links">
          <a href="/2017/03/23/measuring-air-quality-part-1/">Article</a>
          &middot;
          <a href="https://github.com/peferron/air-quality">Source code</a>
        </span>
        <p>
          <small>
            Update: air quality in San Mateo is consistently good, so I have turned the system off to preserve components for when they are needed the most (e.g. wildfires). Data from March 2017 to June 2019 is still available.
          </small>
        </p>
      </small>
    </caption>
  </table>
</section>

<section>
  <h3 class="home__title">Articles</h3>

  <ul class="home__posts__list" role="navigation">
    {% for post in site.posts %}
      <li CLASS="home__post">
        <a href="{{ post.url }}">{{ post.title }}</a><br><small class="date">{% include date.html date=post.date %}</small>
      </li>
    {% endfor %}
  </ul>

  <a class="home__posts__rss" href="/feed.xml">Subscribe via RSS</a>
</section>