diff --git a/compress_images.sh b/compress_images.sh
new file mode 100755
index 0000000..859b92a
--- /dev/null
+++ b/compress_images.sh
@@ -0,0 +1,21 @@
+#!/bin/bash
+
+# Call this from the repo folder
+
+for image in src/_assets/images/original/*.jpg; do
+    #echo "Converting $image ..."
+    
+    filename=$(basename -- "$image")
+
+    # imagefolder = "src/_assets/images/"
+    imagefolder="${image%%original*}"
+
+    # filename = "workflows"
+    imagefilename="${filename%.*}"
+
+    # extension = "jpg"
+    imageextension="${filename##*.}"
+
+    echo "${imagefolder}${imagefilename}_mobile.${imageextension}"
+    convert "$image" -resize 1500 -strip -quality 85 "${imagefolder}${imagefilename}_mobile.${imageextension}"
+done
\ No newline at end of file
diff --git a/package.json b/package.json
index 3812e10..c7cba30 100644
--- a/package.json
+++ b/package.json
@@ -5,9 +5,10 @@
   "main": "index.js",
   "scripts": {
     "start": "npm run dev",
+    "optimize": "./compress_images.sh",
     "dev": "npx @11ty/eleventy --serve",
     "build": "npx @11ty/eleventy",
-    "deploy": "scp -r build/ server:/tmp/ && ssh server 'sudo cp -r /tmp/build/* ~/www/luca-junge.de/"
+    "deploy": "scp -r build/ server:/tmp/ && ssh server 'sudo cp -r /tmp/build/* ~/www/luca-junge.de/'"
   },
   "keywords": [],
   "author": "Luca Junge",
diff --git a/src/_assets/images/blog_mobile.jpg b/src/_assets/images/blog_mobile.jpg
new file mode 100644
index 0000000..6eaa5a1
Binary files /dev/null and b/src/_assets/images/blog_mobile.jpg differ
diff --git a/src/_assets/images/hero-image_mobile.jpg b/src/_assets/images/hero-image_mobile.jpg
new file mode 100644
index 0000000..f6a8718
Binary files /dev/null and b/src/_assets/images/hero-image_mobile.jpg differ
diff --git a/src/_assets/images/museum_mobile.jpg b/src/_assets/images/museum_mobile.jpg
new file mode 100644
index 0000000..b883db6
Binary files /dev/null and b/src/_assets/images/museum_mobile.jpg differ
diff --git a/src/_assets/images/original/blog.jpg b/src/_assets/images/original/blog.jpg
new file mode 100644
index 0000000..18284c8
Binary files /dev/null and b/src/_assets/images/original/blog.jpg differ
diff --git a/src/_assets/images/hero-image.jpg b/src/_assets/images/original/hero-image.jpg
similarity index 100%
rename from src/_assets/images/hero-image.jpg
rename to src/_assets/images/original/hero-image.jpg
diff --git a/src/_assets/images/GY2YuO3r.jpg b/src/_assets/images/original/museum.jpg
similarity index 100%
rename from src/_assets/images/GY2YuO3r.jpg
rename to src/_assets/images/original/museum.jpg
diff --git a/src/_assets/images/o3KfXg3W.jpg b/src/_assets/images/original/playground.jpg
similarity index 100%
rename from src/_assets/images/o3KfXg3W.jpg
rename to src/_assets/images/original/playground.jpg
diff --git a/src/_assets/images/original/portfolio.jpg b/src/_assets/images/original/portfolio.jpg
new file mode 100644
index 0000000..805b5d7
Binary files /dev/null and b/src/_assets/images/original/portfolio.jpg differ
diff --git a/src/_assets/images/original/under-construction.jpg b/src/_assets/images/original/under-construction.jpg
new file mode 100644
index 0000000..99a7c75
Binary files /dev/null and b/src/_assets/images/original/under-construction.jpg differ
diff --git a/src/_assets/images/original/workflows.jpg b/src/_assets/images/original/workflows.jpg
new file mode 100644
index 0000000..fba6443
Binary files /dev/null and b/src/_assets/images/original/workflows.jpg differ
diff --git a/src/_assets/images/playground_mobile.jpg b/src/_assets/images/playground_mobile.jpg
new file mode 100644
index 0000000..ebf42e9
Binary files /dev/null and b/src/_assets/images/playground_mobile.jpg differ
diff --git a/src/_assets/images/portfolio_mobile.jpg b/src/_assets/images/portfolio_mobile.jpg
new file mode 100644
index 0000000..7abcf3c
Binary files /dev/null and b/src/_assets/images/portfolio_mobile.jpg differ
diff --git a/src/_assets/images/under-construction_mobile.jpg b/src/_assets/images/under-construction_mobile.jpg
new file mode 100644
index 0000000..3fecd54
Binary files /dev/null and b/src/_assets/images/under-construction_mobile.jpg differ
diff --git a/src/_assets/images/workflows_mobile.jpg b/src/_assets/images/workflows_mobile.jpg
new file mode 100644
index 0000000..b830af1
Binary files /dev/null and b/src/_assets/images/workflows_mobile.jpg differ
diff --git a/src/_includes/overview.njk b/src/_includes/overview.njk
index 10716ab..6b17897 100644
--- a/src/_includes/overview.njk
+++ b/src/_includes/overview.njk
@@ -8,15 +8,17 @@
     <link rel="stylesheet" href="/assets/fontawesome/css/all.css">
     <title>{{ title }}</title>
   </head>
-  <body>
+  <body style="background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(50, 50, 50, 0.9)), url('/assets/images/blog_mobile.jpg');">
     {% include "partials/header.njk" %}
 
-    <aside>
+    <aside style="margin-top: 70px;">
       <h1>{{title}}</h1>
     </aside>
 
-    <main>
-      {{ content | safe }}
+    <main class="flex">
+      <div class="content-padding container">
+        {{ content | safe }}
+      </div>
     </main>
 
     {% include "partials/footer.njk" %}
diff --git a/src/_includes/partials/footer.njk b/src/_includes/partials/footer.njk
index 015906b..30d26f2 100644
--- a/src/_includes/partials/footer.njk
+++ b/src/_includes/partials/footer.njk
@@ -3,4 +3,4 @@
     <span>
       <i class="fa-brands fa-creative-commons-zero" style="margin-right: 8px;"></i>Luca Junge</span>
   </div>
-</foot>
+</footer>
diff --git a/src/_includes/partials/header.njk b/src/_includes/partials/header.njk
index da89f60..e25e795 100644
--- a/src/_includes/partials/header.njk
+++ b/src/_includes/partials/header.njk
@@ -1,33 +1,42 @@
 <header id="navigation">
   <nav>
     <ul>
-      <li class="home-button">
-        <a href="/" title="Zur Startseite">
+      <li id="home-nav">
+        <a href="/" title="To Homepage">
           <i class="fa-solid fa-house"></i>
         </a>
       </li>
-      <li>
-        <a href="/portfolio/" title="Alle Posts">Portfolio</a>
+      <li id="portfolio-nav">
+        <a href="/portfolio/" title="My Portfolio">Portfolio</a>
       </li>
-      <li>
-        <a href="/workflows/" title="Workflow">Workflows</a>
+      <li id="workflows-nav">
+        <a href="/workflows/" title="Workflows">Workflows</a>
       </li>
-      <li>
+      <li id="blog-nav">
         <a href="/blog/" title="Blog">Blog</a>
       </li>
-      <li class="contact-button">
-        <a href="/contact/" title="Kontakt">Kontakt</a>
+      <li id="contact-nav">
+        <a href="/contact/" title="Contact">Kontakt</a>
       </li>
-      <li>
-        <a href="https://github.com/LucaJunge" title="GitHub Profil">
+      <li id="github-nav">
+        <a href="https://github.com/LucaJunge" title="GitHub profile">
           <i class="fa-brands fa-github"></i>
         </a>
       </li>
-      <li class="menu-button">
-        <a title="Menu anzeigen">
+      <li id="menu-button">
+        <a title="Show menu">
           <i class="fa fa-solid fa-bars"></i>
         </a>
       </li>
     </ul>
   </nav>
 </header>
+
+
+<script>
+let menuButton = document.querySelector("#menu-button a")
+
+menuButton.addEventListener("click", () => {
+  document.querySelector("#navigation").classList.toggle("open")
+})
+</script>
\ No newline at end of file
diff --git a/src/blog/blogs.11tydata.js b/src/blog/blog.11tydata.js
similarity index 100%
rename from src/blog/blogs.11tydata.js
rename to src/blog/blog.11tydata.js
diff --git a/src/blog/blogs.json b/src/blog/blog.json
similarity index 100%
rename from src/blog/blogs.json
rename to src/blog/blog.json
diff --git a/src/css/footer.css b/src/css/footer.css
index edcf5d6..b88157f 100644
--- a/src/css/footer.css
+++ b/src/css/footer.css
@@ -1,4 +1,4 @@
-#main-footer {
+footer {
   background-color: #111111;
   color: #ffffff;
   padding: 0.75rem 1rem 0.75rem 1rem;
diff --git a/src/css/header.css b/src/css/header.css
index 548cdc8..6046619 100644
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -58,7 +58,7 @@
   vertical-align: middle;
 }
 
-#navigation .menu-button {
+#navigation #menu-button {
   display: none;
 }
 
@@ -73,9 +73,9 @@
     display: none;
   }
 
-  #navigation li.menu-button,
-  #navigation li.home-button,
-  #navigation li.contact-button {
+  #navigation li#menu-button,
+  #navigation li#home-nav,
+  #navigation li#contact-nav {
     display: inline-block;
   }
 
diff --git a/src/css/hero.css b/src/css/hero.css
index 6fbaacb..b29e208 100644
--- a/src/css/hero.css
+++ b/src/css/hero.css
@@ -5,7 +5,7 @@
   padding-top: calc(128px + 70px);
   padding-bottom: 128px;
   background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
-    url("/assets/images/hero-image.jpg");
+    url("/assets/images/hero-image_mobile.jpg");
   background-size: cover;
   object-fit: cover;
 }
diff --git a/src/css/sections.css b/src/css/sections.css
index 0daeb7f..b5c16e9 100644
--- a/src/css/sections.css
+++ b/src/css/sections.css
@@ -32,6 +32,7 @@ section:nth-child(even) {
 .section-content div {
   max-width: 50%;
   display: flex;
+  row-gap: 14px;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
@@ -47,15 +48,37 @@ section p {
   margin: 0px;
   line-height: 1.8em;
   font-weight: 600;
-  font-size: 1.2em;
 }
 
 section h1 {
   margin-top: 0px;
+  margin-bottom: 0px;
 }
 
 .section-background {
   background-size: cover;
   object-fit: cover;
   background-position: center;
+  backdrop-filter: blur(3px);
 }
+
+aside {
+  padding: 12px 0px 16px 12px;
+}
+
+aside h1 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+  text-align: center;
+}
+
+@media screen and (max-width: 512px) {
+    /* Make the left-to-right sections top-to-bottom */
+    .section-content div {
+      max-width: 100%;
+    }
+  
+    .section-content {
+      flex-direction: column;
+    }
+}
\ No newline at end of file
diff --git a/src/css/style.css b/src/css/style.css
index 3da4c00..8370456 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,3 +1,4 @@
+@import url("./utilities.css");
 @import url("./fonts.css");
 @import url("./normalize.css");
 @import url("./variables.css");
