perf: code-split routes and add per-route titles

CLAUDE.md

@@ -64,7 +64,7 @@ Simple React Router setup in App.tsx:
 - `/assets/projects/advanced-retrieval` - AdvancedRetrieval
 - `*` - NotFoundPage (404)
 
-No lazy loading is used - all components are directly imported.
+HomePage and NotFoundPage are imported directly; every other route is loaded with `React.lazy` inside one `Suspense` boundary (fallback keeps the Layout visible). This keeps ECharts, Cytoscape and Leaflet out of the homepage bundle - add new project routes the same way.
 
 ### Project Data Management
 
@@ -79,7 +79,7 @@ The ProjectCard component is also defined inline in ProjectsPage.tsx (lines 15-1
 ### Layout Component
 
 The Layout component (`src/components/layout/Layout.tsx`) wraps all pages and provides:
-- Navigation bar with links to sections (About, Expertise, Publications, Projects, Concepts, Teaching, Certifications, Contact, Graph Demos)
+- Navigation bar with links to sections (About, Expertise, Publications, Projects, Teaching, Certifications, Contact, Graph Demos)
 - Active link highlighting using hash-based navigation for sections and pathname for Projects
 - Footer with social links (GitHub, LinkedIn, Graph Visualizations)
 
@@ -151,5 +151,6 @@ Located in `src/data/`:
 
 - No testing framework is currently configured
 - No formatter (like Prettier) is configured in package.json
-- Project uses direct imports (no code splitting/lazy loading)
+- Routes other than Home and 404 are code-split with `React.lazy`
+- Each page renders its own `<title>` inside `<Layout>` (React 19 hoists it into `<head>`); format: `Page Name | Don Branson`
 - Some project components include their own types (e.g., situational-awareness/types.ts)

src/App.tsx

@@ -1,39 +1,51 @@
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Layout from '@/components/layout/Layout';
 
-// Page Components
+// Page Components (HomePage and NotFoundPage are small, so they stay in the main bundle)
 import HomePage from '@/pages/HomePage';
-import ProjectsPage from '@/pages/ProjectsPage';
-import ConceptsPage from '@/pages/ConceptsPage';
 import NotFoundPage from '@/pages/NotFoundPage';
 
+// Lazy-loaded routes: keeps ECharts, Cytoscape and Leaflet out of the homepage bundle
+const ProjectsPage = lazy(() => import('@/pages/ProjectsPage'));
+
 // Project Components
-import GdeltRecordViewer from '@/components/projects/gdelt/GdeltRecordViewer'; // Add .jsx extension
-import CytoscapeViewer from '@/components/projects/cytoscape/CytoscapeViewer';
-import EventAnalyzer from '@/components/projects/event-analyzer/EventAnalyzer';
-import SituationalAwareness from '@/components/projects/situational-awareness/SituationalAwareness';
-import GdeltKnowledgeBase from '@/components/projects/gdelt-kb/GdeltKnowledgeBase';
-import AdvancedRetrieval from '@/components/projects/advanced-retrieval/AdvancedRetrieval';
+const GdeltRecordViewer = lazy(() => import('@/components/projects/gdelt/GdeltRecordViewer'));
+const CytoscapeViewer = lazy(() => import('@/components/projects/cytoscape/CytoscapeViewer'));
+const EventAnalyzer = lazy(() => import('@/components/projects/event-analyzer/EventAnalyzer'));
+const SituationalAwareness = lazy(() => import('@/components/projects/situational-awareness/SituationalAwareness'));
+const GdeltKnowledgeBase = lazy(() => import('@/components/projects/gdelt-kb/GdeltKnowledgeBase'));
+const AdvancedRetrieval = lazy(() => import('@/components/projects/advanced-retrieval/AdvancedRetrieval'));
+
+// Shown while a lazy route's chunk loads; keeps the nav and footer in place
+const RouteFallback: React.FC = () => (
+  <Layout>
+    <div className="max-w-6xl mx-auto px-4 py-16 text-gray-500" role="status">
+      Loading…
+    </div>
+  </Layout>
+);
 
 const App: React.FC = () => {
   return (
     <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<HomePage />} />
-        <Route path="/assets/projects" element={<ProjectsPage />} />
-        <Route path="/concepts" element={<ConceptsPage />} />
-
-        {/* Project routes */}
-        <Route path="/assets/projects/gdelt" element={<GdeltRecordViewer />} />
-        <Route path="/assets/projects/cytoscape" element={<CytoscapeViewer />} />
-        <Route path="/assets/projects/event-analyzer" element={<EventAnalyzer />} />
-        <Route path="/assets/projects/situational-awareness" element={<SituationalAwareness />} />
-        <Route path="/assets/projects/gdelt-knowledge-base" element={<GdeltKnowledgeBase />} />
-        <Route path="/assets/projects/advanced-retrieval" element={<AdvancedRetrieval />} />
-
-        {/* Catch-all route for 404s */}
-        <Route path="*" element={<NotFoundPage />} />
-      </Routes>
+      <Suspense fallback={<RouteFallback />}>
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/assets/projects" element={<ProjectsPage />} />
+
+          {/* Project routes */}
+          <Route path="/assets/projects/gdelt" element={<GdeltRecordViewer />} />
+          <Route path="/assets/projects/cytoscape" element={<CytoscapeViewer />} />
+          <Route path="/assets/projects/event-analyzer" element={<EventAnalyzer />} />
+          <Route path="/assets/projects/situational-awareness" element={<SituationalAwareness />} />
+          <Route path="/assets/projects/gdelt-knowledge-base" element={<GdeltKnowledgeBase />} />
+          <Route path="/assets/projects/advanced-retrieval" element={<AdvancedRetrieval />} />
+
+          {/* Catch-all route for 404s */}
+          <Route path="*" element={<NotFoundPage />} />
+        </Routes>
+      </Suspense>
     </BrowserRouter>
   );
 };

