---
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% 120%](https://placecats.com/millie/400/600)

<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-05-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 infra in an afternoon

---
# One step further: hosting services on your own infrastructure
- I won't tell you how to set it up (plenty of guides online)
- Here are some tools I'm using for my personal setup:

<center>

Requirement | Possible tool
-:|:-
Server|Any VPS
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?**

---
<!-- _class: "references" -->
# References


---
# 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

```