@@ -8,6 +9,7 @@
 
 html,
 body {
+  color: #ffffff;
   font-family: "Montserrat", sans-serif;
   background-color: rgba(59, 66, 82, 1);
 }
@@ -15,6 +17,7 @@ body {
 /* Button */
 button,
 .button {
+  display: inline-block;
   box-sizing: border-box;
   border: none;
   color: inherit;
@@ -37,6 +40,10 @@ button:focus-visible,
   border: 3px solid rgba(163, 190, 140, 0.3);
 }
 
+.inline-button {
+  color: rgb(51, 100, 224);
+}
+
 a {
   color: inherit;
 }
diff --git a/src/css/utilities.css b/src/css/utilities.css
new file mode 100644
index 0000000..e6a65f6
--- /dev/null
+++ b/src/css/utilities.css
@@ -0,0 +1,22 @@
+:root {
+    --distance-small: 4px;
+    --distance-medium: 8px;
+    --distance-large: 12px;
+    --distance-huge: 16px;
+    --breakpoint: 1024px;
+}
+
+.content-padding {
+    padding: var(--distance-large);
+}
+
+.container {
+    max-width: var(--breakpoint);
+}
+
+.flex {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
\ No newline at end of file
diff --git a/src/examples/examples.json b/src/examples/examples.json
deleted file mode 100644
index 85eaf9a..0000000
--- a/src/examples/examples.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "layout": "post.njk",
-  "title": "Unnamed",
-  "tags": "example",
-  "author": "Luca Junge",
-  "date": "Created"
-}
diff --git a/src/examples/examples.njk b/src/examples/examples.njk
deleted file mode 100644
index 25a0aa6..0000000
--- a/src/examples/examples.njk
+++ /dev/null
@@ -1,23 +0,0 @@
----
-title: Alle Beispiele
-layout: overview.njk
-eleventyExcludeFromCollections: true
----
-
-{%- for post in collections.example -%}
-  <article>
-    <header>
-      <h1>
-        <a href="{{post.url}}">{{post.data.title}}</a>
-      </h1>
-
-      <time>{{post.date | formatDate }}</time>
-    </header>
-
-    <p>{{post.templateContent | createExcerpt}}</p>
-
-    <a class="button" href="{{post.url}}">
-        Weiterlesen
-    </a>
-  </article>
-{%- endfor -%}
diff --git a/src/examples/test-example/index.md b/src/examples/test-example/index.md
deleted file mode 100644
index 682eee4..0000000
--- a/src/examples/test-example/index.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Test Example
----
-
-# Hello World
-
-This is a test
diff --git a/src/index/index.njk b/src/index/index.njk
index fdcca80..b4c4f01 100644
--- a/src/index/index.njk
+++ b/src/index/index.njk
@@ -19,18 +19,18 @@ permalink: /index.html
 </div>
 </section>
 
-<section class="section-background" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./assets/images/GY2YuO3r.jpg');">
+<section class="section-background" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./assets/images/museum_mobile.jpg');">
 <div class="section-content">
   <div>
-    <h1>This is a another section statement</h1>
+    <h1>Interactive Applications & Games</h1>
   </div>
   <div>
-    <p>And a small text that explains this statement further. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore, a qui!</p>
+    <p>I specialize in 3D interactive content on the web. Built with three.js or the Godot Engine.</p>
   </div>
 </div>
 </section>
 
-<section>
+<section class="section-background" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./assets/images/portfolio_mobile.jpg');">
 <div class="section-content">
   <div>
     <h1>My Portfolio</h1>
@@ -41,35 +41,27 @@ permalink: /index.html
 </div>
 </section>
 
-<section>
+<section class="section-background" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./assets/images/workflows_mobile.jpg');">
 <div class="section-content">
   <div>
     <h1>My Workflows</h1>
+    <a class="button" href="/workflows/">Explore</a>
   </div>
   <div>
-    <p>This is currently work in progress.</p>
+    <p>I am using many technologies and devices for my work. Over the years I have developed workflows and techniques to get the most out of my hardware and software.</p>
+    <p>To see how I create my applications and software, see my documented workflows.</p>
   </div>
 </div>
 </section>
 
-<section>
+<section class="section-background" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./assets/images/blog_mobile.jpg');">
 <div class="section-content">
   <div>
     <h1>My Blog</h1>
+    <a class="button" href="/blog/">Visit</a>
   </div>
   <div>
-    <p>This is currently work in progress.</p>
-  </div>
-</div>
-</section>
-
-<section>
-<div class="section-content">
-  <div>
-    <h1>Kontakt</h1>
-  </div>
-  <div>
-    <p>This is currently work in progress.</p>
+    <p>Whenever I see or discover something not easily found online, I'm writing a blog post about it!</p>
   </div>
 </div>
 </section>
diff --git a/src/portfolio/index.njk b/src/portfolio/index.njk
new file mode 100644
index 0000000..410b466
--- /dev/null
+++ b/src/portfolio/index.njk
@@ -0,0 +1,11 @@
+---
+title: "My Portfolio"
+layout: base.njk
+---
+
+<section class="section-background" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/assets/images/under-construction_mobile.jpg');">
+  <div class="section-content">
+    <p>My Portfolio is currently under construction</p>
+  </div>
+
+</section>
diff --git a/src/tutorials/test-tutorial/index.md b/src/tutorials/test-tutorial/index.md
deleted file mode 100644
index 83e5fbe..0000000
--- a/src/tutorials/test-tutorial/index.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Test Tutorial
----
-
-# Hello World
-
-This is a test
diff --git a/src/tutorials/tutorials.json b/src/tutorials/tutorials.json
deleted file mode 100644
index cb7c5e9..0000000
--- a/src/tutorials/tutorials.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "layout": "post.njk",
-  "title": "Unnamed",
-  "tags": "tutorial",
-  "author": "Luca Junge",
-  "date": "Created"
-}
diff --git a/src/tutorials/tutorials.njk b/src/tutorials/tutorials.njk
deleted file mode 100644
index af9ff44..0000000
--- a/src/tutorials/tutorials.njk
+++ /dev/null
@@ -1,23 +0,0 @@
----
-title: Alle Tutorials
-layout: overview.njk
-eleventyExcludeFromCollections: true
----
-
-{%- for post in collections.tutorial -%}
-  <article>
-    <header>
-      <h1>
-        <a href="{{post.url}}">{{post.data.title}}</a>
-      </h1>
-
-      <time>{{post.date | formatDate }}</time>
-    </header>
-
-    <p>{{post.templateContent | createExcerpt}}</p>
-
-    <a class="button" href="{{post.url}}">
-        Weiterlesen
-    </a>
-  </article>
-{%- endfor -%}
diff --git a/src/workflows/index.njk b/src/workflows/index.njk
new file mode 100644
index 0000000..7beaa29
--- /dev/null
+++ b/src/workflows/index.njk
@@ -0,0 +1,11 @@
+---
+title: "My Workflows"
+layout: base.njk
+---
+
+<section class="section-background" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/assets/images/under-construction_mobile.jpg');">
+  <div class="section-content">
+    <p>My Workflows are currently under construction</p>
+  </div>
+
+</section>