examples.qmd

---
title: "Examples of OTTR in the Wild"
toc: false
---

```{=html}
<style>
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.2rem;
  margin: 1.5rem 0;
}
.gallery-card {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 1.2rem 1.3rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: box-shadow 0.15s ease;
}
.gallery-card:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}
.gallery-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #222;
  margin: 0;
}
.gallery-card-desc {
  font-size: 0.88rem;
  color: #555;
  flex-grow: 1;
  margin: 0;
}
.gallery-card-links {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}
.gallery-link {
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1.5px solid #ADD8E6;
  color: #2a7a9a;
  background: #f0fafd;
  transition: background 0.12s ease;
}
.gallery-link:hover {
  background: #ADD8E6;
  color: #222;
}
.badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 20px;
  align-self: flex-start;
}
.badge-course    { background: #dbeafe; color: #1d4ed8; }
.badge-website   { background: #ccfbf1; color: #0f766e; }
.badge-template  { background: #dcfce7; color: #166534; }
.badge-dashboard { background: #f3e8ff; color: #6b21a8; }
</style>
```

Explore courses, websites, and templates built with OTTR. If you've made something with OTTR and would like it featured here, [let us know](contact.qmd).

We are actively working on developing additional versions of our original template to cater to specific needs. These variations can range from technical modifications that simplify the template, to tangential adaptations, or even more complex versions compared to the original OTTR template.

We also noticed that if specific branding or variations of the original template need to be used many times, it's often easier to create a new template (like the AnVIL and DataTrail templates below).

If you find yourself making a full set of courses and multiple repositories from OTTR, you may want to make a template from our template (If you need to go this route, we recommend reaching out to the OTTR maintainers by [filing a GitHub issue](https://github.com/ottrproject/OTTR_Template/issues/new/choose) and assigning `@cansavvy` and `@carriewright11`). Also please reach out if you have any other interesting ideas or suggestions!


```{=html}
<div class="gallery-grid">

<div class="gallery-card">
  <span class="badge badge-course">Course</span>
  <p class="gallery-card-title">DaSEH Instructor Guide</p>
  <p class="gallery-card-desc">A course instructor guide for the Data Science for the Experience of Health (DaSEH) program, built with OTTR.</p>
  <div class="gallery-card-links">
    <a class="gallery-link" href="https://hutchdatascience.org/daseh_instructor_guide/index.html" target="_blank">View course</a>
    <a class="gallery-link" href="https://github.com/fhdsl/daseh_instructor_guide" target="_blank">GitHub</a>
  </div>
</div>

<div class="gallery-card">
  <span class="badge badge-website">Website</span>
  <p class="gallery-card-title">Baltimore Community Course</p>
  <p class="gallery-card-desc">A community-focused data science course built with OTTR for the Baltimore community.</p>
  <div class="gallery-card-links">
    <a class="gallery-link" href="https://jhudatascience.org/Baltimore_Community_Course/" target="_blank">View website</a>
    <a class="gallery-link" href="https://github.com/jhudsl/Baltimore_Community_Course" target="_blank">GitHub</a>
  </div>
</div>

<div class="gallery-card">
  <span class="badge badge-template">Template</span>
  <p class="gallery-card-title">AnVIL Template</p>
  <p class="gallery-card-desc">An OTTR-based template for courses built around the <a href="https://anvilproject.org/" target="_blank">AnVIL</a> cloud computing platform.</p>
  <div class="gallery-card-links">
    <a class="gallery-link" href="https://jhudatascience.org/AnVIL_Template/" target="_blank">View example</a>
    <a class="gallery-link" href="https://github.com/jhudsl/AnVIL_Template" target="_blank">GitHub</a>
  </div>
</div>

<div class="gallery-card">
  <span class="badge badge-template">Template</span>
  <p class="gallery-card-title">DataTrail Template</p>
  <p class="gallery-card-desc">An OTTR-based template for <a href="https://www.datatrail.org/" target="_blank">DataTrail</a> courses, with custom branding and structure.</p>
  <div class="gallery-card-links">
    <a class="gallery-link" href="https://datatrail-jhu.github.io/DataTrail_Template/introduction.html" target="_blank">View example</a>
    <a class="gallery-link" href="https://github.com/datatrail-jhu/DataTrail_Template" target="_blank">GitHub</a>
  </div>
</div>

<div class="gallery-card">
  <span class="badge badge-dashboard">Dashboard</span>
  <p class="gallery-card-title">Open Case Studies Metrics Dashboard</p>
  <p class="gallery-card-desc">This website shows metrics related to the Open Case Studies project (OCS). OCS is an educational archive of data analysis guides using real-world data to help learners engage with data science and statistics topics.</p>
  <div class="gallery-card-links">
    <a class="gallery-link" href="https://www.opencasestudies.org/ocs-metrics-dashboard/" target="_blank">View dashboard</a>
    <a class="gallery-link" href="https://github.com/opencasestudies/ocs-metrics-dashboard" target="_blank">GitHub</a>
  </div>
</div>

</div>
```

---

Ready to build your own? [Get Started](getting_started.qmd) →