Skip to content

Commit d0999df

Browse files
Jonathan D.A. Jewellclaude
Jonathan D.A. Jewell
and
claude
committed
feat: Add Steam-style architectural seam engineering banner
- Replace license from AGPL to MPL-2.0 + Palimpsest - Add dramatic hero section with animated seam visualization - Include glowing module boundaries and connection nodes - Add tagline "Where Boundaries Become Features" - Responsive design hides decorative elements on mobile 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 parent 2271530 commit d0999df

File tree

1 file changed

+218
-23
lines changed

1 file changed

+218
-23
lines changed

‎index.html‎

Lines changed: 218 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,14 @@
1313
--bg-hover: #21262d;
1414
--accent: #58a6ff;
1515
--accent-secondary: #f78166;
16+
--accent-gold: #fbbf24;
1617
--text-primary: #e6edf3;
1718
--text-secondary: #8b949e;
1819
--border: #30363d;
1920
--gradient-1: #7c3aed;
2021
--gradient-2: #2563eb;
22+
--seam-cyan: #06b6d4;
23+
--seam-purple: #a855f7;
2124
}
2225

2326
* {
@@ -33,68 +36,222 @@
3336
line-height: 1.6;
3437
}
3538

36-
/* Hero Section */
39+
/* Hero Section - Architectural Seam Engineering Banner */
3740
.hero {
38-
background: linear-gradient(135deg, var(--gradient-1) 0%, var(--gradient-2) 100%);
39-
padding: 80px 20px;
41+
background: linear-gradient(135deg, #0a0a12 0%, #0d1117 50%, #0f0a1a 100%);
42+
padding: 100px 20px 80px;
4043
text-align: center;
4144
position: relative;
4245
overflow: hidden;
46+
min-height: 480px;
4347
}
4448

49+
/* Animated seam grid background */
4550
.hero::before {
4651
content: '';
4752
position: absolute;
4853
top: 0;
4954
left: 0;
5055
right: 0;
5156
bottom: 0;
52-
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
53-
opacity: 0.5;
57+
background:
58+
linear-gradient(90deg, transparent 49%, rgba(6, 182, 212, 0.08) 50%, transparent 51%),
59+
linear-gradient(0deg, transparent 49%, rgba(168, 85, 247, 0.06) 50%, transparent 51%);
60+
background-size: 80px 80px;
61+
animation: seamPulse 8s ease-in-out infinite;
62+
}
63+
64+
/* Glowing seam lines */
65+
.hero::after {
66+
content: '';
67+
position: absolute;
68+
top: 0;
69+
left: 0;
70+
right: 0;
71+
bottom: 0;
72+
background: url("data:image/svg+xml,%3Csvg width='400' height='400' viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='seam1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2306b6d4' stop-opacity='0'/%3E%3Cstop offset='50%25' stop-color='%2306b6d4' stop-opacity='0.4'/%3E%3Cstop offset='100%25' stop-color='%2306b6d4' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='seam2' x1='100%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23a855f7' stop-opacity='0'/%3E%3Cstop offset='50%25' stop-color='%23a855f7' stop-opacity='0.3'/%3E%3Cstop offset='100%25' stop-color='%23a855f7' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 200 L100 150 L200 200 L300 100 L400 180' stroke='url(%23seam1)' stroke-width='2' fill='none'/%3E%3Cpath d='M0 100 L150 200 L250 120 L400 220' stroke='url(%23seam2)' stroke-width='1.5' fill='none'/%3E%3Cpath d='M50 0 L80 80 L160 100 L200 200 L180 300 L250 400' stroke='url(%23seam1)' stroke-width='1' fill='none'/%3E%3Ccircle cx='100' cy='150' r='4' fill='%2306b6d4' opacity='0.6'/%3E%3Ccircle cx='200' cy='200' r='5' fill='%23fbbf24' opacity='0.8'/%3E%3Ccircle cx='300' cy='100' r='4' fill='%23a855f7' opacity='0.6'/%3E%3Ccircle cx='250' cy='120' r='3' fill='%2306b6d4' opacity='0.5'/%3E%3Crect x='195' y='195' width='10' height='10' fill='none' stroke='%23fbbf24' stroke-width='1' opacity='0.6'/%3E%3C/svg%3E");
73+
opacity: 0.7;
74+
animation: seamFloat 20s linear infinite;
75+
}
76+
77+
@keyframes seamPulse {
78+
0%, 100% { opacity: 0.6; }
79+
50% { opacity: 1; }
80+
}
81+
82+
@keyframes seamFloat {
83+
0% { background-position: 0 0; }
84+
100% { background-position: 400px 400px; }
85+
}
86+
87+
/* Module boundary boxes */
88+
.seam-module {
89+
position: absolute;
90+
border: 1px solid;
91+
border-radius: 8px;
92+
opacity: 0.15;
93+
animation: moduleGlow 4s ease-in-out infinite;
94+
}
95+
96+
.seam-module:nth-child(1) {
97+
width: 180px;
98+
height: 120px;
99+
top: 15%;
100+
left: 8%;
101+
border-color: var(--seam-cyan);
102+
animation-delay: 0s;
103+
}
104+
105+
.seam-module:nth-child(2) {
106+
width: 140px;
107+
height: 160px;
108+
top: 55%;
109+
left: 5%;
110+
border-color: var(--seam-purple);
111+
animation-delay: 1s;
112+
}
113+
114+
.seam-module:nth-child(3) {
115+
width: 200px;
116+
height: 100px;
117+
top: 20%;
118+
right: 6%;
119+
border-color: var(--accent-gold);
120+
animation-delay: 2s;
121+
}
122+
123+
.seam-module:nth-child(4) {
124+
width: 160px;
125+
height: 140px;
126+
top: 60%;
127+
right: 8%;
128+
border-color: var(--seam-cyan);
129+
animation-delay: 1.5s;
130+
}
131+
132+
@keyframes moduleGlow {
133+
0%, 100% { opacity: 0.1; transform: scale(1); }
134+
50% { opacity: 0.25; transform: scale(1.02); }
135+
}
136+
137+
/* Connection node points */
138+
.seam-node {
139+
position: absolute;
140+
width: 12px;
141+
height: 12px;
142+
border-radius: 50%;
143+
background: radial-gradient(circle, var(--accent-gold) 0%, transparent 70%);
144+
animation: nodeFlicker 3s ease-in-out infinite;
145+
}
146+
147+
.seam-node::before {
148+
content: '';
149+
position: absolute;
150+
top: 50%;
151+
left: 50%;
152+
width: 4px;
153+
height: 4px;
154+
margin: -2px;
155+
background: var(--accent-gold);
156+
border-radius: 50%;
157+
}
158+
159+
.seam-node:nth-child(5) { top: 30%; left: 20%; animation-delay: 0.5s; }
160+
.seam-node:nth-child(6) { top: 70%; left: 15%; animation-delay: 1.2s; }
161+
.seam-node:nth-child(7) { top: 25%; right: 18%; animation-delay: 0.8s; }
162+
.seam-node:nth-child(8) { top: 65%; right: 22%; animation-delay: 1.8s; }
163+
.seam-node:nth-child(9) { top: 45%; left: 35%; animation-delay: 2.2s; }
164+
.seam-node:nth-child(10) { top: 50%; right: 30%; animation-delay: 0.3s; }
165+
166+
@keyframes nodeFlicker {
167+
0%, 100% { opacity: 0.4; transform: scale(1); }
168+
50% { opacity: 1; transform: scale(1.3); }
54169
}
55170

56171
.hero-content {
57172
position: relative;
58-
z-index: 1;
59-
max-width: 800px;
173+
z-index: 10;
174+
max-width: 900px;
60175
margin: 0 auto;
61176
}
62177

178+
.hero-tagline {
179+
font-size: 0.85rem;
180+
text-transform: uppercase;
181+
letter-spacing: 0.25em;
182+
color: var(--seam-cyan);
183+
margin-bottom: 12px;
184+
font-weight: 500;
185+
}
186+
63187
.hero h1 {
64-
font-size: 3.5rem;
188+
font-size: 4rem;
65189
font-weight: 800;
66-
margin-bottom: 16px;
190+
margin-bottom: 8px;
67191
letter-spacing: -0.02em;
192+
background: linear-gradient(135deg, #fff 0%, #e6edf3 50%, var(--seam-cyan) 100%);
193+
-webkit-background-clip: text;
194+
-webkit-text-fill-color: transparent;
195+
background-clip: text;
196+
text-shadow: 0 0 80px rgba(6, 182, 212, 0.3);
197+
}
198+
199+
.hero-subtitle {
200+
font-size: 1.5rem;
201+
font-weight: 300;
202+
color: var(--seam-purple);
203+
margin-bottom: 20px;
204+
letter-spacing: 0.02em;
68205
}
69206

70207
.hero p {
71-
font-size: 1.25rem;
72-
opacity: 0.9;
73-
max-width: 600px;
74-
margin: 0 auto 32px;
208+
font-size: 1.1rem;
209+
opacity: 0.85;
210+
max-width: 650px;
211+
margin: 0 auto 36px;
212+
line-height: 1.7;
75213
}
76214

77215
.hero-stats {
78216
display: flex;
79217
justify-content: center;
80-
gap: 48px;
81-
margin-top: 32px;
218+
gap: 60px;
219+
margin-top: 40px;
220+
padding-top: 30px;
221+
border-top: 1px solid rgba(255,255,255,0.1);
82222
}
83223

84224
.stat {
85225
text-align: center;
226+
position: relative;
227+
}
228+
229+
.stat::after {
230+
content: '';
231+
position: absolute;
232+
bottom: -8px;
233+
left: 50%;
234+
transform: translateX(-50%);
235+
width: 40px;
236+
height: 2px;
237+
background: linear-gradient(90deg, transparent, var(--seam-cyan), transparent);
86238
}
87239

88240
.stat-value {
89241
font-size: 2.5rem;
90242
font-weight: 700;
243+
background: linear-gradient(180deg, #fff, var(--accent-gold));
244+
-webkit-background-clip: text;
245+
-webkit-text-fill-color: transparent;
246+
background-clip: text;
91247
}
92248

93249
.stat-label {
94-
font-size: 0.875rem;
95-
opacity: 0.8;
250+
font-size: 0.8rem;
251+
opacity: 0.7;
96252
text-transform: uppercase;
97-
letter-spacing: 0.05em;
253+
letter-spacing: 0.08em;
254+
margin-top: 4px;
98255
}
99256

100257
/* Navigation */
@@ -284,16 +441,39 @@
284441

285442
/* Responsive */
286443
@media (max-width: 768px) {
444+
.hero {
445+
padding: 60px 20px 50px;
446+
min-height: auto;
447+
}
448+
287449
.hero h1 {
288450
font-size: 2.5rem;
289451
}
290452

453+
.hero-subtitle {
454+
font-size: 1.1rem;
455+
}
456+
457+
.hero-tagline {
458+
font-size: 0.75rem;
459+
}
460+
461+
.hero p {
462+
font-size: 1rem;
463+
}
464+
291465
.hero-stats {
292466
gap: 24px;
467+
flex-wrap: wrap;
293468
}
294469

295470
.stat-value {
296-
font-size: 2rem;
471+
font-size: 1.8rem;
472+
}
473+
474+
.seam-module,
475+
.seam-node {
476+
display: none;
297477
}
298478

299479
.projects {
@@ -304,9 +484,24 @@
304484
</head>
305485
<body>
306486
<section class="hero">
487+
<!-- Architectural seam module boundaries -->
488+
<div class="seam-module"></div>
489+
<div class="seam-module"></div>
490+
<div class="seam-module"></div>
491+
<div class="seam-module"></div>
492+
<!-- Connection nodes at seam intersections -->
493+
<div class="seam-node"></div>
494+
<div class="seam-node"></div>
495+
<div class="seam-node"></div>
496+
<div class="seam-node"></div>
497+
<div class="seam-node"></div>
498+
<div class="seam-node"></div>
499+
307500
<div class="hero-content">
501+
<div class="hero-tagline">Architectural Seam Engineering</div>
308502
<h1>Hyperpolymath</h1>
309-
<p>Open source projects spanning programming languages, developer tools, AI integrations, and infrastructure</p>
503+
<div class="hero-subtitle">Where Boundaries Become Features</div>
504+
<p>Building software where module interfaces, system boundaries, and integration points are first-class architectural artifacts — documented, checkable, and evolvable.</p>
310505
<div class="hero-stats">
311506
<div class="stat">
312507
<div class="stat-value">60+</div>
@@ -317,8 +512,8 @@ <h1>Hyperpolymath</h1>
317512
<div class="stat-label">Languages</div>
318513
</div>
319514
<div class="stat">
320-
<div class="stat-value">AGPL</div>
321-
<div class="stat-label">Licensed</div>
515+
<div class="stat-value">MPL-2.0</div>
516+
<div class="stat-label">+ Palimpsest</div>
322517
</div>
323518
</div>
324519
</div>
@@ -832,7 +1027,7 @@ <h2>Standards & Frameworks</h2>
8321027
<a href="https://bitbucket.org/hyperpolymath">Bitbucket</a>
8331028
</p>
8341029
<p style="margin-top: 12px; font-size: 0.875rem;">
835-
All projects licensed under AGPL-3.0-or-later unless otherwise noted
1030+
All projects licensed under <a href="https://opensource.org/license/mpl-2-0">MPL-2.0</a> + <a href="https://github.com/hyperpolymath/palimpsest-license">Palimpsest</a> unless otherwise noted
8361031
</p>
8371032
</footer>
8381033
</body>

0 commit comments

Comments
 (0)