blackroad-os/blackboxprogramming-pages
9
0
Fork 0
mirror of https://github.com/blackboxprogramming/blackboxprogramming.github.io.git synced 2026-03-17 03:57:12 -05:00
Code Issues Packages Projects Releases Wiki Activity

Redesign landing page with BlackRoad ecosystem branding

Browse Source 
Replace the previous Inter-based template with a clean, minimal landing
page using JetBrains Mono, black background, and cyan-to-purple gradient
accents. Updated tagline to "Building the Road" and description to
reflect the personal engineering hub identity for BlackRoad OS.

https://claude.ai/code/session_01SAvLgWR6vPAcZmBoeJJ73o
This commit is contained in:
Claude
2026-03-01 22:03:14 +00:00
parent c9f5c31852
commit 987340fea0
1 changed files with 97 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

363
index.html
View File

@@ -3,158 +3,108 @@
<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>BlackBox Programming — Building the Road</title>
<meta name="description" content="Personal engineering hub for SDKs, tools, experiments, and the BlackRoad OS ecosystem."> <meta name="description" content="Personal engineering hub for the BlackRoad OS ecosystem. SDKs, tools, systems, and the infrastructure that powers it all.">
<meta property="og:title" content="Blackbox Programming"> <meta property="og:title" content="BlackBox Programming">
<meta property="og:description" content="Personal engineering hub for SDKs, tools, experiments, and the BlackRoad OS ecosystem."> <meta property="og:description" content="Building the Road — personal engineering hub for the BlackRoad OS ecosystem.">
<meta property="og:url" content="https://github.com/blackboxprogramming"> <meta property="og:url" content="https://github.com/blackboxprogramming">
<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 rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&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; --cyan: #00d4ff;
--purple: #7b2ff7;
--black: #000000; --black: #000000;
--white: #ffffff; --white: #ffffff;
--gray-900: #0a0a0a;
--gray-800: #141414;
--gray-700: #1e1e1e;
--gray-600: #2a2a2a;
--gray-400: #666;
--gray-200: #aaa;
--phi: 1.618;
} }
html { scroll-behavior: smooth; } html { scroll-behavior: smooth; }
body { body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-family: 'JetBrains Mono', monospace;
background: var(--black); background: var(--black);
color: var(--white); color: var(--white);
min-height: 100vh; min-height: 100vh;
overflow-x: hidden; overflow-x: hidden;
} }
/* ── HERO ─────────────────────────────────────────── */ .page {
.hero {
position: relative;
min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; min-height: 100vh;
padding: 2rem; padding: 2rem;
overflow: hidden; position: relative;
} }
.hero::before { /* Subtle gradient glow behind content */
.page::before {
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; top: 20%;
background: left: 50%;
radial-gradient(ellipse 80% 60% at 50% -10%, #37474F28 0%, transparent 70%), transform: translateX(-50%);
radial-gradient(ellipse 60% 40% at 80% 80%, #37474F15 0%, transparent 60%); width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(0, 212, 255, 0.06) 0%, rgba(123, 47, 247, 0.04) 50%, transparent 70%);
pointer-events: none; pointer-events: none;
} }
/* Animated grid */ .content {
.grid-bg {
position: absolute;
inset: 0;
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 {
0% { transform: translateY(0); }
100% { transform: translateY(50px); }
}
.hero-content {
position: relative; position: relative;
z-index: 1; z-index: 1;
max-width: 820px; max-width: 680px;
text-align: center;
} }
.org-badge { .badge {
display: inline-flex; display: inline-block;
align-items: center; font-size: 11px;
gap: 8px;
background: #37474F18;
border: 1px solid #37474F40;
border-radius: 100px;
padding: 8px 20px;
font-size: 13px;
font-weight: 500; font-weight: 500;
color: #37474F; letter-spacing: 0.15em;
letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 34px; background: linear-gradient(135deg, var(--cyan), var(--purple));
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-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text; background-clip: text;
background-size: 200%; margin-bottom: 2rem;
animation: shimmer 4s ease-in-out infinite alternate;
} }
@keyframes shimmer { h1 {
0% { background-position: 0% 50%; } font-size: clamp(32px, 6vw, 56px);
100% { background-position: 100% 50%; } font-weight: 700;
line-height: 1.1;
letter-spacing: -0.03em;
margin-bottom: 1rem;
color: var(--white);
} }
.tagline { .tagline {
font-size: clamp(18px, 3vw, 28px); font-size: clamp(16px, 2.5vw, 22px);
font-weight: 300; font-weight: 300;
color: rgba(255,255,255,0.7); background: linear-gradient(135deg, var(--cyan), var(--purple));
margin-bottom: 24px; -webkit-background-clip: text;
letter-spacing: -0.01em; -webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 2rem;
} }
.description { .description {
font-size: 17px; font-size: 14px;
line-height: 1.618; font-weight: 400;
line-height: 1.75;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
max-width: 600px; max-width: 520px;
margin: 0 auto 48px; margin: 0 auto 3rem;
} }
.hero-actions { .actions {
display: flex; display: flex;
gap: 16px; gap: 1rem;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
} }
@@ -163,219 +113,94 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 14px 28px; padding: 12px 24px;
border-radius: 12px; border-radius: 8px;
font-size: 15px; font-family: 'JetBrains Mono', monospace;
font-weight: 600; font-size: 13px;
font-weight: 500;
text-decoration: none; text-decoration: none;
transition: all 0.2s ease; transition: all 0.2s ease;
cursor: pointer;
} }
.btn-primary { .btn-primary {
background: #37474F; background: linear-gradient(135deg, var(--cyan), var(--purple));
color: #fff; color: var(--white);
box-shadow: 0 0 30px #37474F50;
} }
.btn-primary:hover { .btn-primary:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 8px 40px #37474F70; box-shadow: 0 8px 32px rgba(0, 212, 255, 0.25);
} }
.btn-secondary { .btn-secondary {
background: rgba(255,255,255,0.06); background: transparent;
color: rgba(255,255,255,0.8); color: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.12);
backdrop-filter: blur(10px);
} }
.btn-secondary:hover { .btn-secondary:hover {
background: rgba(255,255,255,0.1); color: var(--white);
border-color: rgba(255, 255, 255, 0.3);
transform: translateY(-2px); transform: translateY(-2px);
} }
/* ── TAGS ─────────────────────────────────────────── */ .divider {
.tags-section { width: 48px;
padding: 60px 2rem; height: 1px;
text-align: center; background: linear-gradient(90deg, var(--cyan), var(--purple));
border-top: 1px solid rgba(255,255,255,0.06); margin: 0 auto 2rem;
opacity: 0.4;
} }
.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);
}
.stat:last-child { border-right: none; }
.stat-value {
font-size: 36px;
font-weight: 800;
color: #37474F;
letter-spacing: -0.03em;
line-height: 1;
margin-bottom: 6px;
}
.stat-label {
font-size: 12px;
color: rgba(255,255,255,0.4);
text-transform: uppercase;
letter-spacing: 0.1em;
}
/* ── FOOTER ───────────────────────────────────────── */
footer { footer {
padding: 40px 2rem; position: relative;
z-index: 1;
padding: 3rem 2rem 2rem;
text-align: center; text-align: center;
border-top: 1px solid rgba(255,255,255,0.06);
} }
.footer-logo { footer p {
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; font-size: 12px;
color: rgba(255,255,255,0.2); color: rgba(255, 255, 255, 0.25);
letter-spacing: 0.05em;
} }
/* ── SCROLL INDICATOR ─────────────────────────────── */ /* GitHub icon */
.scroll-hint { .gh-icon {
position: absolute; width: 14px;
bottom: 32px; height: 14px;
left: 50%; fill: currentColor;
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; } .content { padding: 0 1rem; }
.stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); } .actions { flex-direction: column; align-items: center; }
} }
</style> </style>
</head> </head>
<body> <body>
<section class="hero"> <section class="page">
<div class="grid-bg"></div> <div class="content">
<div class="hero-content"> <div class="badge">Personal Engineering Hub</div>
<div class="org-badge"> <h1>BlackBox Programming</h1>
<span class="dot"></span> <p class="tagline">Building the Road</p>
Personal Division <div class="divider"></div>
</div> <p class="description">
<div class="hero-icon">💻</div> The personal engineering hub behind the BlackRoad OS ecosystem. This is where the SDKs, developer tools, system experiments, and core infrastructure are designed, built, and shipped. Every commit paves the road forward.
<h1>Blackbox Programming</h1> </p>
<p class="tagline">Code. Ship. Repeat.</p> <div class="actions">
<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 class="gh-icon" 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-secondary">BlackRoad OS</a>
</div> </div>
</div> </div>
<div class="scroll-hint">
<div class="scroll-arrow"></div>
scroll
</div>
</section> </section>
<section class="tags-section">
<div class="tags-wrap">
<span class="tag">SDKs</span><span class="tag">Open Tools</span><span class="tag">Experiments</span><span class="tag">BlackRoad Ecosystem</span>
</div>
</section>
<div class="stats">
<div class="stat">
<div class="stat-value">30K</div>
<div class="stat-label">AI Agents</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>
<footer> <footer>
<div class="footer-logo"> <p>BlackRoad OS, Inc. &copy; 2026</p>
<span>BlackRoad OS</span>, Inc.
</div>
<div class="footer-copy">© 2026 BlackRoad OS, Inc. All rights reserved. Proprietary — not open source.</div>
</footer> </footer>
</body> </body>