Fix favicon, canonical, OG tags, mobile nav, releases skeleton, team avatar

- Layout: fix favicon refs (ico+svg), dynamic canonical per page,
  twitter:card → summary_large_image, correct OG image dimensions
- Nav: hamburger menu on mobile with animated icon and overlay
- Releases: skeleton loader while fetching, graceful empty state,
  always visible (no display:none flash)
- Team: photo as 64px circular avatar instead of full-width square

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

Author: Strawbang

src/components/Nav.astro

@@ -3,7 +3,7 @@
 
 <nav id="nav">
   <a href="/" class="nav-logo">rustkit<span>.</span>ai</a>
-  <ul class="nav-links">
+  <ul class="nav-links" id="nav-links">
     <li><a href="/#projects">Projects</a></li>
     <li><a href="/team">Team</a></li>
     <li>
@@ -15,6 +15,9 @@
       </a>
     </li>
   </ul>
+  <button class="hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
+    <span></span><span></span><span></span>
+  </button>
 </nav>
 
 <style>
@@ -80,9 +83,66 @@
 
   .nav-gh:hover { background: var(--rust-glow); }
 
+  .hamburger {
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    gap: 5px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.25rem;
+  }
+
+  .hamburger span {
+    display: block;
+    width: 20px;
+    height: 1.5px;
+    background: var(--text-muted);
+    transition: transform 0.25s ease, opacity 0.25s ease;
+  }
+
+  .hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
+  .hamburger.open span:nth-child(2) { opacity: 0; }
+  .hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
+
   @media (max-width: 640px) {
     nav { padding: 1rem 1.25rem; }
-    .nav-links { display: none; }
+
+    .hamburger { display: flex; }
+
+    .nav-links {
+      display: none;
+      position: fixed;
+      top: 57px;
+      left: 0;
+      right: 0;
+      background: rgba(14, 13, 12, 0.97);
+      backdrop-filter: blur(12px);
+      border-bottom: 1px solid var(--border);
+      flex-direction: column;
+      gap: 0;
+      padding: 0.5rem 0;
+    }
+
+    .nav-links.open { display: flex; }
+
+    .nav-links li { width: 100%; }
+
+    .nav-links a {
+      display: block;
+      padding: 0.9rem 1.25rem;
+      border-bottom: 1px solid var(--border);
+      font-size: 0.9rem;
+    }
+
+    .nav-links li:last-child a { border-bottom: none; }
+
+    .nav-gh {
+      border: none !important;
+      border-radius: 0 !important;
+      padding: 0.9rem 1.25rem !important;
+    }
   }
 </style>
 
@@ -91,4 +151,21 @@
   window.addEventListener('scroll', () => {
     nav?.classList.toggle('scrolled', window.scrollY > 40);
   }, { passive: true });
+
+  const hamburger = document.getElementById('hamburger');
+  const navLinks = document.getElementById('nav-links');
+
+  hamburger?.addEventListener('click', () => {
+    const open = hamburger.classList.toggle('open');
+    hamburger.setAttribute('aria-expanded', String(open));
+    navLinks?.classList.toggle('open', open);
+  });
+
+  navLinks?.querySelectorAll('a').forEach((a) => {
+    a.addEventListener('click', () => {
+      hamburger?.classList.remove('open');
+      hamburger?.setAttribute('aria-expanded', 'false');
+      navLinks.classList.remove('open');
+    });
+  });
 </script>

src/components/Releases.astro

@@ -4,13 +4,16 @@ import { projects } from '../data/projects';
 const releaseProjects = projects.filter((p) => p.hasReleases);
 ---
 
-<section id="releases" style="display:none">
+<section id="releases">
   <div class="section-inner">
     <div class="section-label reveal">Changelog</div>
     <h2 class="reveal">Latest releases</h2>
     <p class="section-sub reveal">Recent updates across our open source projects.</p>
 
-    <div class="releases-list reveal" id="releases-list"></div>
+    <div class="releases-list reveal" id="releases-list">
+      <div class="skeleton-item"><div class="sk sk-tag"></div><div class="sk sk-name"></div><div class="sk sk-date"></div></div>
+      <div class="skeleton-item"><div class="sk sk-tag"></div><div class="sk sk-name"></div><div class="sk sk-date"></div></div>
+    </div>
 
     <div class="all-links reveal" id="all-links"></div>
   </div>
@@ -42,11 +45,14 @@ const releaseProjects = projects.filter((p) => p.hasReleases);
     );
 
     const valid = results.filter(Boolean);
