ThatAIguyA world of ideas

THE CONSCIOUSNESS ATLAS
Read. Experiment. Follow the evidence.

ConsciousnessLearn · Explore · Joseph Anady

services.html

Source identity, revision, and recovered contents.

archive memberSource text recovered

Source identity

FieldRecorded value
Source typearchive member
Original recordservices.html
DateNot specified in source
Path or archive memberarchives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy-api-clean-1__8b5c9eb1-e75c-4f8a-a9f0-6f8d4ae4a3d5/originals/deploy_697597efc7c59a3a07e05318/services.html
Original SHA-2562e968fc690a32fb2110f25c3ae597baf715348e45c1cd4be4121ae7d2ed5a339
Reading-copy SHA-2562e968fc690a32fb2110f25c3ae597baf715348e45c1cd4be4121ae7d2ed5a339
Archive source{"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy-api-clean-1__8b5c9eb1-e75c-4f8a-a9f0-6f8d4ae4a3d5/originals/deploy_697597efc7c59a3a07e05318/services.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
services.html{"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy-api-clean-1__8b5c9eb1-e75c-4f8a-a9f0-6f8d4ae4a3d5/originals/deploy_697597efc7c59a3a07e05318/services.html"}libsrc-64435630a701archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy-api-clean-1__8b5c9eb1-e75c-4f8a-a9f0-6f8d4ae4a3d5/originals/deploy_697597efc7c59a3a07e05318/services.html
15361b40a086b30f87f59a3dfdd87681966c87cd{"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy-api-clean-1__8b5c9eb1-e75c-4f8a-a9f0-6f8d4ae4a3d5/originals/.content_store/15/15361b40a086b30f87f59a3dfdd87681966c87cd"}libsrc-5e0a18758190archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy-api-clean-1__8b5c9eb1-e75c-4f8a-a9f0-6f8d4ae4a3d5/originals/.content_store/15/15361b40a086b30f87f59a3dfdd87681966c87cd

Recovered source transcript

Download complete source text ↓1,172 lines · 38.3 KB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Services | ThatAIGuy Web Development</title> <meta name="description" content="Professional web development services - Custom websites, web applications, AI integration, e-commerce, and more. Starting at $350."> <!-- Fonts (same as index) --> <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=Orbitron:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet"> <!-- Three.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <style> :root { /* Arizona Sunset Palette (matching index) */ --sunset-deep-purple: #1a0a2e; --sunset-plum: #4a1942; --sunset-burgundy: #6b2040; --sunset-crimson: #9c2935; --sunset-burnt-orange: #d4442a; --sunset-orange: #f4721a; --sunset-golden: #ffa126; --sunset-gold: #ffc857; --sunset-pale-gold: #ffe4a0; /* Accent Colors */ --cyan-glow: #00d4ff; --purple-glow: #7b2fff; --pink-glow: #ff2d92; /* Neutrals */ --bg-deep: #050510; --bg-dark: #0a0a1a; --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.7); --text-muted: rgba(255, 255, 255, 0.4); /* Glass */ --glass: rgba(10, 10, 26, 0.8); --glass-border: rgba(255, 200, 87, 0.2); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Outfit', sans-serif; background: var(--bg-deep); color: var(--text-primary); overflow-x: hidden; min-height: 100vh; } /* ============================================ 3D CANVAS (DNA Helix) ============================================ */ #canvas-container { position: fixed; inset: 0; z-index: 0; } /* ============================================ NAVIGATION (matching index) ============================================ */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(180deg, rgba(5, 5, 16, 0.95), transparent); backdrop-filter: blur(10px); } .logo { font-family: 'Orbitron', sans-serif; font-size: 1.5rem; font-weight: 800; background: linear-gradient(135deg, var(--sunset-gold), var(--sunset-orange)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-decoration: none; letter-spacing: 2px; } .nav-links { display: flex; gap: 40px; list-style: none; } .nav-links a { font-family: 'Outfit', sans-serif; font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); text-decoration: none; text-transform: uppercase; letter-spacing: 2px; transition: all 0.3s ease; position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background: var(--sunset-gold); transform: scaleX(0); transition: transform 0.3s ease; } .nav-links a:hover { color: var(--sunset-gold); text-shadow: 0 0 20px var(--sunset-gold); } .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); } .nav-links a.active { color: var(--sunset-gold); } /* Mobile Menu */ .mobile-menu-btn { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; } .mobile-menu-btn span { width: 25px; height: 2px; background: var(--sunset-gold); } /* ============================================ HERO SECTION ============================================ */ .hero { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 150px 40px 80px; position: relative; z-index: 10; text-align: center; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: rgba(255, 200, 87, 0.1); border: 1px solid rgba(255, 200, 87, 0.3); border-radius: 100px; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 2px; color: var(--sunset-gold); margin-bottom: 24px; } .hero-badge::before { content: ''; width: 6px; height: 6px; background: var(--sunset-gold); border-radius: 50%; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } } .hero h1 { font-family: 'Orbitron', sans-serif; font-size: clamp(2.5rem, 8vw, 5rem); font-weight: 700; line-height: 1.1; margin-bottom: 20px; background: linear-gradient( 135deg, var(--sunset-pale-gold) 0%, var(--sunset-gold) 25%, var(--sunset-orange) 50%, var(--sunset-crimson) 75%, var(--sunset-burgundy) 100% ); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradientShift 8s ease infinite; } @keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .hero-subtitle { font-size: clamp(1rem, 2.5vw, 1.25rem); font-weight: 300; color: var(--text-secondary); max-width: 600px; line-height: 1.6; } /* ============================================ SERVICES GRID ============================================ */ .services-section { padding: 80px 40px; position: relative; z-index: 10; } .services-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; } .service-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 20px; padding: 40px; position: relative; overflow: hidden; transition: all 0.4s ease; } .service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--sunset-gold), var(--sunset-orange), var(--sunset-crimson)); transform: scaleX(0); transition: transform 0.4s ease; } .service-card:hover { transform: translateY(-10px); border-color: var(--sunset-gold); box-shadow: 0 30px 80px rgba(255, 200, 87, 0.15), 0 0 0 1px rgba(255, 200, 87, 0.2); } .service-card:hover::before { transform: scaleX(1); } .service-icon { width: 70px; height: 70px; background: linear-gradient(135deg, rgba(255, 200, 87, 0.2), rgba(244, 114, 26, 0.1)); border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin-bottom: 25px; transition: all 0.3s ease; } .service-card:hover .service-icon { transform: scale(1.1) rotate(5deg); box-shadow: 0 10px 30px rgba(255, 200, 87, 0.3); } .service-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; } .service-card h3 { font-family: 'Orbitron', sans-serif; font-size: 1.3rem; color: var(--text-primary); text-transform: uppercase; letter-spacing: 1px; } .service-price { font-family: 'Space Mono', monospace; font-size: 1.1rem; color: var(--sunset-gold); font-weight: 700; } .service-card p { color: var(--text-secondary); line-height: 1.7; margin-bottom: 25px; } .service-features { list-style: none; } .service-features li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255, 200, 87, 0.1); color: var(--text-secondary); font-size: 0.95rem; transition: all 0.3s ease; } .service-features li:hover { color: var(--sunset-gold); transform: translateX(5px); } .service-features li::before { content: '→'; color: var(--sunset-orange); font-weight: 700; transition: transform 0.3s ease; } .service-features li:hover::before { transform: translateX(5px); } /* ============================================ PROCESS SECTION ============================================ */ .process-section { padding: 100px 40px; position: relative; z-index: 10; } .section-header { text-align: center; margin-bottom: 60px; } .section-badge { display: inline-block; padding: 8px 20px; background: rgba(255, 200, 87, 0.1); border: 1px solid rgba(255, 200, 87, 0.3); border-radius: 30px; font-family: 'Space Mono', monospace; font-size: 0.8rem; color: var(--sunset-gold); letter-spacing: 2px; margin-bottom: 20px; } .section-title { font-family: 'Orbitron', sans-serif; font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; background: linear-gradient(135deg, var(--sunset-gold), var(--sunset-orange)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .process-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; position: relative; } .process-grid::before { content: ''; position: absolute; top: 55px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, transparent, var(--sunset-gold), var(--sunset-orange), var(--sunset-crimson), transparent ); z-index: 0; } .process-step { text-align: center; position: relative; z-index: 1; } .step-number { width: 110px; height: 110px; margin: 0 auto 25px; background: var(--glass); border: 2px solid var(--glass-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Orbitron', sans-serif; font-size: 2.5rem; font-weight: 800; color: var(--sunset-gold); transition: all 0.4s ease; } .process-step:hover .step-number { background: linear-gradient(135deg, var(--sunset-gold), var(--sunset-orange)); color: var(--bg-deep); transform: scale(1.1); box-shadow: 0 0 40px rgba(255, 200, 87, 0.4); } .process-step h3 { font-family: 'Orbitron', sans-serif; font-size: 1.1rem; color: var(--text-primary); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; } .process-step p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; } /* ============================================ TECH STACK ============================================ */ .tech-section { padding: 80px 40px; position: relative; z-index: 10; } .tech-grid { max-width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; } .tech-tag { padding: 12px 25px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 30px; font-family: 'Space Mono', monospace; font-size: 0.9rem; color: var(--text-secondary); transition: all 0.3s ease; } .tech-tag:hover { border-color: var(--sunset-gold); color: var(--sunset-gold); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(255, 200, 87, 0.2); } /* ============================================ CTA SECTION ============================================ */ .cta-section { padding: 100px 40px; position: relative; z-index: 10; } .cta-box { max-width: 800px; margin: 0 auto; padding: 60px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 30px; text-align: center; position: relative; overflow: hidden; } .cta-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--sunset-gold), var(--sunset-orange), var(--sunset-crimson)); } .cta-title { font-family: 'Orbitron', sans-serif; font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 700; color: var(--text-primary); margin-bottom: 20px; } .cta-text { color: var(--text-secondary); font-size: 1.1rem; margin-bottom: 30px; line-height: 1.7; } .cta-btn { display: inline-flex; align-items: center; gap: 12px; padding: 18px 40px; background: linear-gradient(135deg, var(--sunset-orange), var(--sunset-crimson)); border: none; border-radius: 60px; font-family: 'Orbitron', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 3px; color: white; text-decoration: none; text-transform: uppercase; cursor: pointer; position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .cta-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--sunset-gold), var(--sunset-orange)); opacity: 0; transition: opacity 0.3s ease; } .cta-btn:hover { transform: scale(1.05); box-shadow: 0 10px 40px rgba(244, 114, 26, 0.4); } .cta-btn:hover::before { opacity: 1; } .cta-btn span, .cta-btn svg { position: relative; z-index: 1; } .cta-btn svg { width: 20px; height: 20px; transition: transform 0.3s ease; } .cta-btn:hover svg { transform: translateX(5px); } /* ============================================ FOOTER ============================================ */ footer { padding: 40px; text-align: center; border-top: 1px solid rgba(255, 200, 87, 0.1); position: relative; z-index: 10; } .footer-text { font-family: 'Space Mono', monospace; font-size: 0.85rem; color: var(--text-muted); } .footer-text span { color: var(--sunset-gold); } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 1024px) { .process-grid { grid-template-columns: repeat(2, 1fr); } .process-grid::before { display: none; } } @media (max-width: 768px) { nav { padding: 15px 20px; } .mobile-menu-btn { display: flex; } .nav-links { position: fixed; top: 0; right: -100%; width: 70%; height: 100vh; background: rgba(5, 5, 16, 0.98); flex-direction: column; justify-content: center; align-items: center; gap: 30px; transition: right 0.3s ease; } .nav-links.active { right: 0; } .hero { padding: 120px 20px 60px; } .services-section, .process-section, .tech-section, .cta-section { padding: 60px 20px; } .services-grid { grid-template-columns: 1fr; } .process-grid { grid-template-columns: 1fr; gap: 40px; } .cta-box { padding: 40px 25px; } } </style> </head> <body> <!-- 3D Canvas --> <div id="canvas-container"></div> <!-- Navigation --> <nav> <a href="/" class="logo">ThatAIGuy</a> <ul class="nav-links"> <li><a href="/portfolio">PORTFOLIO</a></li> <li><a href="/services" class="active">SERVICES</a></li> <li><a href="/megamind">ABOUT AGI</a></li> <li><a href="/contact">CONTACT</a></li> </ul> <button class="mobile-menu-btn" aria-label="Toggle menu"> <span></span> <span></span> <span></span> </button> </nav> <!-- Hero Section --> <section class="hero"> <div class="hero-badge">PROFESSIONAL WEB SERVICES</div> <h1>Services & Pricing</h1> <p class="hero-subtitle">From concept to deployment, I build digital experiences that stand out. Modern technologies, clean code, exceptional results.</p> </section> <!-- Services Grid --> <section class="services-section"> <div class="services-grid"> <div class="service-card"> <div class="service-icon">🌐</div> <div class="service-header"> <h3>Website Development</h3> <span class="service-price">$350+</span> </div> <p>Custom-designed, responsive websites built to convert visitors into customers. From landing pages to full business sites.</p> <ul class="service-features"> <li>Custom design & development</li> <li>Mobile-first responsive</li> <li>SEO optimization</li> <li>Netlify deployment</li> <li>Performance tuning</li> </ul> </div> <div class="service-card"> <div class="service-icon">⚡</div> <div class="service-header"> <h3>Web Applications</h3> <span class="service-price">$1,500+</span> </div> <p>Full-stack web applications with modern frameworks, databases, and APIs. Scalable solutions for complex business needs.</p> <ul class="service-features"> <li>React / Next.js frontend</li> <li>Node.js / Python backend</li> <li>Database integration</li> <li>REST & GraphQL APIs</li> <li>Authentication & security</li> </ul> </div> <div class="service-card"> <div class="service-icon">🤖</div> <div class="service-header"> <h3>AI Integration</h3> <span class="service-price">$2,000+</span> </div> <p>Harness the power of artificial intelligence. Chatbots, automation, intelligent features that transform your business.</p> <ul class="service-features"> <li>ChatGPT / Claude integration</li> <li>Custom AI chatbots</li> <li>Workflow automation</li> <li>Data processing pipelines</li> <li>Smart content generation</li> </ul> </div> <div class="service-card"> <div class="service-icon">🛒</div> <div class="service-header"> <h3>E-Commerce</h3> <span class="service-price">$800+</span> </div> <p>Online stores that sell. From product catalogs to checkout, payment processing to inventory management.</p> <ul class="service-features"> <li>Shopify / WooCommerce</li> <li>Custom storefronts</li> <li>Payment integration</li> <li>Inventory management</li> <li>Order tracking</li> </ul> </div> <div class="service-card"> <div class="service-icon">🎨</div> <div class="service-header"> <h3>UI/UX Design</h3> <span class="service-price">$500+</span> </div> <p>User-centered design that delights. Research, wireframes, prototypes, and polished interfaces that users love.</p> <ul class="service-features"> <li>User research & analysis</li> <li>Wireframing</li> <li>Interactive prototypes</li> <li>Design systems</li> <li>Usability testing</li> </ul> </div> <div class="service-card"> <div class="service-icon">🔧</div> <div class="service-header"> <h3>Maintenance & Support</h3> <span class="service-price">$100/mo</span> </div> <p>Keep your site secure, updated, and performing at its best. Peace of mind with ongoing professional support.</p> <ul class="service-features"> <li>Security monitoring</li> <li>Performance optimization</li> <li>Content updates</li> <li>Backup management</li> <li>Priority support</li> </ul> </div> </div> </section> <!-- Process Section --> <section class="process-section"> <div class="section-header"> <div class="section-badge">HOW IT WORKS</div> <h2 class="section-title">The Process</h2> </div> <div class="process-grid"> <div class="process-step"> <div class="step-number">1</div> <h3>Discovery</h3> <p>We discuss your vision, goals, and requirements to create a clear project roadmap.</p> </div> <div class="process-step"> <div class="step-number">2</div> <h3>Design</h3> <p>Wireframes and mockups bring your vision to life before any code is written.</p> </div> <div class="process-step"> <div class="step-number">3</div> <h3>Build</h3> <p>Clean, modern code transforms designs into a fully functional website.</p> </div> <div class="process-step"> <div class="step-number">4</div> <h3>Launch</h3> <p>Testing, deployment, and handover. Your site goes live with full documentation.</p> </div> </div> </section> <!-- Tech Stack --> <section class="tech-section"> <div class="section-header"> <div class="section-badge">TECHNOLOGIES</div> <h2 class="section-title">Tech Stack</h2> </div> <div class="tech-grid"> <span class="tech-tag">React</span> <span class="tech-tag">TypeScript</span> <span class="tech-tag">Next.js</span> <span class="tech-tag">Node.js</span> <span class="tech-tag">Python</span> <span class="tech-tag">Go</span> <span class="tech-tag">PostgreSQL</span> <span class="tech-tag">MongoDB</span> <span class="tech-tag">Three.js</span> <span class="tech-tag">WebGL</span> <span class="tech-tag">GSAP</span> <span class="tech-tag">Tailwind CSS</span> <span class="tech-tag">Netlify</span> <span class="tech-tag">Vercel</span> <span class="tech-tag">AWS</span> <span class="tech-tag">Docker</span> </div> </section> <!-- CTA Section --> <section class="cta-section"> <div class="cta-box"> <h2 class="cta-title">Ready to Start Your Project?</h2> <p class="cta-text">Let's discuss your ideas and create something amazing together. Free consultation, no obligations.</p> <a href="/contact" class="cta-btn"> <span>Get in Touch</span> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M5 12h14M12 5l7 7-7 7"/> </svg> </a> </div> </section> <!-- Footer --> <footer> <p class="footer-text">© 2026 <span>ThatAIGuy</span> Web Development // Powered by <span>MEGAMIND</span> AGI</p> </footer> <script> // ============================================ // MOBILE MENU // ============================================ const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); const navLinks = document.querySelector('.nav-links'); mobileMenuBtn.addEventListener('click', () => { navLinks.classList.toggle('active'); }); document.querySelectorAll('.nav-links a').forEach(link => { link.addEventListener('click', () => { navLinks.classList.remove('active'); }); }); // ============================================ // THREE.JS - DNA HELIX (matching index) // ============================================ const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true, powerPreference: "high-performance" }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.setClearColor(0x000000, 0); document.getElementById('canvas-container').appendChild(renderer.domElement); camera.position.z = 50; camera.position.y = 5; // Sunset color palette const sunsetColors = [ 0xffc857, // Gold 0xf4721a, // Orange 0xd4442a, // Burnt orange 0x9c2935, // Crimson 0x6b2040, // Burgundy 0x4a1942, // Plum ]; function getSunsetColor(t) { const idx = Math.floor(t * (sunsetColors.length - 1)); return sunsetColors[Math.min(idx, sunsetColors.length - 1)]; } // ============================================ // STARFIELD // ============================================ const starCount = 2000; const starGeometry = new THREE.BufferGeometry(); const starPositions = new Float32Array(starCount * 3); const starColors = new Float32Array(starCount * 3); for (let i = 0; i < starCount; i++) { const i3 = i * 3; const radius = 100 + Math.random() * 200; const theta = Math.random() * Math.PI * 2; const phi = Math.acos(2 * Math.random() - 1); starPositions[i3] = radius * Math.sin(phi) * Math.cos(theta); starPositions[i3 + 1] = radius * Math.sin(phi) * Math.sin(theta); starPositions[i3 + 2] = radius * Math.cos(phi); // Warm star colors const colorChoice = Math.random(); if (colorChoice < 0.5) { starColors[i3] = 1.0; starColors[i3 + 1] = 0.85 + Math.random() * 0.15; starColors[i3 + 2] = 0.4 + Math.random() * 0.3; } else { starColors[i3] = 0.9; starColors[i3 + 1] = 0.8; starColors[i3 + 2] = 1.0; } } starGeometry.setAttribute('position', new THREE.BufferAttribute(starPositions, 3)); starGeometry.setAttribute('color', new THREE.BufferAttribute(starColors, 3)); const starMaterial = new THREE.PointsMaterial({ size: 1, vertexColors: true, transparent: true, opacity: 0.7 }); const stars = new THREE.Points(starGeometry, starMaterial); scene.add(stars); // ============================================ // DNA HELIX // ============================================ const helixGroup = new THREE.Group(); const numPoints = 100; const helixRadius = 8; const helixHeight = 60; const turns = 3; // Create strands const strand1Points = []; const strand2Points = []; for (let i = 0; i <= numPoints; i++) { const t = i / numPoints; const angle = t * Math.PI * 2 * turns; const y = (t - 0.5) * helixHeight; strand1Points.push(new THREE.Vector3( Math.cos(angle) * helixRadius, y, Math.sin(angle) * helixRadius )); strand2Points.push(new THREE.Vector3( Math.cos(angle + Math.PI) * helixRadius, y, Math.sin(angle + Math.PI) * helixRadius )); } // Strand materials const strandMaterial1 = new THREE.LineBasicMaterial({ color: 0xffc857, transparent: true, opacity: 0.8 }); const strandMaterial2 = new THREE.LineBasicMaterial({ color: 0x00d4ff, transparent: true, opacity: 0.8 }); const strand1Geometry = new THREE.BufferGeometry().setFromPoints(strand1Points); const strand2Geometry = new THREE.BufferGeometry().setFromPoints(strand2Points); helixGroup.add(new THREE.Line(strand1Geometry, strandMaterial1)); helixGroup.add(new THREE.Line(strand2Geometry, strandMaterial2)); // Cross bonds for (let i = 0; i < numPoints; i += 3) { const t = i / numPoints; const color = getSunsetColor(t); const bondMaterial = new THREE.LineBasicMaterial({ color: color, transparent: true, opacity: 0.6 }); const bondGeometry = new THREE.BufferGeometry().setFromPoints([ strand1Points[i], strand2Points[i] ]); helixGroup.add(new THREE.Line(bondGeometry, bondMaterial)); // Nodes at bond endpoints const nodeGeom = new THREE.SphereGeometry(0.4, 8, 8); const nodeMat = new THREE.MeshBasicMaterial({ color: color, transparent: true, opacity: 0.9 }); const node1 = new THREE.Mesh(nodeGeom, nodeMat); node1.position.copy(strand1Points[i]); helixGroup.add(node1); const node2 = new THREE.Mesh(nodeGeom, nodeMat.clone()); node2.position.copy(strand2Points[i]); helixGroup.add(node2); } scene.add(helixGroup); // ============================================ // LIGHTING // ============================================ const ambientLight = new THREE.AmbientLight(0xffffff, 0.3); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffc857, 0.8); directionalLight.position.set(10, 20, 10); scene.add(directionalLight); // ============================================ // ANIMATION // ============================================ let time = 0; function animate() { requestAnimationFrame(animate); time += 0.01; // Rotate helix helixGroup.rotation.y += 0.003; helixGroup.rotation.x = Math.sin(time * 0.5) * 0.05; // Rotate stars slowly stars.rotation.y += 0.0001; renderer.render(scene, camera); } animate(); // Resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // ============================================ // SCROLL ANIMATIONS // ============================================ const observerOptions = { threshold: 0.1, rootMargin: '0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } }); }, observerOptions); // Observe service cards document.querySelectorAll('.service-card').forEach((card, index) => { card.style.opacity = '0'; card.style.transform = 'translateY(30px)'; card.style.transition = `all 0.6s ease ${index * 0.1}s`; observer.observe(card); }); // Observe process steps document.querySelectorAll('.process-step').forEach((step, index) => { step.style.opacity = '0'; step.style.transform = 'translateY(30px)'; step.style.transition = `all 0.6s ease ${index * 0.15}s`; observer.observe(step); }); // Observe tech tags document.querySelectorAll('.tech-tag').forEach((tag, index) => { tag.style.opacity = '0'; tag.style.transform = 'translateY(20px)'; tag.style.transition = `all 0.4s ease ${index * 0.03}s`; observer.observe(tag); }); </script> </body> </html>

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