luca/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added basic pwa support and new images

Browse source
This commit is contained in:
Luca 2024-03-29 17:23:07 +01:00
parent d51e47c549
commit ae75a8880a
15 changed files with 166 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
src/_assets/images/hero_image2_mobile.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 266 KiB

BIN
src/_assets/images/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.9 KiB

67
src/_assets/images/logo.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
src/_assets/images/museum2_mobile.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 347 KiB

BIN
src/_assets/images/original/hero_image2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.1 MiB

BIN
src/_assets/images/original/museum2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.9 MiB

1
src/_includes/base.njk
View file

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

47
src/_includes/partials/header.njk
View file

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

23
src/css/header.css
View file

@ -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 {

4
src/css/hero.css
View file

@ -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;
}

2
src/index/index.njk
View file

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

21
src/pwa.webmanifest Normal file
View file

@ -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"
}