init portfolio

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

content/pages/portfolio.njk

@@ -0,0 +1,19 @@
+---
+title: 'Portfolio'
+permalink: "/portfolio/"
+---
+<h1>Portfolio</h1>
+{% for portfolioItem in collections.portfolio %}
+<div class="portfolio-list-item">
+	<div class="portfolio-list-item-header">
+		<h2>{{portfolioItem.data.title}}</h2>
+		- {{portfolioItem.data.description}}
+	</div>
+	<div class="flex">
+		{% for image in portfolioItem.data.images | slice(3) %}
+
+		<img src="{{image}}" alt="" />
+		{% endfor %}
+	</div>
+</div>
+{% endfor %}

content/portfolio/luxorlive/luxorlive.md

@@ -0,0 +1,6 @@
+---
+title: Luxor Live
+description: Delivering dynamic, on-the-spot lighting solutions for visiting acts without their own lighting designer, and ensuring a smooth experience for touring LD's
+---
+
+

content/portfolio/portfolio.11tydata.js

@@ -0,0 +1,19 @@
+import * as path from 'node:path';
+import * as fs from 'node:fs';
+
+const conf = {
+	tags: "portfolio",
+	layout: "base.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}`);
+
+			return images;
+		},
+		data(data) { return data; }
+	}
+};
+
+export default conf;

content/portfolio/sowulo/sowulo.md

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

content/style.scss

@@ -59,6 +59,42 @@ body {
 
 		}
 
+		.portfolio-list-item {
+			padding: 0.5rem;
+			background-color: $grey-dark;
+			margin-top: 1rem;
+
+			.flex {
+				flex-wrap: wrap;
+				align-items: center;
+
+				picture {
+					max-width: 33%;
+					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;
+				}
+			}
+		}
+
 		ol:not(ol *, ul *),
 		ul:not(ol *, ul *) {
 			margin-left: 0rem;

package.json

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