From b842df040cb536050747c5be05784f3555a9eea1 Mon Sep 17 00:00:00 2001
From: overcuriousity <overcuriousity@posteo.org>
Date: Mon, 14 Jul 2025 16:56:06 +0200
Subject: [PATCH] adjust dual urls

---
 src/components/ToolCard.astro   |  32 +++-
 src/components/ToolMatrix.astro | 256 +++++++++++++++++++++++++-------
 src/data/tools.yaml             |  59 +++++++-
 src/pages/index.astro           | 161 ++++++++++++--------
 src/styles/global.css           |  69 +++++++++
 5 files changed, 452 insertions(+), 125 deletions(-)

diff --git a/src/components/ToolCard.astro b/src/components/ToolCard.astro
index e4bf10a..e121f7c 100644
--- a/src/components/ToolCard.astro
+++ b/src/components/ToolCard.astro
@@ -9,6 +9,7 @@ export interface Props {
     skillLevel: string;
     accessType: string;
     url: string;
+    projectUrl?: string;
     license: string;
     tags: string[];
     isHosted: boolean;
@@ -20,6 +21,12 @@ const { tool } = Astro.props;
 
 // Determine card styling
 const cardClass = tool.isHosted ? 'card card-hosted' : (tool.license !== 'Proprietary' ? 'card card-oss' : 'card');
+
+// Check if tool has a valid project URL for hosted services
+const hasValidProjectUrl = tool.projectUrl !== undefined && 
+                          tool.projectUrl !== null && 
+                          tool.projectUrl !== "" && 
+                          tool.projectUrl.trim() !== "";
 ---
 
 <div class={cardClass}>
@@ -74,7 +81,26 @@ const cardClass = tool.isHosted ? 'card card-hosted' : (tool.license !== 'Propri
     ))}
   </div>
   
