Creating a talk with the itenium theme

Orange background, logo top-left, image on the right via the image slot. Use as the first slide; the headmatter goes on top.

# Title
# Subtitle

::image::

![](./images/cover-art.jpg)

itenium photo collage, three title lines (cyan / white / orange), logo bottom-right. Put it first in a conference deck.

---
layout: conf-intro
---

# Your
# Title
# Etc

White background, dot decorations, footer with slide number. Font size auto-scales with the bullet count; force it with textSize.

---
layout: default
---

# Title

- Bullet
- Bullet

Content slide with a circular image (orange border, square-cropped). Text wraps around it.

---
layout: default-aside
image-position: middle-right
textSize: sm
---

# Title

- Bullet that wraps around the image

::image::

![](./images/headshot.jpg)

Full-bleed photo with a 45% dark overlay, white title near the top. Override the photo with background: (a file in presentation/images/).

---
layout: section
background: prompt-lint-demo.png
---

# Section Title

::subtitle::

Optional subtitle text

Numbered items next to a photo. Items come from the frontmatter.

---
layout: agenda
textSize: sm
items:
  - First Topic
  - Second Topic
  - Third Topic
---

Two-column card layout with .cols and .col divs.

---
layout: comparison
---

# Title

<div class="cols">
<div class="col">

### Left Card

- Point one

</div>
<div class="col">

### Right Card

- Point one

</div>
</div>

Title centered above both columns, columns vertically centered.

---
layout: two-col-image-text
---

# Title

::image::

![](./images/photo.jpg)

::content::

- Content here

Orange background with dot decorations.

---
layout: quote
---

# Quote text here

Green background, quote with an image and an attribution line.

---
layout: quote-image
---

# The quote

::image::

![](./images/photo.jpg)

::author::

**Name Surname**

Green background, big quote mark, attribution and an optional round image. More weight than quote.

---
layout: statement
textSize: lg
---

# The bold claim that anchors the talk

::author::

**Name Surname** — Title, Org

::image::

![](./images/headshot.jpg)

Break slide with a <Timer> and an image. orientation: vertical stacks them.

---
layout: break
---

# ☕ Break

::timer::

<Timer minutes="10" />

::image::

![](./images/cover-art.jpg)

Minimal padding, the code block fills the slide. code-size sets the maximum code font size (default 1em); it shrinks to fit the slide.

---
layout: code
code-size: 1.4em
---

# Title

## Optional subtitle

```ts {1|2|3-5|all}
function isPrime(n: number): boolean {
  if (n <= 1) return false
  for (let i = 2; i * i <= n; i++) {
    if (n % i === 0) return false
  }
  return true
}
```

Two code panels side by side, red Before and green After headings.

---
layout: code-comparison
before-label: Without Skills
after-label: With Skills
code-size: 0.7em
---

# Title

::before::

```ts
function fetchUser(id) { /* ... */ }
```

::after::

```ts
async function fetchUser(id: string): Promise<User> { /* ... */ }
```

Second to last slide: “Powerpoint Source”, a QR code and the GitHub link, both from source:. The scaffold fills it in.

---
layout: source
source: itenium-be/MicroServices
---

Fixed slide with the itenium social accounts. qr: adds a QR code.

---
layout: socials
---

Photo background with “THANK YOU!”; the slide content replaces the text.

---
layout: end
---

<div class="dense">

| Technique    | Example                    |
|--------------|----------------------------|
| **0px font** | Invisible to humans        |

</div>

<VClickTable
  :headers="['Defense', 'Approach', 'Solves it?']"
  :rows="[
    ['<b>Constitutional AI</b>', 'Self-critique', 'No'],
    ['<b>Prompt Shields</b>', 'Pattern scanning', 'No'],
  ]"
  :firstVisible="1"
  size="sm"
/>

<v-clicks depth="2">

- First item
- Second item
  - Sub-item

</v-clicks>

---
layout: default
textSize: sm
---

# My Slide

<div class="full-width text-xxl italic text-orange-400">
  A quote that spans the entire width of the slide.
</div>

h1:
  type: braces      # dot · slashes · hash · semicolon · brackets · braces
  color: primary    # primary (orange) · muted (gray)
  position: 2       # start · end · all · 2 · 2-3 (word range, brackets/braces)

# What is UnitTesting renders as What is {UnitTesting}.

```ts {1-4|6-10|12-13}{lines:true,at:0}
interface User { ... }
```

````md magic-move
```ts
const a = 1
```

```ts
const a = 1
const b = 2
```
````

```ts {monaco-run}
console.log(42)
```

```mermaid
graph LR
  A[Kickoff] --> B[Development] --> C[Demo]
```

# My Slide

Content here

<!-- Only visible in presenter mode -->

<Timer minutes="10" />

<div class="w-64 h-64">
  <QRCode url="https://github.com/itenium-be/Presentations" color="#343434" />
</div>

Vite bundles images as-is; right-size them before committing.

PNG for screenshots/illustrations, JPG (q85) for photos, WebP for either, SVG for logos and diagrams. No GIF, no HEIC.

pngquant --quality=70-85 --strip --output cover.min.png cover.png
magick photo.jpg -quality 85 -strip photo.jpg
magick cover.png -resize 1024x1536 -quality 85 cover.webp
magick portrait.jpg -resize 600x600^ -gravity center -extent 600x600 aside.jpg