Add profile pic

layouts/partials/about-me.html

@@ -1,4 +1,5 @@
 <div class="h-card vcard">
+  <img class="profile u-photo " src="profile-512.jpg" />
   Hello! I'm <em class="u-uid p-name fn always-accented">JP Hastings-Spital</em>, a <span class="p-category category">maker</span>, <span class="p-category category">software engineer</span>, <span class="p-category category">swing dancer</span>, and all-round <span class="p-category category">miriscient chap</span> living in <span class="adr p-adr h-adr"><span class="p-locality locality">London</span>, <span class="p-country-name country-name">UK</span></span>. I'm a <span>principal engineer</a> at <a href="https://deliveroo.engineering/" target="_blank" class="h-card u-url" rel="noopener">Deliveroo</a>.
 </div>
 

layouts/partials/welcome.md

@@ -1 +1 @@
-I [write](./posts) on this site infrequently about things I've created or care about. You're welcome to write to me if you'd like, read my [standing invitation](./standing-invitation) for more information.
+I [post](./posts) on this site infrequently about things I've created or care about. You're welcome to write to me if you'd like, read my [standing invitation](./standing-invitation) for more information.

themes/hello-friend-ng/assets/scss/_main.scss

@@ -137,6 +137,21 @@ main p a, main li a, nav a, .social a, section a, .accented {
   transition-timing-function: ease-in;
 }
 
+img.profile {
+  float: left;
+  height: 3em;
+  border-radius: 1em;
+
+  filter: grayscale(1);
+  transition-property: color, filter;
+  transition-duration: .2s;
+  transition-timing-function: ease-in;
+
+  &:hover {
+    filter: none;
+  }
+}
+
 img, postcard-display {
   display: block;
   max-width: 100%;