added basic pwa support and new images

.eleventy.js

@@ -5,8 +5,9 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPlugin(syntaxHighlight)
 
   //eleventyConfig.addPassthroughCopy("css")
-  eleventyConfig.addPassthroughCopy("src/**/*.png")
+  //eleventyConfig.addPassthroughCopy("src/_assets/*.png")
-  eleventyConfig.addPassthroughCopy("src/**/*.jpg")
+  //eleventyConfig.addPassthroughCopy("src/_assets/*.jpg")
+  eleventyConfig.addPassthroughCopy("src/pwa.webmanifest")
   eleventyConfig.addPassthroughCopy("src/css/*.css")
   eleventyConfig.addPassthroughCopy("src/libs/**/*.js")
   eleventyConfig.addPassthroughCopy({ "src/_assets/": "assets" })

compress_images.sh

@@ -1,8 +1,9 @@
 #!/bin/bash
+set -euo pipefail
 
 # Call this from the repo folder
 
-for image in src/_assets/images/original/*.jpg; do
+for image in src/_assets/images/original/*.{jpg,png}; do
     #echo "Converting $image ..."
     
     filename=$(basename -- "$image")
@@ -13,9 +14,9 @@ for image in src/_assets/images/original/*.jpg; do
     # filename = "workflows"
     imagefilename="${filename%.*}"
 
-    # extension = "jpg"
+    # extension = "jpg" or "png"
     imageextension="${filename##*.}"
 
     echo "${imagefolder}${imagefilename}_mobile.${imageextension}"
-    convert "$image" -resize 1500 -strip -quality 85 "${imagefolder}${imagefilename}_mobile.${imageextension}"
+    convert "$image" -resize 1500 -strip -quality 85 "${imagefolder}${imagefilename}_mobile.jpg"
 done

package.json

@@ -8,7 +8,7 @@
     "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": "rsync -av build/* server:/tmp/build/ && ssh server 'sudo cp -r /tmp/build/* ~/www/luca-junge.de/'"
   },
   "keywords": [],
   "author": "Luca Junge",

src/_assets/images/logo.svg

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="512"
+   height="512"
+   viewBox="0 0 135.46667 135.46667"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+   sodipodi:docname="logo.svg"
+   inkscape:export-filename="logo.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:showpageshadow="false"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="px"
+     labelstyle="below"
+     inkscape:clip-to-page="false"
+     shape-rendering="auto"
+     inkscape:zoom="0.72070006"
+     inkscape:cx="502.98317"
+     inkscape:cy="292.07712"
+     inkscape:window-width="1920"
+     inkscape:window-height="1007"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="display:inline;fill:#4c0026;fill-opacity:1;stroke:#000000;stroke-width:0.264583"
+       id="rect1"
+       width="135.46666"
+       height="135.46666"
+       x="0"
+       y="0"
+       sodipodi:insensitive="true" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:77.7073px;font-family:FreeSans;-inkscape-font-specification:'FreeSans Semi-Bold';fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.809447"
+       x="21.458639"
+       y="95.164017"
+       id="text905"><tspan
+         sodipodi:role="line"
+         id="tspan905"
+         style="stroke-width:0.809447"
+         x="21.458639"
+         y="95.164017">LJ</tspan></text>
+  </g>
+</svg>

src/_includes/base.njk

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="/css/style.css">
     <link rel="stylesheet" href="/assets/fontawesome/css/all.css">
+    <link rel="manifest" href="/pwa.webmanifest" />
     <title>{{ title }}</title>
   </head>
   <body>

src/_includes/partials/header.njk

@@ -7,7 +7,7 @@
         </a>
       </li>
       <li id="portfolio-nav">
-        <a href="/portfolio/" title="My Portfolio">Portfolio</a>
+        <a href="/portfolio/" title="Portfolio">Portfolio</a>
       </li>
       <li id="workflows-nav">
         <a href="/workflows/" title="Workflows">Workflows</a>
@@ -18,13 +18,18 @@
       <li id="contact-nav">
         <a href="/contact/" title="Contact">Kontakt</a>
       </li>
+      <li id="install-button">
+        <a title="Install this website as a PWA">
+          <i class="fa-solid fa-download"></i><span style="padding-left: 10px">Installieren</span>
+        </a>
+      </li>
       <li id="github-nav">
         <a href="https://github.com/LucaJunge" title="GitHub profile">
           <i class="fa-brands fa-github"></i>
         </a>
       </li>
       <li id="menu-button">
-        <a title="Show menu">
+        <a title="Show or hide menu">
           <i class="fa fa-solid fa-bars"></i>
         </a>
       </li>
@@ -35,8 +40,44 @@
 
 <script>
 let menuButton = document.querySelector("#menu-button a")
+let icon = document.querySelector("#menu-button a i")
 
 menuButton.addEventListener("click", () => {
-  document.querySelector("#navigation").classList.toggle("open")
+  let isOpen = document.querySelector("#navigation").classList.toggle("open")
+
+  if(isOpen) {
+    icon.classList.remove("fa-bars")
+    icon.classList.add("fa-chevron-up") // or "chevron-up"
+  } else {
+    icon.classList.remove("fa-chevron-up")
+    icon.classList.add("fa-bars")
+  }
+})
+
+// PWA Installation Prompting
+let installPrompt = null
+const installButton = document.querySelector("#install-button")
+
+window.addEventListener("beforeinstallprompt", (event) => {
+  event.preventDefault() // prevent browser from showing its own install UI
+  installPrompt = event
+  installButton.style.display = "initial";
+})
+
+// Add our own install logic
+installButton.addEventListener("click", async() => {
+  if(!installPrompt) {
+    return
+  }
+
+  const result = await installPrompt.prompt()
+  installPrompt = null
+  installButton.style.display = "none"
+})
+
+// if the app is installed (already), hide the install button
+window.addEventListener("appinstalled", () => {
+  installPrompt = null
+  installButton.style.display = "none"
 })
 </script>

src/css/header.css

@@ -6,7 +6,7 @@
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
   margin-bottom: -70px;
-  outline: 1px solid rgba(0, 0, 0, 0.5);
+  outline: 1px solid rgba(0, 0, 0, 0.6);
 }
 
 #navigation a {
@@ -62,6 +62,13 @@
   display: none;
 }
 
+#navigation #install-button {
+  display: none;
+  background: linear-gradient(to right, #ad5389, #3c1053);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
 /* Breakpoints */
 
 @media (max-width: 512px) {
@@ -85,8 +92,20 @@
     display: none;
   }*/
 
