Merge pull request #442 from hyphacoop/add-interchain-content

Add interchain practice area page

_includes/sections/header.html

@@ -1,6 +1,6 @@
 <div class="flex sans-serif ">
   <div class="w-90 w-100-ns">
-    <a href="{{ "/" | relative_url }}" class="flex flex-wrap items-baseline no-underline " id="hypha-title">
+    <a href="{{ "/" | relative_url }}" class="flex flex-wrap items-baseline no-underline " id="hypha-title" aria-label="Go to our home page">
       <h1 class="f4 f3-ns fw9 ttu ma0 accent mr2">Hypha</h1>
       <h2 class=" gray f4 fw5 f3-ns normal ma0">Worker Co-operative</h2></a>
   </div>

_includes/sections/navigation.html

@@ -1,20 +1,109 @@
 <a class="f4 f3-ns accent link underline-hover db dn-l" href="#" aria-label="Close menu">Close menu</a>
-
 <h2 id="menu-heading" class="clip">Menu</h2>
 <ul aria-labelledby="menu-heading" class="list mv4 mv0-l pa0 f3 ml3-l pl3-l flex flex-column flex-row-l items-end">
   {% assign pages = site.pages | sort: 'order' %}
   {% assign current_page = page.url %}
   {% assign current_page_slug = page.url | split: '/' %}
   {%- for page in pages -%}
     {% if page.menu_title %}
-      <li>
-        <a class="pa3 pv0-l db link underline-hover hover-accent mid-gray {% if page.url contains current_page_slug[1] or page.url == current_page %}accent underline{% endif %}" href="{{ page.url | relative_url }}">{{ page.menu_title }}</a>
-      </li>
+      {% if page.menu_title == "Work" %}
+        <li class="dropdown-container relative">
+          <a class="pa3 pv0-l db link underline-hover hover-accent mid-gray {% if current_page_slug[1] == 'work' %}accent underline{% endif %}" 
+             href="{{ page.url | relative_url }}" 
+             aria-haspopup="true">
+            {{ page.menu_title }}&nbsp;&#9662;
+          </a>
+          <ul class="dropdown-menu absolute bg-white list pa0 mt1 dn flex-column z-1" aria-label="Work submenu">
+            {%- for page in pages -%}
+              {% if page.work_menu_title %}
+                <li>
+                  <a class="pa3 db link underline-hover hover-accent mid-gray {% if current_page contains page.url %}accent underline{% endif %}" href="{{ page.url | relative_url }}">
+                    {{ page.title }}
+                  </a>
+                </li>
+              {% endif %}
+            {%- endfor -%}
+          </ul>
+        </li>
+      {% else %}
+        <li>
+          <a class="pa3 pv0-l db link underline-hover hover-accent mid-gray {% if page.url contains current_page_slug[1] or page.url == current_page %}accent underline{% endif %}" 
+             href="{{ page.url | relative_url }}">
+            {{ page.menu_title }}
+          </a>
+        </li>
+      {% endif %}
     {% endif %}
   {%- endfor -%}
-      <li>
-        <a class="pa3 pv0-l db link underline-hover hover-accent mid-gray " href="/people#openings">Openings</a>
-      </li>
+  {% if site.openings != empty %}
+    <li>
+      <a class="pa3 pv0-l db link underline-hover hover-accent mid-gray " href="/people#openings">Openings</a>
+    </li>
+  {% endif %}
 </ul>
+<p class="gray b sans-serif db dn-l"><span class="dib mr2">Email</span><a class="accent link underline-hover dib sans dn-l normal" href="mailto:{{ site.email-hidden }}">{{ site.email }}</a></p>
+
+<!-- CSS for dropdown functionality -->
+<style>
+  /* Desktop dropdown behavior */
+  @media screen and (min-width: 75em) {
+    .dropdown-container {
+      position: relative;
+    }
+
+    .dropdown-container:hover .dropdown-menu {
+      display: flex;
+    }
+
+    .dropdown-menu {
+      min-width: 300px;
+      top: 100%;
+      left: 0;
+      margin-top: 0;
+      padding-top: 0.5rem;
+      line-height: 0.5;
+    }
+  }
+
+  /* Mobile dropdown behavior */
+  @media screen and (max-width: 75em) {
+    .dropdown-container {
+      display: flex;
+      flex-direction: column;
+      align-items: end;
+    }
+
+    .dropdown-container.active .dropdown-menu {
+      display: flex;
+    }
+
+    .dropdown-menu {
+      position: static;
+      box-shadow: none;
+      border-left: 2px solid #ccc;
+      margin-left: 1rem;
+      border-radius: 0;
+    }
+
+    .dropdown-menu a {
+      padding-left: 1.5rem;
+    }
+  }
+</style>
 
