| <!DOCTYPE html> |
| <html lang="en"> |
|
|
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Caustin Lee McLaughlin — Jurisprudential Technologist</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link |
| href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Inter:wght@300;400;500;600;700;800;900&display=swap" |
| rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> |
| <style> |
| *, |
| *::before, |
| *::after { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0 |
| } |
|
|
| :root { |
| --bg-deep: #060a10; |
| --bg-primary: #0b1120; |
| --bg-secondary: #111b2e; |
| --bg-card: #0f1a2e; |
| --bg-card-hover: #142240; |
| --border: #1a2a48; |
| --border-glow: #1e3a5f; |
| --text-primary: #e8edf5; |
| --text-secondary: #8a9bbd; |
| --text-muted: #5a6f94; |
| --accent-cyan: #00d4ff; |
| --accent-cyan-dim: #0095b8; |
| --accent-teal: #00e5c7; |
| --accent-purple: #8b5cf6; |
| --accent-amber: #f59e0b; |
| --accent-red: #ef4444; |
| --accent-emerald: #10b981; |
| --gradient-hero: linear-gradient(135deg, #060a10 0%, #0b1120 30%, #0f1a2e 60%, #111b2e 100%); |
| --gradient-accent: linear-gradient(135deg, #00d4ff, #8b5cf6); |
| --gradient-card: linear-gradient(180deg, rgba(15, 26, 46, 0.9), rgba(11, 17, 32, 0.95)); |
| --shadow-glow: 0 0 40px rgba(0, 212, 255, 0.08); |
| --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4); |
| --radius: 12px; |
| --radius-lg: 20px; |
| --font-sans: 'Inter', system-ui, sans-serif; |
| --font-mono: 'JetBrains Mono', monospace; |
| --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
|
|
| html { |
| scroll-behavior: smooth; |
| font-size: 16px |
| } |
|
|
| body { |
| font-family: var(--font-sans); |
| background: var(--bg-deep); |
| color: var(--text-primary); |
| line-height: 1.7; |
| overflow-x: hidden; |
| -webkit-font-smoothing: antialiased; |
| } |
|
|
| ::selection { |
| background: rgba(0, 212, 255, 0.25); |
| color: #fff |
| } |
|
|
| ::-webkit-scrollbar { |
| width: 6px |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: var(--bg-deep) |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: var(--border-glow); |
| border-radius: 3px |
| } |
|
|
| /* ── Navigation ── */ |
| .nav { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| z-index: 1000; |
| background: rgba(6, 10, 16, 0.85); |
| backdrop-filter: blur(20px) saturate(1.2); |
| border-bottom: 1px solid rgba(26, 42, 72, 0.5); |
| transition: var(--transition); |
| } |
|
|
| .nav.scrolled { |
| background: rgba(6, 10, 16, 0.95); |
| box-shadow: 0 2px 30px rgba(0, 0, 0, 0.5) |
| } |
|
|
| .nav-inner { |
| max-width: 1400px; |
| margin: 0 auto; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 0.75rem 2rem; |
| } |
|
|
| .nav-brand { |
| display: flex; |
| align-items: center; |
| gap: 0.75rem; |
| text-decoration: none; |
| color: var(--text-primary); |
| } |
|
|
| .nav-brand-icon { |
| width: 36px; |
| height: 36px; |
| background: var(--gradient-accent); |
| border-radius: 8px; |
| display: grid; |
| place-items: center; |
| font-weight: 800; |
| font-size: 0.85rem; |
| color: #fff; |
| font-family: var(--font-mono); |
| } |
|
|
| .nav-brand-text { |
| font-weight: 700; |
| font-size: 0.95rem; |
| letter-spacing: -0.02em |
| } |
|
|
| .nav-brand-text span { |
| color: var(--accent-cyan) |
| } |
|
|
| .nav-links { |
| display: flex; |
| gap: 0.25rem; |
| list-style: none |
| } |
|
|
| .nav-links a { |
| text-decoration: none; |
| color: var(--text-secondary); |
| padding: 0.5rem 0.85rem; |
| border-radius: 8px; |
| font-size: 0.82rem; |
| font-weight: 500; |
| transition: var(--transition); |
| position: relative; |
| } |
|
|
| .nav-links a:hover, |
| .nav-links a.active { |
| color: var(--accent-cyan); |
| background: rgba(0, 212, 255, 0.06) |
| } |
|
|
| .nav-links a.active::after { |
| content: ''; |
| position: absolute; |
| bottom: 4px; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 16px; |
| height: 2px; |
| background: var(--accent-cyan); |
| border-radius: 1px; |
| } |
|
|
| .nav-cta { |
| background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(139, 92, 246, 0.15)); |
| border: 1px solid rgba(0, 212, 255, 0.25); |
| color: var(--accent-cyan) !important; |
| font-weight: 600 !important; |
| } |
|
|
| .nav-cta:hover { |
| background: linear-gradient(135deg, rgba(0, 212, 255, 0.25), rgba(139, 92, 246, 0.25)) !important |
| } |
|
|
| .mobile-toggle { |
| display: none; |
| background: none; |
| border: none; |
| color: var(--text-primary); |
| font-size: 1.3rem; |
| cursor: pointer |
| } |
|
|
| .built-with { |
| font-size: 0.7rem; |
| color: var(--text-muted); |
| text-decoration: none; |
| opacity: 0.7; |
| transition: var(--transition); |
| margin-left: 1rem; |
| } |
|
|
| .built-with:hover { |
| opacity: 1; |
| color: var(--accent-cyan) |
| } |
|
|
| /* ── Hero ── */ |
| .hero { |
| min-height: 100vh; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| position: relative; |
| overflow: hidden; |
| padding: 6rem 2rem 4rem; |
| } |
|
|
| .hero-bg { |
| position: absolute; |
| inset: 0; |
| background: var(--gradient-hero); |
| } |
|
|
| .hero-grid { |
| position: absolute; |
| inset: 0; |
| background-image: |
| linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px); |
| background-size: 60px 60px; |
| mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 70%); |
| } |
|
|
| .hero-orb { |
| position: absolute; |
| border-radius: 50%; |
| filter: blur(100px); |
| opacity: 0.15; |
| animation: orbFloat 20s ease-in-out infinite; |
| } |
|
|
| .hero-orb-1 { |
| width: 600px; |
| height: 600px; |
| background: var(--accent-cyan); |
| top: -10%; |
| left: -10%; |
| animation-delay: 0s |
| } |
|
|
| .hero-orb-2 { |
| width: 500px; |
| height: 500px; |
| background: var(--accent-purple); |
| bottom: -10%; |
| right: -10%; |
| animation-delay: -7s |
| } |
|
|
| .hero-orb-3 { |
| width: 300px; |
| height: 300px; |
| background: var(--accent-teal); |
| top: 50%; |
| left: 50%; |
| animation-delay: -14s |
| } |
|
|
| @keyframes orbFloat { |
|
|
| 0%, |
| 100% { |
| transform: translate(0, 0) scale(1) |
| } |
|
|
| 33% { |
| transform: translate(30px, -40px) scale(1.05) |
| } |
|
|
| 66% { |
| transform: translate(-20px, 30px) scale(0.95) |
| } |
| } |
|
|
| .hero-content { |
| position: relative; |
| z-index: 2; |
| text-align: center; |
| max-width: 1000px; |
| } |
|
|
| .hero-badge { |
| display: inline-flex; |
| align-items: center; |
| gap: 0.5rem; |
| padding: 0.4rem 1rem 0.4rem 0.6rem; |
| background: rgba(0, 212, 255, 0.06); |
| border: 1px solid rgba(0, 212, 255, 0.15); |
| border-radius: 100px; |
| font-size: 0.75rem; |
| font-weight: 500; |
| color: var(--accent-cyan); |
| margin-bottom: 2rem; |
| font-family: var(--font-mono); |
| } |
|
|
| .hero-badge-dot { |
| width: 6px; |
| height: 6px; |
| background: var(--accent-cyan); |
| border-radius: 50%; |
| animation: pulse 2s ease-in-out infinite; |
| } |
|
|
| @keyframes pulse { |
|
|
| 0%, |
| 100% { |
| opacity: 1; |
| transform: scale(1) |
| } |
|
|
| 50% { |
| opacity: 0.4; |
| transform: scale(0.8) |
| } |
| } |
|
|
| .hero-name { |
| font-size: clamp(2.5rem, 7vw, 5.5rem); |
| font-weight: 900; |
| letter-spacing: -0.04em; |
| line-height: 1.05; |
| margin-bottom: 1.25rem; |
| background: linear-gradient(135deg, #fff 0%, #c8d6f0 40%, var(--accent-cyan) 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
|
|
| .hero-subtitle { |
| font-size: clamp(0.95rem, 2vw, 1.25rem); |
| color: var(--text-secondary); |
| max-width: 800px; |
| margin: 0 auto 2.5rem; |
| line-height: 1.8; |
| font-weight: 400; |
| } |
|
|
| .hero-subtitle strong { |
| color: var(--accent-cyan); |
| font-weight: 600 |
| } |
|
|
| .hero-tags { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: center; |
| gap: 0.6rem; |
| margin-bottom: 3rem; |
| } |
|
|
| .hero-tag { |
| padding: 0.4rem 1rem; |
| border-radius: 100px; |
| font-size: 0.72rem; |
| font-weight: 600; |
| letter-spacing: 0.04em; |
| text-transform: uppercase; |
| font-family: var(--font-mono); |
| } |
|
|
| .hero-tag-1 { |
| background: rgba(0, 212, 255, 0.1); |
| color: var(--accent-cyan); |
| border: 1px solid rgba(0, 212, 255, 0.2) |
| } |
|
|
| .hero-tag-2 { |
| background: rgba(139, 92, 246, 0.1); |
| color: var(--accent-purple); |
| border: 1px solid rgba(139, 92, 246, 0.2) |
| } |
|
|
| .hero-tag-3 { |
| background: rgba(0, 229, 199, 0.1); |
| color: var(--accent-teal); |
| border: 1px solid rgba(0, 229, 199, 0.2) |
| } |
|
|
| .hero-tag-4 { |
| background: rgba(245, 158, 11, 0.1); |
| color: var(--accent-amber); |
| border: 1px solid rgba(245, 158, 11, 0.2) |
| } |
|
|
| .hero-actions { |
| display: flex; |
| gap: 1rem; |
| justify-content: center; |
| flex-wrap: wrap |
| } |
|
|
| .btn { |
| display: inline-flex; |
| align-items: center; |
| gap: 0.5rem; |
| padding: 0.8rem 1.75rem; |
| border-radius: 10px; |
| font-size: 0.85rem; |
| font-weight: 600; |
| text-decoration: none; |
| transition: var(--transition); |
| cursor: pointer; |
| border: none; |
| font-family: var(--font-sans); |
| } |
|
|
| .btn-primary { |
| background: var(--gradient-accent); |
| color: #fff; |
| box-shadow: 0 4px 20px rgba(0, 212, 255, 0.25); |
| } |
|
|
| .btn-primary:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 8px 30px rgba(0, 212, 255, 0.35) |
| } |
|
|
| .btn-secondary { |
| background: rgba(255, 255, 255, 0.04); |
| color: var(--text-primary); |
| border: 1px solid var(--border); |
| } |
|
|
| .btn-secondary:hover { |
| background: rgba(255, 255, 255, 0.08); |
| border-color: var(--border-glow) |
| } |
|
|
| .hero-scroll { |
| position: absolute; |
| bottom: 2rem; |
| left: 50%; |
| transform: translateX(-50%); |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 0.5rem; |
| color: var(--text-muted); |
| font-size: 0.7rem; |
| font-family: var(--font-mono); |
| animation: scrollBounce 2s ease-in-out infinite; |
| } |
|
|
| @keyframes scrollBounce { |
|
|
| 0%, |
| 100% { |
| transform: translateX(-50%) translateY(0) |
| } |
|
|
| 50% { |
| transform: translateX(-50%) translateY(8px) |
| } |
| } |
|
|
| /* ── Sections ── */ |
| .section { |
| padding: 6rem 2rem; |
| position: relative; |
| max-width: 1400px; |
| margin: 0 auto; |
| } |
|
|
| .section-header { |
| text-align: center; |
| margin-bottom: 4rem |
| } |
|
|
| .section-label { |
| display: inline-flex; |
| align-items: center; |
| gap: 0.5rem; |
| font-family: var(--font-mono); |
| font-size: 0.72rem; |
| font-weight: 600; |
| color: var(--accent-cyan); |
| text-transform: uppercase; |
| letter-spacing: 0.12em; |
| margin-bottom: 1rem; |
| } |
|
|
| .section-label i { |
| font-size: 0.65rem |
| } |
|
|
| .section-title { |
| font-size: clamp(1.8rem, 4vw, 2.8rem); |
| font-weight: 800; |
| letter-spacing: -0.03em; |
| margin-bottom: 1rem; |
| } |
|
|
| .section-title .gradient { |
| background: var(--gradient-accent); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
|
|
| .section-desc { |
| color: var(--text-secondary); |
| max-width: 700px; |
| margin: 0 auto; |
| font-size: 1rem; |
| line-height: 1.8; |
| } |
|
|
| /* ── Executive Summary ── */ |
| .summary-grid { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 2rem; |
| } |
|
|
| .summary-card { |
| background: var(--gradient-card); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-lg); |
| padding: 2rem; |
| position: relative; |
| overflow: hidden; |
| transition: var(--transition); |
| } |
|
|
| .summary-card:hover { |
| border-color: var(--border-glow); |
| box-shadow: var(--shadow-glow) |
| } |
|
|
| .summary-card-icon { |
| width: 48px; |
| height: 48px; |
| border-radius: 12px; |
| display: grid; |
| place-items: center; |
| font-size: 1.2rem; |
| margin-bottom: 1.25rem; |
| } |
|
|
| .summary-card-icon.cyan { |
| background: rgba(0, 212, 255, 0.1); |
| color: var(--accent-cyan) |
| } |
|
|
| .summary-card-icon.purple { |
| background: rgba(139, 92, 246, 0.1); |
| color: var(--accent-purple) |
| } |
|
|
| .summary-card-icon.teal { |
| background: rgba(0, 229, 199, 0.1); |
| color: var(--accent-teal) |
| } |
|
|
| .summary-card-icon.amber { |
| background: rgba(245, 158, 11, 0.1); |
| color: var(--accent-amber) |
| } |
|
|
| .summary-card h3 { |
| font-size: 1.1rem; |
| font-weight: 700; |
| margin-bottom: 0.75rem; |
| letter-spacing: -0.01em |
| } |
|
|
| .summary-card p { |
| color: var(--text-secondary); |
| font-size: 0.9rem; |
| line-height: 1.75 |
| } |
|
|
| /* ── Competency Matrix ── */ |
| .matrix-container { |
| overflow-x: auto |
| } |
|
|
| .matrix-table { |
| width: 100%; |
| border-collapse: separate; |
| border-spacing: 0; |
| background: var(--bg-card); |
| border-radius: var(--radius-lg); |
| overflow: hidden; |
| border: 1px solid var(--border); |
| min-width: 800px; |
| } |
|
|
| .matrix-table thead { |
| background: rgba(0, 212, 255, 0.04) |
| } |
|
|
| .matrix-table th { |
| padding: 1.25rem 1.5rem; |
| text-align: left; |
| font-size: 0.75rem; |
| font-weight: 700; |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| color: var(--accent-cyan); |
| font-family: var(--font-mono); |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .matrix-table td { |
| padding: 1.25rem 1.5rem; |
| font-size: 0.88rem; |
| color: var(--text-secondary); |
| line-height: 1.7; |
| border-bottom: 1px solid rgba(26, 42, 72, 0.3); |
| vertical-align: top; |
| } |
|
|
| .matrix-table tr:last-child td { |
| border-bottom: none |
| } |
|
|
| .matrix-table td:first-child { |
| font-weight: 700; |
| color: var(--text-primary); |
| font-size: 0.82rem; |
| white-space: nowrap; |
| } |
|
|
| .matrix-table tbody tr { |
| transition: var(--transition) |
| } |
|
|
| .matrix-table tbody tr:hover { |
| background: rgba(0, 212, 255, 0.02) |
| } |
|
|
| .matrix-highlight { |
| color: var(--accent-cyan); |
| font-weight: 600; |
| } |
|
|
| .matrix-tag { |
| display: inline-block; |
| padding: 0.15rem 0.5rem; |
| border-radius: 4px; |
| font-size: 0.7rem; |
| font-family: var(--font-mono); |
| font-weight: 600; |
| margin: 0.1rem 0.15rem; |
| } |
|
|
| .matrix-tag-law { |
| background: rgba(139, 92, 246, 0.12); |
| color: var(--accent-purple) |
| } |
|
|
| .matrix-tag-bio { |
| background: rgba(0, 229, 199, 0.12); |
| color: var(--accent-teal) |
| } |
|
|
| .matrix-tag-ai { |
| background: rgba(0, 212, 255, 0.12); |
| color: var(--accent-cyan) |
| } |
|
|
| .matrix-tag-pqc { |
| background: rgba(245, 158, 11, 0.12); |
| color: var(--accent-amber) |
| } |
|
|
| /* ── Architecture Sections ── */ |
| .arch-section { |
| margin-bottom: 4rem |
| } |
|
|
| .arch-section:last-child { |
| margin-bottom: 0 |
| } |
|
|
| .arch-header { |
| display: flex; |
| align-items: center; |
| gap: 1rem; |
| margin-bottom: 1.5rem; |
| } |
|
|
| .arch-number { |
| width: 40px; |
| height: 40px; |
| border-radius: 10px; |
| display: grid; |
| place-items: center; |
| font-family: var(--font-mono); |
| font-weight: 800; |
| font-size: 0.9rem; |
| flex-shrink: 0; |
| } |
|
|
| .arch-number.cyan { |
| background: rgba(0, 212, 255, 0.12); |
| color: var(--accent-cyan); |
| border: 1px solid rgba(0, 212, 255, 0.2) |
| } |
|
|
| .arch-number.purple { |
| background: rgba(139, 92, 246, 0.12); |
| color: var(--accent-purple); |
| border: 1px solid rgba(139, 92, 246, 0.2) |
| } |
|
|
| .arch-number.teal { |
| background: rgba(0, 229, 199, 0.12); |
| color: var(--accent-teal); |
| border: 1px solid rgba(0, 229, 199, 0.2) |
| } |
|
|
| .arch-title { |
| font-size: 1.35rem; |
| font-weight: 800; |
| letter-spacing: -0.02em |
| } |
|
|
| .arch-body { |
| background: var(--gradient-card); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-lg); |
| padding: 2rem; |
| overflow: hidden; |
| } |
|
|
| .arch-body p { |
| color: var(--text-secondary); |
| font-size: 0.92rem; |
| line-height: 1.8; |
| margin-bottom: 1rem |
| } |
|
|
| .arch-body p:last-child { |
| margin-bottom: 0 |
| } |
|
|
| .arch-body ul { |
| list-style: none; |
| padding: 0; |
| margin: 1rem 0 |
| } |
|
|
| .arch-body ul li { |
| padding: 0.6rem 0 0.6rem 1.5rem; |
| position: relative; |
| color: var(--text-secondary); |
| font-size: 0.9rem; |
| line-height: 1.7; |
| } |
|
|
| .arch-body ul li::before { |
| content: ''; |
| position: absolute; |
| left: 0; |
| top: 1rem; |
| width: 6px; |
| height: 6px; |
| border-radius: 50%; |
| } |
|
|
| .arch-body ul li.cyan::before { |
| background: var(--accent-cyan) |
| } |
|
|
| .arch-body ul li.purple::before { |
| background: var(--accent-purple) |
| } |
|
|
| .arch-body ul li.teal::before { |
| background: var(--accent-teal) |
| } |
|
|
| .arch-body ul li.amber::before { |
| background: var(--accent-amber) |
| } |
|
|
| /* ── NGOMA Stack ── */ |
| .ngoma-stack { |
| display: flex; |
| flex-direction: column; |
| gap: 0; |
| margin: 2rem 0; |
| border-radius: var(--radius); |
| overflow: hidden; |
| border: 1px solid var(--border); |
| } |
|
|
| .ngoma-layer { |
| padding: 1rem 1.5rem; |
| font-family: var(--font-mono); |
| font-size: 0.78rem; |
| font-weight: 500; |
| border-bottom: 1px solid rgba(26, 42, 72, 0.3); |
| display: flex; |
| align-items: center; |
| gap: 1rem; |
| transition: var(--transition); |
| cursor: default; |
| } |
|
|
| .ngoma-layer:last-child { |
| border-bottom: none |
| } |
|
|
| .ngoma-layer:hover { |
| padding-left: 2rem |
| } |
|
|
| .ngoma-layer-num { |
| width: 24px; |
| height: 24px; |
| border-radius: 6px; |
| display: grid; |
| place-items: center; |
| font-size: 0.65rem; |
| font-weight: 800; |
| flex-shrink: 0; |
| } |
|
|
| .ngoma-layer:nth-child(1) .ngoma-layer-num { |
| background: rgba(239, 68, 68, 0.15); |
| color: var(--accent-red) |
| } |
|
|
| .ngoma-layer:nth-child(2) .ngoma-layer-num { |
| background: rgba(245, 158, 11, 0.15); |
| color: var(--accent-amber) |
| } |
|
|
| .ngoma-layer:nth-child(3) .ngoma-layer-num { |
| background: rgba(0, 212, 255, 0.15); |
| color: var(--accent-cyan) |
| } |
|
|
| .ngoma-layer:nth-child(4) .ngoma-layer-num { |
| background: rgba(139, 92, 246, 0.15); |
| color: var(--accent-purple) |
| } |
|
|
| .ngoma-layer:nth-child(5) .ngoma-layer-num { |
| background: rgba(0, 229, 199, 0.15); |
| color: var(--accent-teal) |
| } |
|
|
| .ngoma-layer:nth-child(6) .ngoma-layer-num { |
| background: rgba(16, 185, 129, 0.15); |
| color: var(--accent-emerald) |
| } |
|
|
| .ngoma-layer:nth-child(1) { |
| background: rgba(239, 68, 68, 0.04) |
| } |
|
|
| .ngoma-layer:nth-child(2) { |
| background: rgba(245, 158, 11, 0.04) |
| } |
|
|
| .ngoma-layer:nth-child(3) { |
| background: rgba(0, 212, 255, 0.04) |
| } |
|
|
| .ngoma-layer:nth-child(4) { |
| background: rgba(139, 92, 246, 0.04) |
| } |
|
|
| .ngoma-layer:nth-child(5) { |
| background: rgba(0, 229, 199, 0.04) |
| } |
|
|
| .ngoma-layer:nth-child(6) { |
| background: rgba(16, 185, 129, 0.04) |
| } |
|
|
| /* ── Pipeline ── */ |
| .pipeline { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 0; |
| margin: 2rem 0; |
| } |
|
|
| .pipeline-step { |
| width: 100%; |
| max-width: 700px; |
| background: var(--bg-card); |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| padding: 1.25rem 1.5rem; |
| text-align: center; |
| position: relative; |
| transition: var(--transition); |
| } |
|
|
| .pipeline-step:hover { |
| border-color: var(--border-glow); |
| box-shadow: var(--shadow-glow) |
| } |
|
|
| .pipeline-step-label { |
| font-family: var(--font-mono); |
| font-size: 0.72rem; |
| font-weight: 700; |
| color: var(--accent-cyan); |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| margin-bottom: 0.4rem; |
| } |
|
|
| .pipeline-step-text { |
| font-size: 0.88rem; |
| color: var(--text-secondary); |
| line-height: 1.6 |
| } |
|
|
| .pipeline-arrow { |
| width: 2px; |
| height: 28px; |
| position: relative; |
| background: linear-gradient(to bottom, var(--accent-cyan), rgba(0, 212, 255, 0.2)); |
| } |
|
|
| .pipeline-arrow::after { |
| content: ''; |
| position: absolute; |
| bottom: -4px; |
| left: 50%; |
| transform: translateX(-50%); |
| border-left: 5px solid transparent; |
| border-right: 5px solid transparent; |
| border-top: 6px solid rgba(0, 212, 255, 0.4); |
| } |
|
|
| /* ── Court Hierarchy ── */ |
| .court-tree { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 1.5rem; |
| margin: 2rem 0; |
| } |
|
|
| .court-node { |
| background: var(--bg-card); |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| padding: 1.25rem 2rem; |
| text-align: center; |
| position: relative; |
| transition: var(--transition); |
| max-width: 420px; |
| width: 100%; |
| } |
|
|
| .court-node:hover { |
| border-color: var(--border-glow); |
| box-shadow: var(--shadow-glow) |
| } |
|
|
| .court-node.supreme { |
| border-color: rgba(245, 158, 11, 0.3); |
| background: rgba(245, 158, 11, 0.03); |
| } |
|
|
| .court-node.appeals { |
| border-color: rgba(139, 92, 246, 0.3); |
| background: rgba(139, 92, 246, 0.03); |
| } |
|
|
| .court-node.district { |
| border-color: rgba(0, 212, 255, 0.3); |
| background: rgba(0, 212, 255, 0.03); |
| } |
|
|
| .court-node-label { |
| font-family: var(--font-mono); |
| font-size: 0.68rem; |
| font-weight: 700; |
| text-transform: uppercase; |
| letter-spacing: 0.1em; |
| margin-bottom: 0.3rem; |
| } |
|
|
| .court-node.supreme .court-node-label { |
| color: var(--accent-amber) |
| } |
|
|
| .court-node.appeals .court-node-label { |
| color: var(--accent-purple) |
| } |
|
|
| .court-node.district .court-node-label { |
| color: var(--accent-cyan) |
| } |
|
|
| .court-node-title { |
| font-size: 0.95rem; |
| font-weight: 700; |
| margin-bottom: 0.3rem |
| } |
|
|
| .court-node-desc { |
| font-size: 0.78rem; |
| color: var(--text-muted); |
| line-height: 1.5 |
| } |
|
|
| .court-connector { |
| width: 2px; |
| height: 24px; |
| background: linear-gradient(to bottom, rgba(139, 92, 246, 0.4), rgba(0, 212, 255, 0.2)); |
| } |
|
|
| .court-branch { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 1.5rem; |
| width: 100%; |
| max-width: 800px; |
| } |
|
|
| .court-branch-line { |
| position: relative; |
| } |
|
|
| .court-branch-line::before { |
| content: ''; |
| position: absolute; |
| top: -12px; |
| left: 50%; |
| width: calc(50% + 0.75rem); |
| height: 2px; |
| background: rgba(139, 92, 246, 0.2); |
| } |
|
|
| .court-branch-line:first-child::before { |
| right: 50%; |
| left: auto |
| } |
|
|
| .court-branch-line:last-child::before { |
| left: 50% |
| } |
|
|
| /* ── Litigation Cards ── */ |
| .lit-grid { |
| display: grid; |
| grid-template-columns: 1fr 1fr 1fr; |
| gap: 1.5rem |
| } |
|
|
| .lit-card { |
| background: var(--gradient-card); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-lg); |
| padding: 2rem; |
| transition: var(--transition); |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .lit-card:hover { |
| border-color: var(--border-glow); |
| box-shadow: var(--shadow-glow); |
| transform: translateY(-2px) |
| } |
|
|
| .lit-card-badge { |
| display: inline-flex; |
| align-items: center; |
| gap: 0.4rem; |
| padding: 0.25rem 0.75rem; |
| border-radius: 100px; |
| font-family: var(--font-mono); |
| font-size: 0.65rem; |
| font-weight: 700; |
| text-transform: uppercase; |
| letter-spacing: 0.06em; |
| margin-bottom: 1rem; |
| } |
|
|
| .lit-card-badge.amber { |
| background: rgba(245, 158, 11, 0.1); |
| color: var(--accent-amber); |
| border: 1px solid rgba(245, 158, 11, 0.2) |
| } |
|
|
| .lit-card-badge.cyan { |
| background: rgba(0, 212, 255, 0.1); |
| color: var(--accent-cyan); |
| border: 1px solid rgba(0, 212, 255, 0.2) |
| } |
|
|
| .lit-card-badge.purple { |
| background: rgba(139, 92, 246, 0.1); |
| color: var(--accent-purple); |
| border: 1px solid rgba(139, 92, 246, 0.2) |
| } |
|
|
| .lit-card h3 { |
| font-size: 1.05rem; |
| font-weight: 700; |
| margin-bottom: 0.75rem; |
| letter-spacing: -0.01em |
| } |
|
|
| .lit-card p { |
| color: var(--text-secondary); |
| font-size: 0.85rem; |
| line-height: 1.75 |
| } |
|
|
| .lit-card ul { |
| list-style: none; |
| padding: 0; |
| margin: 0.75rem 0 |
| } |
|
|
| .lit-card ul li { |
| padding: 0.3rem 0 0.3rem 1.2rem; |
| position: relative; |
| color: var(--text-secondary); |
| font-size: 0.82rem; |
| line-height: 1.6; |
| } |
|
|
| .lit-card ul li::before { |
| content: '▸'; |
| position: absolute; |
| left: 0; |
| color: var(--accent-cyan); |
| font-size: 0.7rem; |
| top: 0.45rem; |
| } |
|
|
| /* ── Policy Cards ── */ |
| .policy-grid { |
| display: grid; |
| grid-template-columns: 1fr 1fr 1fr; |
| gap: 1.5rem |
| } |
|
|
| .policy-card { |
| background: var(--gradient-card); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-lg); |
| padding: 2rem; |
| transition: var(--transition); |
| } |
|
|
| .policy-card:hover { |
| border-color: var(--border-glow); |
| box-shadow: var(--shadow-glow) |
| } |
|
|
| .policy-card-icon { |
| width: 52px; |
| height: 52px; |
| border-radius: 14px; |
| display: grid; |
| place-items: center; |
| font-size: 1.3rem; |
| margin-bottom: 1.5rem; |
| } |
|
|
| .policy-card h3 { |
| font-size: 1.05rem; |
| font-weight: 700; |
| margin-bottom: 0.75rem |
| } |
|
|
| .policy-card p { |
| color: var(--text-secondary); |
| font-size: 0.85rem; |
| line-height: 1.75 |
| } |
|
|
| .policy-card ul { |
| list-style: none; |
| padding: 0; |
| margin: 0.75rem 0 |
| } |
|
|
| .policy-card ul li { |
| padding: 0.3rem 0 0.3rem 1.2rem; |
| position: relative; |
| color: var(--text-secondary); |
| font-size: 0.82rem; |
| line-height: 1.6; |
| } |
|
|
| .policy-card ul li::before { |
| content: '◆'; |
| position: absolute; |
| left: 0; |
| font-size: 0.5rem; |
| top: 0.55rem; |
| } |
|
|
| .policy-card:nth-child(1) ul li::before { |
| color: var(--accent-cyan) |
| } |
|
|
| .policy-card:nth-child(2) ul li::before { |
| color: var(--accent-purple) |
| } |
|
|
| .policy-card:nth-child(3) ul li::before { |
| color: var(--accent-teal) |
| } |
|
|
| /* ── Academic ── */ |
| .academic-grid { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 1.5rem |
| } |
|
|
| .academic-card { |
| background: var(--gradient-card); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-lg); |
| padding: 2rem; |
| transition: var(--transition); |
| } |
|
|
| .academic-card:hover { |
| border-color: var(--border-glow); |
| box-shadow: var(--shadow-glow) |
| } |
|
|
| .academic-card-header { |
| display: flex; |
| align-items: center; |
| gap: 1rem; |
| margin-bottom: 1rem |
| } |
|
|
| .academic-card-icon { |
| width: 44px; |
| height: 44px; |
| border-radius: 12px; |
| display: grid; |
| place-items: center; |
| font-size: 1.1rem; |
| flex-shrink: 0; |
| } |
|
|
| .academic-card h3 { |
| font-size: 1rem; |
| font-weight: 700 |
| } |
|
|
| .academic-card p { |
| color: var(--text-secondary); |
| font-size: 0.85rem; |
| line-height: 1.75 |
| } |
|
|
| /* ── Terminal Footer ── */ |
| .terminal { |
| background: var(--bg-primary); |
| border-top: 1px solid var(--border); |
| padding: 3rem 2rem; |
| } |
|
|
| .terminal-inner { |
| max-width: 1400px; |
| margin: 0 auto |
| } |
|
|
| .terminal-block { |
| background: rgba(0, 0, 0, 0.3); |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| padding: 1.5rem 2rem; |
| font-family: var(--font-mono); |
| font-size: 0.75rem; |
| color: var(--accent-cyan); |
| line-height: 2; |
| overflow-x: auto; |
| } |
|
|
| .terminal-block .comment { |
| color: var(--text-muted) |
| } |
|
|
| .terminal-block .key { |
| color: var(--accent-purple) |
| } |
|
|
| .terminal-block .val { |
| color: var(--accent-teal) |
| } |
|
|
| .terminal-block .sep { |
| color: var(--accent-amber) |
| } |
|
|
| .terminal-cursor { |
| display: inline-block; |
| width: 8px; |
| height: 14px; |
| background: var(--accent-cyan); |
| vertical-align: middle; |
| animation: blink 1s step-end infinite; |
| margin-left: 2px; |
| } |
|
|
| @keyframes blink { |
|
|
| 0%, |
| 100% { |
| opacity: 1 |
| } |
|
|
| 50% { |
| opacity: 0 |
| } |
| } |
|
|
| .footer-bottom { |
| max-width: 1400px; |
| margin: 2rem auto 0; |
| padding-top: 2rem; |
| border-top: 1px solid rgba(26, 42, 72, 0.3); |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| font-size: 0.75rem; |
| color: var(--text-muted); |
| } |
|
|
| .footer-bottom a { |
| color: var(--accent-cyan); |
| text-decoration: none |
| } |
|
|
| .footer-bottom a:hover { |
| text-decoration: underline |
| } |
|
|
| /* ── Divider ── */ |
| .section-divider { |
| width: 100%; |
| height: 1px; |
| background: linear-gradient(90deg, transparent, var(--border), transparent); |
| margin: 0 auto; |
| } |
|
|
| /* ── Formula Block ── */ |
| .formula-block { |
| background: rgba(0, 0, 0, 0.3); |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| padding: 1.5rem 2rem; |
| margin: 1.5rem 0; |
| text-align: center; |
| font-family: var(--font-mono); |
| font-size: 1rem; |
| color: var(--text-primary); |
| overflow-x: auto; |
| } |
|
|
| .formula-block .var { |
| color: var(--accent-cyan); |
| font-style: italic |
| } |
|
|
| .formula-block .op { |
| color: var(--accent-purple) |
| } |
|
|
| .formula-block .fn { |
| color: var(--accent-teal) |
| } |
|
|
| /* ── Collapsible ── */ |
| .collapsible-trigger { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| cursor: pointer; |
| padding: 1rem 1.5rem; |
| background: rgba(0, 212, 255, 0.03); |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| transition: var(--transition); |
| margin-bottom: 0.5rem; |
| user-select: none; |
| } |
|
|
| .collapsible-trigger:hover { |
| background: rgba(0, 212, 255, 0.06); |
| border-color: var(--border-glow) |
| } |
|
|
| .collapsible-trigger h4 { |
| font-size: 0.9rem; |
| font-weight: 700; |
| display: flex; |
| align-items: center; |
| gap: 0.75rem |
| } |
|
|
| .collapsible-trigger .chevron { |
| transition: var(--transition); |
| color: var(--accent-cyan); |
| font-size: 0.7rem; |
| } |
|
|
| .collapsible-trigger.active .chevron { |
| transform: rotate(180deg) |
| } |
|
|
| .collapsible-content { |
| max-height: 0; |
| overflow: hidden; |
| transition: max-height 0.4s ease; |
| } |
|
|
| .collapsible-content.open { |
| max-height: 2000px |
| } |
|
|
| .collapsible-content-inner { |
| padding: 1rem 1.5rem 1.5rem; |
| color: var(--text-secondary); |
| font-size: 0.88rem; |
| line-height: 1.8; |
| } |
|
|
| /* ── Scroll Animations ── */ |
| .reveal { |
| opacity: 0; |
| transform: translateY(30px); |
| transition: opacity 0.7s ease, transform 0.7s ease; |
| } |
|
|
| .reveal.visible { |
| opacity: 1; |
| transform: translateY(0) |
| } |
|
|
| .reveal-delay-1 { |
| transition-delay: 0.1s |
| } |
|
|
| .reveal-delay-2 { |
| transition-delay: 0.2s |
| } |
|
|
| .reveal-delay-3 { |
| transition-delay: 0.3s |
| } |
|
|
| /* ── Responsive ── */ |
| @media(max-width:1024px) { |
|
|
| .summary-grid, |
| .academic-grid { |
| grid-template-columns: 1fr 1fr |
| } |
|
|
| .lit-grid, |
| .policy-grid { |
| grid-template-columns: 1fr 1fr |
| } |
| } |
|
|
| @media(max-width:768px) { |
| .nav-links { |
| display: none |
| } |
|
|
| .mobile-toggle { |
| display: block |
| } |
|
|
| .nav-links.open { |
| display: flex; |
| flex-direction: column; |
| position: absolute; |
| top: 100%; |
| left: 0; |
| right: 0; |
| background: rgba(6, 10, 16, 0.98); |
| padding: 1rem; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .summary-grid, |
| .academic-grid, |
| .lit-grid, |
| .policy-grid { |
| grid-template-columns: 1fr |
| } |
|
|
| .court-branch { |
| grid-template-columns: 1fr |
| } |
|
|
| .hero-name { |
| font-size: clamp(2rem, 8vw, 3.5rem) |
| } |
|
|
| .section { |
| padding: 4rem 1.25rem |
| } |
|
|
| .court-branch-line::before { |
| display: none |
| } |
|
|
| .built-with { |
| display: none |
| } |
| } |
|
|
| @media(max-width:480px) { |
| .hero-actions { |
| flex-direction: column; |
| align-items: stretch |
| } |
|
|
| .btn { |
| justify-content: center |
| } |
| } |
| </style> |
| </head> |
|
|
| <body> |
|
|
| |
| <nav class="nav" id="nav"> |
| <div class="nav-inner"> |
| <a href="#" class="nav-brand"> |
| <div class="nav-brand-icon">CL</div> |
| <div class="nav-brand-text">Caustin<span>.tech</span></div> |
| </a> |
| <ul class="nav-links" id="navLinks"> |
| <li><a href="#summary" class="active">Overview</a></li> |
| <li><a href="#competencies">Competencies</a></li> |
| <li><a href="#architecture">Architecture</a></li> |
| <li><a href="#bioinformatics">Bioinformatics</a></li> |
| <li><a href="#litigation">Litigation</a></li> |
| <li><a href="#policy">Policy</a></li> |
| <li><a href="#academic">Academic</a></li> |
| </ul> |
| <div style="display:flex;align-items:center"> |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener" class="built-with">Built |
| with anycoder</a> |
| <button class="mobile-toggle" id="mobileToggle" aria-label="Toggle navigation"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="hero"> |
| <div class="hero-bg"> |
| <div class="hero-grid"></div> |
| <div class="hero-orb hero-orb-1"></div> |
| <div class="hero-orb hero-orb-2"></div> |
| <div class="hero-orb hero-orb-3"></div> |
| </div> |
| <div class="hero-content"> |
| <div class="hero-badge"> |
| <span class="hero-badge-dot"></span> |
| SYSTEM.STATUS: ACTIVE_LITIGANT |
| </div> |
| <h1 class="hero-name">Caustin Lee<br>McLaughlin</h1> |
| <p class="hero-subtitle"> |
| A <strong>Jurisprudential Technologist</strong>, systems architect, and municipal leadership candidate whose |
| career establishes a paradigm shift at the intersection of <strong>complex technology</strong>, |
| <strong>constitutional litigation</strong>, and <strong>structural civil rights advocacy</strong>. |
| </p> |
| <div class="hero-tags"> |
| <span class="hero-tag hero-tag-1">Constitutional Law</span> |
| <span class="hero-tag hero-tag-2">Bioinformatics</span> |
| <span class="hero-tag hero-tag-3">AI Architecture</span> |
| <span class="hero-tag hero-tag-4">Post-Quantum Crypto</span> |
| </div> |
| <div class="hero-actions"> |
| <a href="#architecture" class="btn btn-primary"><i class="fas fa-microchip"></i> Explore Systems</a> |
| <a href="#litigation" class="btn btn-secondary"><i class="fas fa-scale-balanced"></i> Litigation Strategy</a> |
| </div> |
| </div> |
| <div class="hero-scroll"> |
| SCROLL |
| <i class="fas fa-chevron-down"></i> |
| </div> |
| </section> |
|
|
| |
| <section class="section" id="summary"> |
| <div class="section-header reveal"> |
| <div class="section-label"><i class="fas fa-diamond"></i> Section 01</div> |
| <h2 class="section-title">Executive <span class="gradient">Summary</span></h2> |
| <p class="section-desc">Operating from Baltimore, Maryland, McLaughlin systematically deconstructs administrative |
| and biological barriers to equity through high-fidelity engineering and precise legal execution.</p> |
| </div> |
| <div class="summary-grid"> |
| <div class="summary-card reveal reveal-delay-1"> |
| <div class="summary-card-icon cyan"><i class="fas fa-gavel"></i></div> |
| <h3>Constitutional Accountability</h3> |
| <p>Translating cutting-edge scientific innovation into definitive, court-defensible public frameworks that |
| enforce individual sovereignty and digital due process.</p> |
| </div> |
| <div class="summary-card reveal reveal-delay-2"> |
| <div class="summary-card-icon purple"><i class="fas fa-dna"></i></div> |
| <h3>Computational Genomics</h3> |
| <p>Integrating GRCh38 genomic reconstruction, multi-ancestry polygenic risk scoring, and pharmacogenetic |
| modeling into legally admissible evidence pipelines.</p> |
| </div> |
| <div class="summary-card reveal reveal-delay-2"> |
| <div class="summary-card-icon teal"><i class="fas fa-brain"></i></div> |
| <h3>Sovereign AI Systems</h3> |
| <p>Architecting HSPA-8 and Gov-LLM systems that eliminate black-box algorithmic bias and data sovereignty |
| vulnerabilities via local execution boundaries.</p> |
| </div> |
| <div class="summary-card reveal reveal-delay-3"> |
| <div class="summary-card-icon amber"><i class="fas fa-shield-halved"></i></div> |
| <h3>Post-Quantum Cryptography</h3> |
| <p>Framing NIST FIPS 203/204 standard implementations as forensic provenance infrastructure guaranteeing |
| chain-of-custody integrity within court systems.</p> |
| </div> |
| </div> |
| </section> |
|
|
| <div class="section-divider"></div> |
|
|
| |
| <section class="section" id="competencies"> |
| <div class="section-header reveal"> |
| <div class="section-label"><i class="fas fa-diamond"></i> Section 02</div> |
| <h2 class="section-title">Core Competencies & <span class="gradient">Expertise Matrix</span></h2> |
| <p class="section-desc">A convergence of legal mastery, biological science, AI engineering, and cryptographic |
| infrastructure—each calibrated for strategic admissibility.</p> |
| </div> |
| <div class="matrix-container reveal"> |
| <table class="matrix-table"> |
| <thead> |
| <tr> |
| <th>Competency</th> |
| <th>Technical & Foundational Application</th> |
| <th>Strategic Admissibility Framework</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td> |
| <span class="matrix-tag matrix-tag-law">LAW</span><br> |
| Constitutional Law & Federal Litigation |
| </td> |
| <td>42 U.S.C. § 1983 civil rights actions; Tucker Act claims (28 U.S.C. § 1491) for illegal exaction of |
| liberty and property; First, Fourth, and Fourteenth Amendment appellate strategy.</td> |
| <td>Mastery of <span class="matrix-highlight">Daubert v. Merrell Dow</span> and |
| <span class="matrix-highlight">Kumho Tire</span> reliability standards, building bulletproof provenance |
| loops for technical and medical evidence. |
| </td> |
| </tr> |
| <tr> |
| <td> |
| <span class="matrix-tag matrix-tag-bio">BIO</span><br> |
| Advanced Bioinformatics & Neurogenetics |
| </td> |
| <td>GRCh38 high-resolution genomic reconstruction; multi-ancestry Polygenic Risk Scoring (PRS); Linkage |
| Disequilibrium (LD) panels; pharmacogenetic modeling.</td> |
| <td>Decoupling biological effect estimates from literature quality modifiers to present probabilistic, |
| traceable evidence of cognitive phenotypes.</td> |
| </tr> |
| <tr> |
| <td> |
| <span class="matrix-tag matrix-tag-ai">AI</span><br> |
| Sovereign AI Systems Architecture |
| </td> |
| <td>Hybrid Semantic Processing Architecture (HSPA-8); local open-source Gov-LLM design; secure |
| retrieval-augmented generation (RAG) engines.</td> |
| <td>Eliminating black-box algorithmic bias and data sovereignty vulnerabilities via local execution |
| boundaries and immutable transaction ledgers.</td> |
| </tr> |
| <tr> |
| <td> |
| <span class="matrix-tag matrix-tag-pqc">PQC</span><br> |
| Post-Quantum Cryptography |
| </td> |
| <td>NIST FIPS 203/204 standard implementations (ML-KEM/Kyber-768/1024, ML-DSA/Dilithium-III/87); AES-GCM; |
| SHA3-256.</td> |
| <td>Framing advanced cryptography as forensic provenance infrastructure to guarantee chain-of-custody |
| integrity for sensitive data within court systems.</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </section> |
|
|
| <div class="section-divider"></div> |
|
|
| |
| <section class="section" id="architecture"> |
| <div class="section-header reveal"> |
| <div class="section-label"><i class="fas fa-diamond"></i> Section 03</div> |
| <h2 class="section-title">Systems Architecture & <span class="gradient">Hardware Engineering</span></h2> |
| <p class="section-desc">A comprehensive framework of sovereign infrastructure, quantum-resistant security, and |
| biologically-informed computational models designed for legal admissibility and constitutional compliance.</p> |
| </div> |
|
|
| <div class="arch-section reveal"> |
| <div class="arch-header"> |
| <div class="arch-number cyan">01</div> |
| <h3 class="arch-title">NGOMA Hardware Stack Protocol</h3> |
| </div> |
| <div class="arch-body"> |
| <p>The NGOMA stack represents a novel approach to hardware sovereignty, combining post-quantum cryptographic |
| primitives with bio-inspired neural processing units. This architecture ensures computational integrity while |
| maintaining full data sovereignty.</p> |
| |
| <div class="ngoma-stack"> |
| <div class="ngoma-layer"> |
| <div class="ngoma-layer-num">6</div> |
| <span>Application Layer - Legal Interface Protocols</span> |
| </div> |
| <div class="ngoma-layer"> |
| <div class="ngoma-layer-num">5</div> |
| <span>Evidence Processing & Chain-of-Custody Verification</span> |
| </div> |
| <div class="ngoma-layer"> |
| <div class="ngoma-layer-num">4</div> |
| <span>Biological Data Integration Layer</span> |
| </div> |
| <div class="ngoma-layer"> |
| <div class="ngoma-layer-num">3</div> |
| <span>Cryptographic Security Boundary (PQC)</span> |
| </div> |
| <div class="ngoma-layer"> |
| <div class="ngoma-layer-num">2</div> |
| <span>Neural Processing Unit (NPU) Interface</span> |
| </div> |
| <div class="ngoma-layer"> |
| <div class="ngoma-layer-num">1</div> |
| <span>Hardware Abstraction Layer</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="arch-section reveal reveal-delay-1"> |
| <div class="arch-header"> |
| <div class="arch-number purple">02</div> |
| <h3 class="arch-title">Post-Quantum Cryptographic Infrastructure</h3> |
| </div> |
| <div class="arch-body"> |
| <p>NIST FIPS 203/204 compliant implementations ensuring long-term security against quantum computing threats. |
| These standards provide the foundation for forensic-grade data integrity and chain-of-custody protocols.</p> |
| <ul> |
| <li class="cyan">ML-KEM (Kyber) for key encapsulation mechanisms</li> |
| <li class="purple">ML-DSA (Dilithium) for digital signatures</li> |
| <li class="teal">AES-GCM for symmetric encryption</li> |
| <li class="amber">SHA3-256 for cryptographic hashing</li> |
| </ul> |
| </div> |
| </div> |
|
|
| <div class="arch-section reveal reveal-delay-2"> |
| <div class="arch-header"> |
| <div class="arch-number teal">03</div> |
| <h3 class="arch-title">Sovereign AI Execution Environment</h3> |
| </div> |
| <div class="arch-body"> |
| <p>HSPA-8 (Hybrid Semantic Processing Architecture) eliminates cloud dependency and black-box algorithmic bias |
| through local execution boundaries. This ensures full control over data processing and model behavior.</p> |
| <ul> |
| <li class="cyan">Local Gov-LLM deployment with no external connectivity</li> |
| <li class="purple">Secure RAG (Retrieval-Augmented Generation) engine</li> |
| <li class="teal">Immutable transaction logging for audit trails</li> |
| <li class="amber">Real-time bias detection and mitigation systems</li> |
| </ul> |
| </div> |
| </div> |
| </section> |
|
|
| <div class="section-divider"></div> |
|
|
| |
| <section class="section" id="bioinformatics"> |
| <div class="section-header reveal"> |
| <div class="section-label"><i class="fas fa-dna"></i> Section 04</div> |
| <h2 class="section-title">Computational <span class="gradient">Genomics</span> & Biological Data Integration</h2> |
| <p class="section-desc">Advanced bioinformatics pipeline integrating genomic analysis, polygenic risk scoring, and |
| pharmacogenetic modeling into legally admissible evidence frameworks.</p> |
| </div> |
|
|
| <div class="arch-section reveal"> |
| <div class="arch-header"> |
| <div class="arch-number amber">01</div> |
| <h3 class="arch-title">GRCh38 Genomic Reconstruction Pipeline</h3> |
| </div> |
| <div class="arch-body"> |
| <p>High-resolution genomic reconstruction using the latest human reference genome assembly (GRCh38) to create |
| detailed genetic profiles. This forms the foundation for all downstream biological analyses.</p> |
| <ul> |
| <li class="cyan">Whole-genome sequencing alignment and variant calling</li> |
| <li class="purple">Multi-ancestry reference panel integration</li> |
| <li class="teal">Pharmacogenetic marker identification</li> |
| <li class="amber">Structural variant detection and annotation</li> |
| </ul> |
| </div> |
| </div> |
|
|
| <div class="arch-section reveal reveal-delay-1"> |
| <div class="arch-header"> |
| <div class="arch-number cyan">02</div> |
| <h3 class="arch-title">Polygenic Risk Scoring (PRS) Framework</h3> |
| </div> |
| <div class="arch-body"> |
| <p>Multi-ancestry polygenic risk scoring to quantify genetic predispositions for cognitive and neurological |
| traits. This provides probabilistic evidence for biological phenotypes in legal contexts.</p> |
| <div class="formula-block"> |
| PRS = Σ (β<sub>i</sub> × SNP<sub>i</sub>) where β<sub>i</sub> represents effect size and SNP<sub>i</sub> |
| represents genetic variants |
| </div> |
| <ul> |
| <li class="cyan">Cognitive function prediction models</li> |
| <li class="purple">Neurological disorder risk assessment</li> |
| <li class="teal">Pharmacokinetic pathway analysis</li> |
| <li class="amber">Population-specific normalization factors</li> |
| </ul> |
| </div> |
| </div> |
|
|
| <div class="arch-section reveal reveal-delay-2"> |
| <div class="arch-header"> |
| <div class="arch-number purple">03</div> |
| <h3 class="arch-title">Pharmacogenetic Modeling System</h3> |
| </div> |
| <div class="arch-body"> |
| <p>Personalized medicine modeling based on genetic variants affecting drug metabolism, efficacy, and adverse |
| reactions. This creates actionable medical evidence for legal proceedings.</p> |
| <ul> |
| <li class="cyan">Cytochrome P450 enzyme activity prediction</li> |
| <li class="purple">Drug-drug interaction modeling</li> |
| <li class="teal">Therapeutic response probability calculations</li> |
| <li class="amber">Adverse event risk stratification</li> |
| </ul> |
| </div> |
| </div> |
| </section> |
|
|
| <div class="section-divider"></div> |
|
|
| |
| <section class="section" id="litigation"> |
| <div class="section-header reveal"> |
| <div class="section-label"><i class="fas fa-scale-balanced"></i> Section 05</div> |
| <h2 class="section-title">Strategic <span class="gradient">Litigation</span> & Constitutional Advocacy</h2> |
| <p class="section-desc">Evidence-based legal strategies leveraging technical expertise, genomic data, and |
| constitutional law to advance civil rights and individual sovereignty.</p> |
| </div> |
|
|
| <div class="lit-grid"> |
| <div class="lit-card reveal reveal-delay-1"> |
| <div class="lit-card-badge cyan">42 USC §1983</div> |
| <h3>Civil Rights Enforcement</h3> |
| <p>Comprehensive §1983 civil rights litigation addressing systemic violations of constitutional protections |
| through technical evidence and expert testimony.</p> |
| <ul> |
| <li>First Amendment free speech protections</li> |
| <li>Fourth Amendment privacy rights</li> |
| <li>Fourteenth Amendment equal protection</li> |
| <li>Digital due process requirements</li> |
| </ul> |
| </div> |
| |
| <div class="lit-card reveal reveal-delay-2"> |
| <div class="lit-card-badge purple">Tucker Act</div> |
| <h3>Federal Claims Strategy</h3> |
| <p>Tucker Act claims (28 U.S.C. § 1491) for illegal exaction of liberty and property, utilizing technical |
| evidence to establish damages and constitutional violations.</p> |
| <ul> |
| <li>Property rights restoration</li> |
| <li>Liberty interest recovery</li> |
| <li>Constitutional violation damages</li> |
| <li>Government accountability measures</li> |
| </ul> |
| </div> |
| |
| <div class="lit-card reveal reveal-delay-3"> |
| <div class="lit-card-badge amber">Appellate</div> |
| <h3>Appellate Framework</h3> |
| <p>Strategic appellate practice focusing on precedential value and constitutional interpretation, with emphasis |
| on technical evidence admissibility standards.</p> |
| <ul> |
| <li>Daubert/Kumho Tire compliance</li> |
| <li>Evidentiary foundation building</li> |
| <li>Constitutional interpretation</li> |
| <li>Precedential impact analysis</li> |
| </ul> |
| </div> |
| </div> |
|
|
| <div class="arch-section reveal reveal-delay-1"> |
| <div class="arch-header"> |
| <div class="arch-number teal">01</div> |
| <h3 class="arch-title">Court Hierarchy & Jurisdictional Strategy</h3> |
| </div> |
| <div class="arch-body"> |
| <div class="court-tree"> |
| <div class="court-node supreme"> |
| <div class="court-node-label">Supreme Court</div> |
| <div class="court-node-title">Constitutional Interpretation</div> |
| <div class="court-node-desc">Final authority on federal constitutional questions</div> |
| </div> |
| |
| <div class="court-connector"></div> |
| |
| <div class="court-branch"> |
| <div class="court-branch-line"> |
| <div class="court-node appeals"> |
| <div class="court-node-label">Circuit Courts</div> |
| <div class="court-node-title">Federal Appellate Review</div> |
| <div class="court-node-desc">Review of district court decisions</div> |
| </div> |
| </div> |
| |
| <div class="court-branch-line"> |
| <div class="court-node appeals"> |
| <div class="court-node-label">State Supreme</div> |
| <div class="court-node-title">State Constitutional Questions</div> |
| <div class="court-node-desc">Highest state court authority</div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="court-connector"></div> |
| |
| <div class="court-node district"> |
| <div class="court-node-label">District Courts</div> |
| <div class="court-node-title">Original Jurisdiction</div> |
| <div class="court-node-desc">Trial courts with general jurisdiction</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <div class="section-divider"></div> |
|
|
| |
| <section class="section" id="policy"> |
| <div class="section-header reveal"> |
| <div class="section-label"><i class="fas fa-file-contract"></i> Section 06</div> |
| <h2 class="section-title">Policy Development & <span class="gradient">Regulatory Framework</span></h2> |
| <p class="section-desc">Evidence-based policy recommendations integrating technical expertise, constitutional |
| principles, and scientific research for legislative and regulatory advancement.</p> |
| </div> |
|
|
| <div class="policy-grid"> |
| <div class="policy-card reveal reveal-delay-1"> |
| <div class="policy-card-icon cyan" style="background: rgba(0, 212, 255, 0.1); color: var(--accent-cyan);"> |
| <i class="fas fa-vial"></i> |
| </div> |
| <h3>Biological Data Protection</h3> |
| <p>Comprehensive framework for protecting genetic and biological data privacy while enabling legitimate |
| research and medical applications.</p> |
| <ul> |
| <li>Consent management protocols</li> |
| <li>Data sharing safeguards</li> |
| <li>Research exemption clarity</li> |
| <li>Commercial use limitations</li> |
| </ul> |
| </div> |
| |
| <div class="policy-card reveal reveal-delay-2"> |
| <div class="policy-card-icon purple" style="background: rgba(139, 92, 246, 0.1); color: var(--accent-purple);"> |
| <i class="fas fa-robot"></i> |
| </div> |
| <h3>AI Governance Standards</h3> |
| <p>Regulatory framework ensuring transparency, accountability, and constitutional compliance in artificial |
| intelligence systems.</p> |
| <ul> |
| <li>Algorithmic bias prevention</li> |
| <li>Decision explainability requirements</li> |
| <li>Data sovereignty protections</li> |
| <li>Human oversight mandates</li> |
| </ul> |
| </div> |
| |
| <div class="policy-card reveal reveal-delay-3"> |
| <div class="policy-card-icon teal" style="background: rgba(0, 229, 199, 0.1); color: var(--accent-teal);"> |
| <i class="fas fa-shield-alt"></i> |
| </div> |
| <h3>Cybersecurity Modernization</h3> |
| <p>Post-quantum cryptography adoption policies ensuring long-term digital security and constitutional |
| protections.</p> |
| <ul> |
| <li>PQC implementation timelines</li> |
| <li>Legacy system migration plans</li> |
| <li>Public sector compliance</li> |
| <li>Chain-of-custody protocols</li> |
| </ul> |
| </div> |
| </div> |
| </section> |
|
|
| <div class="section-divider"></div> |
|
|
| |
| <section class="section" id="academic"> |
| <div class="section-header reveal"> |
| <div class="section-label"><i class="fas fa-graduation-cap"></i> Section 07</div> |
| <h2 class="section-title">Academic Research & <span class="gradient">Scholarly Contributions</span></h2> |
| <p class="section-desc">Interdisciplinary research bridging law, technology, and biology to advance understanding |
| of constitutional rights in the digital age.</p> |
| </div> |
|
|
| <div class="academic-grid"> |
| <div class="academic-card reveal reveal-delay-1"> |
| <div class="academic-card-header"> |
| <div class="academic-card-icon" style="background: rgba(0, 212, 255, 0.1); color: var(--accent-cyan);"> |
| <i class="fas fa-book"></i> |
| </div> |
| <h3>Legal Scholarship</h3> |
| </div> |
| <p>Peer-reviewed publications on constitutional law, digital rights, and the intersection of technology and |
| civil liberties. Focus on evidence standards and expert testimony in complex litigation.</p> |
| </div> |
| |
| <div class="academic-card reveal reveal-delay-2"> |
| <div class="academic-card-header"> |
| <div class="academic-card-icon" style="background: rgba(139, 92, 246, 0.1); color: var(--accent-purple);"> |
| <i class="fas fa-flask"></i> |
| </div> |
| <h3>Scientific Research</h3> |
| </div> |
| <p>Interdisciplinary studies combining genomics, neuroscience, and legal theory to establish evidentiary |
| foundations for biological rights and constitutional protections.</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="terminal"> |
| <div class="terminal-inner"> |
| <div class="terminal-block"> |
| <span class="comment"># JURISPRUDENTIAL TECHNOLOGIST SYSTEM STATUS</span><br> |
| <span class="key">executive_profile</span><span class="sep">:</span> <span class="val">ACTIVE_LITIGANT</span><br> |
| <span class="key">constitutional_compliance</span><span class="sep">:</span> <span class="val">VERIFIED</span><br> |
| <span class="key">technical_certifications</span><span class="sep">:</span> <span class="val">MULTI-DISCIPLINARY</span><br> |
| <span class="key">legal_jurisdiction</span><span class="sep">:</span> <span class="val">FEDERAL_STATE</span><br> |
| <span class="key">biological_data_integrity</span><span class="sep">:</span> <span class="val">CHAIN_OF_CUSTODY_SECURED</span><br> |
| <span class="key">post_quantum_security</span><span class="sep">:</span> <span class="val">NIST_FIPS_203_204_COMPLIANT</span><br> |
| <span class="key">ai_governance</span><span class="sep">:</span> <span class="val">SOVEREIGN_LOCAL_EXECUTION</span><br> |
| <span class="key">status</span><span class="sep">:</span> <span class="val">READY_FOR_CONSTITUTIONAL_ACTION</span><br> |
| <br> |
| <span class="comment"># END SYSTEM STATUS REPORT</span><br> |
| <span class="key">timestamp</span><span class="sep">:</span> <span class="val">2024.12.19.0001</span><br> |
| <span class="key">signature</span><span class="sep">:</span> <span class="val">CL-McL-NGOMA-STACK-PROTOCOL</span><br> |
| <span class="key">verification</span><span class="sep">:</span> <span class="val">POST_QUANTUM_SIGNED</span> |
| <span class="terminal-cursor"></span> |
| </div> |
| </div> |
| |
| <div class="footer-bottom"> |
| <div>© 2024 Caustin Lee McLaughlin. All rights reserved.</div> |
| <div>System Status: <span style="color: var(--accent-cyan)">OPERATIONAL</span></div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| const nav = document.getElementById('nav'); |
| window.addEventListener('scroll', () => { |
| if (window.scrollY > 50) { |
| nav.classList.add('scrolled'); |
| } else { |
| nav.classList.remove('scrolled'); |
| } |
| }); |
| |
| |
| const mobileToggle = document.getElementById('mobileToggle'); |
| const navLinks = document.getElementById('navLinks'); |
| mobileToggle.addEventListener('click', () => { |
| navLinks.classList.toggle('open'); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function(e) { |
| e.preventDefault(); |
| const target = document.querySelector(this.getAttribute('href')); |
| if (target) { |
| target.scrollIntoView({ behavior: 'smooth' }); |
| |
| navLinks.classList.remove('open'); |
| } |
| }); |
| }); |
| |
| |
| const observerOptions = { |
| threshold: 0.1, |
| rootMargin: '0px 0px -50px 0px' |
| }; |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.classList.add('visible'); |
| } |
| }); |
| }, observerOptions); |
| |
| document.querySelectorAll('.reveal').forEach(el => { |
| observer.observe(el); |
| }); |
| |
| |
| const sections = document.querySelectorAll('section[id]'); |
| const navAnchors = document.querySelectorAll('.nav-links a'); |
| |
| window.addEventListener('scroll', () => { |
| let current = ''; |
| sections.forEach(section => { |
| const sectionTop = section.offsetTop; |
| const sectionHeight = section.clientHeight; |
| if (pageYOffset >= (sectionTop - sectionHeight / 3)) { |
| current = section.getAttribute('id'); |
| } |
| }); |
| |
| navAnchors.forEach(anchor => { |
| anchor.classList.remove('active'); |
| if (anchor.getAttribute('href') === `#${current}`) { |
| anchor.classList.add('active'); |
| } |
| }); |
| }); |
| </script> |
| </body> |
|
|
| </html> |
