diff --git a/.gitignore b/.gitignore
index 36a416f..e43b0f9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1 @@
 .DS_Store
-dist
diff --git a/dist/slides.pdf b/dist/slides.pdf
new file mode 100644
index 0000000..003f08c
Binary files /dev/null and b/dist/slides.pdf differ
diff --git a/dist/website/index.html b/dist/website/index.html
new file mode 100644
index 0000000..6b75677
--- /dev/null
+++ b/dist/website/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<head>
+  <meta charset="utf-8" />
+  <meta name="generator" content="pandoc" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  <title>Coding Art - Workshop für die KEW 2022</title>
+  <style>
+    code{white-space: pre-wrap;}
+    span.smallcaps{font-variant: small-caps;}
+    span.underline{text-decoration: underline;}
+    div.column{display: inline-block; vertical-align: top; width: 50%;}
+    div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
+    ul.task-list{list-style: none;}
+    .display.math{display: block; text-align: center; margin: 0.5rem auto;}
+  </style>
+  <link rel="stylesheet" href="style.css" />
+  <!--[if lt IE 9]>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
+  <![endif]-->
+</head>
+<body>
+<header id="title-block-header">
+<h1 class="title">Coding Art - Workshop für die KEW 2022</h1>
+</header>
+<h2 id="ergebnisse-des-workshops">Ergebnisse des Workshops</h2>
+<p><em>Hier ist noch nichts… wenn ihr mögt, können wir im Anschluss an
+den Workshop eure Ergebnisse hier “ausstellen”!</em></p>
+<h2 id="links">Links</h2>
+<ul>
+<li><a href="https://openprocessing.org/sketch/1642700">Interaktives
+Tutorial</a></li>
+<li><a href="https://editor.p5js.org">p5-Editor</a></li>
+<li><a href="https://bmoren.github.io/p5js-cheat-sheet/">p5-Cheatsheet
+mit vielen wichtigen Kommandos auf einen Blick</a></li>
+<li>Code-Beispiele
+<ul>
+<li>Beispiel 1 (Shapes)</li>
+<li>Beispiel 2 (Color)</li>
+<li>Beispiel 3 (Interaktion)</li>
+</ul></li>
+<li><a href="https://ag-link.xyz">Mehr Informationen über die AG
+Link</a></li>
+</ul>
+<h2 id="editor">Editor</h2>
+<iframe id="p5.js web editor embed" title="p5.js web editor embed" width="100%" height="700" src="https://editor.p5js.org/">
+</iframe>
+<h2 id="downloads">Downloads</h2>
+<ul>
+<li><a href="slides.pdf">Vortragsslides</a></li>
+</ul>
+<h2 id="weiterführende-links">Weiterführende Links</h2>
+<ul>
+<li><a href="https://p5js.org/reference/">p5
+Bibliotheksreferenz</a><br />
+Eine Übersicht und Erklärungen zu wirklich allen Kommandos die p5js
+bereitstellt.</li>
+<li><a href="TODO">Interaktive Paramterübersicht</a></li>
+<li><a href="https://thecodingtrain.com">Daniel Shiffman - The Coding
+Train</a><br />
+Viele Tutorials und Beispielvideos zu p5js die auf eine sehr
+sympathische Art und Weise vorgestellt werden.</li>
+<li><a href="openprocessing.org">OpenProcessing</a><br />
+Erkundet Tausende Beispiele von p5js-Sketches</li>
+</ul>
+<footer>
+<a href="https://ag-link.xyz/impressum/">Impressum / Datenschutz</a>
+</footer>
+</body>
+</html>
diff --git a/dist/website/slides.pdf b/dist/website/slides.pdf
new file mode 100644
index 0000000..003f08c
Binary files /dev/null and b/dist/website/slides.pdf differ
diff --git a/dist/website/style.css b/dist/website/style.css
new file mode 100644
index 0000000..221233b
--- /dev/null
+++ b/dist/website/style.css
@@ -0,0 +1,51 @@
+:root {
+    --link-color: #00755e;
+    --visited-color: #00755e;
+}
+
+html {
+    font-family: sans-serif;
+    size: 12px;
+}
+
+body {
+    width: 80%;
+    max-width: 1024px;
+    margin: auto;
+    background-color: #fdf6e3 !important;
+}
+
+footer {
+    text-align: center;
+    margin-top: 4em;
+    padding-bottom: 1em;
+}
+
+
+a { 
+    text-decoration: none;
+    font-weight: bold; 
+    color: var(--link-color);
+}
+
+h2 {
+    margin-top: 1.5em;
+}
+
+h2:after {
+    content: "";
+    background-image: url("https://ag-link.xyz/assets/img/connection.png"); 
+    background-size: contain;
+    width: .75em;
+    height: .75em;
+    display: inline-block;
+    margin-left: .3em;
+}
+
+li {
+    padding:  0.5em 0 0 0;
+}
+
+li li {
+    padding: 0;
+}
