Rebrand profile page: BlackRoad OS with three products and violet theme

Replace "Blackbox Programming / Code. Ship. Repeat." with BlackRoad OS
platform page showing RoadAuth, Lucidia, Quantum product cards and
sovereign infrastructure stats.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-09 02:39:13 -05:00
parent c9f5c31852
commit 202d2c5321

View File

@@ -3,379 +3,130 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blackbox Programming — Code. Ship. Repeat.</title> <title>BlackRoad OS — The Operating System for Governed AI</title>
<meta name="description" content="Personal engineering hub for SDKs, tools, experiments, and the BlackRoad OS ecosystem."> <meta name="description" content="BlackRoad OS: RoadAuth, Lucidia, Quantum. Three products. One governed platform. Built by Alexa Amundson.">
<meta property="og:title" content="Blackbox Programming"> <meta property="og:title" content="BlackRoad OS, Inc.">
<meta property="og:description" content="Personal engineering hub for SDKs, tools, experiments, and the BlackRoad OS ecosystem."> <meta property="og:description" content="Three products. One platform. Zero compliance gaps. The operating system for governed AI.">
<meta property="og:url" content="https://github.com/blackboxprogramming"> <meta property="og:url" content="https://blackroad.io">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<style> <style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { :root {
--brand: #37474F; --violet: #8a2be2;
--black: #000000; --pink: #ff1d6c;
--white: #ffffff; --accent: #da70d6;
--gray-900: #0a0a0a; --blue: #2979ff;
--gray-800: #141414; --cyan: #00e5ff;
--gray-700: #1e1e1e; --bg: #000;
--gray-600: #2a2a2a; --text: #fff;
--gray-400: #666; --dim: rgba(255,255,255,0.5);
--gray-200: #aaa; --border: rgba(138,43,226,0.2);
--phi: 1.618; --card: rgba(255,255,255,0.04);
} }
html { scroll-behavior: smooth; } html { scroll-behavior: smooth; }
body { font-family: 'Inter', -apple-system, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; }
a { color: var(--violet); text-decoration: none; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--black);
color: var(--white);
min-height: 100vh;
overflow-x: hidden;
}
/* ── HERO ─────────────────────────────────────────── */
.hero { .hero {
position: relative; position: relative; min-height: 100vh; display: flex; flex-direction: column;
min-height: 100vh; align-items: center; justify-content: center; text-align: center; padding: 2rem; overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 2rem;
overflow: hidden;
} }
.hero::before { .hero::before {
content: ''; content: ''; position: absolute; width: 800px; height: 800px;
position: absolute; background: radial-gradient(circle, rgba(138,43,226,0.12), transparent 70%);
inset: 0; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%,-50%);
background: animation: breathe 8s ease-in-out infinite;
radial-gradient(ellipse 80% 60% at 50% -10%, #37474F28 0%, transparent 70%),
radial-gradient(ellipse 60% 40% at 80% 80%, #37474F15 0%, transparent 60%);
pointer-events: none;
} }
@keyframes breathe { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity:.3; } 50% { transform: translate(-50%,-50%) scale(1.15); opacity:.15; } }
/* Animated grid */ .hero-content { position: relative; z-index: 1; max-width: 900px; }
.grid-bg { .badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(138,43,226,0.1); border: 1px solid var(--border); border-radius: 100px; padding: 8px 20px; font-size: 13px; font-weight: 500; color: var(--violet); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 32px; }
position: absolute; .badge .dot { width: 6px; height: 6px; background: var(--violet); border-radius: 50%; animation: pulse 2s ease-in-out infinite; }
inset: 0; @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }
background-image:
linear-gradient(#37474F08 1px, transparent 1px),
linear-gradient(90deg, #37474F08 1px, transparent 1px);
background-size: 50px 50px;
animation: gridScroll 20s linear infinite;
}
@keyframes gridScroll { h1 { font-size: clamp(42px, 8vw, 80px); font-weight: 900; line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 20px; background: linear-gradient(135deg, #8a2be2, #da70d6, #ff1d6c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
0% { transform: translateY(0); } .tagline { font-size: clamp(18px, 3vw, 28px); font-weight: 300; color: var(--dim); margin-bottom: 48px; }
100% { transform: translateY(50px); } .actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
} .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 10px; font-size: 15px; font-weight: 600; transition: all 0.2s; }
.btn-primary { background: linear-gradient(135deg, var(--violet), #6a1fb8); color: #fff; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(138,43,226,0.4); }
.btn-outline { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.8); border: 1px solid var(--border); }
.btn-outline:hover { background: rgba(138,43,226,0.1); transform: translateY(-2px); }
.hero-content { .products { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 20px; max-width: 1000px; margin: 0 auto; padding: 0 2rem; }
position: relative; .product { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 32px; transition: all 0.3s; }
z-index: 1; .product:hover { border-color: var(--violet); transform: translateY(-4px); }
max-width: 820px; .product .tam { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; color: var(--violet); margin-bottom: 8px; }
} .product h3 { font-size: 24px; margin-bottom: 8px; }
.product p { font-size: 14px; color: var(--dim); line-height: 1.6; }
.org-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: #37474F18;
border: 1px solid #37474F40;
border-radius: 100px;
padding: 8px 20px;
font-size: 13px;
font-weight: 500;
color: #37474F;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 34px;
backdrop-filter: blur(10px);
}
.org-badge .dot {
width: 6px; height: 6px;
background: #37474F;
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.8); }
}
.hero-icon {
font-size: 72px;
line-height: 1;
margin-bottom: 24px;
filter: drop-shadow(0 0 30px #37474F60);
}
h1 {
font-size: clamp(42px, 8vw, 88px);
font-weight: 900;
line-height: 1.0;
letter-spacing: -0.03em;
margin-bottom: 16px;
background: linear-gradient(135deg, #ffffff 0%, #37474F 50%, #ffffff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
background-size: 200%;
animation: shimmer 4s ease-in-out infinite alternate;
}
@keyframes shimmer {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
.tagline {
font-size: clamp(18px, 3vw, 28px);
font-weight: 300;
color: rgba(255,255,255,0.7);
margin-bottom: 24px;
letter-spacing: -0.01em;
}
.description {
font-size: 17px;
line-height: 1.618;
color: rgba(255,255,255,0.5);
max-width: 600px;
margin: 0 auto 48px;
}
.hero-actions {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
cursor: pointer;
}
.btn-primary {
background: #37474F;
color: #fff;
box-shadow: 0 0 30px #37474F50;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 40px #37474F70;
}
.btn-secondary {
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.8);
border: 1px solid rgba(255,255,255,0.12);
backdrop-filter: blur(10px);
}
.btn-secondary:hover {
background: rgba(255,255,255,0.1);
transform: translateY(-2px);
}
/* ── TAGS ─────────────────────────────────────────── */
.tags-section {
padding: 60px 2rem;
text-align: center;
border-top: 1px solid rgba(255,255,255,0.06);
}
.tags-wrap {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
max-width: 700px;
margin: 0 auto;
}
.tag {
display: inline-block;
padding: 8px 18px;
background: #37474F15;
border: 1px solid #37474F30;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
color: #37474F;
letter-spacing: 0.03em;
}
/* ── STATS ────────────────────────────────────────── */
.stats {
display: flex;
justify-content: center;
gap: 0;
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.stat {
flex: 1;
max-width: 200px;
padding: 40px 20px;
text-align: center;
border-right: 1px solid rgba(255,255,255,0.06);
}
.stats { display: flex; justify-content: center; gap: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 80px 0; }
.stat { flex: 1; max-width: 200px; padding: 40px 20px; text-align: center; border-right: 1px solid var(--border); }
.stat:last-child { border-right: none; } .stat:last-child { border-right: none; }
.stat-value { font-size: 36px; font-weight: 800; background: linear-gradient(135deg, var(--violet), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; margin-bottom: 6px; }
.stat-label { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.1em; }
.stat-value { .section-title { text-align: center; font-size: clamp(24px, 4vw, 40px); margin-bottom: 48px; padding-top: 80px; }
font-size: 36px;
font-weight: 800;
color: #37474F;
letter-spacing: -0.03em;
line-height: 1;
margin-bottom: 6px;
}
.stat-label { footer { padding: 40px 2rem; text-align: center; border-top: 1px solid var(--border); }
font-size: 12px; .footer-name { font-size: 14px; font-weight: 600; color: var(--dim); margin-bottom: 4px; }
color: rgba(255,255,255,0.4); .footer-name span { color: var(--violet); }
text-transform: uppercase; .footer-copy { font-size: 12px; color: rgba(255,255,255,0.25); }
letter-spacing: 0.1em;
}
/* ── FOOTER ───────────────────────────────────────── */
footer {
padding: 40px 2rem;
text-align: center;
border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-logo {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.3);
margin-bottom: 8px;
}
.footer-logo span { color: #37474F; }
.footer-copy {
font-size: 12px;
color: rgba(255,255,255,0.2);
}
/* ── SCROLL INDICATOR ─────────────────────────────── */
.scroll-hint {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: rgba(255,255,255,0.3);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.scroll-arrow {
width: 20px;
height: 20px;
border-right: 2px solid #37474F60;
border-bottom: 2px solid #37474F60;
transform: rotate(45deg);
animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
0%, 100% { transform: rotate(45deg) translateY(0); }
50% { transform: rotate(45deg) translateY(6px); }
}
@media (max-width: 600px) { @media (max-width: 600px) {
.stats { flex-direction: column; } .stats { flex-direction: column; }
.stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); } .stat { border-right: none; border-bottom: 1px solid var(--border); }
.products { grid-template-columns: 1fr; }
} }
</style> </style>
</head> </head>
<body> <body>
<section class="hero"> <section class="hero">
<div class="grid-bg"></div>
<div class="hero-content"> <div class="hero-content">
<div class="org-badge"> <div class="badge"><span class="dot"></span> BlackRoad OS, Inc.</div>
<span class="dot"></span> <h1>The Operating System for Governed AI</h1>
Personal Division <p class="tagline">Three products. One platform. Zero compliance gaps.</p>
</div> <div class="actions">
<div class="hero-icon">💻</div>
<h1>Blackbox Programming</h1>
<p class="tagline">Code. Ship. Repeat.</p>
<p class="description">Personal engineering hub for SDKs, tools, experiments, and the BlackRoad OS ecosystem.</p>
<div class="hero-actions">
<a href="https://github.com/blackboxprogramming" class="btn btn-primary"> <a href="https://github.com/blackboxprogramming" class="btn btn-primary">
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg> <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
View on GitHub GitHub
</a>
<a href="https://blackroad.io" class="btn btn-secondary">
🌐 BlackRoad OS
</a> </a>
<a href="https://blackroad.io" class="btn btn-outline">blackroad.io</a>
</div> </div>
</div> </div>
<div class="scroll-hint">
<div class="scroll-arrow"></div>
scroll
</div>
</section> </section>
<section class="tags-section"> <h2 class="section-title">Three Products. Three Markets.</h2>
<div class="tags-wrap"> <div class="products">
<span class="tag">SDKs</span><span class="tag">Open Tools</span><span class="tag">Experiments</span><span class="tag">BlackRoad Ecosystem</span> <div class="product">
<div class="tam">$53.9B TAM</div>
<h3>RoadAuth</h3>
<p>IAM built for compliance. 4 AI security agents. SOC 2, HIPAA, FedRAMP out of the box. JWT + Paseto, WebAuthn biometrics.</p>
</div>
<div class="product">
<div class="tam">$437.5B TAM</div>
<h3>Lucidia</h3>
<p>The AI that remembers you. Universal memory layer, multi-AI orchestration, 108 local models. Sovereign — runs on your hardware.</p>
</div>
<div class="product">
<div class="tam">$7-14B TAM</div>
<h3>Quantum</h3>
<p>Circuits, not slides. Visual circuit designer, quantum simulator, VQE/QAOA/Grover's/QFT. 1,012 verified equations.</p>
</div>
</div> </div>
</section>
<div class="stats"> <div class="stats">
<div class="stat"> <div class="stat"><div class="stat-value">5</div><div class="stat-label">Pi 5 Nodes</div></div>
<div class="stat-value">30K</div> <div class="stat"><div class="stat-value">52</div><div class="stat-label">TOPS AI</div></div>
<div class="stat-label">AI Agents</div> <div class="stat"><div class="stat-value">108</div><div class="stat-label">Local Models</div></div>
</div> <div class="stat"><div class="stat-value">612</div><div class="stat-label">Scripts</div></div>
<div class="stat">
<div class="stat-value">17</div>
<div class="stat-label">Organizations</div>
</div>
<div class="stat">
<div class="stat-value">1,800+</div>
<div class="stat-label">Repositories</div>
</div>
<div class="stat">
<div class="stat-value">$0</div>
<div class="stat-label">AI Cost Target</div>
</div>
</div> </div>
<footer> <footer>
<div class="footer-logo"> <div class="footer-name"><span>BlackRoad OS</span>, Inc. — Alexa Amundson</div>
<span>BlackRoad OS</span>, Inc. <div class="footer-copy">&copy; 2026 BlackRoad OS, Inc. All rights reserved.</div>
</div>
<div class="footer-copy">© 2026 BlackRoad OS, Inc. All rights reserved. Proprietary — not open source.</div>
</footer> </footer>
</body> </body>