---
theme: "@sp-days-framework/slidev-theme-sykehuspartner"
title: Creating Your First Slidev Presentation
description: Learn essential Slidev features and how to create engaging presentations
layout: cover
---

# Creating Your First Slidev Presentation

## Essential Features and Best Practices

---
layout: two-cols-header
---

# Frontmatter Basics

Every Slidev presentation starts with frontmatter configuration:

::left::


**Global Settings** (first slide):
- `theme` - Which theme to use
- `title` - Presentation title
- `description` - Brief description
- `author`, `keywords` - Metadata

```yaml
---
theme: "@sp-days-framework/slidev-theme-sykehuspartner"
title: My Presentation
description: A brief description
author: Your Name
layout: cover
---

# First Slide
```

::right::


**Per-Slide Settings** (subsequent slides):
- `layout` - Layout for this slide
- `logo` - Show/hide logo
- Custom layout parameters

```yaml
---
layout: default
---

# Subsequent Slide
```

---
layout: two-cols-header
---

# Slide Separators

Slides are separated by three dashes (`---`):

::left::

```markdown
---
# First Slide

Content here

---
# Second Slide

More content

---
layout: two-cols
---

# Third Slide with Layout
```

::right::

**Tips:**

- Always use `---` with blank lines around it
- Frontmatter goes immediately after `---`
- Leave blank line before content

---
layout: three-cols-header
---

# Markdown Support

Slidev supports all standard Markdown features:

::left::

**Text Formatting:**
- *Italic* with `*text*` or `_text_`
- **Bold** with `**text**`
- ***Bold italic*** with `***text***`
- `Code` with backticks

::middle::

**Lists:**
- Unordered lists with `-` or `*`
- Ordered lists with `1.`, `2.`, etc.
- Nested lists with indentation

::right::

**Links and Images:**
- Links: `[text](url)`
- Images: `![alt](path)`

---

# Code Highlighting

Slidev provides powerful code highlighting:

**Language Support:**
```python
# Specify language for syntax highlighting
def hello():
    return "Python works too!"
```

**Line Highlighting:**
```javascript {2,4-6}
const a = 1
const b = 2  // highlighted
const c = 3
const d = 4  // highlighted
const e = 5  // highlighted
const f = 6  // highlighted
```

---
layout: two-cols-header
---

# Presenter Notes

Add notes visible only in presenter mode

::left::

```markdown
---
# Slide Title

Visible content for the audience

<!--
These are presenter notes.
Only visible in presenter mode.

Tips for this slide:
- Emphasize the main point
- Ask if there are questions
- Time: 2 minutes
-->
```

::right::

**Access Presenter Mode:**

- Press "Presenter Mode" button during presentation
- Opens second window with notes, next slide, and timer
- Perfect for rehearsing and presenting

<!--
These are presenter notes.
Only visible in presenter mode (press 'o' to open).

Tips for this slide:
- Emphasize the main point
- Ask if there are questions
- Time: 2 minutes
-->

---
layout: two-cols-header
transition: slide-left
---

# Transitions

Add smooth transitions between slides

::left::

**Available Transitions:**

- `slide-left`, `slide-right`, `slide-up`, `slide-down`
- `fade` - Fade in/out
- `fade-out` - Only fade out
- `zoom` - Zoom effect
- `none` - No transition

::right::

```yaml
---
transition: slide-left
---

# This Slide

Will slide in from the right
```

You can also set a global transition in the first slide's frontmatter.

---
layout: two-cols-header
---

# Icons with UnoCSS

The theme includes icon support based on Iconify [VSCode Icons](https://icon-sets.iconify.design/vscode-icons/)

::left::

````markdown

  ```docker [dockerfile ~i-vscode-icons:file-type-docker~]
  FROM python:3.13
  ```

  ```python [hello.py ~i-vscode-icons:file-type-python~]
  print ('Hello, world!')
  ```

  ```yaml [play.yml ~i-vscode-icons:file-type-ansible~]
  - name: Update web servers
    hosts: webservers
    remote_user: root
  ```
````

::right::

```docker [dockerfile ~i-vscode-icons:file-type-docker~]
FROM python:3.13
```

```python [hello_world.py ~i-vscode-icons:file-type-python~]
print ('Hello, world!')
```

```yaml [play.yml ~i-vscode-icons:file-type-ansible~]
- name: Update web servers
  hosts: webservers
  remote_user: root
```

---
layout: three-cols-header
---

# Best Practices

::left::

**Content:**

- One main idea per slide
- Use bullet points sparingly (3-5 max)
- Images and code over text walls
- Consistent terminology

::middle::

**Design:**

- Choose appropriate layouts
- Maintain visual hierarchy
- Use animations purposefully
- Test in both light and dark modes

::right::

**Technical:**
- Keep code examples short
- Use syntax highlighting
- Test all transitions

---
layout: end
---

# Happy Presenting!