Add 2026 initiative list as TOC on Projects page

_data/projects.yaml

@@ -276,7 +276,7 @@ projects:
       url: https://discord.gg/V6v4xXCKbU
 
   - id: 18
-    image: project_image_03.svg
+    image: project_name_privacy_22.svg
     color: "#AE66D6"
     category: Design Advocacy
     title: Making Privacy Permeate

_sass/minima/_projects-page.scss

@@ -203,6 +203,68 @@
     }
 }
 
+.projects-toc {
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+    padding: $spacing-unit * 2 0;
+
+    &__grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: $spacing-unit;
+    }
+
+    &__item {
+        display: flex;
+        gap: 12px;
+        align-items: flex-start;
+        text-decoration: none;
+        color: #032869;
+
+        &:hover {
+            color: $brand-color;
+        }
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+
+    &__number {
+        font-family: $code-font-family;
+        font-size: 14px;
+        text-transform: uppercase;
+        letter-spacing: 1.4px;
+        line-height: 0.99;
+        color: #032869;
+        margin: 0;
+    }
+
+    &__image {
+        width: 40px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    &__title {
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 1.12;
+        letter-spacing: -0.6px;
+    }
+}
+
 .project-category {
     &__header {
         display: flex;
@@ -385,10 +447,21 @@
             font-size: 18px;
         }
     }
+
+    .projects-toc__grid {
+        grid-template-columns: 1fr;
+    }
+
+    .projects-toc__title {
+        font-size: 16px;
+    }
 }
 
 // Projects landing page theme
 .theme-projects {
+    html {
+        scroll-behavior: smooth;
+    }
 
     // Header links
     .site-header {

projects.md

@@ -46,9 +46,25 @@ https://www.figma.com/file/qzvCvqhSRx3Jq8aywaSjlr/Bitcoin-Design-Guide-Illustrat
   <p>These design initiatives can have a giant impact on bitcoin, and thus, on the world. It is a big ambitious slate of work, one for which we need incredible designers to lean in to help us explore, to create and to lead the charge with us. Bitcoin is money for everyone. But it is also yours—what will you design it to be?</p>
 </section>
 
+<div class="projects-toc">
+  <div class="projects-toc__grid">
+    {% for project in site.data.projects.projects %}
+    <a href="#project-{{ project.id }}" class="projects-toc__item">
+      <div class="projects-toc__image" style="background-color: {{ project.color }};">
+        <img src="/assets/images/projects/{{ project.image }}" alt="">
+      </div>
+      <div class="projects-toc__content">
+        <span class="projects-toc__number">{{ forloop.index | prepend: '00' | slice: -2, 2 }}</span>
+        <div class="projects-toc__title">{{ project.title }}</div>
+      </div>
+    </a>
+    {% endfor %}
+  </div>
+</div>
+
 <div class="projects-grid">
   {% for project in site.data.projects.projects %}
-  <div class="project-card">
+  <div class="project-card" id="project-{{ project.id }}">
     <div class="project-card__main">
       <div class="project-card__content">
         <span class="project-card__number">{{ forloop.index | prepend: '00' | slice: -2, 2 }}</span>