m1s2-eng-presentation/presentation.md

---
title: "Privacy by design: DIY Marp(X) AI presentations without sending data to third parties"
author: R.Viton
description: "Privacy by design: DIY Marp(X) AI presentations without sending data to third parties"
keywords: []

header: "Privacy by design: DIY Marp(X) AI presentations without sending data to third parties"
footer: "2026-06-24"

marp: true
theme: gödel
paginate: true
transition: cover

size: 16:9
lang: de
math: katex
---
<style>
    .inline-img {
        display: flex;
        align-items: center;
        gap: .5rem;
    }
</style>

<!-- _class: "title-academic" -->

![bg left:35% 250%](./images/title.jpg)

<div class="title">Privacy by design: DIY Marp(X) AI presentations without sending data to third parties</div>
<div class="subtitle">
    ... and why you should use them too!
</div>
<div class="author">Romane Viton</div>
<div class="date">2026-06-24</div>
<div class="organization">DFI-203, htw saar</div>

---
# A few **questions** first
* Who here would consider themselves a **developer** ?
* Experience with **code editors / IDEs** ?
* **More comfortable** with editor than with other software ?
* Does **text** just feel faster/more efficient at this point?

---
# <div class="inline-img"> ![w:100](./images/md.png) &nbsp; **Markdown**
## (It's everywhere - you've most likely dealt with it at least once)
```md
# Main title
## Heading 2 - You can make:

- *italic text*
- **bold text**
- ~~strikethrough~~
- lists
- [links](http://example.com)
- ![images](image_name_here)
- > Quotes
```

---
# Why not write **presentations** as text ?
## <div class="inline-img"> Introducing:&nbsp;![h:75](./images/marp.png) (Yuki Hattori)
* Markdown presentation ecosystem
* <span class="inline-img"> Comes as a ![h:75](./images/bash.png) command line tool or a ![h:75](./images/vscode.png) VSCode editor extension
* Technically Just A Web Page:tm: $\implies$ can write HTML/CSS if you want to customize
* MarpX (Paolo Cunha) offers high quality ready-to-use themes 
* If you know Markdown/HTML/CSS: <box>No need to learn (yet another) tool!

---
# **Collaborating** with others / keeping track of **versions** ?
> ## "Well surely the editor can't do ***that*** ", I hear you say
* All the presentations are **text-based** versions of a file tree
* We need a tool to maintain **versions** of a text-based file tree...
* <span class="inline-img"> Ever heard of ![w:100](./images/git.png) `git`?
* We already have a **tool** to collaborate on versions of text-based projects!

---
# How do we make sure data is **safe** from big companies?
- There *are* online platforms like GitHub for this (but: this defeats the whole purpose)
- It's 2026, and servers are pretty cheap
- You can set up your own infrastructure in an afternoon
  - (less than 100 lines of `docker-compose.yml`)

---
# One step further: hosting services on your **own infrastructure**
- I won't tell you how to set it up (plenty of guides online)
- TL;DR: **<box>On pushing changes $\rightarrow$ Auto-Render and Upload**
- Here are some tools I'm using for my personal setup:

<center>

Requirement | Possible tool
-:|:-
Server|Any VPS will do
Simple software deployment|Docker
HTTPS support|Caddy
Git collaboration|Gitea
Presentation hosting|Git-Pages
Automated deployment|Gitea Actions
</center>

---
# ...isn't this really **expensive**, though?
* Not really!
* Domain name: `~10 EUR/year`
* 24/7 VPS (200GB Storage, 6 vCPUs, 12GB RAM): `6.72 EUR/month`
  * Also hosting other services on it and not even at capacity
  * I use Contabo, but Hetzner/OVH/Hostinger also work
* *it's all yours, no need to worry about your data being accessed by third parties!*
* Privacy does have a price, but so does exposing your personal data
  * **<box>Which one are you willing to pay?**

---
# ...wasn't this supposed to **integrate LLMs** as well?
* It can be done as well!
* Head start when hosting models: `Ollama` (from Ollama Inc.)
* Automatically handles the download and execution of open models locally
* **<box>💡 Works when handling content, since everything is text-based !**
* We can integrate this into our IDE of choice and never have to worry about our data being sent to anyone

---
# **Pros** and **cons** from experience

<div class="multicolumn"><div>

## Pros
- Enhanced privacy
- Very flexible if you know webdev
- No need to leave the traditional dev toolset
- Open-Source community tools, no dependency on a specific company
- Actually know what you're setting up

</div><div>

## Cons
- Steep learning curve
- Hard to collaborate with non-technical people
- Need to be comfortable with text-based tools
- Theme can be limiting if not chosen correctly

</div></div>

---
# **Conclusion**
* Presentation software and AI often feels "out of reach" and only hostable if you're a company and have the resources for it
* It doesn't have to be that way!
* Don't contribute to that narrative $\implies$ <box>De-mystify the topic!
* *Your* data belongs to *you*; own it!

---
<!-- _class: "references" -->
# References
- [Marp Team, Marp (2026) (accessed 2026-06-23)](https://marp.app)
- [Paulo Cunha, MarpX (2026) (accessed 2026-06-23)](https://github.com/cunhapaulo/MarpX)
- [Ollama Inc., Ollama (2026) (accessed 2026-06-23)](https://ollama.com)
- [CommitGo Inc., Gitea Official website (2026) (accessed 2026-06-23)](https://about.gitea.com/)
- (image) https://www.pexels.com/photo/smiling-woman-doing-a-presentation-6476778/ (accessed 2026-06-23)

---
# **This presentation** is online too!

<div class="multicolumn"><div align="center">

## PDF

[![](./images/pdf_qrcode.png)](https://pages.ct.cozytren.ch/m1s2
-eng-presentation/presentation.pdf)

</div><div align="center">

## HTML

[![](./images/html_qrcode.png)](https://pages.ct.cozytren.ch/m1s2-eng-presentation)

</div><div align="center">

## Repository

[![](./images/repo_qrcode.png)](https://gitea.ct.cozytren.ch/romane/m1s2-eng-presentation)

</div></div>

```bash
wget https://pages.ct.cozytren.ch/m1s2-eng-presentation/presentation.pdf
git clone https://gitea.ct.cozytren.ch/romane/m1s2-eng-presentation

```