-<p class="gray b sans-serif db dn-l "><span class="dib mr2">Email</span><a class="accent link underline-hover dib sans dn-l normal" href="mailto:{{ site.email-hidden }}">{{ site.email }}</a></p>
+<!-- JavaScript for mobile dropdown toggle -->
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const dropdownToggle = document.querySelector('.dropdown-container > a');
+
+    if (dropdownToggle) {
+      dropdownToggle.addEventListener('click', function(e) {
+        // Only prevent default on mobile
+        if (window.innerWidth < 1200) {
+          e.preventDefault();
+          this.parentElement.classList.toggle('active');
+        }
+      });
+    }
+  });
+</script>

_work/cosmos.md

@@ -1,8 +1,9 @@
 ---
-title: Cosmos
+title: Cosmos Hub Testnets Program
 logo: /assets/images/logos/cosmos-logo.png
 preview: true
 excerpt_separator: <!-- more -->
-practice_area: Interchain
+practice_area: Interchain Operations
 ---
-Hypha is a  <a class="link accent" href="https://hub.cosmos.network/main/hub-overview/overview.html">Cosmos Hub</a> core team and Interchain Foundation grant recipient, focusing on testnet management. <a href="/doescosmos">Read about our work</a>.<!-- more --> We manage Cosmos Hub testnets where we run infrastructure and coordinate with validators, developers, and users to test software releases and build technical capacity in the ecosystem. 
+From 2021 to 2025, we have managed three persistent <a class="link accent" href="https://github.com/cosmos/testnets/" target="_blank">testnets</a>, several devnets, and multiple short-lived networks, providing a robust platform for validators, developers, and integrators to onboard the Cosmos Hub, test infrastructure, and prepare for new features.
+

_work/isle-testnet.md

@@ -0,0 +1,8 @@
+---
+title: ISLE Testnet
+logo: /assets/images/logos/isle.png
+preview: true
+excerpt_separator: <!-- more -->
+practice_area: Interchain Operations
+---
+We ran the <a class="link accent" href="https://github.com/cosmos/testnets/tree/master/isle" target="_blank">Interchain Security Lightning Experiment</a>, an incentivized testnet designed to expose validators to Partial Set Security in the Cosmos Hub by guiding participants through six consumer chain launches.

_work/loro-testnet.md

@@ -0,0 +1,8 @@
+---
+title: LORO Testnet
+logo: /assets/images/logos/laconic.png
+preview: true
+excerpt_separator: <!-- more -->
+practice_area: Interchain Operations
+---
+We designed and executed the <a class="link accent" href="https://github.com/LaconicNetwork/loro-testnet" target="_blank">Laconic Operational Ranking and Onboarding testnet</a>, successfully onboarding validators to the Laconic network while evaluating participants' capabilities in provisioning services.

_work/valence.md

@@ -0,0 +1,8 @@
+---
+title: Valence Protocol
+logo: /assets/images/logos/valence.png
+preview: true
+excerpt_separator: <!-- more -->
+practice_area: Interchain Operations
+---
+Our members are core contributors to the <a class="link accent" href="https://www.valence.zone/" target="_blank">Valence Protocol</a>, a unified stack for building secure cross-chain DeFi applications. 

co-creation-lab.html

@@ -1,8 +1,11 @@
 ---
 layout: practice_area
 title: Co-Creation Lab
+work_menu_title: true
 excerpt: "A vision for reclaiming tech for arts, culture, and activism through holistic co-creation"
 image: "/assets/images/social/c-lab.webp"
