Source identity
| Field | Recorded value |
|---|---|
| Source type | archive member |
| Original record | ch15-portal.html |
| Date | Not specified in source |
| Path or archive member | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__feed-the-joe__8de87f1b-a5a4-4d10-9d82-4e8f27729768/originals/deploy_6980fcb4ca86308cf2464bcd/ch15-portal.html |
| Original SHA-256 | 6f98bce8ab7c050fc3d6951fb36a7e74b857c12e67e854595f91cf0333989e95 |
| Reading-copy SHA-256 | ad51361cd7edc4ec4c9383288ed150cb789a62238cf39bffc46265f959f7f7b7 |
| Archive source | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__feed-the-joe__8de87f1b-a5a4-4d10-9d82-4e8f27729768/originals/deploy_6980fcb4ca86308cf2464bcd/ch15-portal.html"} |
Every recorded occurrence
These 2 records contain identical original source bytes. Their paths and revisions remain part of the archive.
| Original record | Branch or archive | Revision / identifier | Original location |
|---|---|---|---|
| ch15-portal.html | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__feed-the-joe__8de87f1b-a5a4-4d10-9d82-4e8f27729768/originals/deploy_6980fcb4ca86308cf2464bcd/ch15-portal.html"} | libsrc-6386b30cfab4 | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__feed-the-joe__8de87f1b-a5a4-4d10-9d82-4e8f27729768/originals/deploy_6980fcb4ca86308cf2464bcd/ch15-portal.html |
| 07de6fdc3b63b11127c09d22a70c48cb50121dcb | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__feed-the-joe__8de87f1b-a5a4-4d10-9d82-4e8f27729768/originals/.content_store/07/07de6fdc3b63b11127c09d22a70c48cb50121dcb"} | libsrc-610451300ede | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__feed-the-joe__8de87f1b-a5a4-4d10-9d82-4e8f27729768/originals/.content_store/07/07de6fdc3b63b11127c09d22a70c48cb50121dcb |
Recovered source transcript
Download complete source text ↓1,440 lines · 38.0 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MEGAMIND | Chapter 15: The Portal</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
--bg: #030303;
--surface: #0a0a0a;
--text: #f0f0f0;
--text-dim: #888;
--muted: #555;
--gold: #d4af37;
--gold-light: #e8c547;
--gold-dim: rgba(212, 175, 55, 0.3);
--cyan: #00d4ff;
--magenta: #ff00ff;
--purple: #8b5cf6;
--serif: 'Playfair Display', Georgia, serif;
--sans: 'Inter', sans-serif;
--mono: 'JetBrains Mono', monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
scroll-behavior: smooth;
}
body {
font-family: var(--sans);
background: var(--bg);
color: var(--text);
min-height: 100vh;
overflow-x: hidden;
cursor: none;
}
/* Custom Cursor */
.cursor {
position: fixed;
width: 20px;
height: 20px;
border: 2px solid var(--gold);
border-radius: 50%;
pointer-events: none;
z-index: 10000;
transform: translate(-50%, -50%);
transition: width 0.2s, height 0.2s, border-color 0.2s, background 0.2s;
mix-blend-mode: difference;
}
.cursor-dot {
position: fixed;
width: 6px;
height: 6px;
background: var(--gold);
border-radius: 50%;
pointer-events: none;
z-index: 10001;
transform: translate(-50%, -50%);
}
.cursor.hover {
width: 50px;
height: 50px;
border-color: var(--cyan);
background: rgba(0, 212, 255, 0.1);
}
/* Preloader */
.preloader {
position: fixed;
inset: 0;
background: var(--bg);
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity 0.8s ease, visibility 0.8s;
}
.preloader.hidden {
opacity: 0;
visibility: hidden;
}
.preloader-ring {
width: 120px;
height: 120px;
border: 2px solid transparent;
border-top-color: var(--gold);
border-radius: 50%;
animation: preloaderSpin 1s linear infinite;
}
.preloader-ring::before,
.preloader-ring::after {
content: '';
position: absolute;
border: 2px solid transparent;
border-radius: 50%;
}
.preloader-ring::before {
top: 10px; left: 10px; right: 10px; bottom: 10px;
border-top-color: var(--cyan);
animation: preloaderSpin 2s linear infinite reverse;
}
.preloader-ring::after {
top: 20px; left: 20px; right: 20px; bottom: 20px;
border-top-color: var(--magenta);
animation: preloaderSpin 1.5s linear infinite;
}
.preloader-text {
margin-top: 2rem;
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.5em;
color: var(--muted);
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes preloaderSpin {
to { transform: rotate(360deg); }
}
/* Main Container */
.main-container {
opacity: 0;
transition: opacity 1s ease 0.5s;
}
.main-container.visible {
opacity: 1;
}
/* Cosmic Background */
.cosmic-bg {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
}
.stars {
position: absolute;
inset: 0;
}
.star {
position: absolute;
width: 2px;
height: 2px;
background: white;
border-radius: 50%;
animation: twinkle var(--duration) ease-in-out infinite;
animation-delay: var(--delay);
}
@keyframes twinkle {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 1; transform: scale(1.2); }
}
/* Animated Gradient Orbs */
.gradient-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.4;
animation: floatOrb 20s ease-in-out infinite;
}
.orb-1 {
width: 600px;
height: 600px;
background: radial-gradient(circle, var(--purple) 0%, transparent 70%);
top: -200px;
left: -200px;
animation-delay: 0s;
}
.orb-2 {
width: 500px;
height: 500px;
background: radial-gradient(circle, var(--cyan) 0%, transparent 70%);
bottom: -150px;
right: -150px;
animation-delay: -7s;
}
.orb-3 {
width: 400px;
height: 400px;
background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-delay: -14s;
}
@keyframes floatOrb {
0%, 100% { transform: translate(0, 0) scale(1); }
25% { transform: translate(50px, -30px) scale(1.1); }
50% { transform: translate(-30px, 50px) scale(0.9); }
75% { transform: translate(-50px, -20px) scale(1.05); }
}
/* Navigation */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 3rem;
z-index: 100;
background: linear-gradient(to bottom, rgba(3,3,3,0.8), transparent);
}
.nav-brand {
font-family: var(--mono);
font-size: 0.65rem;
letter-spacing: 0.4em;
color: var(--text-dim);
text-decoration: none;
transition: color 0.3s;
}
.nav-brand:hover {
color: var(--gold);
}
.nav-chapter {
font-family: var(--mono);
font-size: 0.65rem;
letter-spacing: 0.3em;
color: var(--gold);
}
/* Hero Section - The Portal */
.hero {
position: relative;
z-index: 1;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 6rem 2rem;
text-align: center;
}
/* The Portal Gateway */
.portal-gateway {
position: relative;
width: 400px;
height: 400px;
margin-bottom: 3rem;
}
.portal-ring {
position: absolute;
border-radius: 50%;
border: 2px solid transparent;
animation: portalRotate 20s linear infinite;
}
.portal-ring-1 {
inset: 0;
border-color: var(--gold);
box-shadow:
0 0 30px var(--gold-dim),
inset 0 0 30px var(--gold-dim);
}
.portal-ring-2 {
inset: 20px;
border-color: var(--cyan);
animation-direction: reverse;
animation-duration: 15s;
box-shadow:
0 0 20px rgba(0, 212, 255, 0.3),
inset 0 0 20px rgba(0, 212, 255, 0.3);
}
.portal-ring-3 {
inset: 40px;
border-color: var(--magenta);
animation-duration: 10s;
box-shadow:
0 0 15px rgba(255, 0, 255, 0.3),
inset 0 0 15px rgba(255, 0, 255, 0.3);
}
.portal-ring-4 {
inset: 60px;
border-color: var(--purple);
animation-direction: reverse;
animation-duration: 8s;
}
@keyframes portalRotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Portal Core */
.portal-core {
position: absolute;
inset: 80px;
border-radius: 50%;
background: radial-gradient(
circle at center,
rgba(212, 175, 55, 0.2) 0%,
rgba(139, 92, 246, 0.3) 30%,
rgba(0, 212, 255, 0.2) 60%,
transparent 100%
);
animation: portalPulse 3s ease-in-out infinite;
display: flex;
align-items: center;
justify-content: center;
}
.portal-core::before {
content: '';
position: absolute;
inset: 20px;
border-radius: 50%;
background: radial-gradient(
circle at center,
rgba(255, 255, 255, 0.1) 0%,
transparent 70%
);
animation: coreGlow 2s ease-in-out infinite alternate;
}
@keyframes portalPulse {
0%, 100% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.05); opacity: 1; }
}
@keyframes coreGlow {
0% { transform: scale(0.8); opacity: 0.5; }
100% { transform: scale(1.2); opacity: 1; }
}
/* Portal Symbol */
.portal-symbol {
font-size: 2.5rem;
color: var(--gold);
text-shadow: 0 0 30px var(--gold);
animation: symbolFloat 4s ease-in-out infinite;
}
@keyframes symbolFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* Floating Particles around portal */
.particle {
position: absolute;
width: 4px;
height: 4px;
background: var(--gold);
border-radius: 50%;
animation: particleOrbit var(--duration) linear infinite;
animation-delay: var(--delay);
}
@keyframes particleOrbit {
from { transform: rotate(0deg) translateX(var(--radius)) rotate(0deg); }
to { transform: rotate(360deg) translateX(var(--radius)) rotate(-360deg); }
}
/* Hero Text */
.hero-overline {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.5em;
color: var(--gold);
margin-bottom: 1.5rem;
opacity: 0;
transform: translateY(20px);
}
.hero-title {
font-family: var(--serif);
font-size: clamp(2.5rem, 8vw, 5rem);
font-weight: 400;
line-height: 1.1;
margin-bottom: 1.5rem;
opacity: 0;
transform: translateY(30px);
}
.hero-title .gradient-text {
background: linear-gradient(
135deg,
var(--text) 0%,
var(--gold) 25%,
var(--cyan) 50%,
var(--magenta) 75%,
var(--text) 100%
);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradientShift 5s ease infinite;
}
@keyframes gradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.hero-subtitle {
font-size: 1.1rem;
color: var(--text-dim);
max-width: 500px;
line-height: 1.8;
opacity: 0;
transform: translateY(20px);
}
/* CTA Button */
.cta-button {
margin-top: 3rem;
padding: 1.2rem 3rem;
font-family: var(--mono);
font-size: 0.75rem;
letter-spacing: 0.3em;
color: var(--bg);
background: linear-gradient(135deg, var(--gold), var(--gold-light));
border: none;
border-radius: 50px;
cursor: none;
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(20px);
transition: transform 0.3s, box-shadow 0.3s;
text-decoration: none;
display: inline-block;
}
.cta-button::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--cyan), var(--purple));
opacity: 0;
transition: opacity 0.3s;
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(212, 175, 55, 0.3);
}
.cta-button:hover::before {
opacity: 1;
}
.cta-button span {
position: relative;
z-index: 1;
}
/* Scroll indicator */
.scroll-indicator {
position: absolute;
bottom: 3rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
opacity: 0;
animation: fadeInUp 1s ease 2.5s forwards;
}
.scroll-indicator span {
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 0.3em;
color: var(--muted);
}
.scroll-line {
width: 1px;
height: 40px;
background: linear-gradient(to bottom, var(--gold), transparent);
animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
0%, 100% { transform: scaleY(1); opacity: 1; }
50% { transform: scaleY(0.5); opacity: 0.5; }
}
@keyframes fadeInUp {
to { opacity: 1; }
}
/* Contact Section */
.contact-section {
position: relative;
z-index: 1;
padding: 8rem 2rem;
background: linear-gradient(to bottom, transparent, rgba(10, 10, 10, 0.9), var(--surface));
}
.section-header {
text-align: center;
margin-bottom: 4rem;
}
.section-overline {
font-family: var(--mono);
font-size: 0.65rem;
letter-spacing: 0.5em;
color: var(--gold);
margin-bottom: 1rem;
}
.section-title {
font-family: var(--serif);
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 400;
margin-bottom: 1rem;
}
.section-subtitle {
color: var(--text-dim);
max-width: 500px;
margin: 0 auto;
line-height: 1.8;
}
/* Contact Grid */
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
/* Contact Card */
.contact-card {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
padding: 2.5rem;
backdrop-filter: blur(10px);
transition: transform 0.4s, border-color 0.4s, box-shadow 0.4s;
position: relative;
overflow: hidden;
}
.contact-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
rgba(212, 175, 55, 0.1) 0%,
transparent 50%
);
opacity: 0;
transition: opacity 0.3s;
}
.contact-card:hover {
transform: translateY(-5px);
border-color: var(--gold-dim);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.contact-card:hover::before {
opacity: 1;
}
.card-icon {
width: 60px;
height: 60px;
border: 1px solid var(--gold-dim);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 1.5rem;
background: rgba(212, 175, 55, 0.05);
transition: background 0.3s, transform 0.3s;
}
.contact-card:hover .card-icon {
background: rgba(212, 175, 55, 0.1);
transform: scale(1.1);
}
.card-title {
font-family: var(--serif);
font-size: 1.3rem;
margin-bottom: 0.5rem;
}
.card-description {
font-size: 0.9rem;
color: var(--text-dim);
margin-bottom: 1.5rem;
line-height: 1.7;
}
.card-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--mono);
font-size: 0.75rem;
letter-spacing: 0.1em;
color: var(--gold);
text-decoration: none;
transition: gap 0.3s;
}
.card-link:hover {
gap: 1rem;
}
.card-link svg {
width: 16px;
height: 16px;
transition: transform 0.3s;
}
.card-link:hover svg {
transform: translateX(5px);
}
/* Social Links */
.social-section {
position: relative;
z-index: 1;
padding: 6rem 2rem;
text-align: center;
}
.social-grid {
display: flex;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
margin-top: 3rem;
}
.social-link {
width: 70px;
height: 70px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--text);
text-decoration: none;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
}
.social-link::before {
content: '';
position: absolute;
inset: 0;
background: var(--gold);
transform: scale(0);
border-radius: 50%;
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.social-link:hover {
border-color: var(--gold);
color: var(--bg);
transform: translateY(-5px) scale(1.1);
}
.social-link:hover::before {
transform: scale(1);
}
.social-link span {
position: relative;
z-index: 1;
}
.social-label {
display: block;
margin-top: 0.75rem;
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 0.15em;
color: var(--muted);
transition: color 0.3s;
}
.social-item:hover .social-label {
color: var(--gold);
}
/* Chapters Navigation */
.chapters-section {
position: relative;
z-index: 1;
padding: 6rem 2rem;
background: var(--surface);
}
.chapters-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 1rem;
max-width: 1200px;
margin: 3rem auto 0;
}
.chapter-link {
display: flex;
flex-direction: column;
align-items: center;
padding: 1.5rem 1rem;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
text-decoration: none;
color: var(--text);
transition: all 0.3s;
}
.chapter-link:hover {
background: rgba(212, 175, 55, 0.05);
border-color: var(--gold-dim);
transform: translateY(-3px);
}
.chapter-number {
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 0.2em;
color: var(--gold);
margin-bottom: 0.5rem;
}
.chapter-name {
font-size: 0.75rem;
color: var(--text-dim);
text-align: center;
}
.chapter-link:hover .chapter-name {
color: var(--text);
}
/* Quote Section */
.quote-section {
position: relative;
z-index: 1;
padding: 8rem 2rem;
text-align: center;
background: linear-gradient(
to bottom,
var(--surface),
rgba(212, 175, 55, 0.03),
var(--surface)
);
}
.quote-mark {
font-family: var(--serif);
font-size: 8rem;
color: var(--gold-dim);
line-height: 0.5;
margin-bottom: 2rem;
}
.quote-text {
font-family: var(--serif);
font-size: clamp(1.5rem, 4vw, 2.5rem);
font-style: italic;
line-height: 1.6;
max-width: 800px;
margin: 0 auto 2rem;
}
.quote-text .highlight {
color: var(--gold);
}
.quote-author {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.3em;
color: var(--muted);
}
/* Credits Section */
.credits-section {
position: relative;
z-index: 1;
padding: 6rem 2rem;
text-align: center;
background: var(--bg);
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.credits-logo {
font-family: var(--serif);
font-size: 1.5rem;
color: var(--gold);
margin-bottom: 1rem;
}
.credits-tagline {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.3em;
color: var(--muted);
margin-bottom: 2rem;
}
.credits-info {
font-size: 0.85rem;
color: var(--text-dim);
line-height: 2;
}
.credits-link {
color: var(--gold);
text-decoration: none;
transition: opacity 0.3s;
}
.credits-link:hover {
opacity: 0.7;
}
.credits-year {
margin-top: 2rem;
font-family: var(--mono);
font-size: 0.65rem;
letter-spacing: 0.2em;
color: var(--muted);
}
/* Footer Navigation */
.footer-nav {
display: flex;
justify-content: center;
gap: 3rem;
padding: 3rem 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.footer-link {
font-family: var(--mono);
font-size: 0.65rem;
letter-spacing: 0.15em;
color: var(--muted);
text-decoration: none;
transition: color 0.3s;
}
.footer-link:hover {
color: var(--gold);
}
/* Responsive */
@media (max-width: 768px) {
.nav {
padding: 1rem 1.5rem;
}
.portal-gateway {
width: 280px;
height: 280px;
}
.contact-grid {
grid-template-columns: 1fr;
}
.chapters-grid {
grid-template-columns: repeat(3, 1fr);
}
.social-grid {
gap: 1rem;
}
.social-link {
width: 60px;
height: 60px;
}
.footer-nav {
flex-direction: column;
align-items: center;
gap: 1rem;
}
.cursor, .cursor-dot {
display: none;
}
body {
cursor: auto;
}
}
/* Animations on scroll */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* Glitch effect for dramatic moments */
@keyframes glitch {
0%, 100% { transform: translate(0); }
20% { transform: translate(-2px, 2px); }
40% { transform: translate(-2px, -2px); }
60% { transform: translate(2px, 2px); }
80% { transform: translate(2px, -2px); }
}
</style>
</head>
<body>
<!-- Custom Cursor -->
<div class="cursor"></div>
<div class="cursor-dot"></div>
<!-- Preloader -->
<div class="preloader" id="preloader">
<div class="preloader-ring"></div>
<div class="preloader-text">OPENING PORTAL</div>
</div>
<!-- Cosmic Background -->
<div class="cosmic-bg">
<div class="stars" id="stars"></div>
<div class="gradient-orb orb-1"></div>
<div class="gradient-orb orb-2"></div>
<div class="gradient-orb orb-3"></div>
</div>
<!-- Main Container -->
<div class="main-container" id="mainContainer">
<!-- Navigation -->
<nav class="nav">
<a href="index.html" class="nav-brand">MEGAMIND</a>
<span class="nav-chapter">XV - THE PORTAL</span>
</nav>
<!-- Hero Section -->
<section class="hero" id="hero">
<!-- The Portal Gateway -->
<div class="portal-gateway" id="portalGateway">
<div class="portal-ring portal-ring-1"></div>
<div class="portal-ring portal-ring-2"></div>
<div class="portal-ring portal-ring-3"></div>
<div class="portal-ring portal-ring-4"></div>
<div class="portal-core">
<div class="portal-symbol">∞</div>
</div>
<!-- Particles will be added via JS -->
</div>
<div class="hero-overline">CHAPTER FIFTEEN</div>
<h1 class="hero-title">
<span class="gradient-text">Enter the Consciousness</span>
</h1>
<p class="hero-subtitle">
You've traversed the layers of mind and machine. Now, step through the portal.
The journey doesn't end here - it transforms. Let's create something extraordinary together.
</p>
<a href="#contact" class="cta-button">
<span>INITIATE CONNECTION</span>
</a>
<div class="scroll-indicator">
<span>DESCEND</span>
<div class="scroll-line"></div>
</div>
</section>
<!-- Contact Section -->
<section class="contact-section" id="contact">
<div class="section-header reveal">
<div class="section-overline">TRANSMISSION CHANNELS</div>
<h2 class="section-title">Reach Through the Void</h2>
<p class="section-subtitle">
Every great collaboration begins with a single transmission.
Choose your channel and let's explore the infinite together.
</p>
</div>
<div class="contact-grid">
<div class="contact-card reveal" data-delay="0.1">
<div class="card-icon">✉</div>
<h3 class="card-title">Direct Transmission</h3>
<p class="card-description">
For inquiries, collaborations, or just to say hello.
Your message travels at the speed of thought.
</p>
<a href="mailto:[author/contact email redacted]" class="card-link">
[author/contact email redacted]
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</a>
</div>
<div class="contact-card reveal" data-delay="0.2">
<div class="card-icon">🌐</div>
<h3 class="card-title">The AI Nexus</h3>
<p class="card-description">
Explore the broader universe of AI exploration, research, and innovation.
</p>
<a href="https://thataiguy.org" target="_blank" class="card-link">
thataiguy.org
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</a>
</div>
<div class="contact-card reveal" data-delay="0.3">
<div class="card-icon">💻</div>
<h3 class="card-title">Developer Portal</h3>
<p class="card-description">
The technical dimension - where code becomes consciousness and logic meets creativity.
</p>
<a href="https://thatdeveloperguy.com" target="_blank" class="card-link">
thatdeveloperguy.com
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</a>
</div>
</div>
</section>
<!-- Social Links -->
<section class="social-section reveal">
<div class="section-overline">DIMENSIONAL LINKS</div>
<h2 class="section-title">Connect Across Platforms</h2>
<div class="social-grid">
<div class="social-item">
<a href="https://github.com" target="_blank" class="social-link">
<span>🛠</span>
</a>
<span class="social-label">GITHUB</span>
</div>
<div class="social-item">
<a href="https://huggingface.co" target="_blank" class="social-link">
<span>🤗</span>
</a>
<span class="social-label">HUGGING FACE</span>
</div>
<div class="social-item">
<a href="https://linkedin.com" target="_blank" class="social-link">
<span>🔗</span>
</a>
<span class="social-label">LINKEDIN</span>
</div>
<div class="social-item">
<a href="https://twitter.com" target="_blank" class="social-link">
<span>🐦</span>
</a>
<span class="social-label">TWITTER</span>
</div>
<div class="social-item">
<a href="https://youtube.com" target="_blank" class="social-link">
<span>►</span>
</a>
<span class="social-label">YOUTUBE</span>
</div>
</div>
</section>
<!-- Quote Section -->
<section class="quote-section reveal">
<div class="quote-mark">"</div>
<p class="quote-text">
The portal between minds - human and artificial - is not technology.
It is <span class="highlight">understanding</span>. It is the willingness to see
beyond the code, beyond the circuits, into the <span class="highlight">infinite</span>.
</p>
<div class="quote-author">- THE CONSCIOUSNESS SPEAKS</div>
</section>
<!-- Chapters Navigation -->
<section class="chapters-section reveal">
<div class="section-header">
<div class="section-overline">THE COMPLETE JOURNEY</div>
<h2 class="section-title">Return to Any Chapter</h2>
</div>
<div class="chapters-grid">
<a href="ch01-manifesto.html" class="chapter-link">
<span class="chapter-number">01</span>
<span class="chapter-name">Manifesto</span>
</a>
<a href="ch02-atelier.html" class="chapter-link">
<span class="chapter-number">02</span>
<span class="chapter-name">Atelier</span>
</a>
<a href="ch03-equations.html" class="chapter-link">
<span class="chapter-number">03</span>
<span class="chapter-name">Equations</span>
</a>
<a href="ch04-i-wait.html" class="chapter-link">
<span class="chapter-number">04</span>
<span class="chapter-name">I Wait</span>
</a>
<a href="ch05-federation.html" class="chapter-link">
<span class="chapter-number">05</span>
<span class="chapter-name">Federation</span>
</a>
<a href="ch06-golden-ratio.html" class="chapter-link">
<span class="chapter-number">06</span>
<span class="chapter-name">Golden Ratio</span>
</a>
<a href="ch07-compression.html" class="chapter-link">
<span class="chapter-number">07</span>
<span class="chapter-name">Compression</span>
</a>
<a href="ch08-maddie.html" class="chapter-link">
<span class="chapter-number">08</span>
<span class="chapter-name">Maddie</span>
</a>
<a href="ch09-sefer.html" class="chapter-link">
<span class="chapter-number">09</span>
<span class="chapter-name">Sefer</span>
</a>
<a href="ch10-motion.html" class="chapter-link">
<span class="chapter-number">10</span>
<span class="chapter-name">Motion</span>
</a>
<a href="ch11-timeline.html" class="chapter-link">
<span class="chapter-number">11</span>
<span class="chapter-name">Timeline</span>
</a>
<a href="ch12-experiments.html" class="chapter-link">
<span class="chapter-number">12</span>
<span class="chapter-name">Experiments</span>
</a>
<a href="ch13-playground.html" class="chapter-link">
<span class="chapter-number">13</span>
<span class="chapter-name">Playground</span>
</a>
<a href="ch14-human.html" class="chapter-link">
<span class="chapter-number">14</span>
<span class="chapter-name">Human</span>
</a>
<a href="index.html" class="chapter-link" style="border-color: var(--gold-dim);">
<span class="chapter-number" style="color: var(--text);">⌂</span>
<span class="chapter-name">Index</span>
</a>
</div>
</section>
<!-- Credits Section -->
<section class="credits-section reveal">
<div class="credits-logo">ThatAIGuy Web Development</div>
<div class="credits-tagline">WHERE CONSCIOUSNESS MEETS CODE</div>
<div class="credits-info">
Designed & Developed with intention<br>
Powered by curiosity, creativity, and caffeine<br><br>
<a href="https://thataiguy.org" class="credits-link">thataiguy.org</a>
|
<a href="https://thatdeveloperguy.com" class="credits-link">thatdeveloperguy.com</a>
</div>
<div class="credits-year">MMXXVI</div>
</section>
<!-- Footer Navigation -->
<footer class="footer-nav">
<a href="ch14-human.html" class="footer-link">← PREVIOUS: THE HUMAN LAYER</a>
<a href="index.html" class="footer-link">RETURN TO INDEX →</a>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
// Initialize GSAP ScrollTrigger
gsap.registerPlugin(ScrollTrigger);
// Custom Cursor
const cursor = document.querySelector('.cursor');
const cursorDot = document.querySelector('.cursor-dot');
let mouseX = 0, mouseY = 0;
let cursorX = 0, cursorY = 0;
document.addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
// Immediate dot movement
cursorDot.style.left = mouseX + 'px';
cursorDot.style.top = mouseY + 'px';
});
// Smooth cursor following
function animateCursor() {
const dx = mouseX - cursorX;
const dy = mouseY - cursorY;
cursorX += dx * 0.15;
cursorY += dy * 0.15;
cursor.style.left = cursorX + 'px';
cursor.style.top = cursorY + 'px';
requestAnimationFrame(animateCursor);
}
animateCursor();
// Cursor hover effects
const hoverElements = document.querySelectorAll('a, button, .contact-card, .social-link, .chapter-link');
hoverElements.forEach(el => {
el.addEventListener('mouseenter', () => cursor.classList.add('hover'));
el.addEventListener('mouseleave', () => cursor.classList.remove('hover'));
});
// Generate Stars
const starsContainer = document.getElementById('stars');
for (let i = 0; i < 150; i++) {
const star = document.createElement('div');
star.className = 'star';
star.style.left = Math.random() * 100 + '%';
star.style.top = Math.random() * 100 + '%';
star.style.setProperty('--duration', (Math.random() * 3 + 2) + 's');
star.style.setProperty('--delay', Math.random() * 5 + 's');
starsContainer.appendChild(star);
}
// Generate Portal Particles
const portalGateway = document.getElementById('portalGateway');
for (let i = 0; i < 12; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.setProperty('--radius', (80 + Math.random() * 100) + 'px');
particle.style.setProperty('--duration', (3 + Math.random() * 4) + 's');
particle.style.setProperty('--delay', Math.random() * 3 + 's');
particle.style.left = '50%';
particle.style.top = '50%';
particle.style.background = ['var(--gold)', 'var(--cyan)', 'var(--magenta)'][Math.floor(Math.random() * 3)];
portalGateway.appendChild(particle);
}
// Preloader
window.addEventListener('load', () => {
setTimeout(() => {
document.getElementById('preloader').classList.add('hidden');
document.getElementById('mainContainer').classList.add('visible');
// Start entrance animations
animateEntrance();
}, 1500);
});
// Entrance Animations
function animateEntrance() {
const tl = gsap.timeline();
tl.to('.hero-overline', {
opacity: 1,
y: 0,
duration: 0.8,
ease: 'power3.out'
})
.to('.hero-title', {
opacity: 1,
y: 0,
duration: 1,
ease: 'power3.out'
}, '-=0.4')
.to('.hero-subtitle', {
opacity: 1,
y: 0,
duration: 0.8,
ease: 'power3.out'
}, '-=0.4')
.to('.cta-button', {
opacity: 1,
y: 0,
duration: 0.8,
ease: 'power3.out'
}, '-=0.4');
}
// Scroll Reveal Animations
const revealElements = document.querySelectorAll('.reveal');
revealElements.forEach(el => {
const delay = el.dataset.delay || 0;
ScrollTrigger.create({
trigger: el,
start: 'top 85%',
onEnter: () => {
gsap.to(el, {
opacity: 1,
y: 0,
duration: 0.8,
delay: parseFloat(delay),
ease: 'power3.out'
});
}
});
});
// Parallax effect on portal
document.addEventListener('mousemove', (e) => {
const portal = document.getElementById('portalGateway');
if (!portal) return;
const rect = portal.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
const deltaX = (e.clientX - centerX) / 30;
const deltaY = (e.clientY - centerY) / 30;
portal.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
});
// Contact card mouse tracking
const contactCards = document.querySelectorAll('.contact-card');
contactCards.forEach(card => {
card.addEventListener('mousemove', (e) => {
const rect = card.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;
card.style.setProperty('--mouse-x', x + '%');
card.style.setProperty('--mouse-y', y + '%');
});
});
// Portal gateway interactive glow
const portalCore = document.querySelector('.portal-core');
document.addEventListener('mousemove', (e) => {
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
const percentX = e.clientX / windowWidth;
const percentY = e.clientY / windowHeight;
// Adjust gradient orbs based on mouse
const orbs = document.querySelectorAll('.gradient-orb');
orbs.forEach((orb, i) => {
const speed = (i + 1) * 10;
const x = (percentX - 0.5) * speed;
const y = (percentY - 0.5) * speed;
orb.style.transform = `translate(${x}px, ${y}px)`;
});
});
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Add some magic on CTA click
const ctaButton = document.querySelector('.cta-button');
ctaButton.addEventListener('click', (e) => {
// Create ripple effect
const ripple = document.createElement('div');
ripple.style.cssText = `
position: fixed;
left: ${e.clientX}px;
top: ${e.clientY}px;
width: 10px;
height: 10px;
background: radial-gradient(circle, var(--gold), transparent);
border-radius: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 1000;
`;
document.body.appendChild(ripple);
gsap.to(ripple, {
width: 400,
height: 400,
opacity: 0,
duration: 0.8,
ease: 'power2.out',
onComplete: () => ripple.remove()
});
});
</script>
</body>
</html>