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>
+		</div>
+
 		{{content | safe}}
 
-		</div>
 		<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,14 +22,15 @@ 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 {
 		max-width: 700px;
@@ -67,10 +68,16 @@ body {
 		.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%;
@@ -82,6 +89,8 @@ body {
 		}
 
 		&-header {
+			display: block;
+			width: 100%;
 			margin-bottom: 0.3rem;
 
 			& * {
@@ -99,6 +108,49 @@ body {
 		}
 	}
 
+	.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;
@@ -130,7 +182,6 @@ body {
 		list-style-type: "- ";
 	}
 
-	}
 
 	figure {
 		background-color: $grey-dark;
@@ -234,19 +285,19 @@ body {
 		padding: 0.1rem 0.4rem;
 		display: inline-block;
 	}
-}
 
-.d-inline-block {
+	.d-inline-block {
 		display: inline-block;
-}
+	}
 
-img {
+	img {
 		max-width: 100%;
 
 
 		&[width][height] {
 			height: auto;
 		}
+	}
 }
 
 .flex {

eleventy.config.js

@@ -29,11 +29,13 @@ export default async function (eleventyConfig) {
 	});
 
 	//Images
-	eleventyConfig.addPlugin(eleventyImageTransformPlugin);
-	eleventyConfig.addShortcode("figure", (url, alt, caption) => {
+	eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
+		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 = {