-  <a href={tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="width: 100%;">
-    {tool.isHosted ? 'Access Service' : 'Visit Website'}
-  </a>
+  <!-- Button section - different layouts for hosted vs non-hosted -->
+  {tool.isHosted && hasValidProjectUrl ? (
+    <!-- Two buttons for self-hosted tools with both URLs -->
+    <div style="display: flex; gap: 0.5rem;">
+      <a href={tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-secondary" style="flex: 1;">
+        Project Page
+      </a>
+      <a href={tool.projectUrl} target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="flex: 1;">
+        Access Service
+      </a>
+    </div>
+  ) : tool.isHosted ? (
+    <!-- Single button for self-hosted tools with only project URL -->
+    <a href={tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="width: 100%;">
+      Project Page
+    </a>
+  ) : (
+    <!-- Single button for non-hosted tools -->
+    <a href={tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="width: 100%;">
+      Visit Website
+    </a>
+  )}
 </div>
\ No newline at end of file
diff --git a/src/components/ToolMatrix.astro b/src/components/ToolMatrix.astro
index ada2984..b2e2c2f 100644
--- a/src/components/ToolMatrix.astro
+++ b/src/components/ToolMatrix.astro
@@ -12,12 +12,21 @@ const domains = data.domains;
 const phases = data.phases;
 const tools = data.tools;
 
-// Create matrix structure
+// Separate collaboration tools from domain-specific tools
+const collaborationTools = tools.filter((tool: any) => 
+  tool.phases.includes('collaboration')
+);
+
+const domainTools = tools.filter((tool: any) => 
+  !tool.phases.includes('collaboration')
+);
+
+// Create matrix structure for domain-specific tools only
 const matrix: Record<string, Record<string, any[]>> = {};
 domains.forEach((domain: any) => {
   matrix[domain.id] = {};
-  phases.forEach((phase: any) => {
-    matrix[domain.id][phase.id] = tools.filter((tool: any) => 
+  phases.filter((phase: any) => phase.id !== 'collaboration').forEach((phase: any) => {
+    matrix[domain.id][phase.id] = domainTools.filter((tool: any) => 
       tool.domains.includes(domain.id) && tool.phases.includes(phase.id)
     );
   });
@@ -25,36 +34,67 @@ domains.forEach((domain: any) => {
 ---
 
 <div id="matrix-container" class="matrix-wrapper" style="display: none;">
-  <table class="matrix-table">
-    <thead>
-      <tr>
-        <th style="width: 200px;">Domain / Phase</th>
-        {phases.map((phase: any) => (
-          <th>{phase.name}</th>
-        ))}
-      </tr>
-    </thead>
-    <tbody>
-      {domains.map((domain: any) => (
+  <!-- Collaboration Tools Section (compact horizontal layout for matrix view) -->
+  <div id="collaboration-tools-section" style="margin-bottom: 1.5rem;">
+    <h3 style="margin-bottom: 0.75rem; color: var(--color-text); font-size: 1.125rem;">General Tools for Collaboration</h3>
+    <div class="collaboration-tools-compact" id="collaboration-tools-container">
+      {collaborationTools.map((tool: any) => (
+        <div class={`collaboration-tool-compact ${tool.isHosted ? 'hosted' : tool.license !== 'Proprietary' ? 'oss' : ''}`}
+             onclick={`window.showToolDetails('${tool.name}')`}>
+          <div class="tool-compact-header">
+            <h4 style="margin: 0; font-size: 0.875rem; font-weight: 600;">{tool.name}</h4>
+            <div style="display: flex; gap: 0.25rem;">
+              {tool.isHosted && <span class="badge-mini badge-primary">Self-Hosted</span>}
+              {tool.license !== 'Proprietary' && <span class="badge-mini badge-success">OSS</span>}
+            </div>
+          </div>
+          <p style="font-size: 0.75rem; color: var(--color-text-secondary); margin: 0.25rem 0; line-height: 1.3;">
+            {tool.description}
+          </p>
+          <div style="display: flex; gap: 0.75rem; font-size: 0.6875rem; color: var(--color-text-secondary);">
+            <span>{tool.platforms.join(', ')}</span>
+            <span>•</span>
+            <span>{tool.skillLevel}</span>
+          </div>
+        </div>
+      ))}
+    </div>
+  </div>
+
+  <!-- DFIR Tools Matrix -->
+  <div id="dfir-matrix-section">
+    <h2 style="margin-bottom: 1rem; color: var(--color-text);">DFIR Tools Matrix</h2>
+    <table class="matrix-table">
+      <thead>
         <tr>
-          <th>{domain.name}</th>
-          {phases.map((phase: any) => (
-            <td class="matrix-cell" data-domain={domain.id} data-phase={phase.id}>
-              {matrix[domain.id][phase.id].map((tool: any) => (
-                <span 
-                  class={`tool-chip ${tool.isHosted ? 'tool-chip-hosted' : tool.license !== 'Proprietary' ? 'tool-chip-oss' : ''}`}
-                  data-tool-name={tool.name}
-                  onclick={`window.showToolDetails('${tool.name}')`}
-                >
-                  {tool.name}
-                </span>
-              ))}
-            </td>
+          <th style="width: 200px;">Domain / Phase</th>
+          {phases.filter((phase: any) => phase.id !== 'collaboration').map((phase: any) => (
+            <th>{phase.name}</th>
           ))}
         </tr>
-      ))}
-    </tbody>
-  </table>
+      </thead>
+      <tbody>
+        {domains.map((domain: any) => (
+          <tr>
+            <th>{domain.name}</th>
+            {phases.filter((phase: any) => phase.id !== 'collaboration').map((phase: any) => (
+              <td class="matrix-cell" data-domain={domain.id} data-phase={phase.id}>
+                {matrix[domain.id][phase.id].map((tool: any) => (
+                  <span 
+                    class={`tool-chip ${tool.isHosted ? 'tool-chip-hosted' : tool.license !== 'Proprietary' ? 'tool-chip-oss' : ''}`}
+                    data-tool-name={tool.name}
+                    onclick={`window.showToolDetails('${tool.name}')`}
+                  >
+                    {tool.name}
+                  </span>
+                ))}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
 </div>
 
 <!-- Tool Details Modal -->
@@ -78,12 +118,11 @@ domains.forEach((domain: any) => {
   
   <div id="tool-tags" style="margin-bottom: 1rem;"></div>
   
-  <a id="tool-link" href="#" target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="width: 100%;">
-    Visit Website
-  </a>
+  <!-- Updated button container for dual buttons -->
+  <div id="tool-links" style="display: flex; gap: 0.5rem;"></div>
 </div>
 
-<script define:vars={{ toolsData: tools }}>
+<script define:vars={{ toolsData: tools, collaborationTools, domainTools }}>
   // Tool details functions
   window.showToolDetails = function(toolName) {
     const tool = toolsData.find(t => t.name === toolName);
@@ -105,14 +144,16 @@ domains.forEach((domain: any) => {
     
     // Metadata
     const metadataContainer = document.getElementById('tool-metadata');
+    const domainsText = tool.domains.length > 0 ? tool.domains.join(', ') : 'Domain-agnostic';
+    const phasesText = tool.phases.join(', ');
     metadataContainer.innerHTML = `
       <div style="display: grid; gap: 0.5rem;">
         <div><strong>Platforms:</strong> ${tool.platforms.join(', ')}</div>
         <div><strong>Skill Level:</strong> ${tool.skillLevel}</div>
         <div><strong>License:</strong> ${tool.license}</div>
         <div><strong>Access Type:</strong> ${tool.accessType}</div>
-        <div><strong>Domains:</strong> ${tool.domains.join(', ')}</div>
-        <div><strong>Phases:</strong> ${tool.phases.join(', ')}</div>
+        <div><strong>Domains:</strong> ${domainsText}</div>
+        <div><strong>Phases:</strong> ${phasesText}</div>
       </div>
     `;
     
@@ -124,10 +165,38 @@ domains.forEach((domain: any) => {
       </div>
     `;
     
-    // Link
-    const linkElement = document.getElementById('tool-link');
-    linkElement.href = tool.url;
-    linkElement.textContent = tool.isHosted ? 'Access Service' : 'Visit Website';
+    // Links - Updated to handle dual buttons for self-hosted tools
+    const linksContainer = document.getElementById('tool-links');
+    const hasValidProjectUrl = tool.projectUrl !== undefined && 
+                              tool.projectUrl !== null && 
+                              tool.projectUrl !== "" && 
+                              tool.projectUrl.trim() !== "";
+    
+    if (tool.isHosted && hasValidProjectUrl) {
+      // Two buttons for self-hosted tools with both URLs
+      linksContainer.innerHTML = `
+        <a href="${tool.url}" target="_blank" rel="noopener noreferrer" class="btn btn-secondary" style="flex: 1;">
+          Project Page
+        </a>
+        <a href="${tool.projectUrl}" target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="flex: 1;">
+          Access Service
+        </a>
+      `;
+    } else if (tool.isHosted) {
+      // Single button for self-hosted tools with only project URL
+      linksContainer.innerHTML = `
+        <a href="${tool.url}" target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="width: 100%;">
+          Project Page
+        </a>
+      `;
+    } else {
+      // Single button for non-hosted tools
+      linksContainer.innerHTML = `
+        <a href="${tool.url}" target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="width: 100%;">
+          Visit Website
+        </a>
+      `;
+    }
     
     // Show modal
     document.getElementById('modal-overlay').classList.add('active');
@@ -145,26 +214,99 @@ domains.forEach((domain: any) => {
     const currentView = document.querySelector('.view-toggle.active')?.getAttribute('data-view');
     
     if (currentView === 'matrix') {
-      // Update matrix cells
-      document.querySelectorAll('.matrix-cell').forEach(cell => {
-        cell.innerHTML = '';
-      });
+      const selectedPhase = document.getElementById('phase-select')?.value;
       
-      // Re-populate with filtered tools
-      filtered.forEach(tool => {
-        tool.domains.forEach(domain => {
-          tool.phases.forEach(phase => {
-            const cell = document.querySelector(`[data-domain="${domain}"][data-phase="${phase}"]`);
-            if (cell) {
-              const chip = document.createElement('span');
-              chip.className = `tool-chip ${tool.isHosted ? 'tool-chip-hosted' : tool.license !== 'Proprietary' ? 'tool-chip-oss' : ''}`;
-              chip.textContent = tool.name;
-              chip.onclick = () => window.showToolDetails(tool.name);
-              cell.appendChild(chip);
-            }
+      // Handle collaboration tools section
+      const collaborationSection = document.getElementById('collaboration-tools-section');
+      const dfirMatrixSection = document.getElementById('dfir-matrix-section');
+      const collaborationContainer = document.getElementById('collaboration-tools-container');
+      
+      if (selectedPhase === 'collaboration') {
+        // Show only collaboration tools, hide matrix
+        collaborationSection.style.display = 'block';
+        dfirMatrixSection.style.display = 'none';
+        
+        // Filter collaboration tools
+        const filteredCollaboration = filtered.filter(tool => tool.phases.includes('collaboration'));
+        collaborationContainer.innerHTML = '';
+        
+        filteredCollaboration.forEach(tool => {
+          const toolCard = createCollaborationToolCardCompact(tool);
+          collaborationContainer.appendChild(toolCard);
+        });
+      } else {
+        // Show matrix, handle collaboration tools visibility
+        dfirMatrixSection.style.display = 'block';
+        
+        if (selectedPhase === '' || selectedPhase === null) {
+          // Show collaboration tools when no specific phase is selected
+          collaborationSection.style.display = 'block';
+          
+          // Show all collaboration tools that pass general filters
+          const filteredCollaboration = filtered.filter(tool => tool.phases.includes('collaboration'));
+          collaborationContainer.innerHTML = '';
+          
+          filteredCollaboration.forEach(tool => {
+            const toolCard = createCollaborationToolCardCompact(tool);
+            collaborationContainer.appendChild(toolCard);
+          });
+        } else {
+          // Hide collaboration tools when specific DFIR phase is selected
+          collaborationSection.style.display = 'none';
+        }
+        
+        // Clear and update matrix cells with DFIR tools only
+        document.querySelectorAll('.matrix-cell').forEach(cell => {
+          cell.innerHTML = '';
+        });
+        
+        // Re-populate with filtered DFIR tools
+        const filteredDfirTools = filtered.filter(tool => !tool.phases.includes('collaboration'));
+        filteredDfirTools.forEach(tool => {
+          tool.domains.forEach(domain => {
+            tool.phases.forEach(phase => {
+              if (phase !== 'collaboration') {
+                const cell = document.querySelector(`[data-domain="${domain}"][data-phase="${phase}"]`);
+                if (cell) {
+                  const chip = document.createElement('span');
+                  chip.className = `tool-chip ${tool.isHosted ? 'tool-chip-hosted' : tool.license !== 'Proprietary' ? 'tool-chip-oss' : ''}`;
+                  chip.textContent = tool.name;
+                  chip.onclick = () => window.showToolDetails(tool.name);
+                  cell.appendChild(chip);
+                }
+              }
+            });
           });
         });
-      });
+      }
     }
   });
+
+  // Helper function to create compact collaboration tool cards for matrix view
+  function createCollaborationToolCardCompact(tool) {
+    const cardDiv = document.createElement('div');
+    const cardClass = `collaboration-tool-compact ${tool.isHosted ? 'hosted' : tool.license !== 'Proprietary' ? 'oss' : ''}`;
+    cardDiv.className = cardClass;
+    cardDiv.onclick = () => window.showToolDetails(tool.name);
+    
+    cardDiv.innerHTML = `
+      <div class="tool-compact-header">
+        <h4 style="margin: 0; font-size: 0.875rem; font-weight: 600;">${tool.name}</h4>
+        <div style="display: flex; gap: 0.25rem;">
+          ${tool.isHosted ? '<span class="badge-mini badge-primary">Self-Hosted</span>' : ''}
+          ${tool.license !== 'Proprietary' ? '<span class="badge-mini badge-success">OSS</span>' : ''}
+        </div>
+      </div>
+      <p style="font-size: 0.75rem; color: var(--color-text-secondary); margin: 0.25rem 0; line-height: 1.3;">
+        ${tool.description}
+      </p>
+      <div style="display: flex; gap: 0.75rem; font-size: 0.6875rem; color: var(--color-text-secondary);">
+        <span>${tool.platforms.join(', ')}</span>
+        <span>•</span>
+        <span>${tool.skillLevel}</span>
+      </div>
+    `;
+    
+    return cardDiv;
+  }
 </script>
\ No newline at end of file
diff --git a/src/data/tools.yaml b/src/data/tools.yaml
index a75e5e9..df75d2f 100644
--- a/src/data/tools.yaml
+++ b/src/data/tools.yaml
@@ -15,6 +15,7 @@ tools:
     skillLevel: "intermediate"
     accessType: "download"
     url: "https://www.autopsy.com/"
+    projectUrl: ""
     license: "Apache 2.0"
     tags: ["disk-forensics", "file-recovery", "timeline-analysis"]
     isHosted: false
@@ -30,6 +31,7 @@ tools:
     skillLevel: "advanced"
     accessType: "download"
     url: "https://www.volatilityfoundation.org/"
+    projectUrl: ""
     license: "VSL"
     tags: ["memory-forensics", "malware-analysis", "incident-response"]
     isHosted: false
@@ -48,7 +50,8 @@ tools:
     platforms: ["Web"]
     skillLevel: "intermediate"
     accessType: "self-hosted"
-    url: "https://thehive.example.lab"
+    url: "https://strangebee.com/"
+    projectUrl: ""
     license: "AGPL-3.0"
     tags: ["incident-response", "case-management", "collaboration"]
     isHosted: true
@@ -66,7 +69,8 @@ tools:
     platforms: ["Web"]
     skillLevel: "intermediate"
     accessType: "self-hosted"
-    url: "https://misp.example.lab"
+    url: "https://misp-project.org/"
+    projectUrl: "https://misp.cc24.dev"
     license: "AGPL-3.0"
     tags: ["threat-intelligence", "ioc-sharing", "collaboration"]
     isHosted: true
@@ -83,7 +87,8 @@ tools:
     platforms: ["Web"]
     skillLevel: "intermediate"
     accessType: "self-hosted"
-    url: "https://timesketch.example.lab"
+    url: "https://timesketch.org/"
+    projectUrl: "https://timesketch.cc24.dev"
     license: "Apache 2.0"
     tags: ["timeline-analysis", "collaboration", "visualization"]
     isHosted: true
@@ -101,6 +106,7 @@ tools:
     skillLevel: "intermediate"
     accessType: "download"
     url: "https://www.wireshark.org/"
+    projectUrl: ""
     license: "GPL-2.0"
     tags: ["network-analysis", "pcap", "protocol-analysis"]
     isHosted: false
@@ -119,6 +125,7 @@ tools:
     skillLevel: "advanced"
     accessType: "commercial"
     url: "https://www.opentext.com/products/encase-forensic"
+    projectUrl: ""
     license: "Proprietary"
     tags: ["commercial", "enterprise", "court-approved"]
     isHosted: false
@@ -135,6 +142,7 @@ tools:
     skillLevel: "advanced"
     accessType: "self-hosted"
     url: "https://cuckoosandbox.org/"
+    projectUrl: ""
     license: "GPL-3.0"
     tags: ["malware-analysis", "sandbox", "dynamic-analysis"]
     isHosted: true
@@ -151,6 +159,7 @@ tools:
     skillLevel: "intermediate"
     accessType: "download"
     url: "https://exterro.com/ftk-imager"
+    projectUrl: ""
     license: "Proprietary"
     tags: ["disk-imaging", "preview", "data-acquisition"]
     isHosted: false
@@ -167,6 +176,7 @@ tools:
     skillLevel: "advanced"
     accessType: "self-hosted"
     url: "https://github.com/google/grr"
+    projectUrl: ""
     license: "Apache 2.0"
     tags: ["live-forensics", "remote-response", "dfir"]
     isHosted: true
@@ -183,6 +193,7 @@ tools:
     skillLevel: "intermediate"
     accessType: "download"
     url: "https://plaso.readthedocs.io/"
+    projectUrl: ""
     license: "Apache 2.0"
     tags: ["timeline-analysis", "log-parsing", "dfir"]
     isHosted: false
@@ -198,6 +209,7 @@ tools:
     skillLevel: "intermediate"
     accessType: "download"
     url: "https://www.netresec.com/?page=NetworkMiner"
+    projectUrl: ""
     license: "Freeware/Commercial"
     tags: ["pcap-analysis", "passive-sniffing", "credential-recovery"]
     isHosted: false
@@ -214,6 +226,7 @@ tools:
     skillLevel: "intermediate"
     accessType: "download"
     url: "https://www.mandiant.com/resources/download/redline"
+    projectUrl: ""
     license: "Proprietary"
     tags: ["memory-analysis", "ioc-scan", "host-analysis"]
     isHosted: false
@@ -230,6 +243,7 @@ tools:
     skillLevel: "intermediate"
     accessType: "download"
     url: "https://www.kroll.com/en/services/cyber-risk/incident-response-litigation-support/kroll-artifact-parser-extractor-kape"
+    projectUrl: ""
     license: "Freeware"
     tags: ["triage", "artifact-collection", "parsing"]
     isHosted: false
@@ -246,6 +260,7 @@ tools:
     skillLevel: "advanced"
     accessType: "self-hosted"
     url: "https://www.velociraptor.app/"
+    projectUrl: ""
     license: "Apache 2.0"
     tags: ["dfir", "hunting", "endpoint-monitoring"]
     isHosted: true
@@ -262,6 +277,7 @@ tools:
     skillLevel: "advanced"
     accessType: "self-hosted"
     url: "https://arkime.com/"
+    projectUrl: ""
     license: "Apache 2.0"
     tags: ["packet-capture", "full-packet-analysis", "network-forensics"]
     isHosted: true
@@ -279,10 +295,43 @@ tools:
     skillLevel: "advanced"
     accessType: "commercial"
     url: "https://www.x-ways.net/forensics/"
+    projectUrl: ""
     license: "Proprietary"
     tags: ["disk-forensics", "file-recovery", "commercial"]
     isHosted: false
 
+  # Collaboration Tools - Domain-agnostic
+  - name: "Nextcloud"
+    description: "Self-hosted file sharing and collaboration platform for secure data exchange"
+    domains: []  # Domain-agnostic
+    phases:
+      - "collaboration"
+    platforms: ["Web"]
+    skillLevel: "beginner"
+    accessType: "self-hosted"
+    url: "https://nextcloud.com/de/"
+    projectUrl: "https://cloud.cc24.dev"
+    license: "AGPL-3.0"
+    tags: ["file-sharing", "collaboration", "document-management", "secure-storage"]
+    isHosted: true
+    statusUrl: "https://uptime.example.lab/api/badge/10/status"
+
+  - name: "Gitea"
+    description: "Lightweight self-hosted Git service for code collaboration and version control"
+    domains: []  # Domain-agnostic
+    phases:
+      - "collaboration"
+    platforms: ["Web"]
+    skillLevel: "intermediate"
+    accessType: "self-hosted"
+    url: "https://git.example.lab"
+    projectUrl: ""
+    license: "MIT"
+    tags: ["version-control", "git", "code-collaboration", "documentation"]
+    isHosted: true
+    statusUrl: "https://uptime.example.lab/api/badge/11/status"
+
+
 # Domain definitions for reference
 domains:
   - id: "storage-file-system"
@@ -309,4 +358,6 @@ phases:
   - id: "analysis"
     name: "Analysis"
   - id: "reporting"
-    name: "Reporting"
\ No newline at end of file
+    name: "Reporting"
+  - id: "collaboration"
+    name: "General Tools for Collaboration"
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index eac970e..50c81f6 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -104,68 +104,107 @@ const tools = data.tools;
       }
     });
     
-    // Create tool card element
-    function createToolCard(tool: any): HTMLElement {
-      const cardDiv = document.createElement('div');
-      const cardClass = tool.isHosted ? 'card card-hosted' : (tool.license !== 'Proprietary' ? 'card card-oss' : 'card');
-      cardDiv.className = cardClass;
-      
-      cardDiv.innerHTML = `
-        <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.75rem;">
-          <h3 style="margin: 0;">${tool.name}</h3>
-          <div style="display: flex; gap: 0.5rem;">
-            ${tool.isHosted ? '<span class="badge badge-primary">Self-Hosted</span>' : ''}
-            ${tool.license !== 'Proprietary' ? '<span class="badge badge-success">Open Source</span>' : ''}
-          </div>
-        </div>
-        
-        <p class="text-muted" style="font-size: 0.875rem; margin-bottom: 1rem;">
-          ${tool.description}
-        </p>
-        
-        <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem;">
-          <div style="display: flex; align-items: center; gap: 0.25rem;">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-              <line x1="9" y1="9" x2="15" y2="9"></line>
-              <line x1="9" y1="15" x2="15" y2="15"></line>
-            </svg>
-            <span class="text-muted" style="font-size: 0.75rem;">
-              ${tool.platforms.join(', ')}
-            </span>
-          </div>
-          
-          <div style="display: flex; align-items: center; gap: 0.25rem;">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <circle cx="12" cy="12" r="10"></circle>
-              <path d="M12 6v6l4 2"></path>
-            </svg>
-            <span class="text-muted" style="font-size: 0.75rem;">
-              ${tool.skillLevel}
-            </span>
-          </div>
-          
-          <div style="display: flex; align-items: center; gap: 0.25rem;">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
-              <polyline points="14 2 14 8 20 8"></polyline>
-            </svg>
-            <span class="text-muted" style="font-size: 0.75rem;">
-              ${tool.license}
-            </span>
-          </div>
-        </div>
-        
-        <div style="display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 1rem;">
-          ${tool.tags.map((tag: string) => `<span class="tag">${tag}</span>`).join('')}
-        </div>
-        
-        <a href="${tool.url}" target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="width: 100%;">
-          ${tool.isHosted ? 'Access Service' : 'Visit Website'}
+// This replaces the createToolCard function in index.astro script section
+
+// This replaces the createToolCard function in index.astro script section
+
+// This replaces the createToolCard function in index.astro script section
+
+// Create tool card element
+function createToolCard(tool) {
+  const cardDiv = document.createElement('div');
+  const cardClass = tool.isHosted ? 'card card-hosted' : (tool.license !== 'Proprietary' ? 'card card-oss' : 'card');
+  cardDiv.className = cardClass;
+  
+  // Create button HTML based on hosting status
+  const hasValidProjectUrl = tool.projectUrl !== undefined && 
+                            tool.projectUrl !== null && 
+                            tool.projectUrl !== "" && 
+                            tool.projectUrl.trim() !== "";
+  
+  let buttonHTML;
+  if (tool.isHosted && hasValidProjectUrl) {
+    // Two buttons for self-hosted tools with both URLs
+    buttonHTML = `
+      <div style="display: flex; gap: 0.5rem;">
+        <a href="${tool.url}" target="_blank" rel="noopener noreferrer" class="btn btn-secondary" style="flex: 1;">
+          Project Page
         </a>
-      `;
+        <a href="${tool.projectUrl}" target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="flex: 1;">
+          Access Service
+        </a>
+      </div>
+    `;
+  } else if (tool.isHosted) {
+    // Single button for self-hosted tools with only project URL
+    buttonHTML = `
+      <a href="${tool.url}" target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="width: 100%;">
+        Project Page
+      </a>
+    `;
+  } else {
+    // Single button for non-hosted tools
+    buttonHTML = `
+      <a href="${tool.url}" target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="width: 100%;">
+        Visit Website
+      </a>
+    `;
+  }
+  
+  cardDiv.innerHTML = `
+    <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.75rem;">
+      <h3 style="margin: 0;">${tool.name}</h3>
+      <div style="display: flex; gap: 0.5rem;">
+        ${tool.isHosted ? '<span class="badge badge-primary">Self-Hosted</span>' : ''}
+        ${tool.license !== 'Proprietary' ? '<span class="badge badge-success">Open Source</span>' : ''}
+      </div>
+    </div>
+    
+    <p class="text-muted" style="font-size: 0.875rem; margin-bottom: 1rem;">
+      ${tool.description}
+    </p>
+    
+    <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem;">
+      <div style="display: flex; align-items: center; gap: 0.25rem;">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+          <line x1="9" y1="9" x2="15" y2="9"></line>
+          <line x1="9" y1="15" x2="15" y2="15"></line>
+        </svg>
+        <span class="text-muted" style="font-size: 0.75rem;">
+          ${tool.platforms.join(', ')}
+        </span>
+      </div>
       
-      return cardDiv;
-    }
+      <div style="display: flex; align-items: center; gap: 0.25rem;">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="10"></circle>
+          <path d="M12 6v6l4 2"></path>
+        </svg>
+        <span class="text-muted" style="font-size: 0.75rem;">
+          ${tool.skillLevel}
+        </span>
+      </div>
+      
+      <div style="display: flex; align-items: center; gap: 0.25rem;">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+          <polyline points="14 2 14 8 20 8"></polyline>
+        </svg>
+        <span class="text-muted" style="font-size: 0.75rem;">
+          ${tool.license}
+        </span>
+      </div>
+    </div>
+    
+    <div style="display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 1rem;">
+      ${tool.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
+    </div>
+    
+    ${buttonHTML}
+  `;
+  
+  return cardDiv;
+}
   });
 </script>
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
index 6414003..264bae8 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -472,6 +472,15 @@ footer {
     flex-direction: column;
     text-align: center;
   }
+  /* Add this inside the existing @media (max-width: 768px) block */
+  .collaboration-tools-compact {
+    flex-direction: column;
+  }
+
+  .collaboration-tool-compact {
+    min-width: auto;
+    max-width: none;
+  }
 }
 
 /* Animations */
@@ -482,4 +491,64 @@ footer {
 
 .fade-in {
   animation: fadeIn 0.3s ease-in;
+}
+
+/* Compact Collaboration Tools for Matrix View */
+.collaboration-tools-compact {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.collaboration-tool-compact {
+  background-color: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 0.375rem;
+  padding: 0.75rem;
+  min-width: 200px;
+  max-width: 300px;
+  flex: 1;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.collaboration-tool-compact:hover {
+  border-color: var(--color-primary);
+  box-shadow: var(--shadow-sm);
+}
+
+.collaboration-tool-compact.hosted {
+  background-color: var(--color-hosted-bg);
+  border-color: var(--color-hosted);
+}
+
+.collaboration-tool-compact.oss {
+  background-color: var(--color-oss-bg);
+  border-color: var(--color-oss);
+}
+
+.tool-compact-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: start;
+  margin-bottom: 0.5rem;
+}
+
+.badge-mini {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.0625rem 0.375rem;
+  border-radius: 9999px;
+  font-size: 0.625rem;
+  font-weight: 500;
+}
+
+.badge-mini.badge-primary {
+  background-color: var(--color-primary);
+  color: white;
+}
+
+.badge-mini.badge-success {
+  background-color: var(--color-accent);
+  color: white;
 }
\ No newline at end of file