webcoderz commited on
Commit
14efcd0
·
verified ·
1 Parent(s): 9864618

Excellent — here’s the **complete Deepsite input package** that includes both the **design prompt** (for layout, aesthetic, and styling) and a full **sitemap + copy draft** so it can auto-generate both structure and content for *The Code Company* website in the Art Deco style you requested.

Browse files

---

## 🏛️ THE CODE COMPANY — DEEPSITE MASTER PROMPT

### **Purpose**

Design and write a full website for **The Code Company Consulting LLC**, a boutique AI and cloud consultancy known for its technical rigor, creative precision, and Art Deco-inspired presentation.

---

## 🎨 **Design System**

**Theme:** Art Deco × Modern Minimalism
**Mood:** Elegant, geometric, metallic, intelligent
**Palette:**

* Deep Navy #0a0e1a
* Brass Gold #c9a44c
* Ivory #f9f6ef
* Charcoal #1c1c1c
* Platinum Gray #b6b6b6
* Accent Emerald #1a5442

**Typography:**

* Headers: *Metropolis*, *Futura Bold*, or equivalent
* Body: *Inter*, *Lato*, or *Work Sans*
* Subtle letter-spaced uppercase headings with gold Deco dividers

**Layout Cues:**

* Symmetrical grid with vertical lines and gold accents
* Hero sections framed by Deco borders or architectural sunburst motifs
* Soft animated reveals (fade-in, gold line swipe)
* Subtle geometric backgrounds behind each section

---

## 🧭 **Sitemap & Copy**

### 1️⃣ HOME

**Hero headline:**

> *Engineering Intelligence.*

**Subheadline:**

> The Code Company designs and scales intelligent systems — from AI evaluation frameworks to GPU cloud architectures — bringing precision engineering to the frontier of artificial intelligence.

**CTA buttons:**
`Explore Our Capabilities` | `Contact the Team`

**Visual:** Stylized Deco skyline fading into circuit-line geometry.

**Supporting line (beneath hero):**

> Trusted by innovators and government agencies to make AI accountable, performant, and real.

---

### 2️⃣ ABOUT US

**Headline:**

> *The Craft of Code Meets the Discipline of Design.*

**Paragraph:**
Founded by **Cody Webb**, The Code Company Consulting LLC bridges the gap between executive vision and technical execution. We build systems where precision, governance, and performance intersect — whether crafting GPU-driven AI infrastructure or guiding enterprises through modernization.

**Highlights (as Deco cards):**

* **Expertise:** AI Systems Design | Graph Intelligence | Cloud Architecture
* **Approach:** Transparent, Auditable, Scalable
* **Clients:** Government Agencies | Startups | Enterprises

**Quote banner:**

> “Every intelligent system deserves intelligent design.” — Cody Webb

---

### 3️⃣ CAPABILITIES / SERVICES

#### **AI & DATA SYSTEMS**

We design and optimize data-driven systems — from LLM pipelines to graph neural networks — ensuring every model is explainable, observable, and secure.

* GraphRAG and Pydantic Evals for model governance
* Agentic workflows and runtime observability architectures
* Advanced data engineering and feature stores

#### **CLOUD & INFRASTRUCTURE**

Our engineers architect GPU clusters and scalable Kubernetes deployments built for both innovation and compliance.

* GPU Cluster Design (H100, GH200, NVL-72)
* Kubernetes + vLLM + MetalLB Deployment
* Hybrid Cloud and FedRAMP-aligned Infrastructure

#### **TECHNICAL PRODUCT STRATEGY**

We translate strategic vision into executable roadmaps.

* Product and Data Governance Frameworks
* AI Readiness Assessments
* Proof-of-Concept Pilots to Production Scaling

#### **GOVERNMENT & ENTERPRISE ADVISORY**

Registered in SAM.gov and CAGE-certified, The Code Company provides advisory and technical guidance to federal and enterprise programs.

* CDO Services (AI Governance & Evaluation)
* AI Compliance and Ethical Risk Audits
* Training Curricula (“AI & Graph 101”, “AI Use-Case Evaluation Frameworks”)

---

### 4️⃣ CASE STUDIES

Showcase each project as a vertical Deco panel with gold borders and minimal illustrations.

