Source identity
| Field | Recorded value |
|---|---|
| Source type | GitHub source |
| Original record | Janady13/thataiguy-org-website / index.html |
| Date | Not specified in source |
| Repository | Janady13/thataiguy-org-website |
| Revision | b3e3f2cb73016caa61fdacc2ec2fb67396a8f1a9 |
| Branch | claude/enhance-website-science-JjybN |
| Path or archive member | index.html |
| Original SHA-256 | 11c0a3443c358cc7a034966f41e69b6c678cb5f9c3f57c2bd28f2732543e23fb |
| Git blob SHA | 9a154de425b9194e70f7ad934be8ac8bd1731218 |
| Reading-copy SHA-256 | 11c0a3443c358cc7a034966f41e69b6c678cb5f9c3f57c2bd28f2732543e23fb |
Recovered source transcript
Download complete source text ↓832 lines · 37.0 KB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>That AI Guy — Advanced Artificial Intelligence Solutions</title>
<meta name="description" content="That AI Guy: Pioneering the future of artificial intelligence through bio-inspired computing, neural architectures, and mathematical foundations from DNA to quantum mechanics.">
<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=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css" />
<!-- MathJax for beautiful equation rendering -->
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
displayMath: [['$$', '$$'], ['\\[', '\\]']],
processEscapes: true
},
svg: { fontCache: 'global' },
startup: { pageReady: () => MathJax.startup.defaultPageReady() }
};
</script>
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script defer src="https://unpkg.com/three@0.161.0/build/three.min.js"></script>
<script defer src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
<script defer src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
<script defer src="js/metrics.js"></script>
<script defer src="js/visuals.js"></script>
<script defer src="js/main.js"></script>
<!-- PayPal (replace YOUR_CLIENT_ID) -->
<script async src="https://www.paypal.com/sdk/js?client-id=sandbox-client-id¤cy=USD"></script>
</head>
<body>
<!-- Animated background -->
<div class="bg-grid"></div>
<div class="bg-glow bg-glow-1"></div>
<div class="bg-glow bg-glow-2"></div>
<div class="bg-glow bg-glow-3"></div>
<canvas id="particles-bg"></canvas>
<!-- Navigation -->
<header class="nav">
<div class="nav-inner">
<a href="#" class="brand">
<div class="brand-logo">
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="18" stroke="url(#logo-grad)" stroke-width="2"/>
<circle cx="20" cy="20" r="8" fill="url(#logo-grad)"/>
<circle cx="20" cy="8" r="3" fill="#00f5d4"/>
<circle cx="30" cy="26" r="3" fill="#7b61ff"/>
<circle cx="10" cy="26" r="3" fill="#ff6b6b"/>
<line x1="20" y1="12" x2="20" y2="20" stroke="#00f5d4" stroke-width="1.5"/>
<line x1="20" y1="20" x2="27" y2="24" stroke="#7b61ff" stroke-width="1.5"/>
<line x1="20" y1="20" x2="13" y2="24" stroke="#ff6b6b" stroke-width="1.5"/>
<defs>
<linearGradient id="logo-grad" x1="0" y1="0" x2="40" y2="40">
<stop offset="0%" stop-color="#00f5d4"/>
<stop offset="50%" stop-color="#7b61ff"/>
<stop offset="100%" stop-color="#ff6b6b"/>
</linearGradient>
</defs>
</svg>
</div>
<span class="brand-text">That AI Guy</span>
</a>
<nav class="nav-links">
<a href="#features">Features</a>
<a href="#science">Science</a>
<a href="#mathematics">Mathematics</a>
<a href="#pricing">Pricing</a>
<a href="#contact">Contact</a>
</nav>
<a href="#pricing" class="nav-cta">Get Started</a>
</div>
</header>
<!-- Hero Section -->
<section class="hero">
<canvas id="scene"></canvas>
<div class="hero-content">
<div class="hero-badge">
<span class="badge-dot"></span>
Next-Generation AI
</div>
<h1 class="hero-title">
<span class="title-line">Intelligence</span>
<span class="title-line gradient-text">Mathematically Perfected</span>
</h1>
<p class="hero-description">
Pioneering artificial intelligence through the convergence of neuroscience,
molecular biology, quantum mechanics, and advanced mathematics.
Building systems that think, learn, and evolve.
</p>
<div class="hero-cta">
<a href="#pricing" class="btn btn-primary">
<span>Start Building</span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
<a href="#science" class="btn btn-secondary">
<span>Explore the Science</span>
</a>
</div>
<div class="hero-stats">
<div class="stat">
<div class="stat-value" id="m-tick">—</div>
<div class="stat-label">Processing Cycles</div>
</div>
<div class="stat">
<div class="stat-value" id="m-agents">—</div>
<div class="stat-label">Active Nodes</div>
</div>
<div class="stat">
<div class="stat-value" id="m-latency">—</div>
<div class="stat-label">Response Time</div>
</div>
</div>
</div>
<div class="hero-scroll">
<span>Scroll to explore</span>
<div class="scroll-line"></div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="section features">
<div class="container">
<div class="section-header">
<span class="section-label">Core Capabilities</span>
<h2 class="section-title">Intelligent <span class="gradient-text">Visualizations</span></h2>
<p class="section-description">Experience AI through stunning real-time visualizations, interactive neural networks, and live performance metrics.</p>
</div>
<div class="features-grid">
<div class="feature-card featured">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
<polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
<line x1="12" y1="22.08" x2="12" y2="12"/>
</svg>
</div>
<h3>WebGL Neural Networks</h3>
<p>Real-time 3D visualization of neural architectures with dynamic node connections and signal propagation.</p>
<div class="feature-equation">
$$\mathbf{h}^{(l+1)} = \sigma\left(\mathbf{W}^{(l)}\mathbf{h}^{(l)} + \mathbf{b}^{(l)}\right)$$
</div>
<div class="feature-meta">
<span class="meta-tag">Three.js</span>
<span class="meta-tag">WebGL 2.0</span>
</div>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="10"/>
<path d="M12 6v6l4 2"/>
</svg>
</div>
<h3>Real-Time Metrics</h3>
<p>WebSocket-powered live statistics with Shannon entropy monitoring and performance analytics.</p>
<div class="feature-equation">
$$H(X) = -\sum_{i} p(x_i) \log_2 p(x_i)$$
</div>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
</svg>
</div>
<h3>Adaptive Learning</h3>
<p>Gradient descent optimization with momentum and adaptive learning rate scheduling.</p>
<div class="feature-equation">
$$\theta_{t+1} = \theta_t - \frac{\eta}{\sqrt{v_t} + \epsilon} m_t$$
</div>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
<path d="M2 17l10 5 10-5"/>
<path d="M2 12l10 5 10-5"/>
</svg>
</div>
<h3>Multi-Layer Architecture</h3>
<p>Deep hierarchical processing with attention mechanisms and skip connections.</p>
<div class="feature-equation">
$$\text{Attention} = \text{softmax}\left(\frac{QK^T}{\sqrt{d_k}}\right)V$$
</div>
</div>
</div>
</div>
</section>
<!-- Science Section: DNA, RNA, Chromosomes -->
<section id="science" class="section science">
<div class="container">
<div class="section-header">
<span class="section-label">Biological Foundations</span>
<h2 class="section-title">The <span class="gradient-text">Science</span> of Intelligence</h2>
<p class="section-description">Our AI architectures are inspired by nature's most elegant information processing systems.</p>
</div>
<!-- DNA Block -->
<div class="science-block">
<div class="science-visual">
<canvas id="dna-canvas"></canvas>
<div class="visual-label">DNA Double Helix</div>
</div>
<div class="science-content">
<div class="content-badge">Molecular Biology</div>
<h3>DNA Replication & Information Storage</h3>
<p>DNA encodes information through complementary base pairing: Adenine-Thymine (A-T) and Guanine-Cytosine (G-C). Our neural architectures use analogous encoding principles for memory formation and retrieval.</p>
<div class="equations-grid">
<div class="equation-item">
<div class="eq-label">Gibbs Free Energy</div>
<div class="eq-formula">$$\Delta G = \Delta H - T\Delta S$$</div>
<div class="eq-desc">Base pair binding energy</div>
</div>
<div class="equation-item">
<div class="eq-label">Polymerase Kinetics</div>
<div class="eq-formula">$$v = \frac{V_{max}[S]}{K_m + [S]}$$</div>
<div class="eq-desc">Michaelis-Menten enzyme kinetics</div>
</div>
<div class="equation-item">
<div class="eq-label">Helix Geometry</div>
<div class="eq-formula">$$\vec{r}(t) = \begin{pmatrix} R\cos\omega t \\ R\sin\omega t \\ ct \end{pmatrix}$$</div>
<div class="eq-desc">Parametric helix equation</div>
</div>
<div class="equation-item">
<div class="eq-label">Mutation Probability</div>
<div class="eq-formula">$$P_{mut} = 1 - e^{-\mu t}$$</div>
<div class="eq-desc">Poisson mutation model</div>
</div>
</div>
</div>
</div>
<!-- RNA Block -->
<div class="science-block reverse">
<div class="science-visual">
<canvas id="rna-canvas"></canvas>
<div class="visual-label">RNA Transcription</div>
</div>
<div class="science-content">
<div class="content-badge">Transcription</div>
<h3>RNA Processing & Translation</h3>
<p>RNA serves as the messenger between stored genetic information and functional proteins. Our AI systems similarly translate encoded patterns into actionable behaviors and outputs.</p>
<div class="equations-grid">
<div class="equation-item">
<div class="eq-label">Transcription Rate</div>
<div class="eq-formula">$$\frac{d[mRNA]}{dt} = k_{tx} - \gamma_m[mRNA]$$</div>
<div class="eq-desc">mRNA synthesis dynamics</div>
</div>
<div class="equation-item">
<div class="eq-label">Translation</div>
<div class="eq-formula">$$\frac{d[P]}{dt} = k_{tl}[mRNA] - \gamma_p[P]$$</div>
<div class="eq-desc">Protein production rate</div>
</div>
<div class="equation-item">
<div class="eq-label">Codon Adaptation</div>
<div class="eq-formula">$$CAI = \left(\prod_{i=1}^{L} w_i\right)^{1/L}$$</div>
<div class="eq-desc">Expression efficiency index</div>
</div>
<div class="equation-item">
<div class="eq-label">Folding Energy</div>
<div class="eq-formula">$$E = \sum_{i<j} \epsilon_{ij} \cdot \delta_{pair}$$</div>
<div class="eq-desc">Secondary structure stability</div>
</div>
</div>
</div>
</div>
<!-- Chromosomes Block -->
<div class="science-block">
<div class="science-visual">
<canvas id="chromo-canvas"></canvas>
<div class="visual-label">Chromosomal Dynamics</div>
</div>
<div class="science-content">
<div class="content-badge">Genetics</div>
<h3>Chromosomal Recombination & Evolution</h3>
<p>Genetic recombination drives evolution through crossover and mutation. Our evolutionary algorithms mirror these mechanisms for optimization and adaptation.</p>
<div class="equations-grid">
<div class="equation-item">
<div class="eq-label">Hardy-Weinberg</div>
<div class="eq-formula">$$p^2 + 2pq + q^2 = 1$$</div>
<div class="eq-desc">Genetic equilibrium</div>
</div>
<div class="equation-item">
<div class="eq-label">Genetic Drift</div>
<div class="eq-formula">$$\sigma^2_{\Delta p} = \frac{pq}{2N_e}$$</div>
<div class="eq-desc">Variance in allele frequency</div>
</div>
<div class="equation-item">
<div class="eq-label">Selection</div>
<div class="eq-formula">$$\Delta p = \frac{pq[p(h-1)+1]s}{1-2pqs-sp^2}$$</div>
<div class="eq-desc">Allele frequency change</div>
</div>
<div class="equation-item">
<div class="eq-label">Recombination</div>
<div class="eq-formula">$$r = \frac{1}{2}(1 - e^{-2m})$$</div>
<div class="eq-desc">Haldane's mapping function</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Neurology Section -->
<section id="neurology" class="section neurology">
<div class="container">
<div class="section-header">
<span class="section-label">Neural Architecture</span>
<h2 class="section-title">Neurological <span class="gradient-text">Foundations</span></h2>
<p class="section-description">Built on principles from computational neuroscience and biophysics.</p>
</div>
<div class="neuro-showcase">
<div class="neuro-main">
<div class="neuro-icon">
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="24" cy="24" r="6"/>
<circle cx="24" cy="8" r="4"/>
<circle cx="24" cy="40" r="4"/>
<circle cx="8" cy="24" r="4"/>
<circle cx="40" cy="24" r="4"/>
<circle cx="11" cy="11" r="3"/>
<circle cx="37" cy="11" r="3"/>
<circle cx="11" cy="37" r="3"/>
<circle cx="37" cy="37" r="3"/>
<line x1="24" y1="12" x2="24" y2="18"/>
<line x1="24" y1="30" x2="24" y2="36"/>
<line x1="12" y1="24" x2="18" y2="24"/>
<line x1="30" y1="24" x2="36" y2="24"/>
</svg>
</div>
<h3>Hodgkin-Huxley Model</h3>
<p>The foundational mathematical model describing how action potentials in neurons are initiated and propagated.</p>
<div class="neuro-equation-main">
$$C_m\frac{dV}{dt} = I_{ext} - \bar{g}_{Na}m^3h(V-E_{Na}) - \bar{g}_K n^4(V-E_K) - \bar{g}_L(V-E_L)$$
</div>
<div class="neuro-vars">
<span><strong>$C_m$</strong> membrane capacitance</span>
<span><strong>$m,h,n$</strong> gating variables</span>
<span><strong>$\bar{g}$</strong> max conductances</span>
<span><strong>$E$</strong> reversal potentials</span>
</div>
</div>
<div class="neuro-grid">
<div class="neuro-card">
<h4>Synaptic Plasticity</h4>
<div class="neuro-eq">$$\Delta w = \eta \cdot x_{pre} \cdot x_{post}$$</div>
<p>Hebbian learning rule</p>
</div>
<div class="neuro-card">
<h4>STDP</h4>
<div class="neuro-eq">$$\Delta w = A_{\pm}e^{-|\Delta t|/\tau_{\pm}}$$</div>
<p>Spike-timing dependent plasticity</p>
</div>
<div class="neuro-card">
<h4>Integrate & Fire</h4>
<div class="neuro-eq">$$\tau_m \frac{dV}{dt} = -(V-V_L) + RI$$</div>
<p>Simplified neuron model</p>
</div>
<div class="neuro-card">
<h4>Neural Field</h4>
<div class="neuro-eq">$$\tau\frac{\partial u}{\partial t} = -u + \int w \cdot f(u')dx'$$</div>
<p>Population dynamics</p>
</div>
<div class="neuro-card">
<h4>FitzHugh-Nagumo</h4>
<div class="neuro-eq">$$\dot{v} = v - \frac{v^3}{3} - w + I$$</div>
<p>Excitable dynamics</p>
</div>
<div class="neuro-card">
<h4>Cable Equation</h4>
<div class="neuro-eq">$$\lambda^2\frac{\partial^2 V}{\partial x^2} = \tau\frac{\partial V}{\partial t} + V$$</div>
<p>Dendritic propagation</p>
</div>
</div>
</div>
</div>
</section>
<!-- Mathematics Section -->
<section id="mathematics" class="section mathematics">
<div class="container">
<div class="section-header">
<span class="section-label">Theoretical Foundations</span>
<h2 class="section-title">Advanced <span class="gradient-text">Mathematics</span></h2>
<p class="section-description">The rigorous mathematical framework underlying intelligent systems.</p>
</div>
<!-- Information Theory -->
<div class="math-category">
<div class="math-header">
<div class="math-icon info-theory">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="10"/>
<path d="M12 16v-4"/>
<path d="M12 8h.01"/>
</svg>
</div>
<div>
<h3>Information Theory</h3>
<p>Quantifying information flow and uncertainty</p>
</div>
</div>
<div class="math-grid">
<div class="math-card">
<div class="math-title">Shannon Entropy</div>
<div class="math-eq">$$H(X) = -\sum_{x} p(x) \log_2 p(x)$$</div>
</div>
<div class="math-card">
<div class="math-title">Mutual Information</div>
<div class="math-eq">$$I(X;Y) = H(X) - H(X|Y)$$</div>
</div>
<div class="math-card">
<div class="math-title">KL Divergence</div>
<div class="math-eq">$$D_{KL}(P||Q) = \sum_x P(x)\log\frac{P(x)}{Q(x)}$$</div>
</div>
<div class="math-card">
<div class="math-title">Channel Capacity</div>
<div class="math-eq">$$C = \max_{p(x)} I(X;Y)$$</div>
</div>
</div>
</div>
<!-- Quantum Mechanics -->
<div class="math-category">
<div class="math-header">
<div class="math-icon quantum">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="3"/>
<ellipse cx="12" cy="12" rx="10" ry="4"/>
<ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(60 12 12)"/>
<ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(120 12 12)"/>
</svg>
</div>
<div>
<h3>Quantum Computing</h3>
<p>Harnessing quantum effects for computation</p>
</div>
</div>
<div class="math-grid">
<div class="math-card highlight">
<div class="math-title">Schrödinger Equation</div>
<div class="math-eq">$$i\hbar\frac{\partial}{\partial t}|\Psi\rangle = \hat{H}|\Psi\rangle$$</div>
</div>
<div class="math-card">
<div class="math-title">Superposition</div>
<div class="math-eq">$$|\psi\rangle = \alpha|0\rangle + \beta|1\rangle$$</div>
</div>
<div class="math-card">
<div class="math-title">Entanglement</div>
<div class="math-eq">$$|\Phi^+\rangle = \frac{1}{\sqrt{2}}(|00\rangle + |11\rangle)$$</div>
</div>
<div class="math-card">
<div class="math-title">Density Matrix</div>
<div class="math-eq">$$\rho = \sum_i p_i |\psi_i\rangle\langle\psi_i|$$</div>
</div>
</div>
</div>
<!-- Dynamical Systems -->
<div class="math-category">
<div class="math-header">
<div class="math-icon dynamics">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
</svg>
</div>
<div>
<h3>Dynamical Systems</h3>
<p>Evolution of complex systems over time</p>
</div>
</div>
<div class="math-grid">
<div class="math-card">
<div class="math-title">Lorenz Attractor</div>
<div class="math-eq">$$\dot{x} = \sigma(y-x), \dot{y} = x(\rho-z)-y$$</div>
</div>
<div class="math-card">
<div class="math-title">Lotka-Volterra</div>
<div class="math-eq">$$\dot{x} = \alpha x - \beta xy$$</div>
</div>
<div class="math-card">
<div class="math-title">Lyapunov Stability</div>
<div class="math-eq">$$\dot{V}(x) = \nabla V \cdot f(x) \leq 0$$</div>
</div>
<div class="math-card">
<div class="math-title">Bifurcation</div>
<div class="math-eq">$$\dot{x} = \mu x - x^3$$</div>
</div>
</div>
</div>
<!-- Machine Learning -->
<div class="math-category">
<div class="math-header">
<div class="math-icon ml">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
<path d="M2 17l10 5 10-5"/>
<path d="M2 12l10 5 10-5"/>
</svg>
</div>
<div>
<h3>Machine Learning</h3>
<p>Optimization and learning algorithms</p>
</div>
</div>
<div class="math-grid">
<div class="math-card">
<div class="math-title">Gradient Descent</div>
<div class="math-eq">$$\theta_{t+1} = \theta_t - \eta \nabla_\theta \mathcal{L}$$</div>
</div>
<div class="math-card">
<div class="math-title">Backpropagation</div>
<div class="math-eq">$$\frac{\partial \mathcal{L}}{\partial w} = \frac{\partial \mathcal{L}}{\partial a} \cdot \frac{\partial a}{\partial w}$$</div>
</div>
<div class="math-card">
<div class="math-title">Cross-Entropy</div>
<div class="math-eq">$$\mathcal{L} = -\sum_i y_i \log(\hat{y}_i)$$</div>
</div>
<div class="math-card">
<div class="math-title">Softmax</div>
<div class="math-eq">$$\sigma(z)_i = \frac{e^{z_i}}{\sum_j e^{z_j}}$$</div>
</div>
</div>
</div>
<!-- Graph Theory -->
<div class="math-category">
<div class="math-header">
<div class="math-icon graph">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="5" cy="6" r="3"/>
<circle cx="19" cy="6" r="3"/>
<circle cx="12" cy="18" r="3"/>
<line x1="8" y1="6" x2="16" y2="6"/>
<line x1="6.5" y1="8.5" x2="10" y2="15.5"/>
<line x1="17.5" y1="8.5" x2="14" y2="15.5"/>
</svg>
</div>
<div>
<h3>Graph Theory & Networks</h3>
<p>Structure of connections and relationships</p>
</div>
</div>
<div class="math-grid">
<div class="math-card">
<div class="math-title">Laplacian</div>
<div class="math-eq">$$L = D - A$$</div>
</div>
<div class="math-card">
<div class="math-title">PageRank</div>
<div class="math-eq">$$\pi = \frac{1-d}{N} + d \sum_j \frac{\pi_j}{L_j}$$</div>
</div>
<div class="math-card">
<div class="math-title">Clustering</div>
<div class="math-eq">$$C_i = \frac{2|E_i|}{k_i(k_i-1)}$$</div>
</div>
<div class="math-card">
<div class="math-title">Spectral Gap</div>
<div class="math-eq">$$\gamma = \lambda_2 - \lambda_1$$</div>
</div>
</div>
</div>
<!-- Probability -->
<div class="math-category">
<div class="math-header">
<div class="math-icon prob">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<rect x="3" y="3" width="18" height="18" rx="2"/>
<circle cx="8.5" cy="8.5" r="1.5"/>
<circle cx="15.5" cy="8.5" r="1.5"/>
<circle cx="8.5" cy="15.5" r="1.5"/>
<circle cx="15.5" cy="15.5" r="1.5"/>
<circle cx="12" cy="12" r="1.5"/>
</svg>
</div>
<div>
<h3>Probability & Statistics</h3>
<p>Uncertainty and inference</p>
</div>
</div>
<div class="math-grid">
<div class="math-card">
<div class="math-title">Bayes' Theorem</div>
<div class="math-eq">$$P(A|B) = \frac{P(B|A)P(A)}{P(B)}$$</div>
</div>
<div class="math-card">
<div class="math-title">Gaussian</div>
<div class="math-eq">$$p(x) = \frac{1}{\sqrt{2\pi\sigma^2}}e^{-\frac{(x-\mu)^2}{2\sigma^2}}$$</div>
</div>
<div class="math-card">
<div class="math-title">Markov Chain</div>
<div class="math-eq">$$P(X_{n+1}|X_n) = P_{ij}$$</div>
</div>
<div class="math-card">
<div class="math-title">Central Limit</div>
<div class="math-eq">$$\frac{\bar{X}-\mu}{\sigma/\sqrt{n}} \to \mathcal{N}(0,1)$$</div>
</div>
</div>
</div>
</div>
</section>
<!-- Unified Theory Section -->
<section class="section unified">
<div class="container">
<div class="unified-content">
<span class="section-label">The Grand Synthesis</span>
<h2 class="section-title">Unified <span class="gradient-text">Intelligence</span></h2>
<p class="unified-desc">Where biology meets mathematics, and computation transcends its limits.</p>
<div class="master-equation">
<div class="master-label">The Master Equation</div>
<div class="master-formula">
$$\mathcal{I}_{AGI} = \underbrace{\int \psi^\dagger \hat{H} \psi \, dx}_{\text{Quantum Core}} + \underbrace{\sum_{ij} J_{ij} s_i s_j}_{\text{Network}} + \underbrace{D_{KL}(q||p)}_{\text{Learning}} - \underbrace{\beta F}_{\text{Free Energy}}$$
</div>
</div>
<div class="synthesis-cards">
<div class="synth-card">
<div class="synth-num">01</div>
<h4>DNA → Memory</h4>
<p>Base pairing encodes information</p>
</div>
<div class="synth-card">
<div class="synth-num">02</div>
<h4>RNA → Processing</h4>
<p>Transcription enables computation</p>
</div>
<div class="synth-card">
<div class="synth-num">03</div>
<h4>Neurons → Nodes</h4>
<p>Signals become decisions</p>
</div>
<div class="synth-card">
<div class="synth-num">04</div>
<h4>Evolution → Learning</h4>
<p>Adaptation drives progress</p>
</div>
</div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section id="pricing" class="section pricing">
<div class="container">
<div class="section-header">
<span class="section-label">Get Started</span>
<h2 class="section-title">Choose Your <span class="gradient-text">Plan</span></h2>
<p class="section-description">Scale your AI capabilities from prototype to production.</p>
</div>
<div class="pricing-grid">
<div class="price-card">
<div class="price-header">
<h3>Starter</h3>
<p class="price-desc">For individual researchers</p>
</div>
<div class="price-amount">
<span class="currency">$</span>
<span class="value">99</span>
<span class="period">/mo</span>
</div>
<ul class="price-features">
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20,6 9,17 4,12"/></svg>
Up to 88 compute nodes
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20,6 9,17 4,12"/></svg>
Real-time metrics dashboard
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20,6 9,17 4,12"/></svg>
Email support
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20,6 9,17 4,12"/></svg>
Basic API access
</li>
</ul>
<button class="btn btn-primary checkout" data-payment-link="https://buy.stripe.com/4gMeVf55l0GF7qO4Oj2Nq15">Get Started</button>
<div class="paypal" data-plan="starter"></div>
</div>
<div class="price-card popular">
<div class="popular-badge">Most Popular</div>
<div class="price-header">
<h3>Professional</h3>
<p class="price-desc">For teams and startups</p>
</div>
<div class="price-amount">
<span class="currency">$</span>
<span class="value">299</span>
<span class="period">/mo</span>
</div>
<ul class="price-features">
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20,6 9,17 4,12"/></svg>
Up to 500 compute nodes
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20,6 9,17 4,12"/></svg>
Priority support
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20,6 9,17 4,12"/></svg>
Custom integrations
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20,6 9,17 4,12"/></svg>
Advanced analytics
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20,6 9,17 4,12"/></svg>
Neural network tools
</li>
</ul>
<button class="btn btn-primary checkout" data-payment-link="https://buy.stripe.com/4gMeVf55l0GF7qO4Oj2Nq15">Get Started</button>
<div class="paypal" data-plan="pro"></div>
</div>
<div class="price-card">
<div class="price-header">
<h3>Enterprise</h3>
<p class="price-desc">For large organizations</p>
</div>
<div class="price-amount">
<span class="currency">$</span>
<span class="value">799</span>
<span class="period">/mo</span>
</div>
<ul class="price-features">
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20,6 9,17 4,12"/></svg>
Unlimited compute nodes
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20,6 9,17 4,12"/></svg>
Dedicated infrastructure
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20,6 9,17 4,12"/></svg>
24/7 premium support
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20,6 9,17 4,12"/></svg>
Custom development
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20,6 9,17 4,12"/></svg>
SLA guarantee
</li>
</ul>
<button class="btn btn-primary checkout" data-payment-link="https://buy.stripe.com/4gMeVf55l0GF7qO4Oj2Nq15">Get Started</button>
<div class="paypal" data-plan="biz"></div>
</div>
</div>
<p class="pricing-note">Replace Payment Links and PayPal Client ID before going live.</p>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="section contact">
<div class="container">
<div class="contact-content">
<div class="contact-info">
<span class="section-label">Get in Touch</span>
<h2 class="section-title">Let's Build the <span class="gradient-text">Future</span></h2>
<p>Ready to transform your ideas into intelligent systems? Our team of AI researchers and engineers is here to help you navigate the frontier of artificial intelligence.</p>
<div class="contact-methods">
<a href="mailto:hello@thataiguy.com" class="contact-method">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
<polyline points="22,6 12,13 2,6"/>
</svg>
<span>hello@thataiguy.com</span>
</a>
</div>
</div>
<div class="contact-visual">
<canvas id="contact-canvas"></canvas>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-brand">
<div class="brand-logo small">
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="18" stroke="url(#logo-grad-footer)" stroke-width="2"/>
<circle cx="20" cy="20" r="8" fill="url(#logo-grad-footer)"/>
<defs>
<linearGradient id="logo-grad-footer" x1="0" y1="0" x2="40" y2="40">
<stop offset="0%" stop-color="#00f5d4"/>
<stop offset="100%" stop-color="#7b61ff"/>
</linearGradient>
</defs>
</svg>
</div>
<span>That AI Guy</span>
</div>
<nav class="footer-nav">
<a href="#features">Features</a>
<a href="#science">Science</a>
<a href="#mathematics">Mathematics</a>
<a href="#pricing">Pricing</a>
<a href="#contact">Contact</a>
</nav>
<div class="footer-copy">
© <span id="year"></span> That AI Guy. All rights reserved. Built with mathematics and passion.
</div>
</div>
</div>
</footer>
</body>
</html>