+diagram: "assets/images/c-lab.svg"
+diagram_alt_text: "A diagram illustrating the Co-Creation Lab practice area. At the center is a large circle labeled 'Co-Creation Lab,' with arrows extending outward to several related areas. On the left, three smaller circles represent 'Art,' 'Culture,' and 'Activism.' On the right, three larger circles represent 'Sustainability,' 'Autonomy,' and 'Access.' The diagram uses a bold purple color scheme, with varying circle sizes emphasizing different focus areas."
 description: 
 
 tagline: "We're dedicated to fostering access, autonomy, and sustainability in all our projects."

data-provenance.html

@@ -1,6 +1,7 @@
 ---
 layout: practice_area
 title: Data Provenance
+work_menu_title: true
 excerpt: "Where cryptography innovations meet the most defining issues of our time"
 image: "/assets/images/social/data-provenance.webp"
 diagram: "assets/images/data-provenance.svg"

index.html

@@ -4,8 +4,9 @@
 layout: default
 order: 1
 what_we_do:
-  - title: Interchain
+  - title: Interchain Operations
     description: As core contributors to the Cosmos ecosystem, we've been building products and programs for the Interchain since 2021. 
+    slug: "interchain-operations"
     order: 3
   - title: Data Provenance
     description: We enable decentralized trust models and equitable AI innovations rooted in multistakeholder governance and applied cryptography.

interchain-operations.html

@@ -0,0 +1,22 @@
+---
+layout: practice_area
+title: Interchain Operations
+work_menu_title: true
+excerpt: "Coordinating humans and technology to deliver reliable decentralized networks"
+image: "/assets/images/social/interchain-operations-i.webp"
+diagram: "assets/images/interchain-operations.webp"
+diagram_alt_text: "A diagram illustrating the Interchain Operations practice area. Arrows extend from 'Interchain Operations' to several related areas, including 'Chains Launched' (25+), 'Chain Upgrades' (70+), 'Validators Served' (350+), and 'Game Days' (100+). The diagram is set against a vibrant purple background, with bold typography emphasizing the key metrics. The word 'HYPHA' is prominently displayed at the bottom."
+description:
+tagline: "Decentralized networks are complex in multiple ways. Bleeding edge technology meets a diverse group of people spread across time zones, skill levels, and life experiences. From our technical knowledge of chain operations to organizing the people behind the nodes, we are industry leading experts in deploying, testing, and operating Cosmos SDK-based blockchains."
+services:
+  - title: Testnets
+    description:
+      - "We operate testnets that have proven crucial for blockchain projects securing billions in assets. Our custom-built monitoring and launch tools provide insights into network behaviour and participation, enabling us to track and deliver the outcomes our development partners require. Our programs consistently achieve high engagement from node operators and users, creating an environment that surfaces critical issues before mainnet deployment. These testnet environments serve as platforms for product and technical research, allowing projects to validate their assumptions and refine their approaches in a controlled setting."
+  - title: Technical Program Management
+    description:
+      - "We craft long- and short-term programs to help development teams take new features and technologies to market alongside operators with diverse skill levels. We have years of experience supporting and guiding multiple dev teams, validators, and node operators through complicated, risky manoeuvres on both testnets and production chains with a huge number of moving parts. From coordinating incident responses to building validator sets, managing network upgrades, or providing technical education to network participants, we create programs that keep networks humming. We understand that technical events often bring surprises, so we maintain the flexibility to adapt swiftly to changing circumstances."
+      - "Our impact extends beyond immediate program management – we consistently produce comprehensive technical documentation, experience reports, and other resources that contribute to the growing knowledge base of project ecosystems."
+  - title: Product Delivery
+    description:
+      - "We ensure successful product delivery for select partners in and adjacent to the Cosmos ecosystem. Our involvement spans the entire development lifecycle, from early-stage consultation and requirements gathering to full product realization. We offer expertise in MVP development, iterative software development, product roadmap creation, user feedback integration, and day-to-day project management. Our aim is to always deliver products that are well tested, are a delight to use and operate, and not only meet current needs but are positioned for future growth."
+---