about.njk

---
layout: layouts/base.njk
templateClass: no-footer-home
title: Designer and writer.
---
<style>
  .container {
    display: flex;
    position: relative;
    flex-wrap: none;
    height: calc(100dvh - 45px);
    width: 100dvw;
    margin-left: calc(50% - 50dvw);
    overflow: hidden;
    gap: 20px;
    scroll-snap-type: x mandatory;
    margin-top: calc(var(--space-nav) * -7);
    
    @media screen and (min-width: 550px) {
      margin-top: calc(var(--space-nav) * -1.7);
    }
  }

  .card {
    --card-padding: 20px;
    padding: var(--card-padding);
    font-size: 1.25rem;
    line-height: 1.3;
    padding-right: 0;
    scroll-snap-align: start;
    height: calc(100dvh - 40px);
    max-height: 630px;
    margin: auto;
    min-width: calc(100dvw - var(--card-padding));
    flex-wrap: nowrap;
    display: flex;
    justify-content: center;

    @media screen and (min-width: 600px) {
      font-size: 1.625rem;
    }
  }

  .card c-window {
    max-width: 950px;
    height: 100%;
    width: 100%;
    text-align: center;
  }

  .card .window-content {
    width: 100%;
    display: grid;
    place-content: center;
    gap: 30px;
    padding: 0 30px;
    text-wrap: balance;

    @media screen and (min-width: 600px) {
      padding: 0 60px;
    }
  }

  .card img {
    width: auto !important;
    max-width: 250px;
    max-height: 150px;
    margin: -30px auto 0;
  }

  .container .card:last-of-type {
    padding-left: 0;
    padding-right: var(--card-padding);
  }

  .card-nav {
    position: fixed;
    bottom: 0;
    top: 0;
    left: 0;
    right: 30px;
    display: flex;
    gap: 6px;
    margin: auto;
    text-align: center;
    max-width: 930px;
    height: calc(100dvh - 40px);
    max-height: 600px;
    justify-content: flex-end;
    align-items: flex-end;
    pointer-events: none;
  }

  .card-nav button {
    pointer-events: initial;
    font-family: inherit;
    -webkit-appearance: none;
    border: none;
    background: transparent;
  }

  .card-nav button:focus,
  .card-nav button:hover {
    cursor: pointer;
  }

  .card-nav button:active {
    transform: translate(0, 2px);
  }

  #next,
  #prev {
    background-size: 100%;
    background-repeat: no-repeat;
    height: 80px;
    width: 80px;
    color: transparent;
    text-decoration: none;
  }

  #prev {
    background-image: url("/images/home-essay/arrow-left.webp");
  }

  #next {
    background-image: url("/images/home-essay/arrow-right.webp");
  }
</style>

