Several updates

Signed-off-by: Marcus Noble <github@marcusnoble.co.uk>

data.yaml

@@ -1,5 +1,6 @@
 intro: |
-  I'm a <strong>platform engineer</strong> working at <a href="https://giantswarm.io">Giant Swarm</a> working on building managed Kubernetes solutions and related projects. My area of focus in recent years has been around Go, ⎈ Kubernetes, containers and DevOps but originally started out as a <em>web developer</em> and <em>JavaScript enthusiast</em>. I'm a “tinkerer” and like to dabble with 3D printing and experimenting with smart home tech.
+  I'm a <strong>platform engineer</strong> working at <a href="https://giantswarm.io">Giant Swarm</a> working on building managed Kubernetes solutions and related projects. My area of focus in recent years has been around Go, ⎈ Kubernetes, containers and DevOps but originally started out as a <em>web developer</em> and <em>JavaScript enthusiast</em>. I'm a “tinkerer” and like to dabble with 3D printing and experimenting with smart home tech.<br/><br/>
+  I'm always happy to chat so feel free to drop me an email at <span><svg viewBox="0 0 64 50" height="32" style="fill:#ededed"><path d="m64 39.7-4-22.4c-.4-2-2.4-3.5-4.5-3l-31.7 5.5a4 4 0 0 0-3.2 4.1l4 22.8a3.8 3.8 0 0 0 4.5 3l31.7-5.5a3.8 3.8 0 0 0 3.1-4.5zm-2.7-3.6-10.7-8.2 7.7-8.6 3 16.8zM24 21.8l32-5.6h.3a2 2 0 0 1 1.5.7c-1 1.1-9.4 10.8-13.4 14.6-1 1-2.6 1.3-4 .6l-17.7-8.7a1.8 1.8 0 0 1 1.5-1.6zm-1.1 4 10.5 5.3L26 42.8l-3-17zm38.7 15.7c-.3.4-.7.6-1.2.7l-31.8 5.6a1.9 1.9 0 0 1-2.1-1.5l-.1-.6 8.8-13.8 4.2 2a5.6 5.6 0 0 0 6.1-1c1-.9 2.3-2.1 3.6-3.6L61.8 39l.2 1c0 .6 0 1-.3 1.5zM19 29.9a1 1 0 0 0-1.2-.8l-17 3a1 1 0 1 0 .4 2l17-3c.5-.2.9-.7.8-1.2zm1 5.8a1 1 0 0 0-1.1-.9L8.7 36.6a1 1 0 1 0 .3 2l10.2-1.8c.6 0 1-.6.8-1.1zm-.1 4.9L13 41.8a1 1 0 1 0 .3 2l6.8-1.2a1 1 0 1 0-.3-2z"></path></svg> <a href="mailto:hello@marcusnoble.co.uk">hello@marcusnoble.co.uk</a></span>, or using any of the other social links below.
 social:
   - url: https://marcusnoble.co.uk
     title: My articles on my Blog