**Evalia — AI Use-Case Evaluation Platform**
*Challenge:* Organizations lacked a standardized method for AI evaluation.
*Solution:* Developed Evalia, a Pydantic Evals-based platform for governance and metrics.
*Outcome:* Adopted in government and enterprise AI assessments to standardize accountability.

**IO Intelligence — GPU Cloud for Government**
*Challenge:* Secure, compliant AI training infrastructure for agencies.
*Solution:* Designed GPU cluster architecture with H100s and FedRAMP-aligned controls.
*Outcome:* 10× model training speed with validated compliance pipeline.

**Unveil.is — AI Runtime Observability Layer**
*Challenge:* LLMs lack visibility into execution paths and runtime behavior.
*Solution:* Integrated call-stack monitoring and self-correction framework for Python and C.
*Outcome:* Real-time bug detection and autonomous recovery loops for AI applications.

---

### 5️⃣ INSIGHTS / ARTICLES

**Section intro:**

> *Perspectives at the intersection of intelligence, governance, and design.*

Sample article titles:

* “Why AI Needs Evaluation Before Innovation”
* “GPU Economics and the Rise of Specialized Clouds”
* “From Data to Decisions: The New Role of CDOs”
* “Building Auditable AI Systems That Scale”

Each article card: brass outline, title in uppercase Deco font, short abstract on hover.

---

### 6️⃣ CONTACT / INQUIRY

**Headline:**

> *Engage with The Code Company.*

**Text:**
We work with clients who value precision, accountability, and elegance in engineering. Let’s shape your next system together.

**Form fields:**
Name | Organization | Email | Message | [Dropdown: Consulting Type — AI / Infrastructure / Advisory]
CTA button: **Send Inquiry**

**Footer:**
Include minimalist Deco line art logo, copyright, SAM.gov UEI code, and social icons (LinkedIn, GitHub, X).

---

## ⚙️ **Technical + UX Notes**

* Fully responsive; ensure gold accents read clearly in dark mode.
* Subtle motion (line swipe reveals, gold glow hover).
* SEO meta title: *The Code Company Consulting LLC — AI Systems & Cloud Architecture Experts.*
* Meta description: *Boutique consultancy specializing in AI evaluation frameworks, GPU infrastructure, and governance solutions for enterprises and government.*

---

Files changed (6) hide show
  1. README.md +8 -5
  2. components/footer.js +152 -0
  3. components/navbar.js +108 -0
  4. index.html +127 -19
  5. script.js +29 -0
  6. style.css +76 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: The Code Deco Collective
