extract project link into function, update link styling

assets/site.css

@@ -25,6 +25,7 @@
 :root {
     font-family: "DM Mono", "Courier New", Courier, monospace;
     background-color: hsl(224, 44%, 95%);
+    --color-theme-1: #ff3e00;
 }
 
 body {
@@ -42,11 +43,24 @@ nav {
     gap: 15px;
 }
 
+a {
+    color: var(--color-theme-1);
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+    transition-property: border-color;
+    transition-duration: 0.5s;
+}
+
+a:hover {
+    border-color: var(--color-theme-1);
+}
+
 nav a {
     color: gray;
     transition-property: color;
     transition-duration: 0.5s;
     text-decoration: none;
+    border: none;
 }
 
 nav a:hover,

pages/home.rb

@@ -1,30 +1,41 @@
 class Pages::Home < ::Phlex::HTML
+  def project_link(name:, url:, desc:)
+    li {
+      a(href: url) { name }
+      span { " - " + desc }
+    }
+  end
+
   def view_template
     render ::Pages::Layout.new(:home) {
       p { "i'm aleks rūtiņš." }
-      p { "i'm a student and programmer, skilled with a wide variety of tools." }
+      p { "i'm a student and programmer, skilled with a wide variety of languages and tools." }
 
       h2 { "featured projects" }
       ul {
-        li {
+        project_link(
-          a(href: "https://sr.ht/~aleksrutins/phlexite") { "phlexite" }
+          name: "phlexite",
-          span { " - a simple static site generator using phlex for templating" }
+          url: "https://sr.ht/~aleksrutins/phlexite",
-        }
+          desc: "a simple static site generator using phlex for templating"
+        )
 
-        li {
+        project_link(
-          a(href: "https://dynamite.farthergate.com/") { "dynamite" }
+          name: "dynamite",
-          span { " - a customizable lv2 distortion plugin"}
+          url: "https://dynamite.farthergate.com/",
-        }
+          desc: "a customizable lv2 distortion plugin"
+        )
 
-        li {
+        project_link(
-          a(href: "https://packsnap.farthergate.com/") { "packsnap" }
+          name: "packsnap",
-          span { " - a reproducible container build system" }
+          url: "https://packsnap.farthergate.com/",
-        }
+          desc: "a reproducible container build system"
+        )
 
-        li {
+        project_link(
-          a(href: "https://bc.farthergate.com/") { "biocircuits for mere mortals" }
+          name: "biocircuits for mere mortals",
-          span { " - a daunting topic broken down in a (hopefully) friendly way" }
+          url: "https://bc.farthergate.com/",
-        }
+          desc: "a daunting topic broken down in a (hopefully) friendly way"
+        )
       }
     }
   end