fix: P0 design-review items — SPA deep links, mobile nav, OG image, card links

package.json

@@ -9,7 +9,8 @@
     "predeploy": "npm run build",
     "deploy": "gh-pages -d dist",
     "dev": "vite",
-    "build": "vite build"
+    "build": "vite build",
+    "postbuild": "node -e \"require('fs').copyFileSync('dist/index.html', 'dist/404.html')\""
   },
   "dependencies": {
     "@types/cytoscape": "^3.21.9",

public/sitemap.xml

@@ -30,4 +30,40 @@
     <changefreq>monthly</changefreq>
     <priority>0.7</priority>
   </url>
+  <url>
+    <loc>https://donbr.github.io/assets/projects</loc>
+    <lastmod>2026-10-02</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.9</priority>
+  </url>
+  <url>
+    <loc>https://donbr.github.io/assets/projects/gdelt-knowledge-base</loc>
+    <lastmod>2026-10-02</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
+  <url>
+    <loc>https://donbr.github.io/assets/projects/advanced-retrieval</loc>
+    <lastmod>2026-10-02</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
+  <url>
+    <loc>https://donbr.github.io/assets/projects/cytoscape</loc>
+    <lastmod>2026-10-02</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
+  <url>
+    <loc>https://donbr.github.io/assets/projects/event-analyzer</loc>
+    <lastmod>2026-10-02</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
+  <url>
+    <loc>https://donbr.github.io/assets/projects/situational-awareness</loc>
+    <lastmod>2026-10-02</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
 </urlset>

src/components/layout/Layout.tsx

@@ -1,14 +1,42 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
+import { Menu, X } from 'lucide-react';
 import { cn } from '@/lib/utils.ts';
 
 interface LayoutProps {
   children: React.ReactNode;
 }
 
+type NavItem =
+  | { label: string; kind: 'hash'; hash: string }
+  | { label: string; kind: 'route'; to: string }
+  | { label: string; kind: 'external'; href: string };
+
+const navItems: NavItem[] = [
+  { label: 'About', kind: 'hash', hash: '#about' },
+  { label: 'Expertise', kind: 'hash', hash: '#expertise' },
+  { label: 'Publications', kind: 'hash', hash: '#publications' },
+  { label: 'Projects', kind: 'route', to: '/assets/projects' },
+  { label: 'Teaching', kind: 'hash', hash: '#teaching' },
+  { label: 'Certifications', kind: 'hash', hash: '#certifications' },
+  { label: 'Contact', kind: 'hash', hash: '#contact' },
+  { label: 'Graph Demos', kind: 'external', href: 'https://graph-viz-next.vercel.app/' },
+];
+
 const Layout: React.FC<LayoutProps> = ({ children }) => {
   const location = useLocation();
-
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  // Close the mobile menu on Escape
+  useEffect(() => {
+    if (!menuOpen) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setMenuOpen(false);
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [menuOpen]);
+
   const isActive = (path: string) => {
     if (path === '/' && location.pathname === '/') {
       return true;
@@ -19,102 +47,92 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
     return false;
   };
 
+  const isItemActive = (item: NavItem) => {
+    if (item.kind === 'hash') return location.hash === item.hash;
+    if (item.kind === 'route') return isActive(item.to);
+    return false;
+  };
+
+  const renderNavLink = (item: NavItem, className: string, activeClassName: string, inactiveClassName: string) => {
+    const classes = cn(className, isItemActive(item) ? activeClassName : inactiveClassName);
+    const closeMenu = () => setMenuOpen(false);
+
+    if (item.kind === 'route') {
+      return (
+        <Link key={item.label} to={item.to} className={classes} onClick={closeMenu}>
+          {item.label}
+        </Link>
+      );
+    }
+    if (item.kind === 'external') {
+      return (
+        <a
+          key={item.label}
+          href={item.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={cn(className, "text-blue-600 hover:text-blue-800")}
+          onClick={closeMenu}
+        >
+          {item.label}
+        </a>
+      );
+    }
+    return (
+      <a key={item.label} href={`/${item.hash}`} className={classes} onClick={closeMenu}>
+        {item.label}
+      </a>
+    );
+  };
+
   return (
     <div className="bg-gray-50 min-h-screen flex flex-col">
       {/* Navigation */}
-      <nav className="bg-white shadow-lg">
+      <nav className="bg-white shadow-lg" aria-label="Primary">
         <div className="max-w-6xl mx-auto px-4">
-          <div className="flex justify-between">
-            <div className="flex space-x-7">
-              <div>
-                <Link to="/" className="flex items-center py-4">
-                  <span className="font-semibold text-gray-700 text-lg">Don Branson</span>
-                </Link>
-              </div>
-            </div>
-            <div className="flex items-center space-x-3">
-              <a 
-                href="/#about" 
-                className={cn(
-                  "py-4 px-2 hover:text-gray-900",
-                  location.hash === '#about' ? "text-gray-900 border-b-2 border-blue-500" : "text-gray-500"
-                )}
-              >
-                About
-              </a>
-              <a 
-                href="/#expertise" 
-                className={cn(
-                  "py-4 px-2 hover:text-gray-900",
-                  location.hash === '#expertise' ? "text-gray-900 border-b-2 border-blue-500" : "text-gray-500"
-                )}
-              >
-                Expertise
-              </a>
-              <a 
-                href="/#publications" 
-                className={cn(
-                  "py-4 px-2 hover:text-gray-900",
-                  location.hash === '#publications' ? "text-gray-900 border-b-2 border-blue-500" : "text-gray-500"
-                )}
-              >
-                Publications
-              </a>
-              <Link
-                to="/assets/projects"
-                className={cn(
-                  "py-4 px-2 hover:text-gray-900",
-                  isActive('/assets/projects') ? "text-gray-900 border-b-2 border-blue-500" : "text-gray-500"
-                )}
-              >
-                Projects
-              </Link>
-              <Link
-                to="/concepts"
-                className={cn(
-                  "py-4 px-2 hover:text-gray-900",
-                  isActive('/concepts') ? "text-gray-900 border-b-2 border-blue-500" : "text-gray-500"
-                )}
-              >
-                Concepts
-              </Link>
-              <a
-                href="/#teaching"
-                className={cn(
-                  "py-4 px-2 hover:text-gray-900",
-                  location.hash === '#teaching' ? "text-gray-900 border-b-2 border-blue-500" : "text-gray-500"
-                )}
-              >
-                Teaching
-              </a>
-              <a 
-                href="/#certifications" 
-                className={cn(
-                  "py-4 px-2 hover:text-gray-900",
-                  location.hash === '#certifications' ? "text-gray-900 border-b-2 border-blue-500" : "text-gray-500"
-                )}
-              >
-                Certifications
-              </a>
-              <a
-                href="/#contact"
-                className={cn(
-                  "py-4 px-2 hover:text-gray-900",
-                  location.hash === '#contact' ? "text-gray-900 border-b-2 border-blue-500" : "text-gray-500"
-                )}
-              >
-                Contact
-              </a>
-              <a 
-                href="https://graph-viz-next.vercel.app/" 
-                target="_blank" 
-                rel="noopener noreferrer" 
-                className="py-4 px-2 text-blue-600 hover:text-blue-800"
-              >
-                Graph Demos
-              </a>
+          <div className="flex justify-between items-center">
+            <Link to="/" className="flex items-center py-4">
+              <span className="font-semibold text-gray-700 text-lg">Don Branson</span>
+            </Link>
+
+            {/* Desktop links */}
+            <div className="hidden lg:flex items-center space-x-1 xl:space-x-3 text-sm xl:text-base">
+              {navItems.map((item) =>
+                renderNavLink(
+                  item,
+                  "py-4 px-2 whitespace-nowrap hover:text-gray-900",
+                  "text-gray-900 border-b-2 border-blue-500",
+                  "text-gray-500"
+                )
+              )}
             </div>
+
+            {/* Mobile menu button */}
+            <button
+              type="button"
+              className="lg:hidden inline-flex items-center justify-center w-11 h-11 -mr-2 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+              aria-controls="mobile-menu"
+              aria-expanded={menuOpen}
+              aria-label={menuOpen ? 'Close menu' : 'Open menu'}
+              onClick={() => setMenuOpen((open) => !open)}
+            >
+              {menuOpen ? <X className="w-6 h-6" aria-hidden="true" /> : <Menu className="w-6 h-6" aria-hidden="true" />}
+            </button>
           </div>
+
+          {/* Mobile links */}
+          {menuOpen && (
+            <div id="mobile-menu" className="lg:hidden border-t border-gray-200 py-2">
+              {navItems.map((item) =>
+                renderNavLink(
+                  item,
+                  "block py-3 px-2 rounded-md text-base hover:bg-gray-50 hover:text-gray-900",
+                  "text-gray-900 font-semibold",
+                  "text-gray-600"
+                )
+              )}
+            </div>
+          )}
         </div>
       </nav>
 
@@ -129,24 +147,24 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
           <div className="flex flex-col md:flex-row justify-between items-center">
             <p>&copy; {new Date().getFullYear()} Don Branson. All rights reserved.</p>
             <div className="flex space-x-4 mt-4 md:mt-0">
-              <a 
-                href="https://github.com/donbr" 
+              <a
+                href="https://github.com/donbr"
                 className="text-gray-300 hover:text-white"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 GitHub
               </a>
-              <a 
-                href="https://www.linkedin.com/in/donbranson/" 
+              <a
+                href="https://www.linkedin.com/in/donbranson/"
                 className="text-gray-300 hover:text-white"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 LinkedIn
               </a>
-              <a 
-                href="https://graph-viz-next.vercel.app/" 
+              <a
+                href="https://graph-viz-next.vercel.app/"
                 className="text-gray-300 hover:text-white"
                 target="_blank"
                 rel="noopener noreferrer"
@@ -161,4 +179,4 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
   );
 };
 
-export default Layout;
+export default Layout;

src/pages/ProjectsPage.tsx

@@ -74,7 +74,19 @@ const ProjectCard: React.FC<ProjectCardProps> = ({
 
   const cardContent = (
     <>
-      <h2 className="text-xl font-semibold text-gray-800 mb-3">{title}</h2>
+      <h2 className="text-xl font-semibold text-gray-800 mb-3">
+        {detailUrl ? (
+          // Stretched link: the ::after overlay makes the whole card clickable without nesting links
+          <Link
+            to={detailUrl}
+            className="hover:text-blue-700 focus:outline-none after:absolute after:inset-0 after:rounded-lg focus-visible:after:ring-2 focus-visible:after:ring-blue-500"
+          >
+            {title}
+          </Link>
+        ) : (
+          title
+        )}
+      </h2>
       <p className="text-gray-600 text-sm mb-4 leading-relaxed">
         {description}
       </p>
@@ -89,8 +101,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({
         {detailUrl && (
           <Link
             to={detailUrl}
-            className="text-blue-600 hover:text-blue-800 inline-flex items-center gap-1"
-            onClick={(e) => e.stopPropagation()}
+            className="relative z-10 text-blue-600 hover:text-blue-800 inline-flex items-center gap-1"
           >
             Deep Dive <span className="text-sm">&rarr;</span>
           </Link>
@@ -100,8 +111,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({
             href={demoUrl}
             target="_blank"
             rel="noopener noreferrer"
-            className="text-emerald-600 hover:text-emerald-800 inline-flex items-center gap-1"
-            onClick={(e) => e.stopPropagation()}
+            className="relative z-10 text-emerald-600 hover:text-emerald-800 inline-flex items-center gap-1"
           >
             Live Demo <span className="text-sm">&#8599;</span>
           </a>
@@ -111,8 +121,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({
             href={codeUrl}
             target="_blank"
             rel="noopener noreferrer"
-            className="text-gray-700 hover:text-black inline-flex items-center gap-1"
-            onClick={(e) => e.stopPropagation()}
+            className="relative z-10 text-gray-700 hover:text-black inline-flex items-center gap-1"
           >
             Repository <span className="text-sm">&#8599;</span>
           </a>
@@ -122,8 +131,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({
             href={huggingFaceUrl}
             target="_blank"
             rel="noopener noreferrer"
-            className="text-amber-700 hover:text-amber-900 inline-flex items-center gap-1"
-            onClick={(e) => e.stopPropagation()}
+            className="relative z-10 text-amber-700 hover:text-amber-900 inline-flex items-center gap-1"
           >
             Hugging Face <span className="text-sm">&#8599;</span>
           </a>
@@ -132,18 +140,8 @@ const ProjectCard: React.FC<ProjectCardProps> = ({
     </>
   );
 
-  if (detailUrl) {
-    return (
-      <Link to={detailUrl} className="block">
-        <div className="bg-white rounded-lg shadow-md p-6 project-card hover:shadow-lg transition-shadow border-t-2 border-gray-200 cursor-pointer">
-          {cardContent}
-        </div>
-      </Link>
-    );
-  }
-
   return (
-    <div className="bg-white rounded-lg shadow-md p-6 project-card hover:shadow-lg transition-shadow border-t-2 border-gray-200">
+    <div className="relative bg-white rounded-lg shadow-md p-6 project-card hover:shadow-lg transition-shadow border-t-2 border-gray-200">
       {cardContent}
     </div>
   );