Merge pull request #311 from neural-loop/collaboration-network

Foundational Supporters: Collaboration network

Author: neural-loop

.github/workflows/main.yml

@@ -2,7 +2,7 @@ name: Deploy Hugo site to Pages
 
 on:
   push:
-    branches: ["main"]
+    branches: ["main", "collaboration-network"]
 
 
 permissions:

archetypes/community-resources.md

@@ -0,0 +1,36 @@
+---
+title: "{{ replace .Name "-" " " | title }}" # Resource Title, e.g., "Neuromorphic Engineering Blog"
+date: {{ .Date }}
+# Meta Description for SEO (120-160 characters):
+# Briefly describe the resource and its value to the neuromorphic community.
+description: "A description of this valuable community resource."
+image: "resource-logo.png" # Main logo or banner for the resource (place in this folder)
+draft: true
+type: "community-resources" # Do not change
+video: "" # Optional: YouTube video ID for an introductory video.
+
+# --- Resource Details ---
+# The primary type of the resource. E.g., "YouTube Channel", "Blog", "Podcast", "Community Website"
+resource_type: "Website" 
+# The main URL to access the resource
+website: "https://example.com"
+# Optional: List of authors/creators. Match with contributor profiles if they exist.
+author:
+  - "Creator Name"
+# Set to true if this resource is part of our foundational supporter network.
+is_supporter: false
+
+# --- Resource Log ---
+# Add entries here to log updates, new content, or milestones related to the resource.
+# Newest entries should be at the top.
+resource_log:
+  - date: "YYYY-MM-DD"
+    title: "First Log Entry"
+    description: "Briefly describe the update, e.g., 'Launched a new video series on SNNs'."
+    # Optional link to the specific update/content
+    # link: "https://example.com/update" 
+---
+
+Provide a more detailed overview of the resource here. This content will appear on its dedicated page.
+Explain what the community can find here, who it's for, and why it's a valuable resource.
+Use code with caution.

assets/js/main.js

