ThatAIguyA world of ideas

THE CONSCIOUSNESS ATLAS
Read. Experiment. Follow the evidence.

ConsciousnessLearn · Explore · Joseph Anady

ch15-portal.html

Source identity, revision, and recovered contents.

archive memberSource text recovered

Source identity

FieldRecorded value
Source typearchive member
Original recordch15-portal.html
DateNot specified in source
Path or archive memberarchives/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-2566f98bce8ab7c050fc3d6951fb36a7e74b857c12e67e854595f91cf0333989e95
Reading-copy SHA-256ad51361cd7edc4ec4c9383288ed150cb789a62238cf39bffc46265f959f7f7b7
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 recordBranch or archiveRevision / identifierOriginal 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-6386b30cfab4archives/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-610451300edearchives/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">&#8734;</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">&#9993;</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">&#127760;</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">&#128187;</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>&#128736;</span> </a> <span class="social-label">GITHUB</span> </div> <div class="social-item"> <a href="https://huggingface.co" target="_blank" class="social-link"> <span>&#129303;</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>&#128279;</span> </a> <span class="social-label">LINKEDIN</span> </div> <div class="social-item"> <a href="https://twitter.com" target="_blank" class="social-link"> <span>&#128038;</span> </a> <span class="social-label">TWITTER</span> </div> <div class="social-item"> <a href="https://youtube.com" target="_blank" class="social-link"> <span>&#9658;</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);">&#8962;</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> &nbsp;|&nbsp; <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">&#8592; PREVIOUS: THE HUMAN LAYER</a> <a href="index.html" class="footer-link">RETURN TO INDEX &#8594;</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>

Search equations, builds, manuscript text, and recovered sources.