experimental: add skill links

index.html

@@ -80,8 +80,17 @@
           <ul class="data">
             <template x-for="skill in visibleSkills">
               <li>
-                <header x-bind:title="`Tags: ${skill.tags.join(', ')}`">
-                  <h3 x-text="skill.name"></h3>
+                <header>
+                  <template x-if="skill.link">
+                    <h3>
+                      <a x-bind:title="`Tags: ${skill.tags.join(', ')}`" x-bind:href="skill.link" target="_blank" x-text="skill.name"></a>
+                    </h3>
+                  </template>
+                  <template x-if="!skill.link">
+                    <h3>
+                      <span x-bind:title="`Tags: ${skill.tags.join(', ')}`" x-text="skill.name"></span>
+                    </h3>
+                  </template>
                 </header>
 
                 <p class="description" x-text="skill.description"></p>

public/data/skills.json

@@ -24,11 +24,13 @@
   },
   {
     "name": "Alpine.js",
+    "link": "https://alpinejs.dev",
     "tags": ["js", "framework"],
     "description": "A recent discovery that I find makes it very easy to build simple websites, like this one, without huge amounts of reactive boilerplate. I look forward to getting to know it better."
   },
   {
     "name": "Apache",
+    "link": "https://httpd.apache.org",
     "tags": ["framework"],
     "description": "I have set up many websites using PHP or JS using an Apache front proxy. I prefer nginx these days but Apache is easier to use in some respects."
   },