add dates to portfolio, add some content, add lightbox for portfolio images

content/layouts/base.njk

@@ -14,6 +14,7 @@
 		<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
 		<link rel="stylesheet" type="text/css" href="/style.css" />
 		<link href="https://unpkg.com/prism-themes@1.9.0/themes/prism-nord.css" rel="stylesheet" />
+		<link rel="stylesheet" href="https://unpkg.com/simplelightbox@2.14.3/dist/simple-lightbox.min.css" />
 
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -67,6 +68,13 @@
 			integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>
 		<script data-goatcounter="https://goatcounter.riksolo.com/count" async
 			src="//goatcounter.riksolo.com/count.js"></script>
+		<script src="//unpkg.com/simplelightbox@2.14.3/dist/simple-lightbox.min.js"></script>
+		<script>
+			new SimpleLightbox('.gallery a', {
+				widthRatio: 0.9,
+				heightRatio: 0.95,
+			});
+		</script>
 	</body>
 
 </html>

content/layouts/portfolio.njk

@@ -10,9 +10,9 @@ layout: base.njk
 			{{content | safe}}
 		</span>
 	</div>
-	<div class="portfolio-detail-images">
+	<div class="portfolio-detail-images gallery">
 		{% for image in data.images %}
-		<img src="{{image}}" alt="" loading="lazy" />
+		<a href="{% imageUrl image %}"><img src="{{image}}" alt="" loading="lazy" /></a>
 		{% endfor %}
 	</div>
 

content/pages/portfolio.njk

@@ -7,6 +7,7 @@ permalink: "/portfolio/"
 <div class="portfolio-list-item">
 	<div class="portfolio-list-item-header">
 		<h2>{{portfolioItem.data.title}}</h2>
+		<small class="col-white-vdark">({{portfolioItem.data.timeframe}})</small>
 		- {{portfolioItem.data.description}}
 		<a href="{{portfolioItem.data.page.url | safe}}">See More -></a>
 	</div>

content/portfolio/femina/femina.md

@@ -2,4 +2,5 @@
 order: 4
 title: ISZA - Femina
 description: Adapting abstract ideas from the artist into an impactful one-off festival show, with limited preparation time and a short timeframe on location.
+timeframe: oct 2024
 ---

content/portfolio/luxorlive/luxorlive.md

@@ -2,6 +2,7 @@
 order: 2
 title: Luxor Live
 description: Delivering dynamic, on-the-spot lighting for visiting acts without their own lighting designer, and ensuring a smooth experience with the house rig for visiting technicians. 
+timeframe: 2022 - now
 ---
 
 ## Notable shows

content/portfolio/musis/musis.md

@@ -0,0 +1,6 @@
+---
+order: 7
+title: Musis Arnhem
+description: Clear and readable technical documentation for national and international visiting tours. Lighting design and operation for acts touring without lighting.
+timeframe: 2022 - now
+---

content/portfolio/prijsvdvrijheid/prijsvdvrijheid.md

@@ -2,4 +2,5 @@
 order: 5
 title: "Prijs v.d. Vrijheid"
 description: Emotive lighting design with tight limitations for a musical performed on location in a church.
+timeframe: oct 2024
 ---

content/portfolio/sowulo/sowulo.md

@@ -2,6 +2,7 @@
 order: 1
 title: Sowulo 
 description: Designing a theatrical, atmospheric and detailed show while and bringing it to a variety venues and festivals of varying sizes with very short on-site preparation times.
+timeframe: 2023 - now
 ---
 
 ## Notable shows

content/portfolio/tinderella/tinderella.md

@@ -2,4 +2,5 @@
 order: 6
 title: Tinderella
 description: Minimal but gripping lighting for a deeply personal solo theatre show. Delimiting scenes and building atmosphere without distracting from the content
+timeframe: 2023 - 2024
 ---

content/portfolio/tivolivredenburg/tivolivredenburg.md

@@ -2,4 +2,5 @@
 order: 3
 title: TivoliVredenburg
 description: Creative and fitting lighting for a wide variety of productions. From sales to classical to jazz to metal, across 5 stages in the venue.
+timeframe: 2023 - now
 ---

content/portfolio/willemeen/willemeen.md

@@ -2,4 +2,5 @@
 order: 7
 title: Willemeen
 description: Small venue, big looks.
+timeframe: 2024 - now
 ---

content/style.scss

@@ -6,6 +6,7 @@ $grey-medium: color.adjust($grey-vdark, $lightness: 15%);
 $grey-light: #4c566a;
 $white-dark: #d8dee9;
 $white-light: #eceff4;
+$white-vdark: color.adjust($white-light, $lightness: -15%);
 $blue: #88c0d0;
 $blue-med: #81a1c1;
 $blue-dark: #5e81ac;
@@ -25,6 +26,10 @@ body {
 	margin: 0;
 	margin-top: 0.2rem;
 
+	.col-white-vdark {
+		color: $white-vdark;
+	}
+
 	.container {
 		max-width: 900px;
 		margin-left: auto;
@@ -124,7 +129,7 @@ body {
 			flex-wrap: wrap;
 			margin-top: 1rem;
 
-			picture {
+			a {
 				display: block;
 				height: 22vw;
 				flex-grow: 1;
@@ -322,4 +327,12 @@ body {
 	display: flex;
 	flex-shrink: 0;
 	flex-wrap: wrap;
+}
+
+.sl-overlay {
+	background: $grey-vdark !important;
+}
+
+.sl-wrapper button {
+	color: $text-default !important;
 }

eleventy.config.js

@@ -1,5 +1,5 @@
 import * as sass from "sass";
-import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
+import Image, { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
 import { DateTime } from "luxon";
 import markdownit from "markdown-it";
 import syntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight';
@@ -41,6 +41,15 @@ export default async function (eleventyConfig) {
 		`;
 	});
 
+	eleventyConfig.addShortcode("imageUrl", async (image, width) => {
+		const img = await Image(`./content${image}`, {
+			outputDir: 'dist/img/',
+			useCache: true
+		});
+
+		return img.jpeg[0].url;
+	});
+
 	//Markdown
 	const md = markdownit({
 		html: true,