@@ -1,3 +1,4 @@
+// assets/js/main.js
 // main script
 (function () {
   "use strict";
@@ -52,6 +53,8 @@
       bubblePool.push(bubble);
     }
     let activeBubbles = new Map();
+    let recentlyHidden = new Set();
+    const COOLDOWN_PERIOD = BUBBLE_INTERVAL;
 
     const updateBubblePositions = () => {
       activeBubbles.forEach((bubble, partner) => {
@@ -65,20 +68,38 @@
     };
     requestAnimationFrame(updateBubblePositions);
 
+    const setBubbleContent = (partner) => {
+      const name = partner.dataset.projectName || '';
+      const description = partner.dataset.projectDescription || '';
+      const contributions = partner.dataset.contributions;
+
+      return `
+        <div class="bubble-content">
+          <h4 class="bubble-title">${name}</h4>
+          <p class="bubble-description">${description}</p>
+          ${contributions ? `<div class="bubble-separator"></div><div class="bubble-contributions">${contributions}</div>` : ''}
+        </div>
+      `;
+    }
+
     const showBubble = (partner) => {
       const bubble = bubblePool.find(b => b.dataset.busy === 'false');
       if (!bubble) return;
+      partner.classList.add('is-highlighted');
       bubble.dataset.busy = 'true';
       activeBubbles.set(partner, bubble);
-      bubble.innerHTML = partner.dataset.contributions;
+      bubble.innerHTML = setBubbleContent(partner);
       bubble.classList.add('visible');
       setTimeout(() => hideBubble(partner, bubble), BUBBLE_LIFETIME);
     };
 
     const hideBubble = (partner, bubble) => {
+      partner.classList.remove('is-highlighted');
       bubble.classList.remove('visible');
       activeBubbles.delete(partner);
-      setTimeout(() => { bubble.dataset.busy = 'false'; }, 300);
+      recentlyHidden.add(partner);
+      setTimeout(() => { bubble.dataset.busy = 'false'; }, 400);
+      setTimeout(() => { recentlyHidden.delete(partner); }, COOLDOWN_PERIOD);
     };
 
     // --- NEW: Hover-triggered bubble logic ---
@@ -93,7 +114,7 @@
         // Hide any random bubbles that might be showing
         activeBubbles.forEach((bubble, p) => hideBubble(p, bubble));
 
-        hoverBubble.innerHTML = partner.dataset.contributions;
+        hoverBubble.innerHTML = setBubbleContent(partner);
 
         // Position calculation must happen *after* content is set
         const partnerRect = partner.getBoundingClientRect();
@@ -121,7 +142,7 @@
 
       if (isInView) {
         const availablePartners = partnersWithContributions.filter(p => {
-          if (activeBubbles.has(p)) return false;
+          if (activeBubbles.has(p) || recentlyHidden.has(p)) return false;
           const r = p.getBoundingClientRect();
           return r.left > 50 && r.right < window.innerWidth - 50;
         });

assets/scss/_typography-custom.scss

@@ -1,4 +1,5 @@
 // assets/scss/_typography-custom.scss
+// assets/scss/_typography-custom.scss
 
 // Define link colors as variables
 $link-color: var(--color-primary-new);
@@ -124,6 +125,7 @@ a {
 
 // REFACTORED: Centralized Link Styling
 .styled-link,
+.byline-link,
 .content :is(:where(a):not(:where([class~="not-prose"], [class~="not-prose"] *, .btn))),
 section a:not(.breadcrumb-link-parent, .social-link-container, .btn, .hardware-card-wide-link, .social-icon, .no-style),
 section a.social-link-container .social-link-text,

assets/scss/components/_community-partners.scss

@@ -1,16 +1,55 @@
 // assets/scss/components/_community-partners.scss
 .community-partners-section {
+  position: relative;
+  overflow: hidden;
+  background-color: #ffffff;
+
+  > * {
+    position: relative;
+    z-index: 2;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    background-image:
+      linear-gradient(45deg, theme('colors.body') 25%, transparent 105%),
+      linear-gradient(-45deg, theme('colors.body') 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, theme('colors.body') 75%),
+      linear-gradient(-45deg, transparent 75%, theme('colors.body') 75%);
+    background-size: 10px 10px;
+  }
+
+  .dark & {
+    background-color: theme('colors.darkmode.theme-dark');
+
+    &::after {
+      background-image:
+        linear-gradient(45deg, theme('colors.darkmode.body') 25%, transparent 105%),
+        linear-gradient(-45deg, theme('colors.darkmode.body') 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, theme('colors.darkmode.body') 75%),
+        linear-gradient(-45deg, transparent 75%, theme('colors.darkmode.body') 75%);
+    }
+  }
+
   .partners-slider-wrapper {
     overflow: hidden;
     -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
     mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
   }
 
   .partners-track {
+    @apply bg-white dark:bg-black;
     animation: scroll 40s linear infinite;
     &:hover {
       animation-play-state: paused;
     }
+    padding-bottom: 30px;
   }
 
   .partner-logo {
@@ -19,7 +58,8 @@
     transition: all 0.3s ease-in-out;
   }
 
-  .partner-logo-link:hover .partner-logo {
+  .partner-logo-link:hover .partner-logo,
+  .partner-logo-link.is-highlighted .partner-logo {
     filter: grayscale(0%);
     opacity: 1;
     transform: scale(1.05);
@@ -42,9 +82,15 @@
 }
 
 .contribution-bubble {
-  @apply absolute top-0 left-0 bg-dark dark:bg-darkmode-theme-dark text-white dark:text-darkmode-text text-xs font-semibold p-2 rounded-lg shadow-lg z-20 dark:border-2 dark:border-darkmode-border;
-  @apply opacity-0 invisible transition-opacity duration-300 ease-in-out;
+  @apply absolute top-0 left-0 dark:bg-darkmode-theme-dark text-white dark:text-darkmode-text rounded-lg shadow-lg z-40 dark:border-2 dark:border-darkmode-border;
+  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary-new) 40%, black) 0%, color-mix(in srgb, var(--color-secondary-new) 40%, black) 100%);
+  @apply opacity-0 invisible transition-opacity ease-in-out;
+  transition-duration: 300ms;
   will-change: opacity, transform;
+  max-width: 280px;
+  padding: 0.75rem;
+  text-align: left;
+  font-weight: 400;
 
   &.visible {
     @apply opacity-100;
@@ -56,10 +102,31 @@
     content: '';
     @apply absolute top-full left-1/2 -translate-x-1/2;
     @apply w-0 h-0 border-x-8 border-x-transparent border-t-8;
-    border-top-color: theme('colors.dark');
+    border-top-color: color-mix(in srgb, var(--color-secondary-new) 40%, black);
   }
 }
 
+.bubble-title {
+  @apply font-bold text-sm mb-1 text-white;
+}
+
+.bubble-description {
+  @apply text-xs text-gray-300 dark:text-white leading-snug;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.bubble-separator {
+  @apply h-px bg-gray-600 dark:bg-gray-500 my-2;
+}
+
+.bubble-contributions {
+  @apply text-xs font-semibold;
+}
+
+
 // Dark mode styles for the bubble's tail to add a border
 .dark .contribution-bubble {
   // Border for the tail
@@ -78,3 +145,45 @@
     margin-top: -2px;
   }
 }
+
+.byline-paragraph {
+  @apply inline-flex items-center rounded-bl-lg rounded-br-lg px-4 py-2;
+
+  &::before, &::after {
+    content: '';
+    display: inline-block;
+    width: 30px;
+    height: 16px;
+    flex-shrink: 0;
+    background-size: 8px 8px;
+    background-color: var(--color-secondary-new);
+  }
+
+  &::before {
+    margin-right: 0.75rem;
+    background-image:
+      linear-gradient(45deg, theme('colors.body') 25%, transparent 25%),
+      linear-gradient(-45deg, theme('colors.body') 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, theme('colors.body') 75%),
+      linear-gradient(-45deg, transparent 75%, theme('colors.body') 75%);
+  }
+  &::after {
+    margin-left: 0.75rem;
+    background-image:
+      linear-gradient(45deg, theme('colors.body') 25%, transparent 25%),
+      linear-gradient(-45deg, theme('colors.body') 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, theme('colors.body') 75%),
+      linear-gradient(-45deg, transparent 75%, theme('colors.body') 75%);
+  }
+
+  .dark & {
+    &::before, &::after {
+      background-color: var(--color-primary-new);
+      background-image:
+        linear-gradient(45deg, theme('colors.darkmode.body') 25%, transparent 25%),
+        linear-gradient(-45deg, theme('colors.darkmode.body') 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, theme('colors.darkmode.body') 75%),
+        linear-gradient(-45deg, transparent 75%, theme('colors.darkmode.body') 75%);
+    }
+  }
+}

assets/scss/custom.scss

@@ -10,6 +10,50 @@
   --shadow-md-new: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 
+// Hero section background with fading checkerboard
+.hero-section {
+  position: relative;
+  overflow: hidden;
+  background-color: #ffffff;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    background-image:
+      linear-gradient(45deg, theme('colors.body') 25%, transparent 100%),
+      linear-gradient(-45deg, theme('colors.body') 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, theme('colors.body') 75%),
+      linear-gradient(-45deg, transparent 75%, theme('colors.body') 75%);
+    background-size: 10px 10px;
+    mask-image: linear-gradient(to bottom, black 0%, transparent 40%, transparent 60%, black 100%);
+    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 40%, transparent 60%, black 100%);
+  }
+
+  // Ensure content is above the pattern
+  > .container {
+    position: relative;
+    z-index: 1;
+  }
+}
+
+.dark .hero-section {
+  background-color: theme('colors.darkmode.theme-dark');
+
+  &::before {
+    background-image:
+      linear-gradient(45deg, theme('colors.darkmode.body') 25%, transparent 100%),
+      linear-gradient(-45deg, theme('colors.darkmode.body') 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, theme('colors.darkmode.body') 75%),
+      linear-gradient(-45deg, transparent 75%, theme('colors.darkmode.body') 75%);
+  }
+}
+
+
 .nav-dropdown.active .nav-dropdown-list {
   @apply lg:bg-white dark:lg:bg-darkmode-theme-dark;
 }