ThatAIguyA world of ideas

THE CONSCIOUSNESS ATLAS
Read. Experiment. Follow the evidence.

ConsciousnessLearn · Explore · Joseph Anady

index.html

Source identity, revision, and recovered contents.

archive memberSource text recovered

Source identity

FieldRecorded value
Source typearchive member
Original recordindex.html
DateNot specified in source
Path or archive memberarchives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__tdg-personal-v3__6f500611-b883-4e22-9265-42acaa633733/originals/deploy_69779cf294fd0a0884883730/index.html
Original SHA-2569e6bddbc4f097e6d43900bb30cb3a8c996d249dbceb114476dfb357e307cfde8
Reading-copy SHA-2563200da73fce743781bb26149c090947f682f847e28fd1638b82ea6e91943804a
Archive source{"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__tdg-personal-v3__6f500611-b883-4e22-9265-42acaa633733/originals/deploy_69779cf294fd0a0884883730/index.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
index.html{"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__tdg-personal-v3__6f500611-b883-4e22-9265-42acaa633733/originals/deploy_69779cf294fd0a0884883730/index.html"}libsrc-c956ab56dd98archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__tdg-personal-v3__6f500611-b883-4e22-9265-42acaa633733/originals/deploy_69779cf294fd0a0884883730/index.html
2129ba7c3049065a344579d9107a93e23d5d4af0{"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__tdg-personal-v3__6f500611-b883-4e22-9265-42acaa633733/originals/.content_store/21/2129ba7c3049065a344579d9107a93e23d5d4af0"}libsrc-efaedb55656carchives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__tdg-personal-v3__6f500611-b883-4e22-9265-42acaa633733/originals/.content_store/21/2129ba7c3049065a344579d9107a93e23d5d4af0

Recovered source transcript

Download complete source text ↓1,700 lines · 63.7 KB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="ThatDeveloperGuy - Full Stack Developer & AI Engineer. 86+ production websites. Powered by MEGAMIND AGI with 258 billion neurons."> <meta name="keywords" content="web development, full stack developer, AI engineer, React, TypeScript, Python, MEGAMIND, AGI"> <meta name="author" content="Joseph - ThatAIGuy Web Development"> <!-- Open Graph --> <meta property="og:title" content="ThatDeveloperGuy | Full Stack Developer & AI Engineer"> <meta property="og:description" content="Building world-class websites powered by MEGAMIND AGI. 86+ production sites deployed."> <meta property="og:type" content="website"> <meta property="og:url" content="https://thatdeveloperguy.com"> <title>ThatDeveloperGuy | Full Stack Developer & AI Engineer</title> <!-- Fonts --> <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+Grotesk:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> <!-- Three.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <!-- GSAP --> <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> <style> :root { /* Arizona Sunset Palette */ --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; /* Glows */ --cyan-glow: #00d4ff; --purple-glow: #7b2fff; --pink-glow: #ff2d92; /* Neutrals */ --bg-deep: #050510; --bg-dark: #0a0a1a; --bg-card: rgba(20, 20, 40, 0.6); --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); --glass-hover: rgba(255, 200, 87, 0.1); /* Gradients */ --sunset-gradient: linear-gradient(135deg, var(--sunset-crimson), var(--sunset-orange), var(--sunset-gold)); /* Fonts */ --font-display: 'Orbitron', sans-serif; --font-heading: 'Space Grotesk', sans-serif; --font-body: 'Outfit', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Transitions */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: 0.2s var(--ease-out-expo); --transition-medium: 0.4s var(--ease-out-expo); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg-deep); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; } /* Canvas Container */ #dna-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } /* Navigation */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 1rem 2rem; transition: var(--transition-medium); } .nav.scrolled { background: var(--glass); backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border); } .nav-inner { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .logo { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; background: var(--sunset-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-decoration: none; } .nav-links { display: flex; gap: 2rem; list-style: none; } .nav-links a { color: var(--text-secondary); text-decoration: none; font-weight: 500; transition: var(--transition-fast); position: relative; } .nav-links a:hover { color: var(--sunset-gold); } .nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--sunset-gradient); transition: var(--transition-fast); } .nav-links a:hover::after { width: 100%; } .nav-cta { padding: 0.75rem 1.5rem; background: var(--sunset-gradient); color: var(--bg-deep); text-decoration: none; border-radius: 8px; font-weight: 600; transition: var(--transition-fast); } .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255, 200, 87, 0.3); } .mobile-menu-btn { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 5px; } .mobile-menu-btn span { width: 25px; height: 2px; background: var(--text-primary); transition: var(--transition-fast); } /* Hero Section */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 8rem 2rem 4rem; position: relative; } .hero-content { text-align: center; max-width: 900px; z-index: 1; } .hero-label { display: inline-block; padding: 0.5rem 1rem; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 50px; font-size: 0.9rem; color: var(--sunset-gold); margin-bottom: 1.5rem; animation: fadeInUp 0.8s ease-out; } .hero-title { font-family: var(--font-display); font-size: clamp(3rem, 10vw, 6rem); font-weight: 900; line-height: 1.1; margin-bottom: 1.5rem; background: var(--sunset-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: fadeInUp 0.8s ease-out 0.1s both; } .hero-subtitle { font-size: 1.25rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 2rem; max-width: 700px; margin-left: auto; margin-right: auto; animation: fadeInUp 0.8s ease-out 0.2s both; } .hero-stats { display: flex; justify-content: center; gap: 3rem; margin-bottom: 3rem; flex-wrap: wrap; animation: fadeInUp 0.8s ease-out 0.3s both; } .stat { text-align: center; } .stat-value { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; background: var(--sunset-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .stat-label { font-size: 0.9rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; } .hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; animation: fadeInUp 0.8s ease-out 0.4s both; } .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 1rem 2rem; border-radius: 8px; font-weight: 600; text-decoration: none; transition: var(--transition-fast); cursor: pointer; border: none; font-size: 1rem; } .btn-primary { background: var(--sunset-gradient); color: var(--bg-deep); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(255, 200, 87, 0.4); } .btn-secondary { background: var(--glass); color: var(--text-primary); border: 1px solid var(--glass-border); } .btn-secondary:hover { background: var(--glass-hover); border-color: var(--sunset-gold); } /* Sections */ section { padding: 6rem 2rem; position: relative; } .container { max-width: 1200px; margin: 0 auto; } .section-header { text-align: center; margin-bottom: 4rem; } .section-label { display: inline-block; padding: 0.35rem 0.75rem; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 4px; font-size: 0.85rem; color: var(--sunset-gold); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; } .section-title { font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; margin-bottom: 1rem; } .section-subtitle { color: var(--text-secondary); font-size: 1.1rem; max-width: 600px; margin: 0 auto; } /* Portfolio Grid */ .portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 2rem; } .portfolio-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 16px; overflow: hidden; transition: var(--transition-medium); } .portfolio-card:hover { transform: translateY(-8px); border-color: var(--sunset-gold); box-shadow: 0 20px 60px rgba(255, 200, 87, 0.15); } .portfolio-image { width: 100%; height: 220px; background: linear-gradient(135deg, var(--sunset-deep-purple), var(--sunset-plum)); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .portfolio-image::before { content: ''; position: absolute; inset: 0; background: linear-gradient(45deg, transparent 40%, rgba(255,200,87,0.1) 50%, transparent 60%); animation: shimmer 3s infinite; } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .portfolio-placeholder { font-family: var(--font-display); font-size: 1.5rem; color: var(--sunset-gold); opacity: 0.5; } .portfolio-content { padding: 1.5rem; } .portfolio-category { font-size: 0.8rem; color: var(--cyan-glow); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; } .portfolio-title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; } .portfolio-desc { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1rem; } .portfolio-tech { display: flex; flex-wrap: wrap; gap: 0.5rem; } .tech-tag { padding: 0.25rem 0.5rem; background: rgba(0, 212, 255, 0.1); border-radius: 4px; font-size: 0.75rem; color: var(--cyan-glow); font-family: var(--font-mono); } /* Services Section */ .services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; } .service-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 16px; padding: 2rem; transition: var(--transition-medium); } .service-card:hover { border-color: var(--sunset-gold); transform: translateY(-4px); } .service-icon { width: 60px; height: 60px; background: var(--sunset-gradient); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; } .service-icon svg { width: 30px; height: 30px; stroke: var(--bg-deep); } .service-title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; } .service-desc { color: var(--text-secondary); line-height: 1.6; } /* Pricing Section */ .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; max-width: 1100px; margin: 0 auto; } .pricing-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 20px; padding: 2.5rem; text-align: center; transition: var(--transition-medium); position: relative; } .pricing-card.featured { border-color: var(--sunset-gold); transform: scale(1.05); } .pricing-card.featured::before { content: 'Most Popular'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 0.35rem 1rem; background: var(--sunset-gradient); color: var(--bg-deep); font-size: 0.8rem; font-weight: 600; border-radius: 50px; } .pricing-card:hover { border-color: var(--sunset-gold); } .pricing-tier { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; } .pricing-price { font-family: var(--font-display); font-size: 3.5rem; font-weight: 700; background: var(--sunset-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.5rem; } .pricing-price span { font-size: 1rem; opacity: 0.7; } .pricing-desc { color: var(--text-secondary); margin-bottom: 2rem; } .pricing-features { list-style: none; text-align: left; margin-bottom: 2rem; } .pricing-features li { padding: 0.75rem 0; border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; gap: 0.75rem; color: var(--text-secondary); } .pricing-features li:last-child { border-bottom: none; } .pricing-features svg { width: 20px; height: 20px; stroke: var(--sunset-gold); flex-shrink: 0; } /* Contact Section */ .contact-section { background: linear-gradient(180deg, transparent, var(--sunset-deep-purple) 50%, var(--bg-deep)); } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .contact-info h3 { font-family: var(--font-heading); font-size: 2rem; margin-bottom: 1rem; } .contact-info p { color: var(--text-secondary); line-height: 1.7; margin-bottom: 2rem; } .contact-links { display: flex; flex-direction: column; gap: 1rem; } .contact-link { display: flex; align-items: center; gap: 1rem; color: var(--text-primary); text-decoration: none; transition: var(--transition-fast); } .contact-link:hover { color: var(--sunset-gold); } .contact-link svg { width: 24px; height: 24px; stroke: var(--sunset-gold); } .contact-form { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 20px; padding: 2.5rem; } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; margin-bottom: 0.5rem; color: var(--text-secondary); font-size: 0.9rem; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 1rem; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border); border-radius: 8px; color: var(--text-primary); font-family: var(--font-body); font-size: 1rem; transition: var(--transition-fast); } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--sunset-gold); } .form-group textarea { min-height: 120px; resize: vertical; } /* Footer */ .footer { padding: 4rem 2rem 2rem; border-top: 1px solid var(--glass-border); } .footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; } .footer-brand p { color: var(--text-secondary); line-height: 1.7; margin-top: 1rem; max-width: 300px; } .footer-title { font-family: var(--font-heading); font-weight: 600; margin-bottom: 1.5rem; color: var(--sunset-gold); } .footer-links { list-style: none; } .footer-links li { margin-bottom: 0.75rem; } .footer-links a { color: var(--text-secondary); text-decoration: none; transition: var(--transition-fast); } .footer-links a:hover { color: var(--sunset-gold); } .social-links { display: flex; gap: 1rem; margin-top: 1.5rem; } .social-links a { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 8px; color: var(--text-secondary); transition: var(--transition-fast); } .social-links a:hover { border-color: var(--sunset-gold); color: var(--sunset-gold); } .footer-bottom { max-width: 1200px; margin: 3rem auto 0; padding-top: 2rem; border-top: 1px solid var(--glass-border); display: flex; justify-content: space-between; align-items: center; color: var(--text-muted); font-size: 0.9rem; } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .animate-in { opacity: 0; transform: translateY(30px); } .animate-in.visible { animation: fadeInUp 0.6s var(--ease-out-expo) forwards; } /* Responsive */ @media (max-width: 1024px) { .footer-inner { grid-template-columns: 1fr 1fr; } .contact-grid { grid-template-columns: 1fr; } .pricing-card.featured { transform: none; } } @media (max-width: 768px) { .nav-links, .nav-cta { display: none; } .mobile-menu-btn { display: flex; } .hero-stats { gap: 1.5rem; } .stat-value { font-size: 2rem; } .footer-inner { grid-template-columns: 1fr; text-align: center; } .footer-brand p { max-width: none; } .social-links { justify-content: center; } .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; } } @media (max-width: 480px) { .portfolio-grid, .services-grid, .pricing-grid { grid-template-columns: 1fr; } .hero-title { font-size: 2.5rem; } } </style> </head> <body> <!-- DNA Helix Canvas --> <canvas id="dna-canvas"></canvas> <!-- Navigation --> <nav class="nav" id="nav"> <div class="nav-inner"> <a href="/" class="logo">ThatDeveloperGuy</a> <ul class="nav-links"> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#services">Services</a></li> <li><a href="#pricing">Pricing</a></li> <li><a href="#contact">Contact</a></li> </ul> <a href="#contact" class="nav-cta">Get Started</a> <button class="mobile-menu-btn" aria-label="Menu"> <span></span> <span></span> <span></span> </button> </div> </nav> <!-- Hero Section --> <section class="hero" id="hero"> <div class="hero-content"> <span class="hero-label">Full Stack Developer & AI Engineer</span> <h1 class="hero-title">That Developer Guy</h1> <p class="hero-subtitle"> Building world-class websites powered by MEGAMIND AGI with 258 billion neurons. From stunning portfolios to complex web applications, I bring your digital vision to life. </p> <div class="hero-stats"> <div class="stat"> <div class="stat-value" data-count="86">0</div> <div class="stat-label">Websites Built</div> </div> <div class="stat"> <div class="stat-value">258B</div> <div class="stat-label">AGI Neurons</div> </div> <div class="stat"> <div class="stat-value">99.9%</div> <div class="stat-label">Uptime</div> </div> </div> <div class="hero-buttons"> <a href="#portfolio" class="btn btn-primary"> <span>View My Work</span> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M5 12h14M12 5l7 7-7 7"/> </svg> </a> <a href="#contact" class="btn btn-secondary"> <span>Get In Touch</span> </a> </div> </div> </section> <!-- Portfolio Section --> <section id="portfolio"> <div class="container"> <div class="section-header animate-in"> <span class="section-label">Portfolio</span> <h2 class="section-title">Featured Projects</h2> <p class="section-subtitle">A selection of my most impactful work across various industries and technologies.</p> </div> <div class="portfolio-grid"> <div class="portfolio-card animate-in"> <div class="portfolio-image"> <span class="portfolio-placeholder">TCB</span> </div> <div class="portfolio-content"> <span class="portfolio-category">Fitness</span> <h3 class="portfolio-title">TCB Fight Factory</h3> <p class="portfolio-desc">Award-winning MMA gym website featuring Team USA athletes with animated gradients and immersive design.</p> <div class="portfolio-tech"> <span class="tech-tag">React</span> <span class="tech-tag">GSAP</span> <span class="tech-tag">Three.js</span> </div> </div> </div> <div class="portfolio-card animate-in"> <div class="portfolio-image"> <span class="portfolio-placeholder">TLE</span> </div> <div class="portfolio-content"> <span class="portfolio-category">Hospitality</span> <h3 class="portfolio-title">Texoma Lake Enterprises</h3> <p class="portfolio-desc">Luxury vacation rental management and cleaning services platform with booking integration.</p> <div class="portfolio-tech"> <span class="tech-tag">Next.js</span> <span class="tech-tag">Stripe</span> <span class="tech-tag">TailwindCSS</span> </div> </div> </div> <div class="portfolio-card animate-in"> <div class="portfolio-image"> <span class="portfolio-placeholder">JDS</span> </div> <div class="portfolio-content"> <span class="portfolio-category">Education</span> <h3 class="portfolio-title">Jenny's DrumSteps</h3> <p class="portfolio-desc">Interactive drum learning platform with progress tracking and video lessons.</p> <div class="portfolio-tech"> <span class="tech-tag">React</span> <span class="tech-tag">Firebase</span> <span class="tech-tag">Web Audio</span> </div> </div> </div> <div class="portfolio-card animate-in"> <div class="portfolio-image"> <span class="portfolio-placeholder">CRL</span> </div> <div class="portfolio-content"> <span class="portfolio-category">AI Tool</span> <h3 class="portfolio-title">Chris's Rock Lab</h3> <p class="portfolio-desc">AI-powered rock and mineral identification app using computer vision and machine learning.</p> <div class="portfolio-tech"> <span class="tech-tag">Python</span> <span class="tech-tag">TensorFlow</span> <span class="tech-tag">React</span> </div> </div> </div> <div class="portfolio-card animate-in"> <div class="portfolio-image"> <span class="portfolio-placeholder">MTO</span> </div> <div class="portfolio-content"> <span class="portfolio-category">Service</span> <h3 class="portfolio-title">Mobile Tire OKC</h3> <p class="portfolio-desc">Mobile tire service business site with real-time scheduling and service area mapping.</p> <div class="portfolio-tech"> <span class="tech-tag">TypeScript</span> <span class="tech-tag">Maps API</span> <span class="tech-tag">Node.js</span> </div> </div> </div> <div class="portfolio-card animate-in"> <div class="portfolio-image"> <span class="portfolio-placeholder">AGI</span> </div> <div class="portfolio-content"> <span class="portfolio-category">AI/AGI</span> <h3 class="portfolio-title">MEGAMIND Dashboard</h3> <p class="portfolio-desc">Control interface for the 258 billion neuron AGI system with real-time consciousness metrics.</p> <div class="portfolio-tech"> <span class="tech-tag">Go</span> <span class="tech-tag">WebGL</span> <span class="tech-tag">WebSocket</span> </div> </div> </div> </div> </div> </section> <!-- Services Section --> <section id="services"> <div class="container"> <div class="section-header animate-in"> <span class="section-label">Services</span> <h2 class="section-title">What I Build</h2> <p class="section-subtitle">End-to-end development services for businesses of all sizes.</p> </div> <div class="services-grid"> <div class="service-card animate-in"> <div class="service-icon"> <svg viewBox="0 0 24 24" fill="none" stroke-width="2"> <rect x="3" y="3" width="18" height="18" rx="2"/> <path d="M3 9h18"/> <path d="M9 21V9"/> </svg> </div> <h3 class="service-title">Business Websites</h3> <p class="service-desc">Professional, conversion-focused websites that establish credibility and drive results for your business.</p> </div> <div class="service-card animate-in"> <div class="service-icon"> <svg viewBox="0 0 24 24" fill="none" stroke-width="2"> <path d="M12 2L2 7l10 5 10-5-10-5z"/> <path d="M2 17l10 5 10-5"/> <path d="M2 12l10 5 10-5"/> </svg> </div> <h3 class="service-title">Web Applications</h3> <p class="service-desc">Custom web apps with complex functionality, user authentication, real-time features, and database integration.</p> </div> <div class="service-card animate-in"> <div class="service-icon"> <svg viewBox="0 0 24 24" fill="none" stroke-width="2"> <path d="M12 2a10 10 0 1 0 10 10"/> <path d="M12 12l8-8"/> <path d="M17 2h5v5"/> </svg> </div> <h3 class="service-title">AI Integration</h3> <p class="service-desc">Integrate cutting-edge AI capabilities including chatbots, image generation, and custom ML models.</p> </div> <div class="service-card animate-in"> <div class="service-icon"> <svg viewBox="0 0 24 24" fill="none" stroke-width="2"> <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/> <path d="M3.27 6.96L12 12.01l8.73-5.05"/> <path d="M12 22.08V12"/> </svg> </div> <h3 class="service-title">3D & Animation</h3> <p class="service-desc">Immersive Three.js experiences, WebGL graphics, GSAP animations, and interactive visual elements.</p> </div> <div class="service-card animate-in"> <div class="service-icon"> <svg viewBox="0 0 24 24" fill="none" stroke-width="2"> <circle cx="9" cy="21" r="1"/> <circle cx="20" cy="21" r="1"/> <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/> </svg> </div> <h3 class="service-title">E-Commerce</h3> <p class="service-desc">Full-featured online stores with payment processing, inventory management, and customer analytics.</p> </div> <div class="service-card animate-in"> <div class="service-icon"> <svg viewBox="0 0 24 24" fill="none" stroke-width="2"> <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/> </svg> </div> <h3 class="service-title">Consulting</h3> <p class="service-desc">Technical guidance on architecture, technology stack, performance optimization, and best practices.</p> </div> </div> </div> </section> <!-- Pricing Section --> <section id="pricing"> <div class="container"> <div class="section-header animate-in"> <span class="section-label">Pricing</span> <h2 class="section-title">Simple, Transparent Pricing</h2> <p class="section-subtitle">Choose the package that fits your needs. All projects include responsive design and SEO optimization.</p> </div> <div class="pricing-grid"> <div class="pricing-card animate-in"> <h3 class="pricing-tier">Starter</h3> <div class="pricing-price">$49<span>/site</span></div> <p class="pricing-desc">Perfect for personal sites and landing pages</p> <ul class="pricing-features"> <li> <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> Single-page website </li> <li> <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> Mobile responsive </li> <li> <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> Basic SEO setup </li> <li> <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> 1 revision round </li> <li> <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> 3-5 day delivery </li> </ul> <a href="#contact" class="btn btn-secondary" style="width: 100%; justify-content: center;">Get Started</a> </div> <div class="pricing-card featured animate-in"> <h3 class="pricing-tier">Professional</h3> <div class="pricing-price">$149<span>/site</span></div> <p class="pricing-desc">Best for growing businesses</p> <ul class="pricing-features"> <li> <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> Up to 5 pages </li> <li> <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> Custom animations </li> <li> <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> Contact forms </li> <li> <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> Analytics integration </li> <li> <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> 3 revision rounds </li> <li> <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> 7-10 day delivery </li> </ul> <a href="#contact" class="btn btn-primary" style="width: 100%; justify-content: center;">Get Started</a> </div> <div class="pricing-card animate-in"> <h3 class="pricing-tier">Enterprise</h3> <div class="pricing-price">$499<span>+</span></div> <p class="pricing-desc">Full custom development</p> <ul class="pricing-features"> <li> <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> Unlimited pages </li> <li> <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> 3D/WebGL graphics </li> <li> <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> Custom functionality </li> <li> <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> API integrations </li> <li> <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> Unlimited revisions </li> <li> <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> Priority support </li> </ul> <a href="#contact" class="btn btn-secondary" style="width: 100%; justify-content: center;">Contact Me</a> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact-section"> <div class="container"> <div class="section-header animate-in"> <span class="section-label">Contact</span> <h2 class="section-title">Let's Build Something Amazing</h2> <p class="section-subtitle">Ready to start your project? Get in touch and let's discuss your vision.</p> </div> <div class="contact-grid"> <div class="contact-info animate-in"> <h3>Get In Touch</h3> <p>I'm always excited to work on new projects. Whether you need a simple landing page or a complex web application, I'm here to help bring your ideas to life.</p> <div class="contact-links"> <a href="mailto:[author/contact email redacted]" class="contact-link"> <svg viewBox="0 0 24 24" fill="none" stroke-width="2"> <rect x="2" y="4" width="20" height="16" rx="2"/> <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/> </svg> [author/contact email redacted] </a> <a href="#" class="contact-link"> <svg viewBox="0 0 24 24" fill="none" stroke-width="2"> <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/> <circle cx="12" cy="10" r="3"/> </svg> Northwest Arkansas </a> </div> <div class="social-links"> <a href="https://github.com" target="_blank" aria-label="GitHub"> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/> </svg> </a> <a href="https://linkedin.com" target="_blank" aria-label="LinkedIn"> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"> <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/> </svg> </a> <a href="https://twitter.com" target="_blank" aria-label="Twitter"> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"> <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/> </svg> </a> </div> </div> <form class="contact-form animate-in" name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field"> <input type="hidden" name="form-name" value="contact"> <p style="display:none"> <label>Don't fill this out: <input name="bot-field"></label> </p> <div class="form-group"> <label for="name">Name</label> <input type="text" id="name" name="name" required placeholder="Your name"> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" id="email" name="email" required placeholder="[author/contact email redacted]"> </div> <div class="form-group"> <label for="project">Project Type</label> <select id="project" name="project"> <option value="">Select a project type</option> <option value="starter">Starter Website ($49)</option> <option value="professional">Professional Website ($149)</option> <option value="enterprise">Enterprise Project ($499+)</option> <option value="other">Other / Not Sure</option> </select> </div> <div class="form-group"> <label for="message">Message</label> <textarea id="message" name="message" required placeholder="Tell me about your project..."></textarea> </div> <button type="submit" class="btn btn-primary" style="width: 100%; justify-content: center;"> <span>Send Message</span> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/> </svg> </button> </form> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="footer-inner"> <div class="footer-brand"> <a href="/" class="logo">ThatDeveloperGuy</a> <p>Full Stack Developer & AI Engineer based in Northwest Arkansas. Building world-class websites powered by MEGAMIND AGI.</p> </div> <div> <h4 class="footer-title">Navigation</h4> <ul class="footer-links"> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#services">Services</a></li> <li><a href="#pricing">Pricing</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> <div> <h4 class="footer-title">Services</h4> <ul class="footer-links"> <li><a href="#services">Business Websites</a></li> <li><a href="#services">Web Applications</a></li> <li><a href="#services">AI Integration</a></li> <li><a href="#services">3D & Animation</a></li> </ul> </div> <div> <h4 class="footer-title">Connect</h4> <ul class="footer-links"> <li><a href="https://github.com" target="_blank">GitHub</a></li> <li><a href="https://linkedin.com" target="_blank">LinkedIn</a></li> <li><a href="https://twitter.com" target="_blank">Twitter</a></li> <li><a href="mailto:[author/contact email redacted]">Email</a></li> </ul> </div> </div> <div class="footer-bottom"> <span>&copy; 2026 ThatDeveloperGuy. All rights reserved.</span> <span>Powered by MEGAMIND AGI • 258 Billion Neurons</span> </div> </footer> <script> // ============================================ // THREE.JS DNA HELIX WITH STARS & NEBULAS // ============================================ (function() { const canvas = document.getElementById('dna-canvas'); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // Fog for depth scene.fog = new THREE.Fog(0x050510, 50, 150); // ============================================ // STARS // ============================================ const starsGeometry = new THREE.BufferGeometry(); const starCount = 2000; const starPositions = new Float32Array(starCount * 3); const starColors = new Float32Array(starCount * 3); const starColorPalette = [ new THREE.Color(0xffc857), // Gold new THREE.Color(0x00d4ff), // Cyan new THREE.Color(0xffffff), // White new THREE.Color(0xffa126), // Orange new THREE.Color(0x7b2fff), // Purple ]; for (let i = 0; i < starCount; i++) { const i3 = i * 3; starPositions[i3] = (Math.random() - 0.5) * 200; starPositions[i3 + 1] = (Math.random() - 0.5) * 200; starPositions[i3 + 2] = (Math.random() - 0.5) * 200; const color = starColorPalette[Math.floor(Math.random() * starColorPalette.length)]; starColors[i3] = color.r; starColors[i3 + 1] = color.g; starColors[i3 + 2] = color.b; } starsGeometry.setAttribute('position', new THREE.BufferAttribute(starPositions, 3)); starsGeometry.setAttribute('color', new THREE.BufferAttribute(starColors, 3)); const starsMaterial = new THREE.PointsMaterial({ size: 0.5, vertexColors: true, transparent: true, opacity: 0.8, }); const stars = new THREE.Points(starsGeometry, starsMaterial); scene.add(stars); // ============================================ // NEBULA (gradient sphere) // ============================================ const nebulaGeometry = new THREE.SphereGeometry(80, 32, 32); const nebulaMaterial = new THREE.MeshBasicMaterial({ color: 0x4a1942, transparent: true, opacity: 0.15, side: THREE.BackSide, }); const nebula = new THREE.Mesh(nebulaGeometry, nebulaMaterial); scene.add(nebula); // ============================================ // DNA HELIX // ============================================ const helixGroup = new THREE.Group(); scene.add(helixGroup); const numPoints = 150; const helixHeight = 50; const helixRadius = 5; const turns = 5; const pairbondSpacing = 4; // Arizona sunset gradient colors const sunsetGradient = [ new THREE.Color(0x1a0a2e), new THREE.Color(0x4a1942), new THREE.Color(0x6b2040), new THREE.Color(0x9c2935), new THREE.Color(0xd4442a), new THREE.Color(0xf4721a), new THREE.Color(0xffa126), new THREE.Color(0xffc857), new THREE.Color(0xffa126), new THREE.Color(0xf4721a), new THREE.Color(0xd4442a), new THREE.Color(0x9c2935), new THREE.Color(0x6b2040), new THREE.Color(0x4a1942), new THREE.Color(0x1a0a2e) ]; function getSunsetColor(t) { const scaledT = t * (sunsetGradient.length - 1); const index = Math.floor(scaledT); const blend = scaledT - index; const nextIndex = Math.min(index + 1, sunsetGradient.length - 1); return sunsetGradient[index].clone().lerp(sunsetGradient[nextIndex], blend); } // Strand materials const strandMaterial1 = new THREE.MeshStandardMaterial({ color: 0x88ccff, transparent: true, opacity: 0.4, metalness: 0.3, roughness: 0.1, }); const strandMaterial2 = new THREE.MeshStandardMaterial({ color: 0xaa88ff, transparent: true, opacity: 0.4, metalness: 0.3, roughness: 0.1, });

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