3
- emoji: 👀
4
- colorFrom: gray
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: The Code Deco Collective 🏛️
3
+ colorFrom: pink
4
+ colorTo: yellow
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
components/footer.js ADDED
@@ -0,0 +1,152 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ background: var(--navy-800);
9
+ padding: 4rem 2rem;
10
+ border-top: 1px solid rgba(201, 164, 76, 0.1);
11
+ }
12
+
13
+ .footer-content {
14
+ max-width: 1440px;
15
+ margin: 0 auto;
16
+ display: grid;
17
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
18
+ gap: 3rem;
19
+ }
20
+
21
+ .footer-logo {
22
+ font-family: 'Playfair Display', serif;
23
+ font-size: 1.5rem;
24
+ font-weight: 700;
25
+ color: var(--gold-500);
26
+ margin-bottom: 1.5rem;
27
+ }
28
+
29
+ .footer-text {
30
+ color: var(--platinum-400);
31
+ line-height: 1.6;
32
+ margin-bottom: 1.5rem;
33
+ }
34
+
35
+ .footer-heading {
36
+ color: var(--ivory-100);
37
+ font-weight: 600;
38
+ margin-bottom: 1.5rem;
39
+ letter-spacing: 0.5px;
40
+ }
41
+
42
+ .footer-links {
43
+ display: flex;
44
+ flex-direction: column;
45
+ gap: 0.75rem;
46
+ }
47
+
48
+ .footer-links a {
49
+ color: var(--platinum-400);
50
+ text-decoration: none;
51
+ transition: color 0.3s ease;
52
+ }
53
+
54
+ .footer-links a:hover {
55
+ color: var(--gold-500);
56
+ }
57
+
58
+ .social-links {
59
+ display: flex;
60
+ gap: 1rem;
61
+ margin-top: 1rem;
62
+ }
63
+
64
+ .social-links a {
65
+ color: var(--platinum-400);
66
+ transition: color 0.3s ease;
67
+ }
68
+
69
+ .social-links a:hover {
70
+ color: var(--gold-500);
71
+ }
72
+
73
+ .footer-bottom {
74
+ max-width: 1440px;
75
+ margin: 3rem auto 0;
76
+ padding-top: 2rem;
77
+ border-top: 1px solid rgba(182, 182, 182, 0.1);
78
+ display: flex;
79
+ flex-wrap: wrap;
80
+ justify-content: space-between;
81
+ color: var(--platinum-400);
82
+ font-size: 0.875rem;
83
+ }
84
+
85
+ @media (max-width: 768px) {
86
+ .footer-content {
87
+ grid-template-columns: 1fr;
88
+ }
89
+
90
+ .footer-bottom {
91
+ flex-direction: column;
92
+ gap: 1rem;
93
+ }
94
+ }
95
+ </style>
96
+
97
+ <div class="footer-content">
98
+ <div class="footer-col">
99
+ <div class="footer-logo">THE CODE COMPANY</div>
100
+ <p class="footer-text">
101
+ Engineering intelligence for the AI frontier.
102
+ </p>
103
+ <div class="social-links">
104
+ <a href="#"><i data-feather="linkedin"></i></a>
105
+ <a href="#"><i data-feather="github"></i></a>
106
+ <a href="#"><i data-feather="twitter"></i></a>
107
+ </div>
108
+ </div>
109
+
110
+ <div class="footer-col">
111
+ <h3 class="footer-heading">Navigation</h3>
112
+ <div class="footer-links">
113
+ <a href="/">Home</a>
114
+ <a href="/about.html">About</a>
115
+ <a href="/capabilities.html">Capabilities</a>
116
+ <a href="/case-studies.html">Case Studies</a>
117
+ <a href="/contact.html">Contact</a>
118
+ </div>
119
+ </div>
120
+
121
+ <div class="footer-col">
122
+ <h3 class="footer-heading">Services</h3>
123
+ <div class="footer-links">
124
+ <a href="/capabilities.html#ai">AI & Data Systems</a>
125
+ <a href="/capabilities.html#cloud">Cloud Infrastructure</a>
126
+ <a href="/capabilities.html#strategy">Technical Strategy</a>
127
+ <a href="/capabilities.html#gov">Government Advisory</a>
128
+ </div>
129
+ </div>
130
+
131
+ <div class="footer-col">
132
+ <h3 class="footer-heading">Contact</h3>
133
+ <div class="footer-links">
134
+ <a href="mailto:contact@thecodecompany.ai">contact@thecodecompany.ai</a>
135
+ <a href="tel:+18005551234">+1 (800) 555-1234</a>
136
+ <a href="#">SAM.gov UEI: XYZ123456789</a>
137
+ </div>
138
+ </div>
139
+ </div>
140
+
141
+ <div class="footer-bottom">
142
+ <div>&copy; ${new Date().getFullYear()} The Code Company Consulting LLC. All rights reserved.</div>
143
+ <div>
144
+ <a href="/privacy.html" class="mr-4">Privacy Policy</a>
145
+ <a href="/terms.html">Terms of Service</a>
146
+ </div>
147
+ </div>
148
+ `;
149
+ }
150
+ }
151
+
152
+ customElements.define('custom-footer', CustomFooter);
components/navbar.js ADDED
@@ -0,0 +1,108 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ position: fixed;
9
+ top: 0;
10
+ left: 0;
11
+ right: 0;
12
+ z-index: 1000;
13
+ background: rgba(10, 14, 26, 0.9);
14
+ backdrop-filter: blur(10px);
15
+ border-bottom: 1px solid rgba(201, 164, 76, 0.1);
16
+ }
17
+
18
+ nav {
19
+ display: flex;
20
+ justify-content: space-between;
21
+ align-items: center;
22
+ padding: 1.5rem 2rem;
23
+ max-width: 1440px;
24
+ margin: 0 auto;
25
+ }
26
+
27
+ .logo {
28
+ font-family: 'Playfair Display', serif;
29
+ font-size: 1.5rem;
30
+ font-weight: 700;
31
+ color: var(--gold-500);
32
+ text-decoration: none;
33
+ }
34
+
35
+ .nav-links {
36
+ display: flex;
37
+ gap: 2rem;
38
+ align-items: center;
39
+ }
40
+
41
+ .nav-links a {
42
+ color: var(--ivory-100);
43
+ text-decoration: none;
44
+ font-weight: 500;
45
+ letter-spacing: 0.5px;
46
+ position: relative;
47
+ transition: all 0.3s ease;
48
+ }
49
+
50
+ .nav-links a:hover {
51
+ color: var(--gold-500);
52
+ }
53
+
54
+ .nav-links a::after {
55
+ content: '';
56
+ position: absolute;
57
+ bottom: -5px;
58
+ left: 0;
59
+ width: 0;
60
+ height: 1px;
61
+ background-color: var(--gold-500);
62
+ transition: width 0.3s ease;
63
+ }
64
+
65
+ .nav-links a:hover::after {
66
+ width: 100%;
67
+ }
68
+
69
+ .mobile-menu-btn {
70
+ display: none;
71
+ background: none;
72
+ border: none;
73
+ color: var(--ivory-100);
74
+ font-size: 1.5rem;
75
+ cursor: pointer;
76
+ }
77
+
78
+ @media (max-width: 768px) {
79
+ .nav-links {
80
+ display: none;
81
+ }
82
+
83
+ .mobile-menu-btn {
84
+ display: block;
85
+ }
86
+ }
87
+ </style>
88
+
89
+ <nav>
90
+ <a href="/" class="logo">THE CODE COMPANY</a>
91
+
92
+ <div class="nav-links">
93
+ <a href="/about.html">About</a>
94
+ <a href="/capabilities.html">Capabilities</a>
95
+ <a href="/case-studies.html">Case Studies</a>
96
+ <a href="/insights.html">Insights</a>
97
+ <a href="/contact.html">Contact</a>
98
+ </div>
99
+
100
+ <button class="mobile-menu-btn">
101
+ <i data-feather="menu"></i>
102
+ </button>
103
+ </nav>
104
+ `;
105
+ }
106
+ }
107
+
108
+ customElements.define('custom-navbar', CustomNavbar);
index.html CHANGED
@@ -1,19 +1,127 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>The Code Company | Engineering Intelligence</title>
7
+ <meta name="description" content="Boutique consultancy specializing in AI evaluation frameworks, GPU infrastructure, and governance solutions for enterprises and government.">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Playfair+Display:wght@400;700&display=swap');
15
+ </style>
16
+ </head>
17
+ <body class="bg-navy-900 text-ivory-100 font-sans">
18
+ <custom-navbar></custom-navbar>
19
+
20
+ <main>
21
+ <!-- Hero Section -->
22
+ <section class="relative h-screen flex items-center justify-center overflow-hidden">
23
+ <div id="vanta-bg" class="absolute inset-0"></div>
24
+ <div class="relative z-10 text-center px-6 max-w-4xl mx-auto">
25
+ <h1 class="text-5xl md:text-7xl font-serif font-bold mb-6 text-gold-500 tracking-tight">ENGINEERING INTELLIGENCE.</h1>
26
+ <p class="text-xl md:text-2xl mb-10 leading-relaxed max-w-3xl mx-auto">
27
+ The Code Company designs and scales intelligent systems — from AI evaluation frameworks to GPU cloud architectures — bringing precision engineering to the frontier of artificial intelligence.
28
+ </p>
29
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
30
+ <a href="/capabilities.html" class="bg-gold-500 hover:bg-gold-600 text-navy-900 font-bold py-3 px-8 rounded-sm transition-all duration-300 transform hover:scale-105">Explore Our Capabilities</a>
31
+ <a href="/contact.html" class="border-2 border-gold-500 hover:bg-gold-500/10 text-gold-500 font-bold py-3 px-8 rounded-sm transition-all duration-300 transform hover:scale-105">Contact the Team</a>
32
+ </div>
33
+ </div>
34
+ <div class="absolute bottom-10 left-0 right-0 text-center text-platinum-400 text-sm">
35
+ Trusted by innovators and government agencies to make AI accountable, performant, and real.
36
+ </div>
37
+ <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-gold-500 to-transparent"></div>
38
+ </section>
39
+
40
+ <!-- Clients Section -->
41
+ <section class="py-16 bg-navy-800">
42
+ <div class="container mx-auto px-6">
43
+ <h2 class="text-center text-platinum-400 uppercase tracking-widest text-sm mb-12">SELECT PARTNERS</h2>
44
+ <div class="flex flex-wrap justify-center items-center gap-12 opacity-80">
45
+ <img src="http://static.photos/black/320x240/1" alt="Client 1" class="h-12 grayscale contrast-0 brightness-200">
46
+ <img src="http://static.photos/black/320x240/2" alt="Client 2" class="h-12 grayscale contrast-0 brightness-200">
47
+ <img src="http://static.photos/black/320x240/3" alt="Client 3" class="h-12 grayscale contrast-0 brightness-200">
48
+ <img src="http://static.photos/black/320x240/4" alt="Client 4" class="h-12 grayscale contrast-0 brightness-200">
49
+ <img src="http://static.photos/black/320x240/5" alt="Client 5" class="h-12 grayscale contrast-0 brightness-200">
50
+ </div>
51
+ </div>
52
+ </section>
53
+
54
+ <!-- Capabilities Preview -->
55
+ <section class="py-20 bg-navy-900">
56
+ <div class="container mx-auto px-6">
57
+ <div class="text-center mb-16">
58
+ <h2 class="text-3xl md:text-4xl font-serif font-bold mb-4 text-gold-500">Our Expertise</h2>
59
+ <div class="w-24 h-1 bg-gold-500 mx-auto mb-6"></div>
60
+ <p class="text-platinum-400 max-w-2xl mx-auto">
61
+ We bring precision engineering to the frontier of artificial intelligence through four core disciplines.
62
+ </p>
63
+ </div>
64
+
65
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
66
+ <div class="bg-navy-800 p-8 border-l-4 border-gold-500 hover:bg-navy-700 transition-all duration-300">
67
+ <i data-feather="cpu" class="text-gold-500 w-10 h-10 mb-4"></i>
68
+ <h3 class="text-xl font-bold mb-3">AI & Data Systems</h3>
69
+ <p class="text-platinum-400">Explainable, observable, and secure AI architectures.</p>
70
+ </div>
71
+ <div class="bg-navy-800 p-8 border-l-4 border-gold-500 hover:bg-navy-700 transition-all duration-300">
72
+ <i data-feather="cloud" class="text-gold-500 w-10 h-10 mb-4"></i>
73
+ <h3 class="text-xl font-bold mb-3">Cloud Infrastructure</h3>
74
+ <p class="text-platinum-400">GPU clusters and scalable Kubernetes deployments.</p>
75
+ </div>
76
+ <div class="bg-navy-800 p-8 border-l-4 border-gold-500 hover:bg-navy-700 transition-all duration-300">
77
+ <i data-feather="layers" class="text-gold-500 w-10 h-10 mb-4"></i>
78
+ <h3 class="text-xl font-bold mb-3">Technical Strategy</h3>
79
+ <p class="text-platinum-400">From vision to executable roadmaps.</p>
80
+ </div>
81
+ <div class="bg-navy-800 p-8 border-l-4 border-gold-500 hover:bg-navy-700 transition-all duration-300">
82
+ <i data-feather="shield" class="text-gold-500 w-10 h-10 mb-4"></i>
83
+ <h3 class="text-xl font-bold mb-3">Government Advisory</h3>
84
+ <p class="text-platinum-400">SAM.gov registered, CAGE-certified guidance.</p>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </section>
89
+
90
+ <!-- Quote Section -->
91
+ <section class="py-20 bg-gradient-to-r from-emerald-900/30 to-navy-900 border-y border-gold-500/20">
92
+ <div class="container mx-auto px-6 max-w-4xl text-center">
93
+ <i data-feather="quote" class="text-gold-500/30 w-12 h-12 mx-auto mb-8"></i>
94
+ <p class="text-2xl md:text-3xl font-serif italic mb-6 leading-relaxed">
95
+ "Every intelligent system deserves intelligent design."
96
+ </p>
97
+ <p class="text-gold-500 font-bold">— Cody Webb</p>
98
+ </div>
99
+ </section>
100
+ </main>
101
+
102
+ <custom-footer></custom-footer>
103
+
104
+ <script src="components/navbar.js"></script>
105
+ <script src="components/footer.js"></script>
106
+ <script src="script.js"></script>
107
+ <script>
108
+ feather.replace();
109
+ VANTA.NET({
110
+ el: "#vanta-bg",
111
+ mouseControls: true,
112
+ touchControls: true,
113
+ gyroControls: false,
114
+ minHeight: 200.00,
115
+ minWidth: 200.00,
116
+ scale: 1.00,
117
+ scaleMobile: 1.00,
118
+ color: 0xc9a44c,
119
+ backgroundColor: 0x0a0e1a,
120
+ points: 12.00,
121
+ maxDistance: 22.00,
122
+ spacing: 18.00
123
+ });
124
+ </script>
125
+ <script src="https://deepsite.hf.co/deepsite-badge.js"></script>
126
+ </body>
127
+ </html>
script.js ADDED
@@ -0,0 +1,29 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Intersection Observer for scroll animations
2
+ const observer = new IntersectionObserver((entries) => {
3
+ entries.forEach(entry => {
4
+ if (entry.isIntersecting) {
5
+ entry.target.classList.add('fade-in');
6
+ }
7
+ });
8
+ }, {
9
+ threshold: 0.1
10
+ });
11
+
12
+ document.querySelectorAll('section, .animate-on-scroll').forEach((el) => {
13
+ observer.observe(el);
14
+ });
15
+
16
+ // Smooth scrolling for anchor links
17
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
18
+ anchor.addEventListener('click', function (e) {
19
+ e.preventDefault();
20
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
21
+ behavior: 'smooth'
22
+ });
23
+ });
24
+ });
25
+
26
+ // Initialize Feather Icons
27
+ document.addEventListener('DOMContentLoaded', () => {
28
+ feather.replace();
29
+ });
style.css CHANGED
@@ -1,28 +1,86 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @tailwind base;
2
+ @tailwind components;
3
+ @tailwind utilities;
4
+
5
+ :root {
6
+ --navy-900: #0a0e1a;
7
+ --navy-800: #121828;
8
+ --navy-700: #1a2238;
9
+ --gold-500: #c9a44c;
10
+ --gold-600: #b38f3e;
11
+ --ivory-100: #f9f6ef;
12
+ --charcoal-900: #1c1c1c;
13
+ --platinum-400: #b6b6b6;
14
+ --emerald-900: #1a5442;
15
+ }
16
+
17
  body {
18
+ font-family: 'Montserrat', sans-serif;
19
+ background-color: var(--navy-900);
20
+ color: var(--ivory-100);
21
+ }
22
+
23
+ .font-serif {
24
+ font-family: 'Playfair Display', serif;
25
+ }
26
+
27
+ .bg-navy-900 {
28
+ background-color: var(--navy-900);
29
+ }
30
+
31
+ .bg-navy-800 {
32
+ background-color: var(--navy-800);
33
+ }
34
+
35
+ .bg-navy-700 {
36
+ background-color: var(--navy-700);
37
  }
