Hugging Face's logo

Spaces:
caustino
/
anycoder-b52eb31d
Running

App Files Community
anycoder-b52eb31d / index.html
caustino's picture
caustino
Upload folder using huggingface_hub
d86efd5 verified
Raw
History Blame Contribute Delete
38.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Baltimore Secure Backbone System (BSBS) - Portfolio</title>
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <style>
 :root {
 --primary: #1a365d;
 --primary-light: #2c5282;
 --secondary: #2d3748;
 --accent: #3182ce;
 --accent-glow: #4299e1;
 --surface: #ffffff;
 --surface-alt: #f7fafc;
 --border: #e2e8f0;
 --text: #1a202c;
 --text-muted: #718096;
 --success: #38a169;
 --warning: #d69e2e;
 --danger: #e53e3e;
 --code-bg: #1a202c;
 --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
 --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
 --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
 --radius: 8px;
 --radius-lg: 12px;
 }
 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }
 body {
 font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
 background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
 color: var(--text);
 line-height: 1.6;
 min-height: 100vh;
 }
 /* Header */
 .header {
 background: rgba(15, 23, 42, 0.95);
 backdrop-filter: blur(20px);
 border-bottom: 1px solid rgba(255,255,255,0.1);
 position: sticky;
 top: 0;
 z-index: 100;
 padding: 0 2rem;
 }
 .header-content {
 max-width: 1400px;
 margin: 0 auto;
 display: flex;
 align-items: center;
 justify-content: space-between;
 height: 70px;
 }
 .logo-section {
 display: flex;
 align-items: center;
 gap: 1rem;
 }
 .logo {
 width: 40px;
 height: 40px;
 background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);
 border-radius: var(--radius);
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 700;
 color: white;
 font-size: 1.2rem;
 }
 .brand h1 {
 font-size: 1.1rem;
 font-weight: 600;
 color: white;
 }
 .brand span {
 font-size: 0.75rem;
 color: var(--text-muted);
 display: block;
 }
 .header-links {
 display: flex;
 align-items: center;
 gap: 1.5rem;
 }
 .anycoder-link {
 color: var(--accent-glow);
 text-decoration: none;
 font-size: 0.85rem;
 font-weight: 500;
 padding: 0.5rem 1rem;
 border-radius: var(--radius);
 background: rgba(66, 153, 225, 0.1);
 border: 1px solid rgba(66, 153, 225, 0.2);
 transition: all 0.2s ease;
 }
 .anycoder-link:hover {
 background: rgba(66, 153, 225, 0.2);
 border-color: rgba(66, 153, 225, 0.4);
 }
 .user-info {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 color: white;
 font-size: 0.85rem;
 }
 .user-avatar {
 width: 32px;
 height: 32px;
 border-radius: 50%;
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 600;
 font-size: 0.75rem;
 }
 /* Main Layout */
 .main-container {
 max-width: 1400px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: 280px 1fr;
 gap: 2rem;
 padding: 2rem;
 }
 /* Sidebar */
 .sidebar {
 background: rgba(255,255,255,0.03);
 border: 1px solid rgba(255,255,255,0.06);
 border-radius: var(--radius-lg);
 padding: 1.5rem;
 height: fit-content;
 position: sticky;
 top: 90px;
 max-height: calc(100vh - 110px);
 overflow-y: auto;
 }
 .sidebar::-webkit-scrollbar {
 width: 4px;
 }
 .sidebar::-webkit-scrollbar-track {
 background: transparent;
 }
 .sidebar::-webkit-scrollbar-thumb {
 background: rgba(255,255,255,0.2);
 border-radius: 2px;
 }
 .sidebar-title {
 font-size: 0.7rem;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 color: var(--text-muted);
 margin-bottom: 1rem;
 font-weight: 600;
 }
 .nav-section {
 margin-bottom: 1.5rem;
 }
 .nav-item {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 padding: 0.6rem 0.75rem;
 color: rgba(255,255,255,0.7);
 text-decoration: none;
 font-size: 0.85rem;
 border-radius: var(--radius);
 transition: all 0.2s ease;
 cursor: pointer;
 margin-bottom: 0.25rem;
 }
 .nav-item:hover {
 background: rgba(255,255,255,0.05);
 color: white;
 }
 .nav-item.active {
 background: linear-gradient(135deg, rgba(49, 130, 206, 0.2) 0%, rgba(26, 54, 93, 0.2) 100%);
 color: white;
 border: 1px solid rgba(49, 130, 206, 0.3);
 }
 .nav-icon {
 width: 18px;
 height: 18px;
 opacity: 0.8;
 }
 .nav-badge {
 margin-left: auto;
 background: var(--accent);
 color: white;
 font-size: 0.65rem;
 padding: 0.15rem 0.4rem;
 border-radius: 10px;
 font-weight: 600;
 }
 /* Content Area */
 .content {
 background: var(--surface);
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow-lg);
 overflow: hidden;
 }
 .content-header {
 background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
 padding: 2rem;
 color: white;
 }
 .content-header h2 {
 font-size: 1.75rem;
 font-weight: 700;
 margin-bottom: 0.5rem;
 }
 .content-header p {
 opacity: 0.9;
 font-size: 0.95rem;
 }
 .content-body {
 padding: 2rem;
 }
 /* Section Styling */
 .section {
 margin-bottom: 2.5rem;
 padding-bottom: 2rem;
 border-bottom: 1px solid var(--border);
 }
 .section:last-child {
 border-bottom: none;
 margin-bottom: 0;
 }
 .section-title {
 font-size: 1.25rem;
 font-weight: 600;
 color: var(--primary);
 margin-bottom: 1rem;
 display: flex;
 align-items: center;
 gap: 0.75rem;
 }
 .section-title::before {
 content: '';
 width: 4px;
 height: 24px;
 background: linear-gradient(180deg, var(--accent) 0%, var(--primary) 100%);
 border-radius: 2px;
 }
 .section-content {
 color: var(--secondary);
 font-size: 0.95rem;
 }
 .section-content p {
 margin-bottom: 1rem;
 }
 /* Cover Page */
 .cover-page {
 background: linear-gradient(135deg, var(--primary) 0%, #1a365d 100%);
 color: white;
 padding: 3rem;
 border-radius: var(--radius-lg);
 text-align: center;
 margin-bottom: 2rem;
 }
 .cover-page h1 {
 font-size: 2.5rem;
 font-weight: 700;
 margin-bottom: 0.5rem;
 letter-spacing: -0.02em;
 }
 .cover-page .subtitle {
 font-size: 1.25rem;
 opacity: 0.9;
 margin-bottom: 2rem;
 }
 .cover-meta {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 gap: 1.5rem;
 text-align: left;
 background: rgba(255,255,255,0.1);
 padding: 1.5rem;
 border-radius: var(--radius);
 }
 .meta-item label {
 display: block;
 font-size: 0.75rem;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 opacity: 0.7;
 margin-bottom: 0.25rem;
 }
 .meta-item span {
 font-weight: 500;
 }
 /* Tables */
 .data-table {
 width: 100%;
 border-collapse: collapse;
 margin: 1rem 0;
 font-size: 0.9rem;
 }
 .data-table th {
 background: var(--surface-alt);
 padding: 0.75rem 1rem;
 text-align: left;
 font-weight: 600;
 color: var(--primary);
 border-bottom: 2px solid var(--border);
 }
 .data-table td {
 padding: 0.75rem 1rem;
 border-bottom: 1px solid var(--border);
 }
 .data-table tr:hover td {
 background: var(--surface-alt);
 }
 /* Cards */
 .card-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 1.5rem;
 margin: 1.5rem 0;
 }
 .card {
 background: var(--surface-alt);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 1.25rem;
 transition: all 0.2s ease;
 }
 .card:hover {
 border-color: var(--accent);
 box-shadow: var(--shadow-md);
 }
 .card h4 {
 color: var(--primary);
 font-size: 1rem;
 margin-bottom: 0.5rem;
 }
 .card p {
 color: var(--text-muted);
 font-size: 0.85rem;
 }
 /* Code Blocks */
 .code-block {
 background: var(--code-bg);
 border-radius: var(--radius);
 padding: 1rem;
 margin: 1rem 0;
 overflow-x: auto;
 }
 .code-block pre {
 font-family: 'JetBrains Mono', monospace;
 font-size: 0.85rem;
 color: #e2e8f0;
 white-space: pre;
 }
 /* Lists */
 .styled-list {
 list-style: none;
 padding: 0;
 }
 .styled-list li {
 padding: 0.75rem 0;
 padding-left: 1.5rem;
 position: relative;
 border-bottom: 1px solid var(--border);
 }
 .styled-list li::before {
 content: '▸';
 position: absolute;
 left: 0;
 color: var(--accent);
 font-weight: bold;
 }
 .styled-list li:last-child {
 border-bottom: none;
 }
 /* Abstract Box */
 .abstract-box {
 background: linear-gradient(135deg, rgba(49, 130, 206, 0.08) 0%, rgba(26, 54, 93, 0.08) 100%);
 border-left: 4px solid var(--accent);
 padding: 1.5rem;
 border-radius: 0 var(--radius) var(--radius) 0;
 margin: 1.5rem 0;
 }
 .abstract-box h4 {
 color: var(--primary);
 margin-bottom: 0.75rem;
 }
 /* TOC */
 .toc {
 background: var(--surface-alt);
 border-radius: var(--radius);
 padding: 1.5rem;
 margin-bottom: 2rem;
 }
 .toc h3 {
 font-size: 1rem;
 color: var(--primary);
 margin-bottom: 1rem;
 }
 .toc-list {
 columns: 2;
 column-gap: 2rem;
 }
 .toc-list a {
 display: block;
 padding: 0.4rem 0;
 color: var(--secondary);
 text-decoration: none;
 font-size: 0.85rem;
 break-inside: avoid;
 }
 .toc-list a:hover {
 color: var(--accent);
 }
 /* Tags */
 .tag {
 display: inline-block;
 padding: 0.25rem 0.75rem;
 background: rgba(49, 130, 206, 0.1);
 color: var(--accent);
 border-radius: 20px;
 font-size: 0.75rem;
 font-weight: 500;
 margin-right: 0.5rem;
 margin-bottom: 0.5rem;
 }
 /* Responsive */
 @media (max-width: 1024px) {
 .main-container {
 grid-template-columns: 1fr;
 }
.sidebar {
 position: static;
 max-height: none;
 }
 .toc-list {
 columns: 1;
 }
 }
 @media (max-width: 768px) {
 .header-content {
 flex-direction: column;
 height: auto;
 padding: 1rem 0;
 gap: 1rem;
 }
 .header-links {
 flex-wrap: wrap;
 justify-content: center;
 }
 .main-container {
 padding: 1rem;
 }
 .content-body {
 padding: 1.5rem;
 }
 .cover-page {
 padding: 2rem 1.5rem;
 }
 .cover-page h1 {
 font-size: 1.75rem;
 }
 .card-grid {
 grid-template-columns: 1fr;
 }
 }
 /* Animations */
 @keyframes fadeIn {
 from { opacity: 0; transform: translateY(10px); }
 to { opacity: 1; transform: translateY(0); }
 }
 .content {
 animation: fadeIn 0.4s ease-out;
 }
 /* Print Styles */
 @media print {
 body {
 background: white;
 }
.header, .sidebar {
 display: none;
 }
.main-container {
 display: block;
 }
.content {
 box-shadow: none;
 }
 }
 /* Highlight Box */
 .highlight-box {
 background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%);
 border: 1px solid #68d391;
 border-radius: var(--radius);
 padding: 1.25rem;
 margin: 1rem 0;
 }
 .highlight-box.warning {
 background: linear-gradient(135deg, #fffaf0 0%, #feebc8 100%);
 border-color: #f6ad55;
 }
 .highlight-box.danger {
 background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
 border-color: #fc8182;
 }
 </style>
</head>
<body>
 <header class="header">
 <div class="header-content">
 <div class="logo-section">
 <div class="logo">BS</div>
 <div class="brand">
 <h1>Baltimore Secure Backbone System</h1>
 <span>Municipal Cybersecurity Governance Framework v1.2</span>
 </div>
 </div>
 <div class="header-links">
 <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
 Built with anycoder
 </a>
 <div class="user-info">
 <div class="user-avatar">CL</div>
 <span>caustin lee mclaughlin</span>
 </div>
 </div>
 </div>
 </header>
<div class="main-container">
 <nav class="sidebar">
 <div class="nav-section">
 <div class="sidebar-title">Main Sections</div>
 <a class="nav-item active" data-section="cover">
 <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
 Cover Page
 </a>
 <a class="nav-item" data-section="abstract">
 <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
 Abstract
 </a>
 <a class="nav-item" data-section="toc">
 <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path></svg>
 Table of Contents
 </a>
 </div>
<div class="nav-section">
 <div class="sidebar-title">Governance & Legal</div>
 <a class="nav-item" data-section="objectives">
 <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path></svg>
 Objectives & Outcomes
 </a>
 <a class="nav-item" data-section="governance">
 <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
 Governance Architecture
 </a>
 <a class="nav-item" data-section="threat">
 <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
 Threat Model
 </a>
 </div>
<div class="nav-section">
 <div class="sidebar-title">Technical Architecture</div>
 <a class="nav-item" data-section="technical">
 <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path></svg>
 Technical Architecture
 </a>
 <a class="nav-item" data-section="pqc">
 <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
 Post-Quantum Strategy
 </a>
 <a class="nav-item" data-section="apie">
 <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
 APIE System
 </a>
 <a class="nav-item" data-section="rust">
 <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg>
 Rust HSPA Emulator
 </a>
 </div>
<div class="nav-section">
 <div class="sidebar-title">Operations & Compliance</div>
 <a class="nav-item" data-section="incident">
 <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path></svg>
 Incident Response
 </a>
 <a class="nav-item" data-section="nist">
 <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
 NIST Alignment
 </a>
 <a class="nav-item" data-section="roadmap">
 <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7"></path></svg>
 Implementation Roadmap
 </a>
 </div>
<div class="nav-section">
 <div class="sidebar-title">Additional Sections</div>
 <a class="nav-item" data-section="budget">
 <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
 Budget & Feasibility
 </a>
 <a class="nav-item" data-section="ethics">
 <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
 Ethical Considerations
 </a>
 <a class="nav-item" data-section="reflection">
 <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path></svg>
 Portfolio Reflection
 </a>
 <a class="nav-item" data-section="conclusion">
 <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path></svg>
 Conclusion
 </a>
 <a class="nav-item" data-section="references">
 <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
 References
 </a>
 </div>
 </nav>
<main class="content">
 <div id="content-body" class="content-body">
 <!-- Content will be dynamically inserted here -->
 </div>
 </main>
 </div>
<script>
 const contentData = {
 cover: `
 <div class="cover-page">
 <h1>Baltimore Secure Backbone System</h1>
 <p class="subtitle">Policy Addendum, Technical Architecture, and Portfolio Submission Framework</p>
 <div class="cover-meta">
 <div class="meta-item">
 <label>Student</label>
 <span>caustin lee mclaughlin</span>
 </div>
 <div class="meta-item">
 <label>Degree Program</label>
 <span>Bachelors Data Science</span>
 </div>
 <div class="meta-item">
 <label>Institution</label>
 <span>UMGC</span>
 </div>
 <div class="meta-item">
 <label>Submission Date</label>
 <span>June 026</span>
 </div>
 </div>
 </div>
 `,
 abstract: `
 <div class="section">
 <h3 class="section-title">Abstract</h3>
 <div class="abstract-box">
 <h4>Executive Summary</h4>
 <p>The Baltimore Secure Backbone System (BSBS) is a jurisprudentially informed municipal cybersecurity governance and technical architecture framework designed to secure critical city infrastructure against both contemporary cyber threats and emerging post-quantum cryptographic risks.</p>
 </div>
 <p>BSBS addresses operational realities facing modern municipalities, including ransomware attacks against operational technology (OT), legacy infrastructure dependency, insider threats, and long-term cryptographic exposure through store-now-decrypt-later (SNDL) adversarial strategies.</p>
<h4 style="margin-top:1.5rem;margin-bottom:1rem;color:var(--primary);">Key Competencies Demonstrated</h4>
 <div class="card-grid">
 <div class="card">
 <h4>Cybersecurity Governance</h4>
 <p>Policy development and municipal governance hierarchy implementation</p>
 </div>
 <div class="card">
 <h4>Secure Systems Architecture</h4>
 <p>Concentric Harbor network segmentation design</p>
 </div>
 <div class="card">
 <h4>Zero-Trust Engineering</h4>
 <p>Continuous identity validation and least-privilege access</p>
 </div>
 <div class="card">
 <h4>PQC Transition Planning</h4>
 <p>Hybrid post-quantum cryptographic migration strategy</p>
 </div>
 <div class="card">
 <h4>Risk Assessment</h4>
 <p>NIST SP 800-30 derived scoring methodology</p>
 </div>
 <div class="card">
 <h4>Legal Compliance</h4>
 <p>Fourth Amendment minimization and CJIS integration</p>
 </div>
 <div class="card">
 <h4>OT/ICS Security</h4>
 <p>Air-gapped enclave strategies for critical infrastructure</p>
 </div>
 <div class="card">
 <h4>Secure Software Engineering</h4>
 <p>Rust-based memory-safe HSPA emulator</p>
 </div>
 <div class="card">
 <h4>AI Security</h4>
 <p>APIE anomaly detection with federated learning</p>
 </div>
 </div>
 </div>
 `,
 toc: `
 <div class="section">
 <h3 class="section-title">Table of Contents</h3>
 <div class="toc">
 <div class="toc-list">
 <a href="#objectives">1. Executive Summary</a>
 <a href="#objectives">2. Project Objectives and Learning Outcomes</a>
 <a href="#governance">3. Governance and Legal Architecture</a>
 <a href="#threat">4. Threat Model and Risk Framework</a>
 <a href="#technical">5. Technical Architecture</a>
 <a href="#pqc">6. Post-Quantum Cryptographic Strategy</a>
 <a href="#apie">7. Core Block / APIE Threat Inference System</a>
 <a href="#rust">8. Pure Rust HSPA Emulator</a>
 <a href="#incident">9. Incident Response and Resilience Planning</a>
 <a href="#nist">10. NIST and Regulatory Alignment</a>
 <a href="#roadmap">11. Implementation Roadmap</a>
 <a href="#budget">12. Budgetary and Operational Feasibility</a>
 <a href="#ethics">13. Ethical and Constitutional Considerations</a>
 <a href="#reflection">14. Portfolio Reflection and Technical Competencies</a>
 <a href="#conclusion">15. Conclusion</a>
 <a href="#references">16. References</a>
 <a href="#references">17. Appendices</a>
 </div>
 </div>
 </div>
 `,
 objectives: `
 <div class="section">
 <h3 class="section-title">1. Executive Summary & 2. Project Objectives</h3>
<h4>Strategic Goals</h4>
 <p>BSBS was designed around five strategic objectives:</p>
 <ul class="styled-list">
 <li>Reduce municipal cyberattack surface area through segmentation and zero-trust architecture</li>
 <li>Prepare municipal infrastructure for post-quantum cryptographic transition</li>
 <li>Preserve constitutional and civil-liberty protections during cybersecurity operations</li>
 <li>Protect legacy operational systems through memory-safe gateway architectures</li>
 <li>Improve municipal cyber resilience and incident response maturity</li>
 </ul>
 <h4 style="margin-top:1.5rem;">Learning Outcomes Demonstrated</h4>
 <table class="data-table">
 <thead>
 <tr>
 <th>Learning Outcome</th>
 <th>Demonstrated Through</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Risk Management</td>
 <td>NIST SP 800-30 derived scoring framework</td>
 </tr>
 <tr>
 <td>Secure Systems Design</td>
 <td>Concentric Harbor network architecture</td>
 </tr>
 <tr>
 <td>Cryptography</td>
 <td>Hybrid post-quantum implementation strategy</td>
 </tr>
 <tr>
 <td>Legal/Ethical Analysis</td>
 <td>Fourth Amendment minimization protocol</td>
 </tr>
 <tr>
 <td>Secure Software Development</td>
 <td>Rust HSPA emulator design</td>
 </tr>
 <tr>
 <td>Governance & Policy</td>
 <td>Municipal governance hierarchy</td>
 </tr>
 <tr>
 <td>AI/ML Security</td>
 <td>APIE anomaly detection system</td>
 </tr>
 <tr>
 <td>Incident Response</td>
 <td>BMIRP framework</td>
 </tr>
 <tr>
 <td>Regulatory Compliance</td>
 <td>CJIS/HIPAA/NIST mappings</td>
 </tr>
 <tr>
 <td>Critical Infrastructure Security</td>
 <td>OT/ICS segmentation strategy</td>
 </tr>
 </tbody>
 </table>
 <h4 style="margin-top:1.5rem;">Research Questions</h4>
 <ol style="padding-left:1.5rem;margin-top:1rem;">
 <li style="margin-bottom:0.5rem;">How can municipalities adopt post-quantum cryptography without disrupting legacy infrastructure?</li>
 <li style="margin-bottom:0.5rem;">How should constitutional protections influence cybersecurity monitoring architectures?</li>
 <li style="margin-bottom:0.5rem;">Can AI-assisted anomaly detection operate effectively while preserving privacy minimization principles?</li>
 <li style="margin-bottom:0.5rem;">What role should memory-safe programming languages play in critical infrastructure modernization?</li>
 <li>How can mid-sized cities balance fiscal constraints against advanced cybersecurity requirements?</li>
 </ol>
 </div>
 `,
 governance: `
 <div class="section">
 <h3 class="section-title">3. Governance and Legal Architecture</h3>
<h4>Governance Structure</h4>
 <table class="data-table">
 <thead>
 <tr>
 <th>Layer</th>
 <th>Entity</th>
 <th>Function</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td><strong>Strategic</strong></td>
 <td>Mayor's Office of Cybersecurity (MOC)</td>
 <td>Policy authorization, budgeting, intergovernmental coordination</td>
 </tr>
 <tr>
 <td><strong>Tactical</strong></td>
 <td>BSBS Security Operations Center (BSOC)</td>
 <td>24/7 monitoring, incident response, threat intelligence</td>
 </tr>
 <tr>
 <td><strong>Operational</strong></td>
 <td>Departmental Information Security Officers (DISOs)</td>
 <td>Access governance, departmental controls</td>
 </tr>
 <tr>
 <td><strong>Audit</strong></td>
 <td>Inspector General + External Assessors</td>
 <td>Independent control validation and constitutional review</td>
 </tr>
 </tbody>
 </table>
 <h4 style="margin-top:1.5rem;">Constitutional Compliance Framework</h4>
 <div class="card-grid">
 <div class="card">
 <h4>Fourth Amendment</h4>
 <p>Minimization framework with metadata-first analysis, differential privacy aggregation, warrant-trigger escalation pathways, and immutable audit records.</p>
 </div>
 <div class="card">
 <