+  /* This should always be the same header image as the hero element */
   #navigation.open {
-    background-color: rgba(59, 66, 82, 1);
+    padding: 0px;
+    /*background-color: rgba(59, 66, 82, 1);*/
+    background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
+    url("/assets/images/hero_image2_mobile.jpg");
+    background-position: top left;
+    background-size: cover;
+    object-fit: cover;
+  }
+
+  #navigation.open nav ul {
+    padding: 12px;
+    backdrop-filter: blur(4px);
   }
 
   #navigation.open ul {

src/css/hero.css

@@ -5,7 +5,9 @@
   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_mobile.jpg");
+    url("/assets/images/hero_image2_mobile.jpg");
   background-size: cover;
   object-fit: cover;
+  background-position: top left;
+
 }

src/index/index.njk

@@ -19,7 +19,7 @@ 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/museum_mobile.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/museum2_mobile.jpg');">
 <div class="section-content">
   <div>
     <h1>Interactive Applications & Games</h1>

src/pwa.webmanifest

@@ -0,0 +1,21 @@
+{
+    "name": "Luca Junge PWA",
+    "short_name": "Luca Junge PWA",
+    "description": "The website of Luca Junge as a Progressive Web App",
+    "icons": [
+        {
+            "src": "/assets/images/logo.png",
+            "sizes": "32x32",
+            "type": "image/png"
+        },
+        {
+            "src": "/assets/images/logo.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "start_url": "/",
+    "display": "standalone",
+    "theme_color": "#4C0026",
+    "background_color": "#4C0026"
+}