index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Nate Donato - Generative works</title>
  <meta name="description" content="Interactive and generative web art projects by Nate Donato." />
</head>

<body>
  <h1>generative works</h1>
  <p>by <a href="https://www.natedonato.com/">nate donato</a></p>

  <a style="text-decoration: none; display: block; max-width: 100%; width: 420px; padding: 10px; margin: 0 auto; text-align: center"
    class="featured" href="./specimens/">
    <img src="./img/specimens.gif" alt="Specimens" width="400" height="400" style="max-width: 100%; height: auto">

    <h2 style="color: black; text-decoration: none;">specimens <small>- 2022</small>
    </h2>
    <span style="text-decoration: underline">random samples from another world <br>generate in browser</span>
  </a>

  <a style="text-decoration: none; display: block; max-width: 100%; width: 420px; padding: 10px; margin: 0 auto; text-align: center"
    class="featured" href="https://www.fxhash.xyz/generative/17327">
    <img src="./img/angry_(34).gif" alt="AngrySquares" width="400" height="400" style="max-width: 100%; height: auto">

    <h2 style="color: black; text-decoration: none;">AngrySquares.gif <small>- 2022</small>
    </h2>
    <span style="text-decoration: underline">unique downloadable gifs mintable on fxhash</span>
  </a>

  <a style="text-decoration: none; display: block; max-width: 100%; width: 420px; padding: 10px; margin: 0 auto; text-align: center"
    class="featured" href="https://www.fxhash.xyz/generative/17183">
    <img src="./img/sandshapes.gif" alt="Sand Shapes" width="400" height="400" style="max-width: 100%; height: auto">

    <h2 style="color: black; text-decoration: none;">Sand Shapes <small>- 2022</small>
    </h2>
    <span style="text-decoration: underline">an experiment in line texture, another generative token <br /> 150 of 250
      cap have been minted, check out the gallery</span>
  </a>

  <a style="text-decoration: none; display: block; max-width: 100%; width: 420px; padding: 10px; margin: 0 auto; text-align: center"
    class="featured" href="https://www.fxhash.xyz/generative/slug/quad-overlaps">
    <img src="./img/quadlaps.gif" alt="quads" width="400" height="400" style="max-width: 100%; height: auto">

    <h2 style="color: black; text-decoration: none;">Quad-Overlaps <small>- 2022</small>
    </h2>
    <span style="text-decoration: underline">generative token - unique iterations mintable on fxhash <br />over 150 of
      256 cap have
      already been minted...</span>
  </a>
  <a style="text-decoration: none; display: block; max-width: 100%; width: 420px; padding: 10px; margin: 0 auto; text-align: center"
    class="featured" href="https://www.fxhash.xyz/generative/slug/pixel-heartbeats-(animated)">
    <img src="./img/fxhash_heartbeats.gif" alt="hearts" width="400" height="400"
      style="max-width: 100%; height: auto; border: 1px solid grey;">

    <h2 style="color: black; text-decoration: none;">Pixel Heartbeats <small>- 2022</small>
    </h2>
    <span style="text-decoration: underline">generative token - mintable on fxhash <br />over 250 copies minted</span>
  </a>
  <a style="text-decoration: none; display: block; max-width: 100%; width: 420px; padding: 10px; margin: 0 auto; text-align: center"
    class="featured" href="https://www.fxhash.xyz/generative/16075">
    <img src="./img/fxhash_cubes.gif" alt="cubes" width="400" height="400" style="max-width: 100%; height: auto">

    <h2 style="color: black; text-decoration: none;">Cubiod Mass <small>- 2022</small>
    </h2>
    <span style="text-decoration: underline">generative token - mintable now on fxhash!</span>
  </a>
  <br><br>
  <div style="text-align: center">-------</div>
  <br><br>
  <a class="card" href="https://natedonato.com/generative/cities/">
    <div class="box" style="
              display: flex;
              justify-content: center;
              align-items: center;
            ">
      <img class="box img-box" style="border-radius: 0" src="./img/cityscapes.gif" alt="sketch" />
    </div>
    <p class="card-desc">minimalist cityscape gen app - 2022</p>
  </a>

  <a class="card" href="https://natedonato.com/generative/disarray/">
    <div class="box" style="
          border: 1px solid black;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
        ">
      <img class="box img-box" style="border-radius: 0; max-width: 100%;" src="./img/disarray-still.png" alt="sketch" />
    </div>
    <p class="card-desc">"Schotter (Gravel stones)" made interactive - 2022</p>
  </a>
  <a class="card" href="https://natedonato.com/generative/sketches/">
    <div class="box" style="
          display: flex;
          justify-content: center;
          align-items: center;
        ">
      <img class="box img-box" style="border-radius: 0" src="./img/sketch.gif" alt="sketch" />
    </div>
    <p class="card-desc">monte carlo SVG sketcher app - 2022</p>
  </a>

  <a class="card" href="https://natedonato.com/generative/2point/">
    <img class="box img-box" src="./img/cube-draw.gif" alt="cubes" />
    <p class="card-desc">two point perspective illustrator - 2022</p>
  </a>
  <a class="card" href="https://natedonato.com/glitch/">
    <div class="box" style="
          border-radius: 100%;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
        ">
      <img class="box img-box" src="./img/glitch.gif" alt="cubes" />
    </div>
    <p class="card-desc">glitch, a destructive image editor - 2019</p>
  </a>
  <a class="card" href="https://natedonato.com/doors/">
    <div class="box" style="
          border-radius: 100%;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
        ">
      <img class="box img-box" src="./img/doors.gif" alt="cubes" />
    </div>
    <p class="card-desc">doors, colorful optical illusion - 2019 (motion&nbsp;warning)</p>
  </a>
</body>
<style>
  @font-face {
    font-family: LatinModernMono;
    src: url("./lmmono10-regular.otf") format("opentype");
    font-weight: 400;
    text-rendering: optimizeLegibility;
  }

  body {
    font-size: 14px;
  }

  * {
    box-sizing: border-box;
    font-family: LatinModernMono, "Courier New", Courier, monospace;
  }

  h2,
  h1 {
    margin-bottom: 4px;
  }

  .featured {
    margin-bottom: 20px !important;
  }

  .box {
    width: 200px;
    height: 200px;
    margin: 20px;
    max-width: 100%;
    max-height: 100%;
    flex-shrink: 0;
    flex-grow: 0;
  }

  .img-box {
    object-fit: cover;
    border-radius: 100%;
  }

  .card {
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 550px;
    margin: 0 auto;
  }

  .card:nth-child(2n) {
    flex-direction: row-reverse;
  }

  .card-desc {
    flex-grow: 1;
  }

  span{
    white-space: nowrap;
  }

  @media only screen and (max-width: 700px) {
    .card {
      flex-direction: column !important;
    }

    .card-desc {
      text-align: center;
    }

    span{
      white-space: wrap;
    }
  }
</style>

</html>