homepage content, add images to homepage, RBLicht site tweaks

content/_data/site.js

@@ -1,6 +1,6 @@
 export default function () {
 	return {
-		title: "Rik Berkelder",
+		title: process.env.site === "rblicht" ? "RBLicht" : "Rik Berkelder",
 		url: process.env.site == "rblicht" ? "https://rblicht.nl" : "https://riksolo.com",
 		author: "Rik Berkelder",
 		site: process.env.SITE || 'default'

content/includes/navbar.njk

@@ -14,9 +14,7 @@
 		<div class="nav-links">
 			<div class="d-inline-block">
 				{{navItem("Home", "/")}}
-				{%if site.site != "rblicht" %}
 				{{navItem("Blog", "/blog")}}
-				{%endif%}
 				{{navItem("Portfolio", "/portfolio", false)}}
 			</div>
 			<div class="d-inline-block">

content/pages/index.njk

@@ -1,43 +1,81 @@
 ---
 title: Home
 permalink: "/"
+layout: 'base.njk'
 ---
 
-<h1>Rik Berkelder</h1>
+<div class="container">
-Lighting Designer | Software Engineer | Nerd
+	<h1>Rik Berkelder</h1>
+	Lighting Designer | Software Engineer | Nerd
+</div>
 
-{%if site.site == "rblicht" %}
+<div class="homepage-images">
-<h2>About</h2>
-<p>
-	I am a freelance stage lighting technician, lighting designer, and lighting systems technician with a passion for the
-	intersection of technical precision and creative expression. My journey in lighting began in primary school, driven by
-	a fascination with how light shapes space and mood. Since 2018, I’ve been freelancing alongside a career in software
-	engineering and IT, transitioning to full-time freelance work in 2022.
-</p>
 
-<p>
+	<a href="/portfolio/tivolivredenburg">
-	A perfectionist by nature, I value preparation, attention to detail, and reliability while staying flexible and
+		<img src="/portfolio/tivolivredenburg/001.JPG" width="750" alt="" />
-	collaborative to meet the demands of live production. I strive bring professionalism, technical expertise, and a deep
+	</a>
-	commitment to elevating every production I work on, blending methodical planning with a love for creative
-	problem-solving and thinking on my feet when necessary.
-</p>
-{%endif%}
 
-<h2>Skills</h2>
+	<a href="/portfolio/doornroosje">
-{%include "skills.njk" %}
+		<img src="/portfolio/doornroosje/03.JPG" width="750" alt="" />
+	</a>
 
-<h2>Highlighted Projects/Clients</h2>
+	<a href="/portfolio/sowulo">
-{%include "highlights.njk" %}
+		<img src="/portfolio/sowulo/33.JPG" width="750" alt="" />
+	</a>
+</div>
 
-<h2>Contact</h2>
-{% if site.site != "rblicht" %}mail@riksolo.com / {% endif %}rik@rblicht.nl
 
-<h3>Find me elsewhere</h3>
+<div class="container">
-<ul>
+	<h2>About</h2>
-	{% if site.site != "rblicht" %}
+
-	<li><a href="https://dook.business/@RikSolo">Mastodon</a> <small>(dook.business)</small></li>
+	<p>
-	{%endif%}
+		I am a freelance lighting designer/technician with a passion for the specific intersection of technical challenges
-	<li><a href="https://instagram.com/RikBerkelder">Instagram</a></li>
+		with creative expression. My journey in lighting began in primary school, where I didn't want to perform in the
-	<li><a href="https://github.com/rikberkelder">GitHub</a></li>
+		school play and got put behind
-	<li><a href="https://git.riksolo.com">Gitea</a></li>
+		the technical desk instead. At that point, something clicked in me, and I've been driven to create new experiences
-</ul>
+		for audiences by the spark that was lit that day throughout the rest of my life. I grew to greatly appreciate how
+		light can affect mood and atmosphere, and I've found it fascinating to explore these relationships through technical
+		execution.
+	</p>
+
+	<p>
+		This passion for stagecraft is contrasted by a long-running interest in software engineering. Aside from working in
+		software for a living before transitioning into lighting full-time, I still program for clients on occasion. The
+		software projects I take on now usually involve some blend of art and technology. Such projects have included custom
+		integrations with external tools for live show concepts, automation tools for solo live-streaming and remote
+		production toolings to help enable remotely-produced events during social distancing.
+	</p>
+
+	<p>
+		A perfectionist by nature, I deeply value preparation, attention to detail and reliability without losing sight of
+		the spontaneity brought on by the creative process. While meticulous planning is of great value to any project, I
+		find the most meaningful collaborations exist in the space where a well thought-out plan meets the on-the-spot
+		collaboration that's unique to live productions. I always aim to bring professionalism and technical precision to
+		the table, blending it with a love for creative problem-solving and, in the end, a never-ending drive to make any
+		project the best version of itself it can possibly be.
+	</p>
+
+	<p>
+		I strongly believe that, in this highly specific and inseparable mix of art and technology, a new kind of magic is
+		to be explored.
+	</p>
+
+	<h2>Skills</h2>
+	{%include "skills.njk" %}
+
+	<h2>Highlighted Projects/Clients</h2>
+	{%include "highlights.njk" %}
+
+	<h2>Contact</h2>
+	{% if site.site != "rblicht" %}mail@riksolo.com / {% endif %}rik@rblicht.nl
+
+	<h3>Find me elsewhere</h3>
+	<ul>
+		{% if site.site != "rblicht" %}
+		<li><a href="https://dook.business/@RikSolo">Mastodon</a> <small>(dook.business)</small></li>
+		{%endif%}
+		<li><a href="https://instagram.com/RikBerkelder">Instagram</a></li>
+		<li><a href="https://github.com/rikberkelder">GitHub</a></li>
+		<li><a href="https://git.riksolo.com">Gitea</a></li>
+	</ul>
+</div>

content/style.scss

@@ -30,10 +30,33 @@ body {
 		color: $white-vdark;
 	}
 
+	.homepage-images {
+		display: flex;
+		max-height: 30vh;
+		width: 100%;
+		margin: 1rem 0;
+
+		img {
+			object-fit: cover;
+			height: 100% !important;
+			width: 100% !important;
+		}
+
+
+		@media screen and (max-width:750px) {
+			a:nth-child(3) {
+				display: none;
+			}
+		}
+
+	}
+
 	.container {
 		max-width: 900px;
 		margin-left: auto;
 		margin-right: auto;
+
+		padding: 0 1rem;
 		display: block;
 	}
 
@@ -253,7 +276,7 @@ body {
 	.nav {
 		width: 100%;
 
-		padding-top: 0.2rem;
+		padding-top: 0.6rem;
 		padding-bottom: 0.9em;
 		margin-bottom: 0.6em;
 		border-bottom: 1px $grey-dark solid;