<c-grid class="container">
  <div class="card">
    <c-window>
      <div class="window-content window-content-wrapper">
        <img src="/images/home-essay/Buildings9.webp" alt="A house, a home, a tree in the background"/>
        <p>There’s many ways to think of a personal website but to explain how I see this place we have to go back&hellip;</p>
      </div>
    </c-window>
  </div>
  <div class="card">
    <c-window>
      <div class="window-content window-content-wrapper">
        <img src="/images/home-essay/Mac8.webp" alt="A tiny Mac screen"/>
        <p>&hellip;way back to 1987.
        </p>
      </div>
    </c-window>
  </div>
  <div class="card">
    <c-window>
      <div class="window-content window-content-wrapper">
        <img src="/images/home-essay/windows-on-windows.webp" alt="Windows on a computer overlapping one another"/>
        <p>In the summer of that year, a proto-internet emerged called HyperCard. (Yes, this is how I greet people at parties).
        </p>
      </div>
    </c-window>
  </div>
  <div class="card">
    <c-window>
      <div class="window-content window-content-wrapper">
        <img src="/images/home-essay/TopicsStack.webp" alt="The old HyperCard interface showing an app about endangered animals. A big zebra looks off to the right."/>
        <p>It was designed to help folks write apps—or “stacks” as they called them—and it was way ahead of its time. With HyperCard you could bundle stories and games together, or even learn how to program from scratch. It was a beautiful mess.</p>
      </div>
    </c-window>
  </div>
  <div class="card">
    <c-window>
      <div class="window-content window-content-wrapper">
        <img src="/images/home-essay/3987hf.webp" alt="Computer interface elements bumping into one another in a big white space"/>
        <p>I’ve always loved that word—stacks!—and it’s perfect to describe this website of mine: bundles of disorganized and chaotic gatherings of pure, raw stuff. It’s all so messy! And embarrassing! Don’t look over there!</p>
      </div>
    </c-window>
  </div>
  <div class="card">
    <c-window>
      <div class="window-content window-content-wrapper">
        <img src="/images/home-essay/MapOfStack.webp" alt="An illustration of how HyperCard stacks connect and link to one another"/>
        <p>Sure, my website is just a website about websites but if you look closely there’s a few topics in the stack that keep returning.</p>
      </div>
    </c-window>
  </div>
  <div class="card">
    <c-window>
      <div class="window-content window-content-wrapper">
        <img src="/images/home-essay/2_laserwriter.webp" alt="A laserprinter from the 1980s"/>
        <p>First: reading, writing, and publishing—the shape of text on screens.</p>
      </div>
    </c-window>
  </div>
  <div class="card">
    <c-window>
      <div class="window-content window-content-wrapper">
        <img src="/images/home-essay/fonts-fonts-fonts.webp" alt="A series of books overlapping with the title 'Fonts' set in a serif font on the cover"/>
        <p>Second: graphic design and web typography that’s all tuned in, with every flourish and detail cared for.</p>
      </div>
    </c-window>
  </div>
  <div class="card">
    <c-window>
      <div class="window-content window-content-wrapper">
        <img src="/images/home-essay/bike.webp" alt="A bicycle for the mind"/>
        <p>Third: figuring out how to organize folks to make punk rock software (if there is such a thing).</p>
      </div>
    </c-window>
  </div>
  <div class="card">
    <c-window>
      <div class="window-content window-content-wrapper">
        <img src="/images/home-essay/calendar.webp" alt="A calendar showing the year 1995 at the top"/>
        <p>I’ll admit I’ve drunk the cyberpunk koolaid of 1995 and 1987 and every year in-between where networked computers were seen as an adventure. And so I still believe that websites can be as beautiful or, sometimes, even more beautiful than a handmade book.</p>
      </div>
    </c-window>
  </div>
  <div class="card">
    <c-window>
      <div class="window-content window-content-wrapper">
        <img src="/images/home-essay/Communication58.webp" alt="A pixelated woman smiles in a tiny television"/>
        <p>Just in their own way.</p>
      </div>
    </c-window>
  </div>
  <div class="card">
    <c-window>
      <div class="window-content window-content-wrapper">
        <img src="/images/home-essay/AssortedCards8.webp" alt="Wonky windows and user interface elements fly all over the place"/>
        <p>My excitement here might sound unhinged since websites in 2024 often feel like a burden we have to endure. When we boot up a browser and dial in a URL, how often do we brace ourselves for impact?</p>
      </div>
    </c-window>
  </div>
  <div class="card">
    <c-window>
      <div class="window-content window-content-wrapper">
        <img src="/images/home-essay/Group12.webp" alt="A business card reads: 'Please wait. This business card is loading.'"/>
        <p>It feels like we’ve collectively given up on the hope of making a new kind of graphic design or a new kind of literature along the way. Websites are boring now. The frontier has been seized. We’re too late.</p>
      </div>
    </c-window>
  </div>
  <div class="card">
    <c-window>
      <div class="window-content window-content-wrapper">
        <img src="/images/home-essay/nah-mate.webp" alt="'Nah, mate' in the center of a speech bubble"/>
      </div>
    </c-window>
  </div>
  <div class="card">
    <c-window>
      <div class="window-content window-content-wrapper">
        <img src="/images/home-essay/Nature14.webp" alt="An illustration of several planets, from smallest to largest"/>
        <p>
          I believe (perhaps naively!) that we haven’t figured out everything that a website can be just yet. The constraints, the screens, the responsiveness! Where does all that lead?
        </p>
      </div>
    </c-window>
  </div>
  <div class="card">
    <c-window>
      <div class="window-content window-content-wrapper">
        <img src="/images/home-essay/SpiralandTabs1.webp" alt="A retro illustration of a book"/>
        <p>I reckon we haven’t figured out the web in the same way that great book designers haven’t figured out all the things a book can be yet, 500 hundred years after the reinvention of movable type.</p>
      </div>
    </c-window>
  </div>
  <div class="card">
    <c-window>
      <div class="window-content window-content-wrapper">
        <img src="/images/home-essay/Communication10.webp" alt="A collection of folders"/>
        <p>So everything about my work makes that argument in varying degrees of loudness: websites can and should aspire to be so much more than they are today.</p>
      </div>
    </c-window>
  </div>
  <div class="card">
    <c-window>
      <div class="window-content window-content-wrapper">
        <p>And that’s what my website—my stack—aspires to be, too.</p>
      </div>
    </c-window>
  </div>
  <div class="card">
    <c-window>
      <div class="window-content window-content-wrapper">
        <img src="/images/home-essay/Communication17.webp" alt="A stack of tiny cards"/>
      </div>
    </c-window>
  </div>
  <div class="card">
    <c-window>
      <div class="window-content window-content-wrapper"></div>
    </c-window>
  </div>
  <nav class="card-nav">
    <button id="prev">Previous</button>
    <button id="next">Next</button>
  </nav>
</c-grid>

<script>
  let currentPosition = 0;
  const container = document.querySelector('.container');
  const cardList = document.querySelectorAll('.card');
  const prev = document.querySelector('#prev');
  const next = document.querySelector('#next');

  function turnPageForward() {
    if (currentPosition < cardList.length - 1) {
      currentPosition = currentPosition + 1;
      cardList[currentPosition].scrollIntoView({behavior: "instant", block: "center", inline: "nearest"});
    } else {
      return;
    }
  }

  function turnPageBack() {
    if (currentPosition > 0) {
      currentPosition = currentPosition - 1;
      cardList[currentPosition].scrollIntoView({behavior: "instant", block: "center", inline: "nearest"});
    } else {
      return;
    }
  }

  prev.addEventListener('click', (e) => {
    console.log(currentPosition);
    console.log(cardList);
    turnPageBack();
  });

  next.addEventListener('click', (e) => {
    console.log(cardList);
    console.log(currentPosition);
    turnPageForward();
  });

  document.addEventListener("keydown", (e) => {
    if (event.keyCode === 37) {
      e.preventDefault();
      turnPageBack();
    }
    if ((event.keyCode === 39) || (event.keyCode === 32)) {
      e.preventDefault();
      turnPageForward();
    }
  });
</script>