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