Add new shortcode for availability, better words

.eleventy.js

@@ -8,6 +8,7 @@ const EleventyVitePlugin = require("@11ty/eleventy-plugin-vite");
 
 const activeSection = require("./src/_shortcodes/active-section");
 const ariaCurrent = require("./src/_shortcodes/aria-current");
+const availability = require("./src/_shortcodes/availability");
 
 const { humanPostDate, isoPostDate } = require("./src/_filters/date");
 
@@ -18,6 +19,7 @@ module.exports = function (eleventyConfig) {
 
   eleventyConfig.addShortcode("activeSection", activeSection);
   eleventyConfig.addShortcode("ariaCurrent", ariaCurrent);
+  eleventyConfig.addShortcode("availability", availability);
 
   eleventyConfig.addFilter("humanPostDate", humanPostDate);
   eleventyConfig.addFilter("isoPostDate", isoPostDate);

src/_data/global.json

@@ -1,6 +1,5 @@
 {
   "availability": true,
-  "availabilityDate": "from March 2024 onwards",
   "baseUrl": "https://jegtnes.com",
   "siteName": "Alex Jegtnes",
   "twitter": "@jegtnes"

src/_shortcodes/availability.js

@@ -0,0 +1,13 @@
+module.exports = function availability(availability, availabilityString, short = false) {
+	if (short) {
+		if (!availability) return "None currently";
+		if(availabilityString && availabilityString.length) return `from ${availabilityString}`;
+		return "Currently available";
+	}
+
+	if (!availability) return "I presently have no availability for new engagements.";
+
+	if(availabilityString && availabilityString.length) return `<strong>I have availability for new engagements from ${availabilityString}</strong>, either remotely or on-site in London.`;
+
+	return "<strong>I have current availability for new engagements</strong>, either remotely or on-site in London.";
+};

src/_styles/global.css

@@ -141,6 +141,8 @@ nav ul li {
   margin-block-end: var(--space-m);
   width: 100%;
   max-width: 20em;
+  height: auto;
+  width: auto;
 }
 
 .container__full-bleed,

src/index.njk

@@ -6,10 +6,11 @@ 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>
+    <img src="/assets/images/face.jpg" width="700" height="875" 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 for everything from small design studios to banks and newspapers.</p>
+    <p>At the heart of my approach is facilitating excellent cross-team communication without getting bogged down in bike-shedding, breaking down barriers to collaboration, and helping find that ever-tricky balance between perfection and shipping.</p>
     {% if global.availability %}
-    <p><strong>I have availability for new projects {{ global.availabilityDate }}</strong>, either remotely or on-site in London.</p>
+    <p>{% availability global.availability, global.availabilityString %}</p>
     <a class="btn" href="/work-with-me#quick-summary">See what I can do for your organisation</a>
     {% endif %}
 ---

src/work-with-me.md

@@ -4,10 +4,10 @@ layout: page.njk
 description: Hire Alex Jegtnes, a versatile freelance front-end developer with ten years of experience working for everything from small design studios to banks and newspapers.
 eleventyComputed:
   twitterLabel1: Availability
-  twitterData1: "{%if global.availability%}{{global.availabilityDate}}{%else%}None{%endif%}"
+  twitterData1: "{% availability global.availability, global.availabilityString, true %}"
   twitterLabel2: Proficiencies
   twitterData2: JavaScript, well-crafted HTML & CSS, accessibility, React, web performance
-  intro: <p>Hi there! I'm Alex, an independent web development contractor based in London. 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><p>I have ten years of experience working with clients ranging from startups and design studios to large corporations and banks. Read on to find out what I can bring to your organisation.</p>{% endif %}
+  intro: <p>Hi there! I'm Alex, an independent web development contractor based in London. I develop fast, accessible, and beautiful websites and web apps.</p>{% if global.availability %}<p><p>{% availability global.availability, global.availabilityString %}</p></p><p>I have ten years of experience working with clients ranging from startups and design studios to large corporations and banks. Read on to find out what I can bring to your organisation.</p>{% endif %}
 ---
 
 ## Quick summary
@@ -96,6 +96,6 @@ Speaking of responsive images, in the dark days when responsive images weren't n
 
 ## Let's make a nice website together?
 
-If my skills sound relevant to anything you need help with I'd love to hear from you and to discuss your next project.
+If my skills sound relevant to anything you need help with, I'd love to hear from you and to discuss your next project.
 
 <a class="btn" href="mailto:[email protected]?subject=Contracting%20inquiry">Toss an email my way!</a>