src/components/projects/advanced-retrieval/AdvancedRetrieval.tsx

@@ -5,6 +5,7 @@ import { Github, BookOpen } from 'lucide-react';
 const AdvancedRetrieval: React.FC = () => {
   return (
     <Layout>
+      <title>Advanced Retrieval Strategies for RAG | Don Branson</title>
       {/* Hero Section */}
       <section className="bg-gradient-to-r from-purple-600 to-indigo-700 text-white py-16">
         <div className="max-w-6xl mx-auto px-4">

src/components/projects/cytoscape/CytoscapeViewer.tsx

@@ -205,6 +205,7 @@ const CytoscapeViewer: React.FC = () => {
 
   return (
     <Layout>
+      <title>STRING Network Viewer | Don Branson</title>
       <div className="max-w-6xl mx-auto px-4 py-16">
         <h1 className="text-3xl font-bold text-gray-800 mb-4">STRING Network Viewer</h1>
         <p className="text-gray-600 mb-8">

src/components/projects/event-analyzer/EventAnalyzer.tsx

@@ -235,6 +235,7 @@ const EventAnalyzer: React.FC = () => {
 
   return (
     <Layout>
+      <title>Event Analysis System | Don Branson</title>
       <div className="max-w-6xl mx-auto px-4 py-16">
         <h1 className="text-3xl font-bold text-gray-800 mb-4">Event Analysis System</h1>
         <p className="text-gray-600 mb-8">

src/components/projects/gdelt-kb/GdeltKnowledgeBase.tsx

@@ -5,6 +5,7 @@ import { ExternalLink, Github, Database } from 'lucide-react';
 const GdeltKnowledgeBase: React.FC = () => {
   return (
     <Layout>
+      <title>GDELT Knowledge Base | Don Branson</title>
       {/* Hero Section */}
       <section className="bg-gradient-to-r from-blue-600 to-indigo-700 text-white py-16">
         <div className="max-w-6xl mx-auto px-4">

src/components/projects/gdelt/GdeltRecordViewer.tsx

@@ -355,6 +355,7 @@ const GdeltRecordViewer: React.FC = () => {
 
   return (
     <Layout>
+      <title>GDELT GKG Viewer | Don Branson</title>
       <div className="max-w-6xl mx-auto px-4 py-16">
         <div className="bg-white rounded-lg shadow-md p-6">
           <h1 className="text-3xl font-bold text-gray-800 mb-4">GDELT GKG Viewer</h1>

src/components/projects/situational-awareness/SituationalAwareness.tsx

@@ -106,6 +106,7 @@ const SituationalAwareness: React.FC = () => {
 
   return (
     <Layout>
+      <title>Situational Awareness Graph | Don Branson</title>
       <div className="bg-white py-8">
         <div className="max-w-6xl mx-auto px-4">
           <h1 className="text-3xl font-bold text-gray-800 mb-4">Situational Awareness Graph</h1>