@@ -8,6 +9,11 @@ social:
         <style>.st0{fill:#fff}.st1{fill:#ededed}.st4{fill:#333}.st8{fill:#f96363}.st9{fill:#fdd267}</style><path class="st0" d="M508 82.9v394.2c0 17-13.8 30.9-30.8 30.9H34.8C17.8 508 4 494.2 4 477.1V82.9h504z"/><path class="st1" d="M508 82.9v394.2c0 17-13.8 30.9-30.8 30.9h-28.6a31 31 0 0 0 30.9-30.9V82.9H508z"/><path d="M508 82.9v-48c0-17-13.8-30.8-30.8-30.8H34.9A30.7 30.7 0 0 0 4 34.9v48h504z" fill="#d3d9d9"/><path class="st1" d="M63.5 4c-17 0-30.9 13.8-30.9 30.8v48.1H4V34.8C4 17.8 17.8 4 34.8 4h28.7z"/><path d="M508 34.8v48.1h-28.6V34.8c0-17-13.8-30.8-30.9-30.8h28.7c17 0 30.8 13.8 30.8 30.8z" fill="#a8b2b4"/><path class="st4" d="M512 34.8A34.8 34.8 0 0 0 477.2 0H34.9A34.8 34.8 0 0 0 0 34.8v442.3A35 35 0 0 0 34.8 512h442.3a34.8 34.8 0 0 0 34.8-34.9l.1-442.3zm-504 0A26.9 26.9 0 0 1 34.9 8h442.3C492 8 504 20 504 34.8v44H8v-44zm496 442.3c0 14.8-12 26.9-26.8 26.9H34.8A26.9 26.9 0 0 1 8 477.1V86.9h496v390.2z"/><circle cx="50.6" cy="43.5" r="14" fill="#fc8a8a"/><circle cx="100.5" cy="43.5" r="14" fill="#fedd8e"/><circle cx="150.3" cy="43.5" r="14" fill="#7bde9e"/><path class="st8" d="M64.6 43.4a14 14 0 0 1-27.2 4.7 14 14 0 0 0 18-18c5.3 2.2 9.2 7.3 9.2 13.3z"/><path class="st9" d="M114.4 43.4a14 14 0 0 1-27.2 4.7 14 14 0 0 0 18-18c5.4 2.2 9.2 7.3 9.2 13.3z"/><path d="M164.3 43.4a14 14 0 0 1-27.2 4.7 14 14 0 0 0 17.8-18c5.5 2.2 9.4 7.3 9.4 13.3z" fill="#50d27e"/><path class="st4" d="M50.6 61.5c-9.9 0-18-8.1-18-18s8.1-18 18-18 18 8.1 18 18-8.1 18-18 18zm0-28c-5.5 0-10 4.5-10 10s4.5 10 10 10 10-4.5 10-10-4.5-10-10-10zm49.9 28c-9.9 0-18-8.1-18-18s8.1-18 18-18 18 8.1 18 18-8.1 18-18 18zm0-28c-5.5 0-10 4.5-10 10s4.5 10 10 10 10-4.5 10-10-4.5-10-10-10zm49.8 28c-9.9 0-18-8.1-18-18s8.1-18 18-18 18 8.1 18 18-8.1 18-18 18zm0-28c-5.5 0-10 4.5-10 10s4.5 10 10 10 10-4.5 10-10-4.5-10-10-10z"/><path class="st0" d="M475.4 43.4a14 14 0 0 1-14 14H229.7a14 14 0 1 1 0-28h231.7a14 14 0 0 1 14 14z"/><path class="st1" d="M475.4 43.4a14 14 0 0 1-14 14H229.7a14 14 0 0 1-14-13.3c2 1.1 4.3 1.7 6.7 1.7h231.7a14 14 0 0 0 14-14v-.6a14 14 0 0 1 7.3 12.2z"/><path class="st4" d="M461.4 61.4H229.7c-9.9 0-18-8.1-18-18s8.1-18 18-18h231.7c9.9 0 18 8.1 18 18s-8.1 18-18 18zm-231.7-28c-5.5 0-10 4.5-10 10s4.5 10 10 10h231.7c5.5 0 10-4.5 10-10s-4.5-10-10-10H229.7z"/><path d="M455.6 123.2v98.2H56.4v-98.2h399.2z" fill="#fb8a8a"/><path d="M455.6 123.2v21.7H56.4v-21.7h399.2z" fill="#fcb1b1"/><path class="st8" d="M56.4 199.7h399.2v21.6H56.4z"/><path class="st4" d="M455.6 225.3H56.4a4 4 0 0 1-4-4v-98.2a4 4 0 0 1 4-4h399.2a4 4 0 0 1 4 4v98.2a4 4 0 0 1-4 4zm-395.2-8h391.2v-90.2H60.4v90.2zm395.2 48.3H56.4c-2.2 0-4-1.8-4-4s1.8-4 4-4h399.2c2.2 0 4 1.8 4 4s-1.8 4-4 4zm0 206.1H56.4c-2.2 0-4-1.8-4-4s1.8-4 4-4h399.2c2.2 0 4 1.8 4 4s-1.8 4-4 4zm0-40.3H268.9c-2.2 0-4-1.8-4-4s1.8-4 4-4h186.7c2.2 0 4 1.8 4 4s-1.8 4-4 4zm0-41.8H268.9c-2.2 0-4-1.8-4-4s1.8-4 4-4h186.7c2.2 0 4 1.8 4 4s-1.8 4-4 4zm0-41.9H268.9c-2.2 0-4-1.8-4-4s1.8-4 4-4h186.7c2.2 0 4 1.8 4 4s-1.8 4-4 4zm0-41.9H268.9c-2.2 0-4-1.8-4-4s1.8-4 4-4h186.7c2.2 0 4 1.8 4 4s-1.8 4-4 4z"/><path fill="#fddd8d" d="M56.4 301.8h160.1v125.6H56.4z"/><path fill="#fee8b3" d="M56.4 301.8h160v26.1h-160z"/><path class="st9" d="M56.4 401.4h160v26.1h-160z"/><path class="st4" d="M216.4 431.4h-160a4 4 0 0 1-4-4V301.8a4 4 0 0 1 4-4h160.1a4 4 0 0 1 4 4v125.6a4 4 0 0 1-4.1 4zm-156-8h152.1V305.8H60.4v117.6z"/>
       </svg>
       Blog
+  - url: "mailto:hello@marcusnoble.co.uk"
+    title: Email me
+    content: |
+      <svg viewBox="0 0 64 64" height="32" style="fill:#ededed"><path d="m64 39.7-4-22.4c-.4-2-2.4-3.5-4.5-3l-31.7 5.5a4 4 0 0 0-3.2 4.1l4 22.8a3.8 3.8 0 0 0 4.5 3l31.7-5.5a3.8 3.8 0 0 0 3.1-4.5zm-2.7-3.6-10.7-8.2 7.7-8.6 3 16.8zM24 21.8l32-5.6h.3a2 2 0 0 1 1.5.7c-1 1.1-9.4 10.8-13.4 14.6-1 1-2.6 1.3-4 .6l-17.7-8.7a1.8 1.8 0 0 1 1.5-1.6zm-1.1 4 10.5 5.3L26 42.8l-3-17zm38.7 15.7c-.3.4-.7.6-1.2.7l-31.8 5.6a1.9 1.9 0 0 1-2.1-1.5l-.1-.6 8.8-13.8 4.2 2a5.6 5.6 0 0 0 6.1-1c1-.9 2.3-2.1 3.6-3.6L61.8 39l.2 1c0 .6 0 1-.3 1.5zM19 29.9a1 1 0 0 0-1.2-.8l-17 3a1 1 0 1 0 .4 2l17-3c.5-.2.9-.7.8-1.2zm1 5.8a1 1 0 0 0-1.1-.9L8.7 36.6a1 1 0 1 0 .3 2l10.2-1.8c.6 0 1-.6.8-1.1zm-.1 4.9L13 41.8a1 1 0 1 0 .3 2l6.8-1.2a1 1 0 1 0-.3-2z"></path></svg>
+      Email
   - url: https://marcusnoble.co.uk
     title: My articles on my Blog
     content: |
@@ -53,6 +59,11 @@ social:
     content: |
       <svg viewBox="0 0 490 490" height="32"><path d="M480 180v130a100 100 0 0 1-100 100H110A100 100 0 0 1 10 310V180A100 100 0 0 1 110 80h270a100 100 0 0 1 100 100z" fill="#ea4640"/><path fill="#fff" d="m320 245-120 50V195z"/><g fill="#231f20"><path d="M380 70H110A110 110 0 0 0 0 180v130a110 110 0 0 0 110 110h270a110 110 0 0 0 110-110V180A110 110 0 0 0 380 70zm90 240c0 49.6-40.4 90-90 90H110c-49.6 0-90-40.4-90-90V180c0-49.6 40.4-90 90-90h270c49.6 0 90 40.4 90 90v130z"/><path d="m323.8 235.8-120-50A10 10 0 0 0 190 195v100a10 10 0 0 0 13.8 9.2l120-50a10 10 0 0 0 0-18.4zM210 280v-70l84 35-84 35z"/></g></svg>
       YouTube
+  - url:  https://name.pn/marcus-noble
+    title: More about my name and pronouns
+    content: |
+      <svg height="32" viewBox="0 0 54.826 54.826"><defs><linearGradient id="a"><stop offset="0" stop-color="#f41046"/><stop offset="1" stop-color="#f46f94"/></linearGradient><linearGradient xlink:href="#a" id="b" x1="66.774" y1="137.431" x2="189.397" y2="14.807" gradientUnits="userSpaceOnUse"/><clipPath clipPathUnits="userSpaceOnUse" id="c"><path class="powerclip" d="M69.3 80.322h71.07v54.633H69.3zm-24.096 28.493v7.522h120.638v-7.522z" fill="#00f" stroke-width="2.598"/></clipPath></defs><path d="M77.805 61.062h54.06c6.277 0 11.33 5.052 11.33 11.329v54.06c0 6.276-5.053 11.33-11.33 11.33h-54.06a11.304 11.304 0 0 1-11.329-11.33v-54.06c0-6.277 5.053-11.33 11.33-11.33z" fill="url(#b)" transform="matrix(.71464 0 0 .71464 -47.506 -43.637)"/><path clip-path="url(#c)" d="M74.3 85.321v38.044c0 3.651 2.94 6.59 6.592 6.59h47.887a6.577 6.577 0 0 0 6.591-6.59V85.32H80.892z" fill="#fff" transform="matrix(.71464 0 0 .71464 -47.506 -43.637)"/></svg>
+      name.pn
 projects:
   - url: https://github.com/AverageMarcus/kube-image-prefetch
     name: kube-image-prefetch

src/index.html

@@ -54,6 +54,17 @@
       color: #fd7e0b;
     }
 
