Add my dumb face

src/_layouts/page.njk

@@ -4,14 +4,23 @@ layout: global.njk
 
 <article class="marius-section">
   <header class="container flow marius-section">
+    {% if introHalfBleed %}
+      <div class="half-bleed flow">
+    {% endif %}
+
     {% if headline %}
       <h1>{{ headline }}</h1>
     {% elseif title %}
       <h1>{{title}}</h1>
     {% endif %}
+
     {% if intro %}
       {{ intro | safe }}
     {% endif %}
+
+    {% if introHalfBleed %}
+      </div>
+    {% endif %}
   </header>
 
   <div class="container flow">

src/_styles/global.css

@@ -136,6 +136,13 @@ nav ul li {
   grid-column: 3;
 }
 
+.image-inline {
+  margin-inline: auto;
+  margin-block-end: var(--space-m);
+  width: 100%;
+  max-width: 20em;
+}
+
 .container__full-bleed,
 .container > pre,
 .container > .marius::after {
@@ -146,4 +153,11 @@ nav ul li {
   .half-bleed {
     grid-column: 2 / -2;
   }
-}
+
+  .image-inline {
+    float: left;
+    max-width: 25%;
+    margin-inline-end: var(--space-s-m);
+    margin-block-end: 0;
+  }
+}

src/index.njk

@@ -2,8 +2,10 @@
 headline: Hi there! I'm Alex.
 title: Home
 layout: page.njk
+introHalfBleed: true
 eleventyComputed:
   intro:
+    <img src="/assets/images/face.jpg" class="image-inline" alt="A photo of me, cropped at just below the shoulders. I have shoulder-length, wavy, blond hair, blue eyes, and wearing black, rounded rectangular glasses." />
     <p>I'm an independent web development contractor based in London with ten years of experience. I develop fast, accessible, and beautiful websites and web apps.</p>
     {% if global.availability %}
     <p><strong>I have availability for new projects {{ global.availabilityDate }}</strong>, either remotely or on-site in London.</p>
@@ -27,4 +29,4 @@ eleventyComputed:
   {% endfor %}
 
   <p><a href="/blog">View older blog posts</a></p>
-</section>
+</section>