index.html

---
layout: custom
uid: home
title: Homepage
---

<div class="container">
  {% include notice.html %}
</div>

<div id="intro" class="banner">
  <div class="container">
    <!-- <h1>
      <img src="{{ site.baseurl }}/img/citizen_dj_logo_inverted.svg" class="banner-image" alt="Citizen DJ Logo, a figure with headphones" />
    </h1> -->
    <h1 class="visually-hidden">Citizen DJ</h1>
    <iframe src="https://player.vimeo.com/video/450541755" width="600" height="375" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
    <p class="tagline">
      Make hip hop music using the free-to-use audio and video materials from the <a href="https://www.loc.gov/" target="_blank">Library of Congress</a>
    </p>
  </div>
</div>


<main class="home">
  <div class="container">
    <p class="align-center"><em>This is a project by <a href="http://brianfoo.com">Brian Foo</a> as part of the 2020 <a href="https://labs.loc.gov/about/opportunities/innovator-in-residence-program" class="nowrap" target="_blank">Innovator in Residence Program</a> <span class="nowrap">at the <a href="https://www.loc.gov/" target="_blank">Library of Congress</a></span>.</em></p>

    <div class="steps">
      <div class="step">
        <p><img src="{{ site.baseurl }}/img/steps_1_explore.svg" alt="A magnifying glass hovering over a grid of sound clips" /></p>
        <p>Explore free-to-use sounds from the Library of Congress</p>
      </div>
      <div class="step">
        <p><img src="{{ site.baseurl }}/img/steps_2_make.svg" alt="A cursor clicking the buttons of a drum machine" /></p>
        <p>Remix and combine with beats right in your browser</p>
      </div>
      <div class="step">
        <p><img src="{{ site.baseurl }}/img/steps_3_use.svg" alt="An arrow pointing downward towards a laptop" /></p>
        <p>Download and use sounds with your favorite software</p>
      </div>
    </div>

    <h2>Select a collection to start</h2>
  </div>

  <div class="container">
    <div class="notice">
      <p>Thousands of public domain recordings have been added in 2022!<br /><a href="{{ site.baseurl }}/public-domain-2022/">Read more about what has been added</a>.</p>
    </div>
  </div>

  {% assign pages = site.use | sort:"sequence" %}
  <div class="collections">
    {% for p in pages %}
      {% if p.active > 0 %}
      <div class="collection">
        {% if p.image_url %}
        <img src="{{ p.image_url }}" alt="A grid of clips representing the audio contained in this collection: {{ p.title }}" />
        {% endif %}
        <h3>{{ p.title }}</h3>
        {% if p.subjects %}
        <p class="subjects"><em>{{ p.subjects | array_to_sentence_string }}</em></p>
        {% endif %}
        <p class="description">{{ p.description }}</p>
        <p class="collection-buttons">
          <a href="{{ p.collection_base_url }}explore/" class="button">Explore</a>
          <a href="{{ p.collection_base_url }}remix/" class="button">Remix</a>
          <a href="{{ p.collection_base_url }}use/" class="button">Browse &amp; download</a>
        </p>
      </div>
      {% endif %}
    {% endfor %}
    <!-- <div class="collection">
      <img src="{{ site.baseurl }}/img/public_domain_audio_2022_thumb.jpg" alt="A grid of album covers representing the audio contained 2022 public domain release" />
      <h3>Thousands of recordings coming in 2022</h3>
      <p class="subjects"><em>Music and Spoken word</em></p>
      <p class="description">On January 1, 2022, all <a href="https://www.loc.gov/collections/national-jukebox/?dates=1800/1922" target="_blank">sound recordings published prior to 1923</a> will enter the public domain and will be free to use and reuse. This will be the first time ever sound recordings will enter the public domain due to copyright expiration.</p>
      <p class="collection-buttons">
        <a href="{{ site.baseurl }}/public-domain-2022/" class="button">Learn more</a>
      </p>
    </div> -->
  </div>

</main>

<div class="container">
  {% include footer.html %}
</div>