Skip to content

Commit ac675c1

Browse files
AionSystemAionSystem
authored
Update index.html
1 parent 2c594aa commit ac675c1

File tree

1 file changed

+60
-53
lines changed

1 file changed

+60
-53
lines changed

‎index.html‎

Lines changed: 60 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@
134134
box-shadow: 0 8px 20px rgba(0,0,0,0.3), inset 0 0 30px rgba(0,212,255,0.03);
135135
transition: all 0.3s var(--ease);
136136
}
137-
.service-card:hover, .work-card:hover {
137+
.service-card:hover, .work-card:hover, .stack-card:hover, .submissions-banner:hover {
138138
border-color: var(--cyan);
139139
box-shadow: 0 12px 30px rgba(0,0,0,0.5), 0 0 25px rgba(0,212,255,0.2), inset 0 0 20px rgba(0,212,255,0.05);
140140
transform: translateY(-4px);
@@ -151,20 +151,20 @@
151151
}
152152

153153
/* 3D Tilt Effect on Cards (JS) */
154-
.work-card, .service-card {
154+
.tilt-card {
155155
transform-style: preserve-3d;
156156
perspective: 1000px;
157157
}
158158

159-
/* Hero Canvas - Reactive Particle Field */
159+
/* Hero Canvas - Mathematical Symbol Field */
160160
#hero-canvas {
161161
position: fixed;
162162
top: 0;
163163
left: 0;
164164
width: 100%;
165165
height: 100%;
166166
z-index: 0;
167-
opacity: 0.6;
167+
opacity: 0.65;
168168
pointer-events: none;
169169
}
170170

@@ -243,7 +243,7 @@
243243
</head>
244244
<body>
245245

246-
<!-- Particle Field Canvas -->
246+
<!-- Mathematical Symbol Canvas -->
247247
<canvas id="hero-canvas"></canvas>
248248

249249
<!-- Custom Cursor Elements -->
@@ -287,7 +287,7 @@ <h1 class="hero-name">Sheldon K.<em>Salmon</em></h1>
287287
<a href="/services/" class="cta-btn">Services & Consulting →</a>
288288
</div>
289289

290-
<div class="submissions-banner">
290+
<div class="submissions-banner tilt-card">
291291
<p>📋 RECENT GRANT SUBMISSIONS (April 2026)</p>
292292
<div class="grant-list">
293293
<a href="/submissions/" class="grant-item">AXIOM — NICE</a>
@@ -304,17 +304,17 @@ <h1 class="hero-name">Sheldon K.<em>Salmon</em></h1>
304304
<section>
305305
<div class="section-header"><span class="section-num">// 01</span><h2 class="section-title">What I Build</h2><div class="section-line"></div></div>
306306
<div class="services-grid">
307-
<div class="service-card">
307+
<div class="service-card tilt-card">
308308
<div class="service-title">Simulation<br>Creation</div>
309309
<div class="service-desc">Physics simulators, engineering tools, educational systems — built in days, not months. Citation-backed, red-teamed, with full audit trails.</div>
310310
<a href="/simulators/" class="service-link">View Simulators →</a>
311311
</div>
312-
<div class="service-card">
312+
<div class="service-card tilt-card">
313313
<div class="service-title">AI Reliability<br>Audit</div>
314314
<div class="service-desc">Formal verification that AI deployments capture failures immutably and maintain honest epistemic records. STP FROZEN-2.0 compliant.</div>
315315
<a href="/services/ai-audit/" class="service-link">AI Audit Services →</a>
316316
</div>
317-
<div class="service-card">
317+
<div class="service-card tilt-card">
318318
<div class="service-title">Framework<br>Design</div>
319319
<div class="service-desc">Custom certainty frameworks for your AI system's failure modes. Built on the AION Constitutional Stack.</div>
320320
<a href="/services/framework-design/" class="service-link">Framework Engineering →</a>
@@ -359,7 +359,7 @@ <h1 class="hero-name">Sheldon K.<em>Salmon</em></h1>
359359

360360
<section>
361361
<div class="section-header"><span class="section-num">// 02</span><h2 class="section-title">AION Certainty Stack</h2><div class="section-line"></div></div>
362-
<div class="stack-card">
362+
<div class="stack-card tilt-card">
363363
<div class="stack-table-wrapper" style="overflow-x:auto;">
364364
<table class="stack-table">
365365
<thead><tr><th>Framework</th><th>Version</th><th>Function</th><th>Convergence</th></tr></thead>
@@ -401,74 +401,84 @@ <h1 class="hero-name">Sheldon K.<em>Salmon</em></h1>
401401
(function(){
402402
"use strict";
403403

404-
// ========== REACTIVE PARTICLE FIELD ==========
404+
// ========== MATHEMATICAL SYMBOL FIELD ==========
405405
const canvas = document.getElementById('hero-canvas');
406406
const ctx = canvas.getContext('2d');
407407
let width, height;
408-
let particles = [];
409-
let mouse = { x: null, y: null, radius: 120 };
408+
let symbols = [];
409+
let mouse = { x: null, y: null, radius: 150 };
410+
411+
// Curated set of mathematical/logical symbols relevant to certainty engineering
412+
const SYMBOL_SET = [
413+
'∇', 'Σ', '∫', '∂', 'λ', '⊕', '⊗', '∈', '∀', '∃',
414+
'⊢', '⊨', '→', '↔', '∧', '∨', '¬', '≡', '≈', '≠',
415+
'≤', '≥', '∞', '∝', '∂', 'Δ', 'Π', 'Ω', 'α', 'β',
416+
'γ', 'δ', 'ε', 'θ', 'μ', 'σ', 'φ', 'ψ', 'ω',
417+
'∄', '⁂', '◈', '◆', '○', '●', '◉'
418+
];
410419

411420
function resizeCanvas() {
412421
width = window.innerWidth;
413422
height = window.innerHeight;
414423
canvas.width = width;
415424
canvas.height = height;
416-
initParticles();
425+
initSymbols();
417426
}
418427

419-
function initParticles() {
420-
const count = Math.floor(width * height / 8000);
421-
particles = [];
428+
function initSymbols() {
429+
const count = Math.floor(width * height / 6000);
430+
symbols = [];
422431
for (let i = 0; i < count; i++) {
423-
particles.push({
432+
symbols.push({
433+
symbol: SYMBOL_SET[Math.floor(Math.random() * SYMBOL_SET.length)],
424434
x: Math.random() * width,
425435
y: Math.random() * height,
426-
vx: (Math.random() - 0.5) * 0.3,
427-
vy: (Math.random() - 0.5) * 0.3,
428-
size: Math.random() * 2 + 1,
429-
baseColor: Math.random() > 0.5 ? 'rgba(0,212,255,' : 'rgba(240,165,0,'
436+
vx: (Math.random() - 0.5) * 0.2,
437+
vy: (Math.random() - 0.5) * 0.2,
438+
size: Math.random() * 20 + 12,
439+
color: Math.random() > 0.5 ? '#00d4ff' : '#f0a500',
440+
opacity: 0.15 + Math.random() * 0.25
430441
});
431442
}
432443
}
433444

434-
function drawParticles() {
445+
function drawSymbols() {
435446
ctx.clearRect(0, 0, width, height);
436447

437-
particles.forEach(p => {
438-
// Move
439-
p.x += p.vx;
440-
p.y += p.vy;
448+
symbols.forEach(s => {
449+
s.x += s.vx;
450+
s.y += s.vy;
441451

442-
// Boundary wrap
443-
if (p.x < 0) p.x = width;
444-
if (p.x > width) p.x = 0;
445-
if (p.y < 0) p.y = height;
446-
if (p.y > height) p.y = 0;
452+
if (s.x < -50) s.x = width + 50;
453+
if (s.x > width + 50) s.x = -50;
454+
if (s.y < -50) s.y = height + 50;
455+
if (s.y > height + 50) s.y = -50;
447456

448-
// Mouse interaction
449457
if (mouse.x && mouse.y) {
450-
const dx = p.x - mouse.x;
451-
const dy = p.y - mouse.y;
458+
const dx = s.x - mouse.x;
459+
const dy = s.y - mouse.y;
452460
const dist = Math.sqrt(dx*dx + dy*dy);
453461
if (dist < mouse.radius) {
454462
const angle = Math.atan2(dy, dx);
455-
const force = (mouse.radius - dist) / mouse.radius;
456-
p.x += Math.cos(angle) * force * 3;
457-
p.y += Math.sin(angle) * force * 3;
463+
const force = (mouse.radius - dist) / mouse.radius * 2;
464+
s.x += Math.cos(angle) * force;
465+
s.y += Math.sin(angle) * force;
458466
}
459467
}
460468

461-
// Draw
462-
const opacity = 0.4 + Math.sin(Date.now() * 0.002 + p.x * 0.01) * 0.2;
463-
ctx.beginPath();
464-
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
465-
ctx.fillStyle = p.baseColor + opacity + ')';
466-
ctx.shadowColor = p.baseColor.includes('0,212,255') ? '#00d4ff' : '#f0a500';
467-
ctx.shadowBlur = 10;
468-
ctx.fill();
469+
ctx.font = `${s.size}px 'JetBrains Mono', 'Share Tech Mono', monospace`;
470+
ctx.textAlign = 'center';
471+
ctx.textBaseline = 'middle';
472+
ctx.shadowColor = s.color;
473+
ctx.shadowBlur = 15;
474+
ctx.fillStyle = s.color;
475+
ctx.globalAlpha = s.opacity;
476+
ctx.fillText(s.symbol, s.x, s.y);
469477
});
478+
470479
ctx.shadowBlur = 0;
471-
requestAnimationFrame(drawParticles);
480+
ctx.globalAlpha = 1.0;
481+
requestAnimationFrame(drawSymbols);
472482
}
473483

474484
window.addEventListener('resize', resizeCanvas);
@@ -482,7 +492,7 @@ <h1 class="hero-name">Sheldon K.<em>Salmon</em></h1>
482492
});
483493

484494
resizeCanvas();
485-
drawParticles();
495+
drawSymbols();
486496

487497
// ========== CUSTOM CURSOR & TRAIL ==========
488498
const cursor = document.getElementById('custom-cursor');
@@ -496,11 +506,9 @@ <h1 class="hero-name">Sheldon K.<em>Salmon</em></h1>
496506
cursor.style.left = x + 'px';
497507
cursor.style.top = y + 'px';
498508

499-
// Trail
500509
trailPositions.push({ x, y, time: Date.now() });
501510
if (trailPositions.length > MAX_TRAIL) trailPositions.shift();
502511

503-
// Render trail
504512
trailContainer.innerHTML = '';
505513
trailPositions.forEach((pos, i) => {
506514
const dot = document.createElement('div');
@@ -518,8 +526,7 @@ <h1 class="hero-name">Sheldon K.<em>Salmon</em></h1>
518526

519527
document.addEventListener('mousemove', updateCursor);
520528

521-
// Hover effects
522-
document.querySelectorAll('a, button, .work-card, .service-card, .cta-btn').forEach(el => {
529+
document.querySelectorAll('a, button, .work-card, .service-card, .cta-btn, .tilt-card').forEach(el => {
523530
el.addEventListener('mouseenter', () => cursor.classList.add('hover'));
524531
el.addEventListener('mouseleave', () => cursor.classList.remove('hover'));
525532
});
@@ -541,7 +548,7 @@ <h1 class="hero-name">Sheldon K.<em>Salmon</em></h1>
541548
});
542549
});
543550

544-
// ========== MOBILE NAV (preserved) ==========
551+
// ========== MOBILE NAV ==========
545552
const hamburger = document.getElementById('hamburger');
546553
const mobileNav = document.getElementById('mobileNav');
547554
if (hamburger && mobileNav) {

0 commit comments

Comments
 (0)