Homepage v1 done with case study list handling; improvements to icon partial

assets/css/site.css

@@ -12,11 +12,10 @@
     --yellow-body: #E29900;
     --red: #eb452b;
     --red-body: #de342a;
-    --blue: #3157AE; /*#2F4C8E;*/
+    --blue: #0070C0;
-    --blue-body: #0070C0;
     --black: #272727;
     --bg1: #E5DAD2;
-    --green-body: #03A653;
+    --green: #03A653;
 
     --darkcyan: #008694;
 
@@ -51,7 +50,7 @@ a {
     color: inherit;
     font-weight: 500;
     text-decoration: underline;
-    text-decoration-thickness: 1.5px;
+    text-decoration-thickness: 0.1rem;
     text-underline-offset: 0.2rem;
 
     &:hover {
@@ -60,13 +59,17 @@ a {
         text-decoration-thickness: 1.5px;
         text-underline-offset: 0.2rem;
     }
+
+    &[in] {
+        text-decoration-style: dotted;
+    }
 }
 
 h1 {
     font-size: clamp(2.25rem, 9dvw, 4rem);
     font-weight: 700;
     letter-spacing: -0.5px;
-    line-height: 1;
+    line-height: 1.05;
     margin: 0 0 1rem;
 }
 
@@ -249,16 +252,18 @@ body {
 
 /*
  * <main> is case study wrapper and includes:
- *   1. <section> is the initial full screen pane
+ *   1. <header> is the initial full screen pane
  *   2. <nav> is for the TOC
  *   3. <article> holds the actual case study
  */
 main {
     display: grid;
+    grid-template-columns: auto;
+    grid-template-rows: ;
     justify-items: center;
 
     /* layout handling for the top sections */
-    > section {
+    > header {
         align-content: start;
         display: grid;
         grid-auto-rows: auto 12rem;
@@ -268,33 +273,40 @@ main {
         max-width: 100dvw;
         width: 100dvw;
 
-        header,
+        hgroup,
         aside {
             display: flex;
             width: var(--column-width);
         }
 
         /* top hero */
-        header {
+        hgroup {
-            padding: 4rem 0 0;
-
-            /* temporary height clamping */
-            &:has(+ aside) {
-                display: grid;
             align-content: end;
-                /*min-height: clamp(12rem, 50dvh, 18rem);*/
+            display: grid;
-            }
+            padding: 4rem 0 0;
 
             .lede {
                 margin: 1rem 0 0;
-                font-size: 1.5rem;
+                font-size: 1.6rem;
-                font-weight: 500;
+                font-weight: 400;
                 line-height: 1.5;
 
                 strong {
                     color: var(--blue);
                     font-weight: 800;
                 }
+
+                + .lede {
+                    margin-top: 1.5rem;
+                }
+
+                a {
+                    text-decoration-thickness: 0.15rem;
+
+                    &:hover {
+                        text-decoration-thickness: 0.2rem;
+                    }
+                }
             }
         }
 
@@ -345,44 +357,17 @@ main {
                     --icon: var(--red);
                 }
                 &:nth-child(4) {
-                    --icon: var(--green-body);
+                    --icon: var(--green);
                 }
                 &:nth-child(5) {
-                    --icon: var(--blue-body);
+                    --icon: var(--blue);
                 }
             }
         }
     }
-}
-
-/* case study hero handling */
-body#legacy
-{
-    /*main > section {
-        background-image: url('/img/kangaroo.svg'), url('/img/nyc.svg');
-        background-position: bottom left, bottom right;
-        background-repeat: no-repeat;
-        background-size: clamp(150px, 20dvw, 320px) auto, clamp(250px, 50dvw, 800px) auto;
-    }*/
-    main > section {
-        background-image: url('/img/nyc.svg');
-        background-position: bottom 0 right -15dvw;
-        background-repeat: no-repeat;
-        background-size: clamp(300px, 50dvw, 800px) auto;
-        position: relative;
-
-        > svg {
-            bottom: 0;
-            height: auto;
-            left: -5dvw;
-            width: clamp(150px, 20dvw, 320px);
-            position: absolute;
-        }
-    }
-}
 
     /* case study content */
-article {
+    > article {
         background: var(--white);
         border-top: 0.5rem solid var(--black);
         display: grid;
@@ -392,7 +377,155 @@ article {
         padding: var(--article-top) 1.5rem 3rem;
         width: 100%;
 
-    > nav {
+        #content {
+            display: grid;
+            gap: 0;
+        }
+
+        section {
+            width: 100%;
+
+            &#intro
+            {
+                h2 {
+                    padding-top: 0;
+                }
+
+                p:first-of-type {
+                    font-size: 1.25rem;
+                }
+            }
+        }
+
+        figure {
+            /*background: var(--bg);*/
+            align-items: center;
+            display: flex;
+            flex-direction: column;
+            gap: 1.5rem;
+            justify-content: center;
+            margin: 2rem 0;
+            padding: 0;
+            position: relative;
+
+            img {
+                max-width: 100%;
+
+                &.desktop {
+                    aspect-ratio: 1.4 / 1;
+                }
+                &.mobile {
+                    aspect-ratio: 0.46 / 1;
+                    height: 20rem;
+                }
+            }
+
+            figcaption {
+                color: var(--muted);
+                font-size: 0.875rem;
+                line-height: 1.5;
+                font-style: italic;
+                padding-left: 0.125rem;
+
+                p {
+                    margin: 0;
+                }
+            }
+        }
+
+        ul {
+            li {
+                margin-bottom: 1rem;
+            }
+        }
+    }
+}
+
+/* list content */
+
+section#studies {
+    background: var(--black);
+    display: grid;
+    justify-items: center;
+    padding: 5rem 0 3rem;
+
+    h1 {
+        border-bottom: 0.25rem solid var(--white);
+        color: #fff;
+        margin-bottom: 3rem;
+        max-width: var(--column-width);
+        padding-bottom: 1rem;
+        width: var(--column-width);
+
+    }
+
+    article {
+        background-color: var(--blue);
+        background-image: var(--card-bg);
+        background-position: top 20rem right -2rem; /* mobile position */
+        background-repeat: no-repeat;
+        background-size: 50% auto; /* mobile size */
+        border: none;
+        color: #fff;
+        transition: transform 150ms ease-in, background-position 150ms ease-in;
+
+        > a {
+            color: inherit;
+            display: block;
+            height: 100%;
+            padding: 1.5rem;
+            text-decoration: none;
+            width: 100%;
+        }
+
+        h2 {
+            font-size: 2.5rem;
+            padding-top: 0;
+            text-shadow: none;
+            font-weight: 700;
+        }
+
+        p:first-of-type {
+            color: #fff;
+            font-size: 1.35rem;
+            font-weight: 500;
+            line-height: 1.4;
+            margin: 0 0 0.5rem;
+            text-shadow: none;
+        }
+
+        &:hover {
+            background-position: top 19.5rem right -2rem;
+            transform: translateY(-0.5rem);
+        }
+
+        div {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            padding-top: 1rem;
+
+            > figure {
+                margin: 0;
+
+                .icon {
+                    color: color-mix(in srgb, var(--icon-color), #fff 50%);
+                    width: 1.25rem;
+                    height: 1.25rem;
+                }
+
+                figcaption {
+                    font-size: 0.875rem;
+                    font-weight: 700;
+                    text-transform: uppercase;
+                }
+            }
+        }
+    }
+}
+
+/* table of contents */
+nav {
     align-self: start;
     position: sticky;
     margin-left: -1.5rem;
@@ -458,66 +591,9 @@ article {
     }
 }
 
-    #content {
-        display: grid;
-        gap: 0;
-    }
-
-    section {
-        width: 100%;
-
-        &#intro {
-            p:first-of-type {
-                font-size: 1.25rem;
-            }
-        }
-    }
-
-    figure {
-        /*background: var(--bg);*/
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-        gap: 1.5rem;
-        justify-content: center;
-        margin: 2rem 0;
-        padding: 0;
-        position: relative;
-
-        img {
-            max-width: 100%;
-
-            &.desktop {
-                aspect-ratio: 1.4 / 1;
-            }
-            &.mobile {
-                aspect-ratio: 0.46 / 1;
-                height: 20rem;
-            }
-        }
-
-        figcaption {
-            color: var(--muted);
-            font-size: 0.875rem;
-            line-height: 1.5;
-            font-style: italic;
-            padding-left: 0.125rem;
-
-            p {
-                margin: 0;
-            }
-        }
-    }
-
-    ul {
-        li {
-            margin-bottom: 1rem;
-        }
-    }
-}
-
 /**
- * study elements */
+ * study elements
+ */
 
 .icon {
     align-items: center;
@@ -544,7 +620,7 @@ article {
         --mark-color: var(--red-body);
     }
     &:nth-of-type(3) mark {
-        --mark-color: var(--green-body);
+        --mark-color: var(--green);
     }
 }
 
@@ -642,7 +718,7 @@ details {
 }
 
 mark {
-    --mark-color: var(--blue-body);
+    --mark-color: var(--blue);
     color: var(--mark-color);
     font-weight: 900 !important;
     background-color: transparent;
@@ -665,7 +741,7 @@ mark {
     }
 
     &[color="green"] {
-        --mark-color: var(--green-body);
+        --mark-color: var(--green);
     }
 
     p & {
@@ -679,6 +755,98 @@ mark {
     }
 }
 
+span[color="blue"] {
+    color: var(--blue);
+}
+span[color="red"] {
+    color: var(--red-body);
+}
+span[color="yellow"] {
+    color: var(--yellow-body);
+}
+
+
+/**
+ * specific page handling
+ */
+body#default
+{
+    main > header {
+        overflow-x: hidden;
+        position: relative;
+        justify-items: center;
+        width: 100%;
+
+        #circle,
+        #rectangle,
+        #semicircle,
+        #square,
+        #triangle {
+            position: absolute;
+        }
+
+        #semicircle {
+            background: var(--green);
+            bottom: 12dvw;
+            height: 10dvw;
+            border-radius: 10dvw 10dvw 0 0;
+            left: 52dvw;
+            width: 20dvw;
+        }
+
+        #square {
+            background: var(--black);
+            height: 12dvw;
+            width: 12dvw;
+            bottom: 0;
+        }
+
+        #circle {
+            background: var(--blue);
+            border-radius: 50%;
+            height: 20dvw;
+            bottom: 5dvh;
+            left: 4dvw;
+            width: 20dvw;
+        }
+
+        #rectangle {
+            background: var(--yellow);
+            height: 5dvh;
+            width: 36dvw;
+            left: 2dvw;
+            bottom: 0;
+        }
+
+        #triangle {
+            background: var(--red);
+            height: 40dvw;
+            width: 40dvw;
+            bottom: 0;
+            right: 0;
+            clip-path: polygon(100% 0, 100% 100%, 0 100%);
+        }
+    }
+}
+body#legacy
+{
+    main > header {
+        background-image: url('/img/nyc.svg');
+        background-position: bottom 0 right -15dvw;
+        background-repeat: no-repeat;
+        background-size: clamp(300px, 50dvw, 800px) auto;
+        position: relative;
+
+        > svg {
+            bottom: 0;
+            height: auto;
+            left: -5dvw;
+            width: clamp(150px, 20dvw, 320px);
+            position: absolute;
+        }
+    }
+}
+
 
 /**
  * display queries */
