Add a few initial slides

src/index.html

@@ -9,13 +9,53 @@
     <div class="reveal">
       <div class="slides">
         <section>
-          <h1 class="r-fit-text">How Robots See Fiducial Markers 👀</h1>
-          <p>Jake Howard</p>
-          <small class="is-italic">Senior Systems Engineer @ Torchbox</small>
+          <section>
+            <h1 class="r-fit-text">How Robots See Fiducial Markers 👀</h1>
+            <p class="has-text-primary is-size-2">🧍 Jake Howard</p>
+            <p class="has-text-primary is-size-6">🐦 <a class="has-text-primary" href="https://twitter.com/realorangeone">@RealOrangeOne</a></p>
+            <p class="is-size-4">👨‍💻 Senior Systems Engineer @ <span class="has-text-torchbox">Torchbox</span></p>
+          </section>
+          <section data-background-image="https://studentrobotics.org/images/content/blog/sr2022/arena.jpg">
+            <h1 class="r-fit-text text-shadow">I Build Robots*</h1>
+            <p class="text-shadow">* I help <em>others</em> build robots</p>
+          </section>
         </section>
-        <section data-background-image="https://studentrobotics.org/images/content/blog/sr2022/arena.jpg">
-          <h1 class="r-fit-text">I Build Robots*</h1>
-          <p>* I help <em>others</em> build robots</p>
+        <section>
+          <section data-background-image="https://live.staticflickr.com/8718/17123916289_1cbc4c5210_k.jpg">
+            <h1 class="r-fit-text text-shadow">Robots need to see things</h1>
+          </section>
+          <section data-background-image="https://live.staticflickr.com/2837/33771948196_3cf1b5e3e5_k.jpg">
+          </section>
+        </section>
+        <section data-background-image="https://images.unsplash.com/photo-1504639725590-34d0984388bd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80">
+          <h2 class="text-shadow">Computer Vision</h2>
+        </section>
+        <section>
+          <section data-background-image="./img/object-recognition.png">
+            <h2 class="text-shadow">Object Recognition</h2>
+            <h4 class="text-shadow">The <span class="has-text-success">hot new thing</span></h4>
+            <h6 class="fragment">Prone to <span class="has-text-danger">errors</span></h6>
+          </section>
+          <section data-background-image="./img/not-hotdog.png">
+            <h2 class="text-shadow">Prone to errors</h2>
+          </section>
+          <section data-background-image="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80">
+            <h2 class="text-shadow">Computationally intensive</h2>
+          </section>
+        </section>
+        <section>
+          <section data-background-image="https://april.eecs.umich.edu/media/apriltag/apriltagrobots_overlay.jpg">
+            <h2 class="text-shadow">Fiducial Markers</h2>
+          </section>
+          <section data-background-image="https://docs.opencv.org/4.x/singlemarkersaxes.jpg">
+            <h2 class="text-shadow">Pose Estimation</h2>
+          </section>
+          <section data-background-image="https://live.staticflickr.com/2827/32969459924_164c509e20_k.jpg">
+            <h2 class="text-shadow r-fit-text">We put them <strong>everywhere</strong>!</h2>
+          </section>
+          <section>
+            <h2 class="r-fit-text">How do they work?</h2>
+          </section>
         </section>
       </div>
     </div>

src/index.js

@@ -7,3 +7,16 @@ let deck = new Reveal({
    controlsTutorial: false,
 })
 deck.initialize();
+
+// HACK: Manually transform parcel's hashed file paths for background images
+const FILE_MAPPING = {
+   "./img/not-hotdog.png": new URL("./img/not-hotdog.png", import.meta.url).toString(),
+   "./img/object-recognition.png": new URL("./img/object-recognition.png", import.meta.url).toString(),
+};
+
+for (const src in FILE_MAPPING) {
+   dest = FILE_MAPPING[src];
+   document.querySelectorAll(`[data-background-image='${src}']`).forEach(e => {
+      e.dataset.backgroundImage = dest;
+   })
+}

src/index.scss

@@ -1,3 +1,16 @@
+$text: white;
+$text-strong: white;
+$primary: #e85537;
+
 @import "../node_modules/reveal.js/css/reveal";
 @import "../node_modules/reveal.js/css/theme/source/night";
 @import "../node_modules/bulma/bulma";
+
+
+.text-shadow {
+    text-shadow: 0px 0px 40px $black !important;
+}
+
+.has-text-torchbox {
+    color: rgb(253, 87, 101);
+}