Building a slideshow with plinth

1. Basics

1.1 Building a slideshow with plinth

A lecture-ready slide deck, built from EDN and Markdown in git, published as a static site—every slide a URL you can share.

1.2 Why slides as a portfolio?

  • Slides are plain items: Markdown text, optional media
  • Every slide has a permanent, shareable URL
  • Works offline-friendly and prints as a handout
  • Private by default: no trackers, no external requests

2. Authoring

2.1 Declaring a deck

A deck is sections of slides, declared in portfolio.edn:

{:mode :deck
 :deck {:sections
        [{:title "Basics"
          :items ["welcome" "why-plinth"]}
         {:title "Authoring"
          :items ["deck-config" "media-slides"]}]}}

2.2 Full-bleed media slides

Give any slide a full-bleed background—the first image element becomes the backdrop. This slide's backdrop is a real photograph, dimmed by :background {:scrim true} so the text stays legible; :print true also includes it when printing. Gradients and solid colours work too.

Octopus with potatoes, overhead

2.3 Images on slides

The first image on a slide becomes the backdrop; every further image flows inline, contained, with responsive derivatives generated at build. Masters live in the portfolio's masters/ directory—outside git for real portfolios, synced to object storage such as R2—and pages reference content-addressed derivatives, never the originals.

Octopus with potatoes, overhead

2.4 Corporate typography: B612

This slide is set in B612—the aviation cockpit typeface commissioned by Airbus, designed for legibility on screens. Declare bundled fonts in portfolio.edn under :fonts (family, files, licence) and give any slide :font {:family "B612"}.

2.5 Corporate typography: IBM Plex

And this slide is set in IBM Plex Sans, IBM's corporate typeface. Both fonts are bundled under the SIL Open Font License with their licences recorded—corporate branding without a single third-party request.

2.6 Audio on a slide

Slides can carry audio—narration, a music cue, an interview fragment—alongside the text. This slide also shows a solid colour backdrop: :background {:color "#25303c"}.

2.7 Speaker notes

Add :notes-md to any slide. Notes stay hidden on screen until you press N, and they print with the handout — your audience never sees them projected.

2.8 Step-by-step reveal

  • Set :fragments true on a slide
  • Space or the down arrow reveals one bullet at a time
  • Without JavaScript, everything is simply visible
  • Printing shows every bullet too

3. Delivery

3.1 Finding your way

  • Left / Right: previous or next section
  • Up / Down: slides within the section
  • Space: next step (reveals bullets first)
  • Esc: the overview map—your position, highlighted
  • N: speaker notes · Home / End: first / last slide

3.2 The overview map

  • Esc or O opens the overview—a map of the whole deck
  • Sections are columns (left/right); slides stack within (up/down)
  • Arrows move the highlight, Enter opens, clicking works too
  • The bars on the bottom and right edges mirror the same two axes

3.3 Sharing and printing

Every slide is a plain URL—link straight to any point in the deck. Print a slide and you get a handout page: the notes are included, the backdrop is not. To print the WHOLE deck in one action, open the handout page—linked from the overview — and print once.

3.4 Publishing

One bb build renders the deck to a static folder—host it anywhere. No trackers, no external requests, nothing for your audience to install.

3.5 Thank you

Build yours: one portfolio.edn, your Markdown, bb build.