portfolio content, styling

content/layouts/base-container.njk

@@ -0,0 +1,6 @@
+---
+layout: base.njk
+---
+<div class="container">
+	{{content | safe}}
+</div>

content/layouts/base.njk

@@ -58,11 +58,11 @@
 						{{navItem("Instagram", "https://instagram.com/RikBerkelder", false)}}
 					</div>
 				</div>
-
 			</div>
-			{{content | safe}}
-
 		</div>
+
+		{{content | safe}}
+
 		<script src="//instant.page/5.2.0" type="module"
 			integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>
 		<script data-goatcounter="https://goatcounter.riksolo.com/count" async

content/layouts/portfolio.njk

@@ -0,0 +1,20 @@
+---
+layout: base.njk
+---
+<div class="portfolio-detail">
+	<div class="portfolio-detail-header container">
+		<h1>{{title}}</h1>
+		<span>{{description}}</span>
+		<a href="/portfolio">&lt;- Back to overview</a>
+		<span>
+			{{content | safe}}
+		</span>
+	</div>
+	<div class="portfolio-detail-images">
+		{% for image in data.images %}
+		<img src="{{image}}" alt="" loading="lazy" />
+		{% endfor %}
+	</div>
+
+
+</div>

content/pages/pages.json

@@ -1,4 +1,4 @@
 {
 	"tags": "page",
-	"layout": "base.njk"
+	"layout": "base-container.njk"
 }

content/pages/portfolio.njk

@@ -3,7 +3,7 @@ title: 'Portfolio'
 permalink: "/portfolio/"
 ---
 <h1>Portfolio</h1>
-{% for portfolioItem in collections.portfolio %}
+{% for portfolioItem in collections.portfolioSorted %}
 <div class="portfolio-list-item">
 	<div class="portfolio-list-item-header">
 		<h2>{{portfolioItem.data.title}}</h2>
@@ -11,9 +11,9 @@ permalink: "/portfolio/"
 		<a href="{{portfolioItem.data.page.url | safe}}">See More -></a>
 	</div>
 	<div class="flex">
-		{% for image in portfolioItem.data.images | slice(3) %}
+		{% for image in portfolioItem.data.images.slice(0,3) %}
 
-		<img src="{{image}}" alt="" />
+		<img src={{image}} alt="" width="400" />
 		{% endfor %}
 	</div>
 </div>

content/portfolio/femina/femina.md

@@ -0,0 +1,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.
+---

content/portfolio/luxorlive/luxorlive.md

@@ -1,4 +1,5 @@
 ---
+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. 
 ---

content/portfolio/portfolio.11tydata.js