@@ -692,7 +860,7 @@ mark {
 /* small height screens override */
 @media (max-height: 720px)
 {
-    main > section {
+    main > header {
         grid-auto-rows: auto auto;
         height: auto;
         max-height: 100%;
@@ -705,10 +873,10 @@ mark {
 {
     body#legacy
     {
-        main > section {
+        main > header {
             background-position: bottom 0 right 0;
 
-            > svg {
+            svg {
                 left: 0;
             }
         }
@@ -730,14 +898,15 @@ mark {
         }
     }
 
-    main > section {
+    main > header {
         min-height: 860px;
 
-        > header {
+        > hgroup {
             .lede {
-                max-width: 60%;
+                max-width: 80%;
             }
         }
+
         > aside {
             flex-direction: row;
 
@@ -771,6 +940,36 @@ mark {
     }
 }
 
+/* landscape tablets */
+@media (min-width: 800px)
+{
+    section#studies
+    {
+        article {
+            background-position: top 2rem right 2rem;
+            background-size: 20% auto;
+            width: var(--column-width);
+
+            &:hover {
+                background-position: top 1.5rem right 2rem;
+            }
+
+            a {
+                padding: 2rem;
+            }
+
+            p {
+                max-width: 67%;
+            }
+
+            div {
+                flex-direction: row;
+                gap: 2rem;
+            }
+        }
+    }
+}
+
 /* laptops (nav/article move to columns now) */
 @media (min-width: 1024px)
 {
@@ -780,9 +979,19 @@ mark {
         --article-top: 2.5rem;
     }
 
-    article
+    h1 {
-    {
+        max-width: 75%;
-        > nav {
+    }
+
+    main > header {
+        > hgroup {
+            .lede {
+                max-width: 60%;
+            }
+        }
+    }
+
+    nav {
         margin-left: 0;
         top: var(--article-top);
         width: 12rem;
@@ -810,6 +1019,59 @@ mark {
             }
         }
     }
+
+    body#default main
+    {
+        > header {
+            padding: 0 1.5rem;
+
+            hgroup {
+                padding: 10dvh 0 0;
+            }
+
+            #semicircle {
+                bottom: 57dvh;
+                height: 12dvh;
+                border-radius: 12dvh 12dvh 0 0;
+                width: 24dvh;
+                left: auto;
+                right: -1dvw;
+            }
+
+            #square {
+                bottom: 45dvh;
+                height: 12dvh;
+                width: 12dvh;
+                right: 2dvw;
+            }
+
+            #circle {
+                height: 15dvh;
+                left: auto;
+                bottom: 30dvh;
+                right: 3dvw;
+                width: 15dvh;
+            }
+
+            #rectangle {
+                height: 5dvh;
+                left: auto;
+                width: 36dvw;
+                right: -16dvw;
+                bottom: 25dvh;
+            }
+
+            #triangle {
+                height: 25dvh;
+                right: 6dvw;
+                width: 25dvh;
+            }
+        }
+
+        section#studies {
+            padding-left: 1.5rem;
+            padding-right: 1.5rem;
+        }
     }
 }
 
@@ -826,9 +1088,9 @@ mark {
         font-size: 17px;
     }
 
-    main > section
+    main > header
     {
-        > header {
+        > hgroup {
             padding-top: 6rem;
         }
     }
@@ -838,7 +1100,7 @@ mark {
 @media (min-width: 1440px)
 {
     :root {
-        --article-grid: 17rem var(--content-width) 7rem;
+        --article-grid: 16rem var(--content-width) 8rem;
         --article-top: 4rem;
     }
 
@@ -852,7 +1114,7 @@ mark {
 
     main
     {
-        > section > aside {
+        > header > aside {
             gap: 2rem;
         }
 
@@ -860,14 +1122,6 @@ mark {
             padding-right: 0;
             padding-left: 0;
 
-            > nav {
-                font-size: 0.925rem;
-
-                ol li {
-                    padding-top: 0.5rem;
-                }
-            }
-
             figure {
                 align-items: flex-end;
                 flex-direction: row;
@@ -883,19 +1137,27 @@ mark {
                 }
             }
         }
+
+        nav {
+            font-size: 0.925rem;
+
+            ol li {
+                    padding-top: 0.5rem;
+            }
         }
     }
 
-
+    section#studies
-/**
+    {
- * deprecate? */
+        article {
-@media (max-width: 900px) {
+            width: calc(var(--column-width) + 4rem);
-
+        }
-    article #content {
+    }
-        width: 100%;
+}
-    }
+
-
+@media (min-width: 1560px)
-    article section {
+{
-        width: 100%;
+    :root {
+        --article-grid: 17rem var(--content-width) 7rem;
     }
 }

assets/img/kangaroo.svg

@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 192 192" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M108.836,156.725l-26.108,-31.053l37.823,-0l0,66.284l-11.715,0l0,-35.23Z" style="fill:#1a52a3;"/><path d="M132.911,4.571l25.797,25.586l-16.538,9.548l-9.26,-35.134Z" style="fill:#1a52a3;"/><path d="M164.608,11.933l-0.865,23.009l-13.442,-4.968l14.307,-18.041Z" style="fill:#e62a1b;"/><path d="M159.495,27.851l30.384,20.669l-30.384,0.219l0,-20.888Z" style="fill:#272727;"/><path d="M120.551,125.716l-69.791,0c0,-38.519 31.272,-69.791 69.791,-69.791l0,69.791Z" style="fill:#e62a1b;"/><circle cx="155.672" cy="41.663" r="14.262" style="fill:#272727;"/><path d="M108.836,191.955l46.77,0l-35.055,-12.193l-11.715,12.193Z" style="fill:#272727;"/><rect x="133.058" y="86.516" width="8.557" height="27.359" style="fill:#272727;"/><circle cx="139.452" cy="113.875" r="6.393" style="fill:#272727;"/><path d="M120.551,55.926l37.605,0c0,20.755 -16.85,37.605 -37.605,37.605l0,-37.605Z" style="fill:#fcb70d;"/><path d="M50.76,125.716c0.073,10.842 -5.416,56.45 -48.638,66.284c35.145,-3.122 60.636,-17.345 73.575,-48.975c2.177,-5.322 3.845,-11.589 4.234,-17.309c0,0 -29.171,-0.101 -29.171,0Z" style="fill:#fcb70d;"/></svg>

content/_index.md

@@ -1,5 +1,7 @@
 ---
 title: "Portfolio"
+hero:
+  svg: home.svg
 ---
 
 Product case studies and selected work.

content/studies/legacy/index.md

@@ -8,16 +8,17 @@ draft: false
 hero:
   title: "Legacy app refresh"
   deck: "Reshaping a critical but outdated school forms workflow into a <strong>calmer, clearer experience</strong> for administrators and families."
-  tags:
+  svg: kangaroo-eyes.svg
-    - label: "Figma"
+list:
-      tone: "green"
+  more: "Wallabyte supports schools and families through critical paperwork, but was woefully unusable. This case study covers how I approached that challenge—from identifying the highest impact issues to shaping a more coherent forms experience."
-    - label: "Product Design"
+  img: card-legacy.png
-      tone: "yellow"
+  facts:
-    - label: "B2B SaaS"
+    - key: Role
-      tone: "cyan"
+      color: yellow
-    - label: "Workflow UX"
+    - key: tools
-      tone: "blue"
+      color: red
-  inline_svg: kangaroo-eyes.svg
+    - key: industry
+      color: green
 study:
   facts:
     - label: "Role"

layouts/_default/baseof.html

@@ -22,7 +22,7 @@
     {{ with resources.Get "css/site.css" }}
       <link rel="stylesheet" href="{{ .RelPermalink }}">
     {{ end }}
-    {{ if and .IsPage (eq .Section "studies") .Params.study.toc }}
+    {{ if or .IsHome (and .IsPage (eq .Section "studies") .Params.study.toc) }}
       <script src="{{ "js/main.js" | relURL }}" defer></script>
     {{ end }}
   </head>
@@ -41,10 +41,10 @@
       </div>
       <menu aria-label="Primary">
         <li>
-          <a href="{{ "/studies/" | relURL }}">Case studies</a>
+          <a href='{{ "/#studies" | relURL }}'>Case studies</a>
         </li>
         <li>
-          <a href="{{ "/contact/" | relURL }}">Get in touch</a>
+          <a href='{{ "/contact/" | relURL }}'>Get in touch</a>
         </li>
       </menu>
     </header>

layouts/_default/study.html

@@ -1,36 +1,17 @@
 {{- define "main" -}}
-  {{- $heroImage := "" -}}
+  {{- $svg := "" -}}
-  {{- $heroInlineSvg := "" -}}
+  {{- with .Params.hero.svg -}}
-  {{- with .Params.hero.image -}}
     {{- $match := $.Resources.GetMatch . -}}
     {{- if not $match -}}
       {{- $match = $.Resources.GetMatch (printf "img/%s" .) -}}
     {{- end -}}
     {{- with $match -}}
-      {{- $heroImage = .RelPermalink -}}
+      {{- $svg = .Content -}}
-    {{- end -}}
-  {{- end -}}
-  {{- with .Params.hero.inline_svg -}}
-    {{- $match := $.Resources.GetMatch . -}}
-    {{- if not $match -}}
-      {{- $match = $.Resources.GetMatch (printf "img/%s" .) -}}
-    {{- end -}}
-    {{- with $match -}}
-      {{- $heroInlineSvg = .Content -}}
     {{- end -}}
   {{- end -}}
 
-  <section{{ with $heroImage }} style="--hero-image: url('{{ . }}');"{{ end }}>
   <header>
-      {{- with .Params.hero.tags -}}
+    <hgroup>
-      <!--<ul class="tag-list" aria-label="Case study tags">
-        {{- range . -}}
-        <li>
-          <span class="tag{{ with .tone }} tag-{{ . }}{{ end }}">{{ .label }}</span>
-        </li>
-        {{- end -}}
-      </ul>-->
-      {{- end -}}
       <h1>{{ with .Params.hero.title }}{{ . }}{{ else }}{{ .Title }}{{ end }}</h1>
       {{- with .Params.hero.deck -}}
       <p class="lede">{{ . | markdownify }}</p>
@@ -38,8 +19,7 @@
       {{- if and (not .Params.hero.deck) .Summary -}}
       <p class="lede">{{ .Summary | markdownify }}</p>
       {{- end -}}
-    </header>
+    </hgroup>
-
     {{- with .Params.study -}}
     <aside aria-label="Study metadata">
       {{- with .facts -}}
@@ -55,14 +35,14 @@
       {{- end -}}
     </aside>
     {{- end -}}
-    {{- with $heroInlineSvg -}}
+    {{- with $svg -}}
     {{ . | safeHTML }}
     {{- end -}}
-  </section>
+  </header>
 
   <article>
     {{- with .Params.study.toc -}}
-    <nav id="toc" aria-label="Table of contents">
+    <nav aria-label="Table of contents">
       <ol>
         {{- range . -}}
         <li><a href="#{{ .id }}">{{ .label }}</a></li>
@@ -70,6 +50,7 @@
       </ol>
     </nav>
     {{- end -}}
+
     <div id="content">
       {{ .Content }}
     </div>

layouts/index.html

@@ -1,25 +1,64 @@
-{{ define "main" }}
+{{- define "main" -}}
-  <section class="page-hero">
+<header>
-    <p class="eyebrow">Portfolio</p>
+  <hgroup>
-    <h1>Case studies with room for the full story.</h1>
+    <h1>
+      Principle product <span color="blue">designer</span> building <span color="red">thoughtful</span> and <span color="yellow">accessible</span> interfaces.
+    </h1>
     <p class="lede">
-      A custom Hugo setup for showcasing product and UX work without relying on a theme.
+      <b>20 years experience</b> designing and building software for the browser. I balance intentional design principles with a mastery of CSS, HTML, JavaScript, &amp; WCAG to <b>bridge design and engineering</b>. Performance, accessibility, and the semantic web still matter!
     </p>
-  </section>
+    <p class="lede">
-
+      Read more about my <a href="design" out>design philosophy</a> or take a look at some <a href="#studies" in>case studies</a> below.
-  <section class="page-section">
+    </p>
-    <div class="section-heading">
+  </hgroup>
-      <p class="eyebrow">Selected work</p>
+  <div id="semicircle"></div>
-      <h2>Current case studies</h2>
+  <div id="square"></div>
-    </div>
+  <div id="circle"></div>
-    <div class="study-list">
+  <div id="rectangle"></div>
+  <div id="triangle"></div>
+</header>
+<section id="studies">
+  <h1>Case studies</h1>
   {{ range where .Site.RegularPages "Section" "studies" }}
-        <article>
+    {{- $page := . -}}
-          <p class="study-card-meta">{{ with .Params.hero.title }}{{ . }}{{ else }}{{ .Title }}{{ end }}</p>
+    {{- $cardImage := "" -}}
-          <h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
+    {{- with .Params.list.img -}}
+      {{- $match := $page.Resources.GetMatch . -}}
+      {{- if not $match -}}
+        {{- $match = $page.Resources.GetMatch (printf "img/%s" .) -}}
+      {{- end -}}
+      {{- with $match -}}
+        {{- $cardImage = .RelPermalink -}}
+      {{- end -}}
+    {{- end -}}
+  <article{{ with $cardImage }} style="--card-bg: url('{{ . }}');"{{ end }}>
+    <a href="{{ .RelPermalink }}">
+      <h2>{{ .Title }}</h2>
       <p>{{ .Summary }}</p>
-        </article>
+      {{ with .Params.list.more }}<p>{{ . }}</p>{{ end }}
-      {{ end }}
+      {{- with .Params.study.facts -}}
+      <div>
+        {{- range . -}}
+          {{- if or (eq .label "Role") (eq .label "Tools") (eq .label "Industry") -}}
+            {{- $fact := . -}}
+            {{- $iconColor := "" -}}
+            {{- range $page.Params.list.facts -}}
+              {{- if eq (lower .key) (lower $fact.label) -}}
+                {{- $iconColor = .color -}}
+              {{- end -}}
+            {{- end -}}
+        <figure>
+            {{- with $fact.icon -}}
+              {{ partial "icon.html" (dict "name" . "color" $iconColor) }}
+            {{- end -}}
+          <figcaption {{ with $fact.class }}class='{{ . }}'{{ end }}>{{ $fact.value | markdownify }}</figcaption>
+        </figure>
+          {{- end -}}
+        {{- end -}}
       </div>
+      {{- end -}}
+    </a>
+  </article>
+  {{- end -}}
 </section>
 {{ end }}

layouts/partials/footer.html

@@ -26,6 +26,7 @@
 {{- end -}}
 
 <section id="end">
+    {{ if eq (len $footnotes) 0 }}<big>Ag</big>{{ end }}
     <div class="text">
         <p>This is the design portfolio for <a href="https://andrewgioia.com">Andrew Gioia</a>, co-founder of TeachBoost and current Staff Designer at SchoolStatus.</p>
         <div>{{ partial "icon.html" (dict "name" "cc") }} 2026 BY-NC-ND. Please share this responsibly.</div>

layouts/partials/icon.html

@@ -1,9 +1,10 @@
 {{- $name := .name | default . -}}
 {{- $class := .class -}}
 {{- $label := .label -}}
+{{- $color := .color -}}
 {{- $path := printf "icons/%s.svg" $name -}}
 {{- with resources.Get $path -}}
-<span class="icon icon-{{ $name }}{{ with $class }} {{ . }}{{ end }}"{{ if $label }} role="img" aria-label="{{ $label }}"{{ else }} aria-hidden="true"{{ end }}>
+<span class="icon icon-{{ $name }}{{ with $class }} {{ . }}{{ end }}"{{ with $color }} style="--icon-color: var(--{{ . }});"{{ end }}{{ if $label }} role="img" aria-label="{{ $label }}"{{ else }} aria-hidden="true"{{ end }}>
     {{ .Content | safeHTML }}
 </span>
 {{- else -}}

static/img/home.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 192 192" id="roll"><circle cx="110.678" cy="33.322" r="33.322" style="fill:#1a52a3"/><rect x="35.476" y="66.644" width="156.524" height="21.6" style="fill:#fcb70d"/><path d="M115.2 88.244v103.714H0z" style="fill:#e62a1b"/></svg>

static/js/main.js

@@ -1,6 +1,7 @@
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("DOMContentLoaded", () =>
+{
     const setupKangarooEye = () => {
-        const heroGraphic = document.querySelector("main > section > svg");
+        const heroGraphic = document.querySelector("main > header > svg");
         const eye = heroGraphic?.querySelector("#eye");
         const pupil = heroGraphic?.querySelector("#pupil");
 
@@ -66,8 +67,8 @@ document.addEventListener("DOMContentLoaded", () => {
     };
 
     const setupToc = () => {
-        const toc = document.querySelector("article > nav#toc");
+        const toc = document.querySelector("nav");
-        const content = document.querySelector("article > div#content");
+        const content = document.querySelector("article");
         const list = toc?.querySelector("ol");
 
         if (!toc || !content || !list) {