-    if (valid.length === 0) return;
-
     const list = document.getElementById('releases-list');
     const allLinks = document.getElementById('all-links');
 
+    if (valid.length === 0) {
+      list.innerHTML = '<p class="releases-empty">No releases found.</p>';
+      return;
+    }
+
     list.innerHTML = valid.map(({ project: p, release: r }) => `
       <a href="${r.html_url}" target="_blank" rel="noopener" class="release-item latest">
         <div class="release-left">
@@ -66,19 +72,6 @@ const releaseProjects = projects.filter((p) => p.hasReleases);
       </a>
     `).join('');
 
-    const section = document.getElementById('releases');
-    section.style.display = '';
-
-    const observer = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          entry.target.classList.add('visible');
-          observer.unobserve(entry.target);
-        }
-      });
-    }, { threshold: 0.1 });
-
-    section.querySelectorAll('.reveal').forEach((el) => observer.observe(el));
   }
 
   loadReleases();
@@ -188,6 +181,41 @@ const releaseProjects = projects.filter((p) => p.hasReleases);
 
   #releases .all-releases:hover { color: var(--rust); }
 
+  #releases .releases-empty {
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 0.8rem;
+    color: var(--text-dim);
+    padding: 1.5rem;
+    text-align: center;
+  }
+
+  /* Skeleton */
+  #releases .skeleton-item {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid var(--border);
+    background: var(--bg-2);
+  }
+
+  #releases .skeleton-item:last-child { border-bottom: none; }
+
+  #releases .sk {
+    background: var(--border-hi);
+    border-radius: 3px;
+    animation: sk-pulse 1.4s ease-in-out infinite;
+  }
+
+  #releases .sk-tag  { width: 60px; height: 14px; }
+  #releases .sk-name { width: 160px; height: 12px; flex: 1; max-width: 200px; }
+  #releases .sk-date { width: 80px; height: 12px; margin-left: auto; }
+
+  @keyframes sk-pulse {
+    0%, 100% { opacity: 0.4; }
+    50%       { opacity: 0.8; }
+  }
+
   @media (max-width: 640px) {
     #releases .release-item {
       grid-template-columns: auto 1fr auto;

src/layouts/Layout.astro

@@ -9,8 +9,8 @@ const {
   description = 'AI-native developer tools, built in Rust. Open source tooling for the next generation of AI-assisted development.',
 } = Astro.props;
 
-const canonical = 'https://rustkit-ai.github.io';
-const ogImage = `${canonical}/og-image.png`;
+const canonical = Astro.url.href;
+const ogImage = `https://rustkit-ai.github.io/og-image.png`;
 ---
 
 <!doctype html>
@@ -21,7 +21,8 @@ const ogImage = `${canonical}/og-image.png`;
     <title>{title}</title>
     <meta name="description" content={description} />
     <link rel="canonical" href={canonical} />
-    <link rel="icon" type="image/png" href="/og-image.png" />
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
@@ -32,12 +33,12 @@ const ogImage = `${canonical}/og-image.png`;
     <meta property="og:description" content={description} />
     <meta property="og:url" content={canonical} />
     <meta property="og:image" content={ogImage} />
-    <meta property="og:image:width" content="460" />
-    <meta property="og:image:height" content="460" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
     <meta property="og:site_name" content="rustkit-ai" />
 
     <!-- Twitter -->
-    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content={title} />
     <meta name="twitter:description" content={description} />
     <meta name="twitter:image" content={ogImage} />

src/pages/team.astro

@@ -168,15 +168,27 @@ const founders = [
 
   .founder-card:hover { border-color: var(--rust-dim); }
 
+  .card-body {
+    padding: 1.75rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    flex: 1;
+  }
+
   .card-photo {
-    width: 100%;
-    aspect-ratio: 1 / 1;
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
     overflow: hidden;
     background: var(--bg-3);
+    border: 2px solid var(--border-hi);
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-shrink: 0;
+    margin-bottom: 0.75rem;
   }
 
   .card-photo img {
@@ -194,19 +206,11 @@ const founders = [
     align-items: center;
     justify-content: center;
     font-family: 'Space Mono', monospace;
-    font-size: 3rem;
+    font-size: 1.2rem;
     color: var(--rust);
     background: var(--bg-3);
   }
 
-  .card-body {
-    padding: 1.75rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    flex: 1;
-  }
-
   .card-meta {
     display: flex;
     align-items: baseline;