projects.html

---
layout: page
title: Projects
eyebrow: Ideas in action
description: Explore the systems, networks and technologies we are building and investigating.
wide: true
---
<form class="publication-filters" id="projectsFilters" role="search" hidden>
  <div><label for="projectsTopic">Topic</label><select id="projectsTopic"><option value="">All topics</option>
    {% assign tags = site.projects | map: 'tags' | join: '|' | split: '|' | uniq | sort %}
    {% for tag in tags %}<option value="{{ tag | escape }}">{{ tag }}</option>{% endfor %}
  </select></div>
  <div class="publication-search"><label for="projectsSearch">Search projects</label><input id="projectsSearch" type="search" placeholder="Title, researcher or topic…" autocomplete="off"></div>
</form>
<p id="projectsCount" class="directory-count" role="status" aria-live="polite" aria-atomic="true">{{ site.projects.size }} projects</p>
<div class="refresh-grid projects-directory" id="projectsGrid">
  {% assign projects = site.projects | sort: 'date' | reverse %}
  {% for project in projects %}
  <article class="refresh-card project-result" data-tags="{{ project.tags | jsonify | escape }}" data-search="{{ project.title | escape }} {{ project.authors | join: ' ' | escape }} {{ project.tags | join: ' ' | escape }} {{ project.desc | default: project.excerpt | strip_html | escape }}">
    {% if project.image %}{% include project-image.html project=project class='project-preview-image' sizes="(max-width: 767px) calc(100vw - 30px), 535px" %}{% endif %}
    <div class="refresh-card-body">
      <div class="refresh-tags">{% for tag in project.tags %}<span>{{ tag }}</span>{% endfor %}</div>
      <h2><a href="{{ project.url | relative_url }}">{{ project.title }}</a></h2>
      <p class="project-researchers">{{ project.authors | array_to_sentence_string }}</p>
      <p>{{ project.desc | default: project.excerpt | strip_html | truncatewords: 38 }}</p>
      <a class="section-link" href="{{ project.url | relative_url }}" aria-label="Explore project: {{ project.title | escape }}">Explore project <span aria-hidden="true">&rarr;</span></a>
    </div>
  </article>
  {% endfor %}
</div>
<div id="projectsEmpty" class="publication-empty" hidden><h2>No projects found</h2><p>Try another keyword or topic.</p></div>
<script src="{{ '/assets/projects.js' | relative_url }}" defer></script>