Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Bio-Legal & Technical Synthesis Portfolio | Caustin Lee McLaughlin</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <style> | |
| body { | |
| background-color: #f8fafc; | |
| font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | |
| } | |
| .chart-container { | |
| position: relative; | |
| width: 100%; | |
| max-width: 650px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| height: 350px; | |
| max-height: 400px; | |
| } | |
| @media (max-width: 640px) { | |
| .chart-container { | |
| height: 250px; | |
| } | |
| } | |
| .glass-card { | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .css-flow-node { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 1rem; | |
| border-radius: 0.5rem; | |
| font-weight: 600; | |
| text-align: center; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| } | |
| .css-flow-arrow { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| color: #94a3b8; | |
| margin: 0.5rem 0; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-slate-800 antialiased"> | |
| <!-- EXPLICIT CONFIRMATION: NEITHER Mermaid JS NOR SVG were used anywhere in the output. --> | |
| <!-- PALETTE: Cyber-Bio Energetic (Deep Navy #0f172a, Vibrant Cyan #06b6d4, Energetic Indigo #4f46e5, Bright Amber #f59e0b, Emerald #10b981) --> | |
| <!-- PLAN SUMMARY: | |
| Section 1: Hook & Introduction - Establishes the applicant's interdisciplinary mastery. | |
| Section 2: Degree Fulfillment Matrix - Visualizes the 100% completion rate across 3 degree programs. | |
| Section 3: The 5 Pillars of Evidence - Breaks down the core portfolio components. | |
| Section 4: APIE Core Block Architecture - Details the technical cybersecurity logic. | |
| Section 5: Patent Economics - Highlights the real-world viability of the biotech hardware. | |
| --> | |
| <!-- VISUALIZATION CHOICES: | |
| Data Point: Degree Credits -> Goal: Compare -> Visualization: Bar Chart -> Justification: Chart.js Bar chart effectively compares required vs mapped credits across three distinct programs. NO SVG. | |
| Data Point: Portfolio Pillars -> Goal: Composition -> Visualization: Donut Chart -> Justification: Chart.js Donut chart shows the distribution of the 5 core pillars. NO SVG. | |
| Data Point: APIE Architecture -> Goal: Organize/Process -> Visualization: CSS Flowchart -> Justification: Structured HTML/Tailwind achieves flowchart logic without Mermaid/SVG. | |
| Data Point: Patent Specs -> Goal: Inform -> Visualization: Big Numbers/Table -> Justification: HTML text styling emphasizes core KPIs. NO SVG. | |
| --> | |
| <header class="bg-gradient-to-br from-slate-900 via-indigo-900 to-cyan-900 text-white py-20 px-6 relative overflow-hidden shadow-2xl"> | |
| <div class="max-w-6xl mx-auto relative z-10"> | |
| <div class="inline-block bg-cyan-500 text-slate-900 font-bold px-3 py-1 rounded-full text-sm mb-4 uppercase tracking-wide">Prior Learning Assessment (PLA)</div> | |
| <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-4 leading-tight">Bio-Legal & Technical Synthesis</h1> | |
| <h2 class="text-2xl md:text-3xl font-light text-cyan-200 mb-8">Portfolio for Exceptional Degree Consideration</h2> | |
| <div class="flex flex-wrap gap-6 items-center"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-12 h-12 rounded-full bg-indigo-500 flex items-center justify-center text-2xl shadow-lg">👨‍💻</div> | |
| <div> | |
| <p class="font-bold text-lg">Caustin Lee McLaughlin</p> | |
| <p class="text-indigo-200 text-sm">Systems Architect & Applicant</p> | |
| </div> | |
| </div> | |
| <div class="h-8 w-px bg-indigo-500/50 hidden md:block"></div> | |
| <div class="flex items-center gap-2"> | |
| <span class="text-amber-400 text-xl">⚡</span> | |
| <span class="font-medium text-slate-100">Requesting Accelerated Conferral</span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-16"> | |
| <section> | |
| <div class="max-w-3xl mb-8"> | |
| <h3 class="text-3xl font-bold text-slate-900 mb-4 border-b-4 border-cyan-500 inline-block pb-2">Academic Alignment & Fulfillment</h3> | |
| <p class="text-lg text-slate-600 leading-relaxed">Through rigorous independent research, technical engineering, and formal intellectual property development, this portfolio establishes an immutable record of competency. It provides a direct, one-to-one curriculum mapping that fulfills 100% of the credit requirements for three separate degree programs across two institutions simultaneously.</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center"> | |
| <div class="glass-card rounded-2xl shadow-lg p-6 lg:p-8"> | |
| <h4 class="text-xl font-bold text-slate-800 mb-6 flex items-center gap-2"> | |
| <span class="text-indigo-600 text-2xl">📊</span> Total Credit Mapping Matrix | |
| </h4> | |
| <div class="chart-container"> | |
| <canvas id="creditChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="space-y-6"> | |
| <div class="bg-white rounded-xl shadow-md p-6 border-l-4 border-indigo-500 hover:shadow-lg transition-shadow"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h5 class="font-bold text-lg text-slate-800">UMGC Biotechnology (B.S.)</h5> | |
| <span class="bg-indigo-100 text-indigo-800 text-xs font-bold px-2 py-1 rounded">120 / 120</span> | |
| </div> | |
| <p class="text-sm text-slate-600">Satisfied via Pharmacogenomic Report, Clinical Dissertation, and Patent Application (CRISPR/Electrochemistry).</p> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 border-l-4 border-cyan-500 hover:shadow-lg transition-shadow"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h5 class="font-bold text-lg text-slate-800">UMGC Cybersecurity (B.S.)</h5> | |
| <span class="bg-cyan-100 text-cyan-800 text-xs font-bold px-2 py-1 rounded">120 / 120</span> | |
| </div> | |
| <p class="text-sm text-slate-600">Satisfied via BSBS Policy Addendum, Pure Rust HSPA Emulator, Post-Quantum Cryptography logic, and CompTIA certs.</p> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 border-l-4 border-emerald-500 hover:shadow-lg transition-shadow"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h5 class="font-bold text-lg text-slate-800">BCCC Biotechnology (A.A.S.)</h5> | |
| <span class="bg-emerald-100 text-emerald-800 text-xs font-bold px-2 py-1 rounded">60 / 60</span> | |
| </div> | |
| <p class="text-sm text-slate-600">Satisfied via extensive clinical documentation, algebraic modeling for Hedonic Damages, and USPTO technical writing.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="bg-slate-100 rounded-3xl p-8 lg:p-12 shadow-inner border border-slate-200"> | |
| <div class="text-center max-w-3xl mx-auto mb-12"> | |
| <h3 class="text-3xl font-bold text-slate-900 mb-4 border-b-4 border-amber-500 inline-block pb-2">The Five Pillars of Evidence</h3> | |
| <p class="text-lg text-slate-600">The portfolio bridges molecular biology, post-quantum cryptography, and constitutional law through five interconnected foundational pillars.</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-10"> | |
| <div class="lg:col-span-1 glass-card rounded-2xl shadow-lg p-6 flex flex-col justify-center"> | |
| <div class="chart-container" style="height: 300px;"> | |
| <canvas id="pillarChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-white p-5 rounded-xl shadow border-t-4 border-indigo-500"> | |
| <div class="text-3xl mb-3">🧬</div> | |
| <h5 class="font-bold text-slate-800 mb-2">1. Clinical Pathology</h5> | |
| <p class="text-sm text-slate-600">Dissertation-level neuro-immunological research on HIV/HCV co-infection and comprehensive SNP analyses.</p> | |
| </div> | |
| <div class="bg-white p-5 rounded-xl shadow border-t-4 border-cyan-500"> | |
| <div class="text-3xl mb-3">🔑</div> | |
| <h5 class="font-bold text-slate-800 mb-2">2. Hardware Engineering</h5> | |
| <p class="text-sm text-slate-600">Fully enabled USPTO patent for a USB-Powered Electrochemical Genotyping Platform with microfluidic specs.</p> | |
| </div> | |
| <div class="bg-white p-5 rounded-xl shadow border-t-4 border-emerald-500"> | |
| <div class="text-3xl mb-3">🛡️</div> | |
| <h5 class="font-bold text-slate-800 mb-2">3. Cryptography & Cyber</h5> | |
| <p class="text-sm text-slate-600">Baltimore Secure Backbone System (BSBS) utilizing Zero-Trust, Dilithium/Kyber encryption, and Rust Memory Safety.</p> | |
| </div> | |
| <div class="bg-white p-5 rounded-xl shadow border-t-4 border-amber-500"> | |
| <div class="text-3xl mb-3">💰</div> | |
| <h5 class="font-bold text-slate-800 mb-2">4. Legal & Economic Models</h5> | |
| <p class="text-sm text-slate-600">Hedonic Damage Model utilizing QALY methodology and Bayesian belief updating in federal civil rights litigation.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="max-w-3xl mb-10"> | |
| <h3 class="text-3xl font-bold text-slate-900 mb-4 border-b-4 border-indigo-500 inline-block pb-2">APIE Core Block Architecture</h3> | |
| <p class="text-lg text-slate-600">At the heart of the Baltimore Secure Backbone System (BSBS) lies the Anomalous Pattern Inference Engine (APIE). Designed to adhere to the Fourth Amendment Minimization Protocol, it strictly evaluates network metadata (Differential Privacy via Laplacian noise) using a highly specialized, repetitive tensor reasoning flow to deduce threats without Deep Packet Inspection.</p> | |
| </div> | |
| <div class="bg-slate-900 rounded-3xl p-8 lg:p-12 shadow-2xl relative overflow-hidden"> | |
| <div class="absolute top-0 right-0 p-6 opacity-10 text-6xl text-cyan-400 font-mono">{ }</div> | |
| <h4 class="text-xl font-mono text-cyan-400 mb-8 text-center uppercase tracking-widest border-b border-slate-700 pb-4">Tensor Flow Processing Matrix</h4> | |
| <div class="flex flex-col lg:flex-row items-center justify-center gap-4 lg:gap-8 max-w-5xl mx-auto"> | |
| <div class="flex flex-col gap-4 w-full lg:w-1/4"> | |
| <div class="bg-slate-800 border border-slate-600 p-4 rounded-xl text-center shadow-lg"> | |
| <span class="block text-cyan-300 font-mono text-xl font-bold mb-1">x</span> | |
| <span class="text-xs text-slate-400 uppercase">Network Query/Metadata</span> | |
| </div> | |
| <div class="bg-slate-800 border border-slate-600 p-4 rounded-xl text-center shadow-lg"> | |
| <span class="block text-indigo-300 font-mono text-xl font-bold mb-1">y</span> | |
| <span class="text-xs text-slate-400 uppercase">Current Prediction</span> | |
| </div> | |
| <div class="bg-slate-800 border border-slate-600 p-4 rounded-xl text-center shadow-lg"> | |
| <span class="block text-emerald-300 font-mono text-xl font-bold mb-1">z</span> | |
| <span class="text-xs text-slate-400 uppercase">Latent Reasoning State</span> | |
| </div> | |
| </div> | |
| <div class="text-3xl text-slate-500 lg:-rotate-90 my-4 lg:my-0">➕</div> | |
| <div class="flex-1 w-full bg-slate-800/50 border border-indigo-500/30 p-6 rounded-2xl relative"> | |
| <div class="absolute -top-3 left-6 bg-indigo-600 text-xs font-bold px-3 py-1 rounded text-white uppercase tracking-wider">Iterative Loop (N = 16)</div> | |
| <div class="flex flex-col gap-3"> | |
| <div class="bg-indigo-900/80 border border-indigo-500 text-indigo-100 p-4 rounded-lg text-center font-semibold"> | |
| Self-Attention Module | |
| </div> | |
| <div class="text-center text-slate-500 text-xl">↓</div> | |
| <div class="bg-slate-700 border border-slate-500 text-slate-200 p-3 rounded-lg text-center text-sm font-mono"> | |
| Add & Normalize | |
| </div> | |
| <div class="text-center text-slate-500 text-xl">↓</div> | |
| <div class="bg-cyan-900/80 border border-cyan-500 text-cyan-100 p-4 rounded-lg text-center font-semibold"> | |
| Multi-Layer Perceptron (MLP) | |
| </div> | |
| <div class="text-center text-slate-500 text-xl">↓</div> | |
| <div class="bg-slate-700 border border-slate-500 text-slate-200 p-3 rounded-lg text-center text-sm font-mono"> | |
| Add & Normalize | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-3xl text-slate-500 lg:-rotate-90 my-4 lg:my-0">➡️</div> | |
| <div class="w-full lg:w-1/4"> | |
| <div class="bg-gradient-to-br from-emerald-600 to-teal-800 p-6 rounded-xl text-center shadow-xl border border-emerald-400/50"> | |
| <span class="text-4xl block mb-2">🛡️</span> | |
| <span class="block text-white font-bold text-lg leading-tight mb-2">Updated State</span> | |
| <span class="text-xs text-emerald-100">Differential Privacy Maintained (No DPI)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="grid grid-cols-1 lg:grid-cols-2 gap-10"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-slate-900 mb-6 border-b-4 border-emerald-500 inline-block pb-2">Patent Innovation Metrics</h3> | |
| <p class="text-slate-600 mb-8">The December 2025 USPTO filing details a <em>USB-Powered Electrochemical Genotyping Platform</em>. It integrates CRISPR detection with post-quantum blockchain evidence authentication, completely redefining the economics of point-of-care genotyping.</p> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-white p-6 rounded-xl shadow-md text-center border-b-4 border-cyan-500"> | |
| <div class="text-4xl font-black text-slate-800 mb-1">15 <span class="text-xl text-slate-500 font-medium">min</span></div> | |
| <div class="text-sm font-semibold text-cyan-600 uppercase tracking-wide">Time-to-Result</div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md text-center border-b-4 border-indigo-500"> | |
| <div class="text-4xl font-black text-slate-800 mb-1">10 <span class="text-xl text-slate-500 font-medium">copies</span></div> | |
| <div class="text-sm font-semibold text-indigo-600 uppercase tracking-wide">Limit of Detection</div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md text-center border-b-4 border-emerald-500"> | |
| <div class="text-4xl font-black text-slate-800 mb-1">$8.40</div> | |
| <div class="text-sm font-semibold text-emerald-600 uppercase tracking-wide">Reader BOM Cost</div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md text-center border-b-4 border-amber-500"> | |
| <div class="text-4xl font-black text-slate-800 mb-1">$0.85</div> | |
| <div class="text-sm font-semibold text-amber-600 uppercase tracking-wide">Cartridge COGS</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold text-slate-900 mb-6 border-b-4 border-cyan-500 inline-block pb-2">NIST 800-53 Rev. 5 Compliance</h3> | |
| <p class="text-slate-600 mb-6">The technical features of the BSBS directly satisfy federal compliance requirements (Moderate Baseline) through verifiable cryptographic architecture.</p> | |
| <div class="overflow-hidden bg-white shadow-md rounded-xl border border-slate-200"> | |
| <table class="w-full text-left text-sm text-slate-600"> | |
| <thead class="bg-slate-50 border-b border-slate-200 text-slate-800"> | |
| <tr> | |
| <th class="px-4 py-3 font-bold">Control</th> | |
| <th class="px-4 py-3 font-bold">BSBS Implementation Component</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-slate-100"> | |
| <tr class="hover:bg-slate-50 transition-colors"> | |
| <td class="px-4 py-3 font-mono font-bold text-indigo-600">AC-3</td> | |
| <td class="px-4 py-3">Attribute-Based Encryption (ABE) & SDP</td> | |
| </tr> | |
| <tr class="hover:bg-slate-50 transition-colors"> | |
| <td class="px-4 py-3 font-mono font-bold text-indigo-600">AC-4</td> | |
| <td class="px-4 py-3">Pure Rust HSPA Emulator (Memory-safe data diodes verified via Kani)</td> | |
| </tr> | |
| <tr class="hover:bg-slate-50 transition-colors"> | |
| <td class="px-4 py-3 font-mono font-bold text-indigo-600">AU-10</td> | |
| <td class="px-4 py-3">ML-DSA (Dilithium-3) Digital Signatures on Merkle-tree logs</td> | |
| </tr> | |
| <tr class="hover:bg-slate-50 transition-colors"> | |
| <td class="px-4 py-3 font-mono font-bold text-indigo-600">IA-2</td> | |
| <td class="px-4 py-3">Hybrid PQC (Kyber768) + X25519 mTLS</td> | |
| </tr> | |
| <tr class="hover:bg-slate-50 transition-colors"> | |
| <td class="px-4 py-3 font-mono font-bold text-indigo-600">SI-4</td> | |
| <td class="px-4 py-3">APIE Federated Learning (Metadata only, Laplacian noise applied)</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="bg-slate-900 text-slate-400 py-8 text-center mt-12 border-t border-slate-800"> | |
| <p>© 2026 Caustin Lee McLaughlin. Portfolio for Exceptional Degree Consideration.</p> | |
| <p class="text-sm mt-2 text-slate-500">Proprietary Architectural Models & Patent Disclosures.</p> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const ctxCredit = document.getElementById('creditChart').getContext('2d'); | |
| new Chart(ctxCredit, { | |
| type: 'bar', | |
| data: { | |
| labels: [ | |
| ['UMGC Biotechnology', '(BS)'], | |
| ['UMGC Cybersecurity', 'Management (BS)'], | |
| ['BCCC Biotechnology', '(AAS)'] | |
| ], | |
| datasets: [ | |
| { | |
| label: 'Required Credits', | |
| data: [120, 120, 60], | |
| backgroundColor: '#e2e8f0', | |
| borderWidth: 0, | |
| borderRadius: 4, | |
| barPercentage: 0.8, | |
| categoryPercentage: 0.9 | |
| }, | |
| { | |
| label: 'Portfolio Mapped Credits', | |
| data: [120, 120, 60], | |
| backgroundColor: ['#4f46e5', '#06b6d4', '#10b981'], | |
| borderWidth: 0, | |
| borderRadius: 4, | |
| barPercentage: 0.8, | |
| categoryPercentage: 0.9 | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| labels: { font: { family: 'ui-sans-serif', size: 13 }, color: '#334155' } | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| title: function(tooltipItems) { | |
| const item = tooltipItems[0]; | |
| let label = item.chart.data.labels[item.dataIndex]; | |
| if (Array.isArray(label)) { | |
| return label.join(' '); | |
| } else { | |
| return label; | |
| } | |
| } | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| max: 130, | |
| grid: { color: '#f1f5f9' }, | |
| ticks: { color: '#64748b' } | |
| }, | |
| x: { | |
| grid: { display: false }, | |
| ticks: { color: '#475569', font: { weight: 'bold' } } | |
| } | |
| } | |
| } | |
| }); | |
| const ctxPillar = document.getElementById('pillarChart').getContext('2d'); | |
| new Chart(ctxPillar, { | |
| type: 'doughnut', | |
| data: { | |
| labels: [ | |
| ['Clinical', 'Pathology'], | |
| ['Hardware', 'Engineering'], | |
| ['Cryptography', '& Cyber'], | |
| ['Legal & Economic', 'Models'], | |
| ['Industry', 'Certifications'] | |
| ], | |
| datasets: [{ | |
| data: [25, 25, 20, 15, 15], | |
| backgroundColor: [ | |
| '#4f46e5', | |
| '#06b6d4', | |
| '#10b981', | |
| '#f59e0b', | |
| '#8b5cf6' | |
| ], | |
| borderWidth: 2, | |
| borderColor: '#ffffff', | |
| hoverOffset: 4 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| cutout: '65%', | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| title: function(tooltipItems) { | |
| const item = tooltipItems[0]; | |
| let label = item.chart.data.labels[item.dataIndex]; | |
| if (Array.isArray(label)) { | |
| return label.join(' '); | |
| } else { | |
| return label; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |