slides.md

A quick example set of slides

---

Checkout slides.md to see how they were written.

---

Navigate vertically

Grouping tabs vertically is a good way to discuss a single idea

hint: press ↓

--

This slide appears below the first slide

hint: press →

---

Navigate horizontally

This slide appears to the right of the first slide

---

Go Big

---

Press ESC to see overview

--

Press S to open speaker view.

You can even include notes that only the presenter can see!

NOTE: This is only visible to the presenter.

Drag this tab to a different window or screenshare the other tab. When you change slides on this presenter-view tab, the other tab with audience focused tabs will change as well.

--

Press ? to see other keyboard shortcuts.

---

Fragment transitions

Fade in

Fade out

Highlight red

Fade in, then out

Slide up while fading in

NOTE: See more about fragment transitions here: https://revealjs.com/fragments/

---

Code

import React, { useState } from "react";

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

function SecondExample() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

---

Backgrounds

Images as backgrounds

NOTE: Could be relative path to images as well...

--

Backgrounds

Websites as backgrounds

NOTE: This doesn't currently work with any page that prevents itself from being included in iframes (e.g. GitHub)