@@ -3,12 +3,16 @@ import * as fs from 'node:fs';
 
 const conf = {
 	tags: "portfolio",
-	layout: "base.njk",
+	layout: "portfolio.njk",
 	eleventyComputed: {
 		images(data) {
 			const dir = path.dirname(data.page.inputPath);
 
-			const images = fs.readdirSync(dir).filter(file => ['.png', '.jpg', '.jpeg', '.JPG'].includes(path.extname(file).toLowerCase())).map(image => `${data.page.url}${image}`);
+			const images = fs.readdirSync(dir)
+				.filter(file => ['.png', '.jpg', '.jpeg', '.JPG'].includes(path.extname(file)))
+				.sort()
+				.map(image => `${data.page.url}${image}`);
+			console.log(images);
 
 			return images;
 		},

content/portfolio/prijsvdvrijheid/prijsvdvrijheid.md

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

content/portfolio/sowulo/sowulo.md

@@ -1,4 +1,5 @@
 ---
+order: 1
 title: Sowulo 
-description: Designing a theatrical, atmospheric and detailed show while efficiently adapting to both venues of varying sizes and large festivals with very short on-site preparation times
+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.
 ---

content/portfolio/tinderella/tinderella.md

@@ -0,0 +1,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
+---

content/portfolio/tivolivredenburg/tivolivredenburg.md

@@ -0,0 +1,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.
+---

content/portfolio/willemeen/willemeen.md

@@ -0,0 +1,5 @@
+---
+order: 7
+title: Willemeen
+description: Small venue, big looks.
+---

content/style.scss

@@ -22,116 +22,167 @@ body {
 	background-color: $grey-vdark;
 	font-family: $default-font-family;
 	line-height: 1.3rem;
-
+	margin: 0;
-
+	margin-top: 0.2rem;
 
 	.container {
 		max-width: 900px;
 		margin-left: auto;
 		margin-right: auto;
 		display: block;
+	}
 
-		.blog {
+	.blog {
-			max-width: 700px;
+		max-width: 700px;
-			margin-left: auto;
+		margin-left: auto;
-			margin-right: auto;
+		margin-right: auto;
 
-			&-header {
+		&-header {
-				&>* {
+			&>* {
-					display: block;
+				display: block;
-				}
-
-				a,
-				a:visited {
-					color: $primary;
-				}
-
-				small {
-					margin-top: 0.1em;
-					margin-bottom: 0.4em;
-				}
 			}
 
-			&-content {
+			a,
-				border-top: 1px solid $grey-medium;
+			a:visited {
-				margin-top: 1em;
+				color: $primary;
 			}
 
-		}
+			small {
-
+				margin-top: 0.1em;
-		.portfolio-list-item {
+				margin-bottom: 0.4em;
-			padding: 0.5rem;
-			background-color: $grey-dark;
-			margin-top: 1rem;
-
-			.flex {
-				flex-wrap: nowrap;
-				align-items: center;
-
-				picture {
-					display: block;
-					height: 15rem;
-
-					img {
-						height: 100%;
-						max-height: 100%;
-						min-width: 100%;
-						object-fit: cover;
-					}
-				}
-			}
-
-			&-header {
-				margin-bottom: 0.3rem;
-
-				& * {
-					display: inline;
-					margin: 0;
-					padding: 0;
-
-					margin-right: 0.2rem;
-				}
-
-				a {
-					margin-left: auto;
-					float: right;
-				}
 			}
 		}
 
-		ol:not(ol *, ul *),
+		&-content {
-		ul:not(ol *, ul *) {
+			border-top: 1px solid $grey-medium;
-			margin-left: 0rem;
+			margin-top: 1em;
-			margin-top: 0rem;
-			margin-bottom: 1rem;
-			padding-left: 1.5rem;
-			margin-right: 2rem;
-			list-style-position: outside;
-		}
-
-		ol ol,
-		ol ul,
-		ul ol,
-		ul ul {
-			padding-left: 1rem;
-		}
-
-		ol p,
-		ul p {
-			margin: 0.3rem 0rem;
-			display: inline;
-		}
-
-		ol {
-			list-style-type: decimal;
-		}
-
-		ul {
-			list-style-type: "- ";
 		}
 
 	}
 
+	.portfolio-list-item {
+		padding: 0.5rem;
+		background-color: $grey-dark;
+		margin-top: 1rem;
+
+		.flex {
+			flex-wrap: nowrap;
+			align-items: center;
+			width: 100%;
+
+			@media (max-width: 500px) {
+				flex-wrap: wrap !important;
+			}
+
+			picture {
+				display: block;
+				height: 15rem;
+				flex-grow: 1;
+
+				img {
+					height: 100%;
+					max-height: 100%;
+					min-width: 100%;
+					object-fit: cover;
+				}
+			}
+		}
+
+		&-header {
+			display: block;
+			width: 100%;
+			margin-bottom: 0.3rem;
+
+			& * {
+				display: inline;
+				margin: 0;
+				padding: 0;
+
+				margin-right: 0.2rem;
+			}
+
+			a {
+				margin-left: auto;
+				float: right;
+			}
+		}
+	}
+
+	.portfolio-detail {
+		width: 100vw;
+
+		&-header {
+			text-align: justify;
+
+			&>* {
+				display: block;
+			}
+		}
+
+		&-images {
+			display: flex;
+			flex-wrap: wrap;
+			margin-top: 1rem;
+
+			picture {
+				display: block;
+				height: 22vw;
+				flex-grow: 1;
+				max-width: 33.33%;
+
+				@media screen and (max-width: 1250px) {
+					height: 30vw;
+					max-width: 50%;
+				}
+
+				@media screen and (max-width: 750px) {
+					max-width: 100%;
+					height: 100%;
+				}
+
+				img {
+					max-height: 100%;
+					height: 100% !important;
+					min-width: 100%;
+					object-fit: cover;
+				}
+			}
+		}
+	}
+
+
+	ol:not(ol *, ul *),
+	ul:not(ol *, ul *) {
+		margin-left: 0rem;
+		margin-top: 0rem;
+		margin-bottom: 1rem;
+		padding-left: 1.5rem;
+		margin-right: 2rem;
+		list-style-position: outside;
+	}
+
+	ol ol,
+	ol ul,
+	ul ol,
+	ul ul {
+		padding-left: 1rem;
+	}
+
+	ol p,
+	ul p {
+		margin: 0.3rem 0rem;
+		display: inline;
+	}
+
+	ol {
+		list-style-type: decimal;
+	}
+
+	ul {
+		list-style-type: "- ";
+	}
+
+
 	figure {
 		background-color: $grey-dark;
 		display: inline-block;
@@ -234,18 +285,18 @@ body {
 		padding: 0.1rem 0.4rem;
 		display: inline-block;
 	}
-}
 
-.d-inline-block {
+	.d-inline-block {
-	display: inline-block;
+		display: inline-block;
-}
+	}
 
-img {
+	img {
-	max-width: 100%;
+		max-width: 100%;
 
 
-	&[width][height] {
+		&[width][height] {
-		height: auto;
+			height: auto;
+		}
 	}
 }
 

eleventy.config.js

@@ -29,11 +29,13 @@ export default async function (eleventyConfig) {
 	});
 
 	//Images
-	eleventyConfig.addPlugin(eleventyImageTransformPlugin);
+	eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
-	eleventyConfig.addShortcode("figure", (url, alt, caption) => {
+		widths: ["700"]
+	});
+	eleventyConfig.addShortcode("figure", (url, alt, caption, width) => {
 		return `
 		<figure>
-			<img src="${url}" alt="${alt}" />
+			<img src="${url}" alt="${alt}" width="${width || "700"}" />
 			<figcaption>${caption}</figcaption>
 		</figure>
 		`;
@@ -52,6 +54,14 @@ export default async function (eleventyConfig) {
 
 	//File passthrough
 	eleventyConfig.addPassthroughCopy("content/robots.txt");
+
+	// Portfolio sort
+	eleventyConfig.addCollection("portfolioSorted", (collectionsAPi) => {
+		const portfolio = collectionsAPi.getFilteredByTag("portfolio");
+		const sorted = portfolio.sort((a, b) => a.data.order - b.data.order);
+		return sorted;
+	});
+
 }
 
 export const config = {