Source identity
| Field | Recorded value |
|---|---|
| Source type | archive member |
| Original record | contact.html |
| Date | Not specified in source |
| Path or archive member | archives/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/contact.html |
| Original SHA-256 | 60f69b1fa1a84c6fd5f60368c1e8eb26395ce8946a5a3c0a3937fd81a10e9d58 |
| Reading-copy SHA-256 | 116a805a4e7919fe333e5fab615c4beb2385aa26a3ee17835041c4d8b672eafa |
| 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/contact.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 |
|---|---|---|---|
| contact.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/contact.html"} | libsrc-db31c646e893 | archives/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/contact.html |
| 94e3714dd6984b357be7d35a4b29d6f7095afa06 | {"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/94/94e3714dd6984b357be7d35a4b29d6f7095afa06"} | libsrc-debb45e9ce3f | archives/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/94/94e3714dd6984b357be7d35a4b29d6f7095afa06 |
Recovered source transcript
Download complete source text ↓783 lines · 25.2 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact | ThatAIGuy</title>
<meta name="description" content="Get in touch for web development, AI integration, and custom solutions. Northwest Arkansas.">
<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=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
<style>
:root {
--neon-cyan: #00f5ff;
--neon-magenta: #ff00ff;
--neon-green: #39ff14;
--dark-bg: #0a0a0f;
--darker-bg: #050508;
--text-primary: #ffffff;
--text-secondary: rgba(255, 255, 255, 0.7);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Rajdhani', sans-serif;
background: var(--darker-bg);
color: var(--text-primary);
min-height: 100vh;
overflow-x: hidden;
line-height: 1.7;
}
/* Background Animation - Same as Index */
.bg-animation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
background:
radial-gradient(ellipse at 20% 30%, rgba(0, 245, 255, 0.1) 0%, transparent 50%),
radial-gradient(ellipse at 80% 70%, rgba(255, 0, 255, 0.1) 0%, transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(57, 255, 20, 0.03) 0%, transparent 70%);
animation: bgPulse 10s ease-in-out infinite;
}
@keyframes bgPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.8; }
}
/* Grid Overlay - Same as Index */
.grid-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-image:
linear-gradient(rgba(0, 245, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 245, 255, 0.03) 1px, transparent 1px);
background-size: 50px 50px;
pointer-events: none;
}
/* Floating Particles - Same as Index */
.particle {
position: fixed;
width: 4px;
height: 4px;
background: var(--neon-cyan);
border-radius: 50%;
pointer-events: none;
opacity: 0;
animation: float 10s infinite ease-in-out;
box-shadow: 0 0 10px var(--neon-cyan);
}
@keyframes float {
0%, 100% {
transform: translateY(100vh) scale(0);
opacity: 0;
}
10% { opacity: 0.8; }
90% { opacity: 0.8; }
100% {
transform: translateY(-100vh) scale(1);
opacity: 0;
}
}
/* Data Stream Effect */
.data-stream {
position: fixed;
top: 0;
width: 1px;
height: 100%;
background: linear-gradient(180deg, transparent, var(--neon-cyan), transparent);
opacity: 0.3;
animation: streamDown 3s linear infinite;
}
@keyframes streamDown {
0% { transform: translateY(-100%); }
100% { transform: translateY(100%); }
}
/* Navigation */
nav {
position: fixed;
top: 0;
width: 100%;
padding: 1.5rem 5%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
background: rgba(5, 5, 8, 0.9);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(0, 245, 255, 0.1);
}
.logo {
font-family: 'Orbitron', sans-serif;
font-size: 1.6rem;
font-weight: 900;
background: linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-decoration: none;
animation: gradientShift 4s ease infinite;
background-size: 200% 200%;
}
@keyframes gradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.nav-links {
display: flex;
gap: 3rem;
list-style: none;
}
.nav-links a {
font-family: 'Share Tech Mono', monospace;
font-size: 0.9rem;
text-decoration: none;
color: rgba(255, 255, 255, 0.6);
letter-spacing: 0.15em;
transition: all 0.3s ease;
}
.nav-links a:hover,
.nav-links a.active {
color: var(--neon-cyan);
text-shadow: 0 0 20px var(--neon-cyan);
}
.nav-cta {
font-family: 'Share Tech Mono', monospace;
font-size: 0.85rem;
padding: 0.8rem 1.5rem;
background: linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta));
color: var(--darker-bg);
text-decoration: none;
font-weight: 600;
transition: all 0.4s ease;
}
.nav-cta:hover {
box-shadow: 0 0 40px var(--neon-cyan);
transform: scale(1.05);
}
/* Main Content */
main {
position: relative;
z-index: 10;
min-height: 100vh;
display: flex;
align-items: center;
padding-top: 80px;
}
/* Contact Container */
.contact-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 4rem 5%;
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 5rem;
align-items: start;
}
/* Contact Info */
.contact-info {
position: relative;
}
.contact-badge {
display: inline-block;
font-family: 'Share Tech Mono', monospace;
font-size: 0.7rem;
padding: 0.4rem 1rem;
border: 1px solid var(--neon-cyan);
color: var(--neon-cyan);
letter-spacing: 0.2em;
margin-bottom: 1.5rem;
}
.contact-title {
font-family: 'Orbitron', sans-serif;
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 900;
margin-bottom: 0.5rem;
line-height: 1.1;
}
.contact-title .gradient {
background: linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.contact-subtitle {
font-size: 1.1rem;
color: var(--text-secondary);
margin-bottom: 3rem;
max-width: 400px;
}
/* Contact Items */
.contact-item {
display: flex;
align-items: flex-start;
gap: 1.25rem;
margin-bottom: 2rem;
transition: all 0.3s ease;
}
.contact-item:hover {
transform: translateX(10px);
}
.contact-icon {
width: 60px;
height: 60px;
background: rgba(0, 245, 255, 0.05);
border: 1px solid rgba(0, 245, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
flex-shrink: 0;
transition: all 0.3s ease;
}
.contact-item:hover .contact-icon {
background: rgba(0, 245, 255, 0.1);
border-color: var(--neon-cyan);
box-shadow: 0 0 20px rgba(0, 245, 255, 0.2);
}
.contact-text {
padding-top: 0.25rem;
}
.contact-label {
font-family: 'Share Tech Mono', monospace;
font-size: 0.7rem;
color: var(--neon-cyan);
letter-spacing: 0.15em;
margin-bottom: 0.3rem;
}
.contact-value {
font-size: 1.1rem;
color: var(--text-primary);
}
.contact-value a {
color: var(--text-primary);
text-decoration: none;
transition: all 0.3s ease;
}
.contact-value a:hover {
color: var(--neon-cyan);
text-shadow: 0 0 10px var(--neon-cyan);
}
/* Social Links */
.social-links {
display: flex;
gap: 1rem;
margin-top: 2.5rem;
}
.social-link {
width: 50px;
height: 50px;
background: rgba(0, 245, 255, 0.05);
border: 1px solid rgba(0, 245, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 1.3rem;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.social-link:hover {
background: var(--neon-cyan);
border-color: var(--neon-cyan);
box-shadow: 0 0 30px var(--neon-cyan);
transform: translateY(-5px) scale(1.1);
}
/* Status Indicator */
.status-indicator {
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-family: 'Share Tech Mono', monospace;
font-size: 0.8rem;
color: var(--neon-green);
margin-top: 2rem;
padding: 0.75rem 1.25rem;
background: rgba(57, 255, 20, 0.05);
border: 1px solid rgba(57, 255, 20, 0.2);
}
.status-dot {
width: 10px;
height: 10px;
background: var(--neon-green);
border-radius: 50%;
animation: statusPulse 2s ease-in-out infinite;
box-shadow: 0 0 10px var(--neon-green);
}
@keyframes statusPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.8); }
}
/* Contact Form */
.contact-form-container {
background: rgba(10, 10, 15, 0.8);
border: 1px solid rgba(0, 245, 255, 0.1);
padding: 3rem;
position: relative;
overflow: hidden;
}
.contact-form-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta), var(--neon-green));
}
.form-title {
font-family: 'Orbitron', sans-serif;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.form-subtitle {
font-size: 0.95rem;
color: var(--text-secondary);
margin-bottom: 2.5rem;
}
.form-group {
margin-bottom: 1.75rem;
}
.form-label {
display: block;
font-family: 'Share Tech Mono', monospace;
font-size: 0.75rem;
color: var(--neon-cyan);
letter-spacing: 0.15em;
margin-bottom: 0.6rem;
}
.form-input,
.form-textarea {
width: 100%;
padding: 1.1rem 1.25rem;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(0, 245, 255, 0.15);
color: var(--text-primary);
font-family: 'Rajdhani', sans-serif;
font-size: 1rem;
transition: all 0.3s ease;
}
.form-input:focus,
.form-textarea:focus {
outline: none;
border-color: var(--neon-cyan);
box-shadow: 0 0 20px rgba(0, 245, 255, 0.1), inset 0 0 20px rgba(0, 245, 255, 0.03);
}
.form-input::placeholder,
.form-textarea::placeholder {
color: rgba(255, 255, 255, 0.3);
}
.form-textarea {
min-height: 150px;
resize: vertical;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.submit-btn {
width: 100%;
font-family: 'Orbitron', sans-serif;
font-size: 1rem;
font-weight: 700;
padding: 1.25rem 2rem;
background: linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta));
color: var(--darker-bg);
border: none;
cursor: pointer;
letter-spacing: 0.1em;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
position: relative;
overflow: hidden;
}
.submit-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.5s ease;
}
.submit-btn:hover {
box-shadow: 0 0 50px var(--neon-cyan), 0 0 100px rgba(0, 245, 255, 0.3);
transform: translateY(-3px);
}
.submit-btn:hover::before {
left: 100%;
}
/* Response Time */
.response-time {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-family: 'Share Tech Mono', monospace;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.5);
margin-top: 1.5rem;
}
.response-time::before {
content: '⚡';
}
/* Footer */
footer {
position: relative;
z-index: 10;
padding: 3rem 5%;
text-align: center;
border-top: 1px solid rgba(0, 245, 255, 0.1);
}
.footer-logo {
font-family: 'Orbitron', sans-serif;
font-size: 1.3rem;
font-weight: 800;
background: linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.75rem;
}
footer p {
font-family: 'Share Tech Mono', monospace;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.4);
}
footer a {
color: var(--neon-cyan);
text-decoration: none;
}
/* Responsive */
@media (max-width: 1024px) {
.contact-container {
grid-template-columns: 1fr;
gap: 4rem;
}
main {
align-items: flex-start;
}
}
/* Mobile Menu Button */
.mobile-menu-btn {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 5px;
z-index: 1001;
}
.mobile-menu-btn span {
width: 25px;
height: 2px;
background: var(--neon-cyan);
transition: all 0.3s ease;
}
@media (max-width: 768px) {
.mobile-menu-btn {
display: flex;
}
.nav-links {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(5, 5, 8, 0.98);
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2rem;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.nav-links.active {
opacity: 1;
visibility: visible;
}
.nav-links li {
list-style: none;
}
.nav-links a {
font-size: 1.5rem;
}
.nav-cta {
display: none;
}
.form-row {
grid-template-columns: 1fr;
}
.contact-title {
font-size: 2.5rem;
}
.contact-form-container {
padding: 2rem;
}
}
</style>
</head>
<body>
<div class="bg-animation"></div>
<div class="grid-overlay"></div>
<!-- Floating Particles -->
<div class="particle" style="left: 5%; animation-delay: 0s;"></div>
<div class="particle" style="left: 15%; animation-delay: 1.5s;"></div>
<div class="particle" style="left: 25%; animation-delay: 3s;"></div>
<div class="particle" style="left: 35%; animation-delay: 0.5s;"></div>
<div class="particle" style="left: 45%; animation-delay: 2s;"></div>
<div class="particle" style="left: 55%; animation-delay: 4s;"></div>
<div class="particle" style="left: 65%; animation-delay: 1s;"></div>
<div class="particle" style="left: 75%; animation-delay: 2.5s;"></div>
<div class="particle" style="left: 85%; animation-delay: 3.5s;"></div>
<div class="particle" style="left: 95%; animation-delay: 0.8s;"></div>
<!-- Data Streams -->
<div class="data-stream" style="left: 10%; animation-delay: 0s;"></div>
<div class="data-stream" style="left: 30%; animation-delay: 1s;"></div>
<div class="data-stream" style="left: 50%; animation-delay: 2s;"></div>
<div class="data-stream" style="left: 70%; animation-delay: 0.5s;"></div>
<div class="data-stream" style="left: 90%; animation-delay: 1.5s;"></div>
<nav>
<a href="/" class="logo">ThatAIGuy</a>
<ul class="nav-links">
<li><a href="/portfolio">PORTFOLIO</a></li>
<li><a href="/services">SERVICES</a></li>
<li><a href="/megamind">ABOUT AGI</a></li>
<li><a href="/contact" class="active">CONTACT</a></li>
</ul>
<a href="/contact" class="nav-cta">GET IN TOUCH</a>
<button class="mobile-menu-btn" aria-label="Toggle menu">
<span></span>
<span></span>
<span></span>
</button>
</nav>
<main>
<div class="contact-container">
<div class="contact-info">
<span class="contact-badge">// CONTACT</span>
<h1 class="contact-title">Let's <span class="gradient">Connect</span></h1>
<p class="contact-subtitle">Ready to bring your project to life? Get in touch and let's build something amazing together.</p>
<div class="contact-item">
<div class="contact-icon">📧</div>
<div class="contact-text">
<p class="contact-label">EMAIL</p>
<p class="contact-value"><a href="/cdn-cgi/l/email-protection#23494c5046534b0d540d424d42475a634a404f4c56470d404c4e"><span class="__cf_email__" data-cfemail="85efeaf6e0f5edabf2abe4ebe4e1fcc5ece6e9eaf0e1abe6eae8">[email protected]</span></a></p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">🌐</div>
<div class="contact-text">
<p class="contact-label">WEBSITE</p>
<p class="contact-value"><a href="https://thataiguy.org">thataiguy.org</a></p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">📍</div>
<div class="contact-text">
<p class="contact-label">LOCATION</p>
<p class="contact-value">Northwest Arkansas, USA</p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">💼</div>
<div class="contact-text">
<p class="contact-label">EXPERIENCE</p>
<p class="contact-value">86+ Production Sites Deployed</p>
</div>
</div>
<div class="social-links">
<a href="https://github.com/thataiguy" target="_blank" class="social-link" title="GitHub">💻</a>
<a href="https://linkedin.com" target="_blank" class="social-link" title="LinkedIn">💼</a>
<a href="https://twitter.com" target="_blank" class="social-link" title="Twitter">🐦</a>
</div>
<div class="status-indicator">
<span class="status-dot"></span>
AVAILABLE FOR NEW PROJECTS
</div>
</div>
<form class="contact-form-container" name="contact" method="POST" data-netlify="true">
<input type="hidden" name="form-name" value="contact">
<h3 class="form-title">Send a Message</h3>
<p class="form-subtitle">Fill out the form below and I'll get back to you within 24 hours.</p>
<div class="form-row">
<div class="form-group">
<label class="form-label">NAME</label>
<input type="text" name="name" class="form-input" placeholder="John Doe" required>
</div>
<div class="form-group">
<label class="form-label">EMAIL</label>
<input type="email" name="email" class="form-input" placeholder="[author/contact email redacted]" required>
</div>
</div>
<div class="form-group">
<label class="form-label">SUBJECT</label>
<input type="text" name="subject" class="form-input" placeholder="Project Inquiry">
</div>
<div class="form-group">
<label class="form-label">MESSAGE</label>
<textarea name="message" class="form-textarea" placeholder="Tell me about your project..." required></textarea>
</div>
<button type="submit" class="submit-btn">SEND MESSAGE</button>
<p class="response-time">Usually responds within 24 hours</p>
</form>
</div>
</main>
<footer>
<p class="footer-logo">ThatAIGuy</p>
<p>© 2026 ThatAIGuy Web Development // Powered by <a href="/megamind">MEGAMIND AGI</a></p>
</footer>
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
// Form input animations
document.querySelectorAll('.form-input, .form-textarea').forEach(input => {
input.addEventListener('focus', function() {
this.parentElement.querySelector('.form-label').style.color = '#00f5ff';
this.parentElement.querySelector('.form-label').style.textShadow = '0 0 10px #00f5ff';
});
input.addEventListener('blur', function() {
this.parentElement.querySelector('.form-label').style.color = '';
this.parentElement.querySelector('.form-label').style.textShadow = '';
});
});
// Parallax effect on mouse move
document.addEventListener('mousemove', (e) => {
const x = (e.clientX / window.innerWidth - 0.5) * 20;
const y = (e.clientY / window.innerHeight - 0.5) * 20;
document.querySelector('.bg-animation').style.transform = `translate(${x}px, ${y}px)`;
});
// Scroll reveal animations
const observerOptions = { threshold: 0.1 };
const fadeObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
document.querySelectorAll('.contact-item, .contact-form-container').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(30px)';
el.style.transition = 'all 0.6s ease';
fadeObserver.observe(el);
});
// Mobile menu toggle
const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
const navLinks = document.querySelector('.nav-links');
mobileMenuBtn.addEventListener('click', () => {
navLinks.classList.toggl