portfolio content, styling

.gitattributes

@@ -0,0 +1,4 @@
+*.PNG filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.JPG filter=lfs diff=lfs merge=lfs -text

content/layouts/base-container.njk

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

content/layouts/base.njk

@@ -49,7 +49,8 @@
 				<div class="nav-links">
 					<div class="d-inline-block">
 						{{navItem("Home", "/")}}
-						{{navItem("Blog", "/blog", false)}}
+						{{navItem("Blog", "/blog")}}
+						{{navItem("Portfolio", "/portfolio", false)}}
 					</div>
 					<div class="d-inline-block">
 						<span> | </span>
@@ -57,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

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

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

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

content/portfolio/portfolio.11tydata.js

@@ -0,0 +1,23 @@
+import * as path from 'node:path';
+import * as fs from 'node:fs';
+
+const conf = {
+	tags: "portfolio",
+	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)))
+				.sort()
+				.map(image => `${data.page.url}${image}`);
+			console.log(images);
+
+			return images;
+		},
+		data(data) { return data; },
+	}
+};
+
+export default conf;

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

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

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,76 +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 {
-			max-width: 700px;
-			margin-left: auto;
-			margin-right: auto;
+	.blog {
+		max-width: 700px;
+		margin-left: auto;
+		margin-right: auto;
 
-			&-header {
-				&>* {
-					display: block;
-				}
-
-				a,
-				a:visited {
-					color: $primary;
-				}
-
-				small {
-					margin-top: 0.1em;
-					margin-bottom: 0.4em;
-				}
+		&-header {
+			&>* {
+				display: block;
 			}
 
-			&-content {
-				border-top: 1px solid $grey-medium;
-				margin-top: 1em;
+			a,
+			a:visited {
+				color: $primary;
 			}
 
+			small {
+				margin-top: 0.1em;
+				margin-bottom: 0.4em;
+			}
 		}
 
-		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: "- ";
+		&-content {
+			border-top: 1px solid $grey-medium;
+			margin-top: 1em;
 		}
 
 	}
 
+	.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;
@@ -194,18 +285,18 @@ body {
 		padding: 0.1rem 0.4rem;
 		display: inline-block;
 	}
-}
 
-.d-inline-block {
-	display: inline-block;
-}
+	.d-inline-block {
+		display: inline-block;
+	}
 
-img {
-	max-width: 100%;
+	img {
+		max-width: 100%;
 
 
-	&[width][height] {
-		height: auto;
+		&[width][height] {
+			height: auto;
+		}
 	}
 }
 

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

package.json

@@ -19,4 +19,4 @@
     "luxon": "^3.5.0",
     "sass": "^1.83.4"
   }
-}
+}