Redesign work page: combine skills/services into toolkit, bordered project cards

- Merge skills and services into single "my toolkit" section with flex-wrap tags
- Redesign projects as bordered card boxes (flex-wrap, not full-width)
- Whole project card is clickable via stretched link pattern
- Fix nested <a> issue (Hamsa link inside project card)
- Standardise font sizes: offering tags at --text-body, project role at --text-small
- Update type scale comment to reflect current usage

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: TheDataAreClean

build.py

@@ -307,8 +307,8 @@ def render_projects(md):
     for p in projects:
         desc = parse_inline(p['desc'])
         proj_parts.append(
-            '      <div class="project">\n'
-            f'        <a class="project-header" href="{p["url"]}" target="_blank" rel="noopener">\n'
+            f'      <div class="project">\n'
+            f'        <a class="project-top" href="{p["url"]}" target="_blank" rel="noopener">\n'
             f'          <span class="project-name">{p["name"]}</span>\n'
             '          <span class="project-arrow"><span class="material-symbols-sharp">arrow_outward</span></span>\n'
             '        </a>\n'
@@ -321,7 +321,7 @@ def render_projects(md):
 
     return (
         '  <!-- PROJECTS -->\n'
-        '  <section class="projects-section">\n'
+        '  <section>\n'
         '    <h2 class="section-title">\n'
         f'      {title}\n'
         '    </h2>\n'
@@ -411,46 +411,26 @@ def render_footer(footer_md):
 
 
 def render_work_section(md):
-    """Parse work.md into skills grid + services grid HTML."""
+    """Parse work.md into a single toolkit section."""
     lines = md.strip().split('\n')
-    current_section = None
-    skills = []
-    services = []
+    items = []
 
     for line in lines:
         stripped = line.strip()
-        if stripped.startswith('# '):
-            current_section = stripped[2:].strip().lower()
-        elif stripped.startswith('- ') and current_section:
-            value = stripped[2:].strip()
-            if current_section == 'skills':
-                skills.append(value)
-            elif current_section == 'services':
-                services.append(value)
-
-    skill_boxes = '\n'.join(
-        f'      <div class="skill-box">{s}</div>'
-        for s in skills
-    )
-    service_boxes = '\n'.join(
-        f'      <div class="service-box">{s}</div>'
-        for s in services
+        if stripped.startswith('- '):
+            items.append(stripped[2:].strip())
+
+    boxes = '\n'.join(
+        f'      <span class="offering-tag">{s}</span>'
+        for s in items
     )
 
     return (
-        '  <!-- SKILLS -->\n'
-        '  <section>\n'
-        '    <h2 class="section-title"><span class="highlight">skills</span></h2>\n'
-        '    <div class="skills-grid">\n'
-        f'{skill_boxes}\n'
-        '    </div>\n'
-        '  </section>\n'
-        '\n'
-        '  <!-- SERVICES -->\n'
+        '  <!-- OFFERINGS -->\n'
         '  <section>\n'
-        '    <h2 class="section-title"><span class="highlight">services</span></h2>\n'
-        '    <div class="services-grid">\n'
-        f'{service_boxes}\n'
+        '    <h2 class="section-title">my <span class="highlight">toolkit</span></h2>\n'
+        '    <div class="offerings">\n'
+        f'{boxes}\n'
         '    </div>\n'
         '  </section>'
     )

content/work.md

@@ -1,13 +1,9 @@
-# skills
-- data visualisation
-- statistical analysis
-- product strategy
+#offerings
+- data visualisations
 - data storytelling
-- audience research
-- workshop facilitation
-
-# services
-- data communication strategy
-- dashboard & report design
-- data storytelling workshops
-- product analytics consulting
+- product strategy
+- data systems strategy
+- user research
+- data viz workshops
+- data capacity trainings
+- statistical analysis

dist/index.html

@@ -330,74 +330,77 @@
     .about-text p + p {
       margin-top: var(--space-md);
     }
+    .offerings {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--box-gap);
+    }
+    .offering-tag {
+      border: 1px solid var(--black);
+      padding: var(--box-pad);
+      font-size: var(--text-body);
+    }
     .projects {
       display: flex;
-      flex-direction: column;
-      gap: var(--space-md);
+      flex-wrap: wrap;
+      gap: var(--box-gap);
     }
     .project {
+      border: 1px solid var(--black);
+      padding: var(--box-pad);
       display: flex;
       flex-direction: column;
-      padding: var(--space-md) 0;
+      gap: 8px;
+      color: inherit;
+      min-width: 0;
+      flex: 1 1 280px;
+      max-width: 100%;
+      overflow: hidden;
+      position: relative;
     }
-    .project-header {
+    @media (hover: hover) {
+      .project:hover {
+        color: var(--accent);
+      }
+    }
+    .project-top {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      margin-bottom: 8px;
       text-decoration: none;
       color: inherit;
     }
-    @media (hover: hover) {
-      .project-header:hover {
-        color: var(--accent);
-      }
+    .project-top::after {
+      content: '';
+      position: absolute;
+      inset: 0;
     }
     .project-name {
-      font-size: var(--text-heading);
+      font-size: var(--text-body);
+      font-weight: 700;
     }
     .project-role {
       font-size: var(--text-small);
-      letter-spacing: 0.5px;
-      margin-bottom: 16px;
+      color: var(--accent);
     }
     .project-desc {
-      font-size: var(--text-body);
+      font-size: var(--text-small);
       line-height: 1.5;
+      overflow-wrap: break-word;
+      word-break: break-word;
     }
     .project-desc a {
       color: var(--accent);
       text-decoration: none;
-    }
-    .project-desc a:hover {
-      text-decoration: underline;
+      position: relative;
+      z-index: 1;
     }
     .project-arrow {
       color: var(--accent);
     }
     .project-arrow .material-symbols-sharp {
-      font-size: 24px;
-      font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
-    }
-    .skills-grid {
-      display: flex;
-      flex-wrap: wrap;
-      gap: var(--box-gap);
-    }
-    .skill-box {
-      border: 1px solid var(--black);
-      padding: var(--box-pad);
-      font-size: var(--text-small);
-    }
-    .services-grid {
-      display: flex;
-      flex-wrap: wrap;
-      gap: var(--box-gap);
-    }
-    .service-box {
-      border: 1px solid var(--black);
-      padding: var(--box-pad);
-      font-size: var(--text-small);
+      font-size: 18px;
+      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;
     }
     .lately-list {
       display: flex;
@@ -524,7 +527,7 @@
         gap: var(--space-md);
       }
       .project-arrow .material-symbols-sharp {
-        font-size: 20px;
+        font-size: 18px;
       }
       .lately-list {
         align-items: stretch;

dist/play/index.html

@@ -330,74 +330,77 @@
     .about-text p + p {
       margin-top: var(--space-md);
     }
+    .offerings {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--box-gap);
+    }
+    .offering-tag {
+      border: 1px solid var(--black);
+      padding: var(--box-pad);
+      font-size: var(--text-body);
+    }
     .projects {
       display: flex;
-      flex-direction: column;
-      gap: var(--space-md);
+      flex-wrap: wrap;
+      gap: var(--box-gap);
     }
     .project {
+      border: 1px solid var(--black);
+      padding: var(--box-pad);
       display: flex;
       flex-direction: column;
-      padding: var(--space-md) 0;
+      gap: 8px;
+      color: inherit;
+      min-width: 0;
+      flex: 1 1 280px;
+      max-width: 100%;
+      overflow: hidden;
+      position: relative;
     }
-    .project-header {
+    @media (hover: hover) {
+      .project:hover {
+        color: var(--accent);
+      }
+    }
+    .project-top {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      margin-bottom: 8px;
       text-decoration: none;
       color: inherit;
     }
-    @media (hover: hover) {
-      .project-header:hover {
-        color: var(--accent);
-      }
+    .project-top::after {
+      content: '';
+      position: absolute;
+      inset: 0;
     }
     .project-name {
-      font-size: var(--text-heading);
+      font-size: var(--text-body);
+      font-weight: 700;
     }
     .project-role {
       font-size: var(--text-small);
-      letter-spacing: 0.5px;
-      margin-bottom: 16px;
+      color: var(--accent);
     }
     .project-desc {
-      font-size: var(--text-body);
+      font-size: var(--text-small);
       line-height: 1.5;
+      overflow-wrap: break-word;
+      word-break: break-word;
     }
     .project-desc a {
       color: var(--accent);
       text-decoration: none;
-    }
-    .project-desc a:hover {
-      text-decoration: underline;
+      position: relative;
+      z-index: 1;
     }
     .project-arrow {
       color: var(--accent);
     }
     .project-arrow .material-symbols-sharp {
-      font-size: 24px;
-      font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
-    }
-    .skills-grid {
-      display: flex;
-      flex-wrap: wrap;
-      gap: var(--box-gap);
-    }
-    .skill-box {
-      border: 1px solid var(--black);
-      padding: var(--box-pad);
-      font-size: var(--text-small);
-    }
-    .services-grid {
-      display: flex;
-      flex-wrap: wrap;
-      gap: var(--box-gap);
-    }
-    .service-box {
-      border: 1px solid var(--black);
-      padding: var(--box-pad);
-      font-size: var(--text-small);
+      font-size: 18px;
+      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18;
     }
     .lately-list {
       display: flex;
@@ -524,7 +527,7 @@
         gap: var(--space-md);
       }
       .project-arrow .material-symbols-sharp {
-        font-size: 20px;
+        font-size: 18px;
       }
       .lately-list {
         align-items: stretch;