Update slides and cleanup examples

examples/fullstack/compose.yml

@@ -1,3 +1,4 @@
+name: fullstack
 services:
   frontend:
     image: frontend:latest

examples/fullstack/frontend/Dockerfile

@@ -5,12 +5,9 @@ RUN yarn install
 COPY . .
 
 FROM base AS build
-WORKDIR /app
-COPY --from=base /app/* .
 RUN yarn build
 
 FROM base AS develop
-COPY --from=base /app/ .
 EXPOSE 5173
 ENTRYPOINT [ "yarn", "dev", "--host", "0.0.0.0" ]
 

slides/slides.md

@@ -52,36 +52,21 @@ The last comment block of each slide will be treated as slide notes. It will be
 
 ---
 transition: fade-out
-layout: center
+layout: statement
+background: ./images/pexels-markusspiske-1089438.jpg
 ---
-
+# The 3 universal constants in programming
-# Who is this for?
+<v-click>
-
+<h2>1) The speed of light</h2>
-## About you
+</v-click>
-- Some experience with Docker/containers
+<v-click>
-- Familiarity with Linux/BASH
+<h2>2) "It's more complicated than you think"</h2>
-- Want to better understand how containers work
+</v-click>
-- Want to learn new techniques for automation
+<v-click>
-
+<h2>3) "It works on my machine"</h2>
----
+<br />
-transition: fade-out
+<small>Source: <a href="https://www.linkedin.com/posts/robertroskam_the-3-universal-constants-in-programming-activity-7339260450074775553-ofik?utm_source=share&utm_medium=member_desktop&rcm=ACoAACZXneYB_uWiOE0T9VO3caUkn7m0ZMrRS_o">Some random guy on the internet</a></small>
-layout: center
+</v-click>
----
-
-## Follow Along
-**Example Repo** - https://hackanooga.com/scs
-
-**Prerequisites**
-- Docker
-- VSCode
-- Git
-- yarn/npm/pnpm,etc (For viewing slides)
-
-  ### VSCode plugins
-  - [Official Docker Plugin](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker)
-  - [Dev Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)
-  - [Container Tools](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-containers)
-
 
 ---
 transition: fade-out
@@ -90,6 +75,45 @@ layout: center
 
 <img src="./images/docker-meme.jpg" width="300"/>
 
+
+---
+transition: fade-out
+layout: image-right
+image: ./images/pexels-markusspiske-1089438.jpg
+---
+
+# Who is this for?
+
+## About you
+- Some experience with Docker/containers
+- Familiarity with Linux/BASH/zsh, etc
+- Want to better understand how containers work
+- Want to learn new techniques for automation
+
+---
+transition: fade-out
+layout: image-left
+image: ./images/pexels-joshsorenson-1714208.jpg
+---
+
+## Follow Along
+<small>Visit the link to check out the sample Git repository.</small>
+
+**Example Repo** - https://hackanooga.com/scs
+
+**Prerequisites**
+- Docker Engine (Linux) or Docker Desktop (Windows/MacOS)
+- VSCode
+- Git
+- yarn, npm or pnpm (for viewing slides)
+
+  ### VSCode plugins
+  - [Official Docker Plugin](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker)
+  - [Dev Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)
+  - [Container Tools](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-containers)
+
+
+
 ---
 transition: fade-out
 layout: center
@@ -193,24 +217,42 @@ layout: center
 
 ---
 transition: fade-out
-layout: center
+layout: two-cols-header
 ---
 
-## Bind/Volume Mounts
+<div class="flex items-center flex-col">
+<h1 class="ml-5">Bind/Volume Mounts</h1>
 
-- 2 most common storage mechanisms
+<p>2 most common storage mechanisms<br />Different use cases and security implications</p>
-- Different use cases and security implications
+</div>
+::left::
+## Bind Mounts
 
+- Created/managed by user.
+- Files from host mounted directly into container.
+- Container processes can modify files on host system.
+- Bind mounts are strongly tied to the host.
+- Best for things like dev containers.
+
+::right::
+
+
+## Volume mounts
+- Created/managed by Docker Daemon.
+- Data is stored on host filesystem.
+- Used for persistent data.
+
+<!--
+  It is possible to modify the data directly via normal tools but unsupported and can cause unintended side-effects due to the overlayfs storage driver.
+  An example would be creating a postgres volume for persistent database storage.
+-->
 ---
 transition: fade-out
 layout: center
+image: 'https://unsplash.com/collections/oGE7TYSLt3I/software-development
+equal: false
+left: false
 ---
-## Bind Mounts
-
-- Mounting files/directories from the host machine directly into a container (merged overlayfs layer).
-- Processes inside container can modify files on host system.
-- Bind mounts are strongly tied to the host
-- Best for things like dev containers where you need to mount source code into container and have hot reload, etc.
 
 ## Bind Mount Example
 ```bash
@@ -264,20 +306,6 @@ $ docker volume inspect postgresData
 - Docker creates a volume named postgresData and mounts that directory inside the container.
 <!-- https://docs.docker.com/engine/storage/bind-mounts/ -->
 
----
-transition: fade-out
-layout: center
----
-
-## Volume mounts
-- Created and managed by the Docker Daemon
-- Volume data is stored on host filesystem but managed by Docker.
-- Used for persistent data.
-
-<!--
-  It is possible to modify the data directly via normal tools but unsupported and can cause unintended side-effects due to the overlayfs storage driver.
-  An example would be creating a postgres volume for persistent database storage.
--->
 
 ---
 transition: fade-out
@@ -330,7 +358,7 @@ EXPOSE 5173
 
 ```bash
 $ docker build -t react .
-$ docker run --rm -P react
+$ docker run --rm -p 5173:5173 react
 ```
 <!--
   Run docker image and demonstrate dev container functionality.  Attach to the running container