Source identity
| Field | Recorded value |
|---|---|
| Source type | archive member |
| Original record | index.html |
| Date | Not specified in source |
| Path or archive member | archives/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-256 | 9e6bddbc4f097e6d43900bb30cb3a8c996d249dbceb114476dfb357e307cfde8 |
| Reading-copy SHA-256 | 3200da73fce743781bb26149c090947f682f847e28fd1638b82ea6e91943804a |
| 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 record | Branch or archive | Revision / identifier | Original 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-c956ab56dd98 | archives/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-efaedb55656c | archives/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>© 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,
});