38
 
39
+ .text-gold-500 {
40
+ color: var(--gold-500);
 
41
  }
42
 
43
+ .bg-gold-500 {
44
+ background-color: var(--gold-500);
 
 
 
45
  }
46
 
47
+ .bg-gold-600 {
48
+ background-color: var(--gold-600);
 
 
 
 
49
  }
50
 
51
+ .text-ivory-100 {
52
+ color: var(--ivory-100);
53
  }
54
+
55
+ .text-platinum-400 {
56
+ color: var(--platinum-400);
57
+ }
58
+
59
+ .border-gold-500 {
60
+ border-color: var(--gold-500);
61
+ }
62
+
63
+ .deco-divider {
64
+ position: relative;
65
+ padding-bottom: 2rem;
66
+ }
67
+
68
+ .deco-divider::after {
69
+ content: '';
70
+ position: absolute;
71
+ bottom: 0;
72
+ left: 50%;
73
+ transform: translateX(-50%);
74
+ width: 100px;
75
+ height: 2px;
76
+ background: linear-gradient(to right, transparent, var(--gold-500), transparent);
77
+ }
78
+
79
+ @keyframes fadeIn {
80
+ from { opacity: 0; transform: translateY(20px); }
81
+ to { opacity: 1; transform: translateY(0); }
82
+ }
83
+
84
+ .fade-in {
85
+ animation: fadeIn 1s ease-out forwards;
86
+ }