+    .tag {
+      font-size: 0.7em;
+      background: #ededed;
+      color: #11191f;
+      padding: 4px 7px;
+      border-radius: 10em;
+      display: inline-block;
+      font-weight: lighter;
+      line-height: 1.2em;
+    }
+
     header {
       height: 100vh;
       background-image: url('headshot-transparent.png');
@@ -77,12 +88,24 @@
 
     main h1 {
       font-size: 2.5em;
+      margin-bottom: 0;
+    }
+
+    main h1 small {
+      font-weight: lighter;
+      font-size: 0.3em;
+      color: #bcb8b8;
+      display: inline-block;
     }
 
     main p {
       line-height: 1.4em;
     }
 
+    main p span {
+      display: inline-block;
+    }
+
     /* Social links */
     .social-links {
       list-style: none;
@@ -185,18 +208,6 @@
       margin-bottom: 6px;
     }
 
-    .events .tag {
-      font-size: 0.7em;
-      background: #ededed;
-      color: #11191f;
-      padding: 4px 7px;
-      border-radius: 10em;
-      display: inline-block;
-      font-weight: lighter;
-      line-height: 1.2em;
-    }
-
-
     @media only screen and (max-width: 1700px) {
       body {
         grid-template: 20vh 80vh / 100%;
@@ -204,7 +215,8 @@
 
       header {
         height: 100%;
-        background-position: bottom center;
+        background-position-y: bottom;
+        background-position-x: 0;
         background-size: contain
       }
       main {
@@ -212,8 +224,15 @@
 
         overflow-y: unset;
       }
+
+      #intro h1 {
+        margin: 0;
       }
 
+      #intro p {
+        font-size: 0.9em;
+      }
+    }
 
     @media only screen and (max-width: 1050px) {
       .projects li {
@@ -226,7 +245,9 @@
   <header></header>
   <main>
     <section id="intro">
-      <h1>Hi 👋, I'm Marcus</h1>
+      <h1>Hi 👋, I'm Marcus <small>(/ˈmɑːkəs/)</small></h1>
+
+      <div class="tag">Pronouns: He/Him/His</div>
 
       <p>
         {{ .intro | html }}
@@ -234,7 +255,7 @@
     </section>
 
     <section id="links">
-      <h2>Find me around the web 🌐</h2>
+      <h2>🌐 Find me around the web</h2>
 
       <ul class="social-links">
         {{ range .social }}
@@ -248,7 +269,7 @@
     </section>
 
     <section id="projects">
-      <h2>My Open Source Projects 💻</h2>
+      <h2>💻 My Open Source Projects</h2>
 
       <p>
         All my Open Source projects can be find on my <a href="https://github.com/AverageMarcus">GitHub</a> profile <small>(as well as my personal <a href="https://git.cluster.fun">Gitea</a> instance, <a href="https://gitlab.com/AverageMarcus">GitLab</a>, <a href="https://codeberg.org/AverageMarcus">Codeberg</a> and <a href="https://bitbucket.org/AverageMarcus/workspace/projects/PROJ">BitBucket</a>)</small>. Below are a selection of highlights.
@@ -272,7 +293,7 @@
     </section>
 
     <section id="events">
-      <h2>Upcoming Events 🗓</h2>
+      <h2>🗓 Upcoming Events</h2>
 
       <ul class="events">
         {{ range .events }}