DHEPlab Presentation Template 2025

A professional Quarto reveal.js presentation template for the Digital Health and Evaluation Lab (DHEPlab) with UNC Chapel Hill branding, featuring interactive elements, bibliography support, and easy deployment options.

🚀 Quick Start

Prerequisites

• Quarto (v1.3 or later)
• Git (for version control and GitHub Pages deployment)
• A text editor (VS Code, RStudio, etc.)

Installation

# Clone this repository
git clone https://github.com/your-username/DHEPlab-prez-template-2025.git
cd DHEPlab-prez-template-2025

# Preview the template
quarto preview template.qmd

📁 Repository Structure

DHEPlab-prez-template-2025/
├── images/                    # Shared images directory
│   └── dhep-logo-2.png       # DHEPlab logo
├── styles.scss               # Shared styles (UNC branding)
├── references.bib            # Shared bibliography
├── template.qmd              # Base presentation template
├── presentation-1.qmd        # Example presentation 1
├── presentation-2.qmd        # Example presentation 2
├── CLAUDE.md                 # AI assistance guide
├── .gitignore               # Git ignore rules
├── _publish.yml             # GitHub Pages config
└── README.md                # This file

🎨 Features

Presentation Features

• 🎯 UNC Chapel Hill Branding: Professional color scheme and typography
• 📊 Interactive Slides: Built on reveal.js framework
• 📝 Speaker Notes: Press S during presentation
• 🖊️ Chalkboard: Press C to annotate slides
• 🔍 Search: Full-text search functionality
• 📚 Bibliography: Automatic citation management
• 🧮 Math Support: LaTeX equations
• 📈 Mermaid Diagrams: Flowcharts and diagrams
• 💻 Code Highlighting: Syntax highlighting for multiple languages

Style Features

• H1: Large Carolina Blue headers
• H2: Orange underline accent
• H3: Special orange formatting with underline (NEW!)
• H4: Navy blue headers
• Professional tables, blockquotes, and code blocks
• DHEP logo positioning options

📝 Creating a New Presentation

Option 1: Single Presentation

# Copy the template
cp template.qmd my-presentation.qmd

# Edit your presentation
# Update title, author, date, and content

# Preview your presentation
quarto preview my-presentation.qmd

# Render to HTML
quarto render my-presentation.qmd

Option 2: Multiple Presentations in Same Repository

This template is designed to support multiple presentations sharing resources:

1. Create your presentation file:

   cp template.qmd conference-talk-2025.qmd
   cp template.qmd workshop-june-2025.qmd

2. All presentations automatically share:

   • styles.scss - Consistent branding
   • images/ - Logos and graphics
   • references.bib - Bibliography

3. Benefits:

   • Consistent branding across all presentations
   • Single source of truth for logos/images
   • Shared bibliography for citations
   • Easy deployment of multiple talks

🖼️ Managing Shared Resources

Images

Place all images in the images/ directory:

![Description](images/your-image.png)

Adding Custom Styles

Edit styles.scss to modify colors or add new styles. All presentations will automatically use updated styles.

Bibliography

Add references to references.bib:

@article{YourRef2025,
  author = {Last, First},
  title = {Title},
  journal = {Journal Name},
  year = {2025}
}

Cite in your presentation:

According to recent research [@YourRef2025]...

🌐 GitHub Pages Deployment

Manual Deployment

1. First-time setup:

   # Create gh-pages branch
   git checkout -b gh-pages
   git checkout main

2. Deploy a presentation:

   # Render your presentation
   quarto render my-presentation.qmd
   
   # Publish to GitHub Pages
   quarto publish gh-pages my-presentation.qmd

3. Access your presentation:

   • URL: https://[username].github.io/DHEPlab-prez-template-2025/my-presentation.html

Automated Deployment (GitHub Actions)

1. Enable GitHub Pages:

   • Go to Settings → Pages
   • Source: Deploy from a branch
   • Branch: gh-pages / /(root)

2. Push to trigger deployment:

   git add .
   git commit -m "Update presentation"
   git push origin main

3. Multiple presentations:

   • Each .qmd file becomes a separate HTML page
   • Access via: https://[username].github.io/DHEPlab-prez-template-2025/[presentation-name].html

Creating an Index Page

For multiple presentations, create index.qmd:

---
title: "DHEPlab Presentations"
format: html
---

## Available Presentations

- [Conference Talk 2025](conference-talk-2025.html)
- [Workshop June 2025](workshop-june-2025.html)
- [Research Seminar](research-seminar.html)

⌨️ Keyboard Shortcuts

During presentation:

• →/←: Navigate slides
• Space: Next slide
• Shift+Space: Previous slide
• Esc: Slide overview
• F: Fullscreen
• S: Speaker notes view
• C: Chalkboard mode
• B: Blackout
• ?: Show all shortcuts

🎯 Logo Positioning

Add logo to specific slides:

<div class="logo-top-right">
  <div class="dhep-logo"></div>
</div>

Available positions:

• .logo-top-right
• .logo-top-left
• .logo-bottom-right

🛠️ Customization Guide

Changing Colors

Edit styles.scss:

// Replace with your brand colors
$primary-color: #YourColor;
$secondary-color: #YourColor;

Modifying Templates

1. Edit YAML header for metadata
2. Update footer text
3. Replace logo in images/
4. Adjust styles in styles.scss

Adding Plugins

In your .qmd file:

revealjs-plugins:
  - plugin-name

📚 Best Practices

1. Keep slides concise: Use speaker notes for details
2. Use consistent formatting: Follow the style guide
3. Test before presenting: Check all features work
4. Version control: Commit regularly
5. Share resources: Use the shared directories

🤖 AI Assistance

See CLAUDE.md for tips on using AI tools with this template.

📄 License

This template is provided by DHEPlab for academic and research use.

🆘 Troubleshooting

Common Issues

1. Slides not rendering: Check Quarto installation
2. Logo not showing: Verify image path
3. Citations not working: Check .bib file format
4. Deployment fails: Ensure GitHub Pages is enabled

Getting Help

• Quarto documentation: https://quarto.org/docs/presentations/revealjs/
• Reveal.js documentation: https://revealjs.com/
• DHEPlab: [contact information]

---

Created with ❤️ by DHEPlab | University of North Carolina at Chapel Hill