mirror of
https://github.com/blackboxprogramming/blackboxprogramming.github.io.git
synced 2026-03-17 00:57:11 -05:00
987340fea0
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
208 lines
6.0 KiB
HTML
208 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>BlackBox Programming — Building the Road</title>
|
|
<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:description" content="Building the Road — personal engineering hub for the BlackRoad OS ecosystem.">
|
|
<meta property="og:url" content="https://github.com/blackboxprogramming">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<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>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
--cyan: #00d4ff;
|
|
--purple: #7b2ff7;
|
|
--black: #000000;
|
|
--white: #ffffff;
|
|
}
|
|
|
|
html { scroll-behavior: smooth; }
|
|
|
|
body {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
background: var(--black);
|
|
color: var(--white);
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
padding: 2rem;
|
|
position: relative;
|
|
}
|
|
|
|
/* Subtle gradient glow behind content */
|
|
.page::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 20%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
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;
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
z-index: 1;
|
|
max-width: 680px;
|
|
text-align: center;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
background: linear-gradient(135deg, var(--cyan), var(--purple));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
h1 {
|
|
font-size: clamp(32px, 6vw, 56px);
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
letter-spacing: -0.03em;
|
|
margin-bottom: 1rem;
|
|
color: var(--white);
|
|
}
|
|
|
|
.tagline {
|
|
font-size: clamp(16px, 2.5vw, 22px);
|
|
font-weight: 300;
|
|
background: linear-gradient(135deg, var(--cyan), var(--purple));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.description {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 1.75;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
max-width: 520px;
|
|
margin: 0 auto 3rem;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, var(--cyan), var(--purple));
|
|
color: var(--white);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 32px rgba(0, 212, 255, 0.25);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: transparent;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
color: var(--white);
|
|
border-color: rgba(255, 255, 255, 0.3);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.divider {
|
|
width: 48px;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, var(--cyan), var(--purple));
|
|
margin: 0 auto 2rem;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
footer {
|
|
position: relative;
|
|
z-index: 1;
|
|
padding: 3rem 2rem 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
footer p {
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.25);
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* GitHub icon */
|
|
.gh-icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
fill: currentColor;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.content { padding: 0 1rem; }
|
|
.actions { flex-direction: column; align-items: center; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<section class="page">
|
|
<div class="content">
|
|
<div class="badge">Personal Engineering Hub</div>
|
|
<h1>BlackBox Programming</h1>
|
|
<p class="tagline">Building the Road</p>
|
|
<div class="divider"></div>
|
|
<p class="description">
|
|
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.
|
|
</p>
|
|
<div class="actions">
|
|
<a href="https://github.com/blackboxprogramming" class="btn btn-primary">
|
|
<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>
|
|
GitHub
|
|
</a>
|
|
<a href="https://blackroad.io" class="btn btn-secondary">BlackRoad OS</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<p>BlackRoad OS, Inc. © 2026</p>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|