Hugging Face's logo

Spaces:
pedrod8
/
codefixer-pro-stack
Running

App Files Community
pedrod8 commited on
Commit
e882110
·
verified ·
1 Parent(s): 8f1d727

thew site is incomplete

Browse files
Files changed (3) hide show
  1. README.md +7 -4
  2. index.html +461 -19
  3. style.css +41 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Codefixer Pro Stack
3
- emoji: 📈
4
- colorFrom: red
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: CodeFixer Pro Stack 🚀
3
+ colorFrom: blue
 
4
  colorTo: blue
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://huggingface.co/deepsite).
index.html CHANGED
@@ -1,19 +1,461 @@
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>Nathan Stower | Full-Stack Business Strategist & Fixer</title>
7
+ <meta name="description" content="Full-Stack Business Strategist & Fixer. CX • Product • Dev • Media • Engineering. One partner, from insight to implementation.">
8
+ <link rel="icon" href="img/favicon.svg" type="image/svg+xml">
9
+
10
+ <!-- Tailwind CSS -->
11
+ <script src="https://cdn.tailwindcss.com"></script>
12
+ <script>
13
+ tailwind.config = {
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: {
18
+ DEFAULT: '#3B82F6',
19
+ 50: '#EFF6FF',
20
+ 100: '#DBEAFE',
21
+ 200: '#BFDBFE',
22
+ 300: '#93C5FD',
23
+ 400: '#60A5FA',
24
+ 500: '#3B82F6',
25
+ 600: '#2563EB',
26
+ 700: '#1D4ED8',
27
+ 800: '#1E40AF',
28
+ 900: '#1E3A8A',
29
+ },
30
+ secondary: {
31
+ DEFAULT: '#10B981',
32
+ 50: '#ECFDF5',
33
+ 100: '#D1FAE5',
34
+ 200: '#A7F3D0',
35
+ 300: '#6EE7B7',
36
+ 400: '#34D399',
37
+ 500: '#10B981',
38
+ 600: '#059669',
39
+ 700: '#047857',
40
+ 800: '#065F46',
41
+ 900: '#064E3B',
42
+ }
43
+ }
44
+ }
45
+ }
46
+ }
47
+ </script>
48
+
49
+ <!-- Fonts -->
50
+ <link rel="preconnect" href="https://fonts.googleapis.com">
51
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
52
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
53
+
54
+ <!-- Feather Icons -->
55
+ <script src="https://unpkg.com/feather-icons"></script>
56
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
57
+
58
+ <!-- GSAP -->
59
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
60
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
61
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollToPlugin.min.js"></script>
62
+
63
+ <!-- Three.js -->
64
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
65
+
66
+ <!-- Custom CSS -->
67
+ <link rel="stylesheet" href="style.css">
68
+ </head>
69
+ <body class="font-sans bg-white text-gray-900 overflow-x-hidden">
70
+ <!-- Skip Link -->
71
+ <a href="#main-content" class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-primary-500 focus:text-white focus:font-bold focus:rounded focus:shadow-lg">Skip to content</a>
72
+
73
+ <!-- Page Loader -->
74
+ <div id="page-loader" class="fixed inset-0 bg-primary-500 flex items-center justify-center z-50 transition-opacity duration-500">
75
+ <div class="text-6xl font-bold font-mono animate-pulse">NS<span class="inline-block w-3 h-12 bg-white ml-1 animate-pulse"></span></div>
76
+ </div>
77
+
78
+ <!-- Navigation -->
79
+ <nav id="main-nav" class="fixed top-0 left-0 right-0 bg-white/95 backdrop-blur-md border-b-2 border-black z-40">
80
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
81
+ <div class="flex justify-between h-16 items-center">
82
+ <a href="#home" class="text-xl font-bold font-mono flex items-center">
83
+ nathan.stack<span class="inline-block w-2 h-6 bg-primary-500 animate-pulse ml-0.5"></span>
84
+ </a>
85
+
86
+ <div class="hidden md:flex items-center space-x-6">
87
+ <a href="#process" class="font-mono hover:bg-primary-500 hover:text-white px-4 py-2 rounded transition-all duration-300">[process]</a>
88
+ <a href="#skills" class="font-mono hover:bg-primary-500 hover:text-white px-4 py-2 rounded transition-all duration-300">[technical]</a>
89
+ <a href="#results" class="font-mono hover:bg-primary-500 hover:text-white px-4 py-2 rounded transition-all duration-300">[results]</a>
90
+ <a href="#contact" class="font-mono hover:bg-primary-500 hover:text-white px-4 py-2 rounded transition-all duration-300">[contact]</a>
91
+ </div>
92
+
93
+ <button id="mobile-menu-button" class="md:hidden p-2 rounded-md focus:outline-none">
94
+ <i data-feather="menu" class="w-6 h-6"></i>
95
+ </button>
96
+ </div>
97
+ </div>
98
+
99
+ <!-- Mobile Menu -->
100
+ <div id="mobile-menu" class="md:hidden hidden absolute top-full left-0 right-0 bg-white border-b-2 border-black shadow-lg">
101
+ <a href="#process" class="block px-4 py-3 font-mono hover:bg-primary-500 hover:text-white">[process]</a>
102
+ <a href="#skills" class="block px-4 py-3 font-mono hover:bg-primary-500 hover:text-white">[technical]</a>
103
+ <a href="#results" class="block px-4 py-3 font-mono hover:bg-primary-500 hover:text-white">[results]</a>
104
+ <a href="#contact" class="block px-4 py-3 font-mono hover:bg-primary-500 hover:text-white">[contact]</a>
105
+ </div>
106
+ </nav>
107
+
108
+ <!-- Main Content -->
109
+ <main id="main-content">
110
+ <!-- Hero Section -->
111
+ <section id="home" class="min-h-screen pt-20 pb-16 px-4 sm:px-6 lg:px-8 flex items-center relative overflow-hidden" style="background: linear-gradient(135deg, rgba(59, 130, 246, 0.9) 0%, rgba(16, 185, 129, 0.9) 100%);">
112
+ <div class="absolute inset-0 bg-black/20"></div>
113
+ <div class="max-w-7xl mx-auto relative z-10">
114
+ <div class="grid md:grid-cols-2 gap-12 items-center">
115
+ <div class="text-white">
116
+ <h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight font-heading">
117
+ Full-Stack Business<br>Strategist & Fixer
118
+ </h1>
119
+
120
+ <p class="text-xl md:text-2xl mb-6 font-medium tracking-wide">
121
+ CX <span class="mx-2">•</span> Product <span class="mx-2">•</span> Dev <span class="mx-2">•</span> Media <span class="mx-2">•</span> Engineering
122
+ </p>
123
+
124
+ <p class="text-xl mb-8 opacity-90">
125
+ One partner, from insight to implementation.
126
+ </p>
127
+
128
+ <div class="flex flex-wrap gap-4">
129
+ <a href="#process" class="inline-flex items-center px-6 py-3 bg-white text-primary-700 font-bold rounded-md hover:bg-primary-100 transition-colors duration-300">
130
+ <span>Explore My Approach</span>
131
+ <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i>
132
+ </a>
133
+ </div>
134
+ </div>
135
+
136
+ <div class="relative">
137
+ <div class="aspect-w-16 aspect-h-9 rounded-xl overflow-hidden border-4 border-white shadow-2xl">
138
+ <video class="w-full h-full object-cover" muted loop autoplay playsinline>
139
+ <source src="https://cdn.midjourney.com/video/02f3c77d-4d4d-4297-9603-a678f7b7eace/0.mp4" type="video/mp4">
140
+ </video>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </section>
146
+
147
+ <!-- Process Section -->
148
+ <section id="process" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50">
149
+ <div class="max-w-7xl mx-auto">
150
+ <h2 class="text-4xl md:text-5xl font-bold mb-4 text-center font-heading">My Process in Depth</h2>
151
+ <p class="text-xl text-center mb-12 text-gray-600 max-w-3xl mx-auto">
152
+ A structured approach to solving complex business challenges
153
+ </p>
154
+
155
+ <div class="grid md:grid-cols-3 gap-8">
156
+ <!-- Process Card 1 -->
157
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden border-2 border-black transition-all duration-300 hover:shadow-xl hover:-translate-y-2">
158
+ <div class="p-6">
159
+ <div class="flex items-center mb-4">
160
+ <div class="text-4xl font-bold text-primary-500 mr-4">01</div>
161
+ <h3 class="text-2xl font-bold">Discover</h3>
162
+ </div>
163
+ <p class="text-gray-600 mb-6">Understanding your business, users, and goals</p>
164
+
165
+ <div class="space-y-4">
166
+ <div class="flex items-start">
167
+ <div class="bg-primary-100 text-primary-600 p-2 rounded-lg mr-3">
168
+ <i data-feather="target" class="w-5 h-5"></i>
169
+ </div>
170
+ <p>Stakeholder interviews & requirements gathering</p>
171
+ </div>
172
+ <div class="flex items-start">
173
+ <div class="bg-primary-100 text-primary-600 p-2 rounded-lg mr-3">
174
+ <i data-feather="bar-chart-2" class="w-5 h-5"></i>
175
+ </div>
176
+ <p>Market analysis & competitive research</p>
177
+ </div>
178
+ <div class="flex items-start">
179
+ <div class="bg-primary-100 text-primary-600 p-2 rounded-lg mr-3">
180
+ <i data-feather="search" class="w-5 h-5"></i>
181
+ </div>
182
+ <p>Technical architecture assessment</p>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ </div>
187
+
188
+ <!-- Process Card 2 -->
189
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden border-2 border-black transition-all duration-300 hover:shadow-xl hover:-translate-y-2">
190
+ <div class="p-6">
191
+ <div class="flex items-center mb-4">
192
+ <div class="text-4xl font-bold text-primary-500 mr-4">02</div>
193
+ <h3 class="text-2xl font-bold">Strategize</h3>
194
+ </div>
195
+ <p class="text-gray-600 mb-6">Creating a roadmap for success</p>
196
+
197
+ <div class="space-y-4">
198
+ <div class="flex items-start">
199
+ <div class="bg-primary-100 text-primary-600 p-2 rounded-lg mr-3">
200
+ <i data-feather="map" class="w-5 h-5"></i>
201
+ </div>
202
+ <p>Strategic planning & roadmap development</p>
203
+ </div>
204
+ <div class="flex items-start">
205
+ <div class="bg-primary-100 text-primary-600 p-2 rounded-lg mr-3">
206
+ <i data-feather="layout" class="w-5 h-5"></i>
207
+ </div>
208
+ <p>UX/UI design & prototyping</p>
209
+ </div>
210
+ <div class="flex items-start">
211
+ <div class="bg-primary-100 text-primary-600 p-2 rounded-lg mr-3">
212
+ <i data-feather="zap" class="w-5 h-5"></i>
213
+ </div>
214
+ <p>Process optimization & workflow design</p>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+
220
+ <!-- Process Card 3 -->
221
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden border-2 border-black transition-all duration-300 hover:shadow-xl hover:-translate-y-2">
222
+ <div class="p-6">
223
+ <div class="flex items-center mb-4">
224
+ <div class="text-4xl font-bold text-primary-500 mr-4">03</div>
225
+ <h3 class="text-2xl font-bold">Deliver</h3>
226
+ </div>
227
+ <p class="text-gray-600 mb-6">Execution and optimization</p>
228
+
229
+ <div class="space-y-4">
230
+ <div class="flex items-start">
231
+ <div class="bg-primary-100 text-primary-600 p-2 rounded-lg mr-3">
232
+ <i data-feather="code" class="w-5 h-5"></i>
233
+ </div>
234
+ <p>Development & implementation</p>
235
+ </div>
236
+ <div class="flex items-start">
237
+ <div class="bg-primary-100 text-primary-600 p-2 rounded-lg mr-3">
238
+ <i data-feather="check-circle" class="w-5 h-5"></i>
239
+ </div>
240
+ <p>Testing & quality assurance</p>
241
+ </div>
242
+ <div class="flex items-start">
243
+ <div class="bg-primary-100 text-primary-600 p-2 rounded-lg mr-3">
244
+ <i data-feather="rocket" class="w-5 h-5"></i>
245
+ </div>
246
+ <p>Launch & deployment</p>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </section>
254
+
255
+ <!-- Skills Section -->
256
+ <section id="skills" class="py-20 px-4 sm:px-6 lg:px-8 bg-white">
257
+ <div class="max-w-7xl mx-auto">
258
+ <h2 class="text-4xl md:text-5xl font-bold mb-4 text-center font-heading">Technical Expertise</h2>
259
+ <p class="text-xl text-center mb-12 text-gray-600 max-w-3xl mx-auto">
260
+ Full-stack capabilities across strategy, design, and development
261
+ </p>
262
+
263
+ <div class="grid md:grid-cols-3 gap-8">
264
+ <div class="bg-gray-50 p-8 rounded-xl border-2 border-black hover:border-primary-500 transition-colors duration-300">
265
+ <h3 class="text-2xl font-bold mb-6 flex items-center">
266
+ <i data-feather="target" class="w-6 h-6 mr-3 text-primary-500"></i>
267
+ Strategy & CX
268
+ </h3>
269
+ <ul class="space-y-3">
270
+ <li class="flex items-center">
271
+ <i data-feather="check" class="w-4 h-4 mr-2 text-primary-500"></i>
272
+ Business Strategy
273
+ </li>
274
+ <li class="flex items-center">
275
+ <i data-feather="check" class="w-4 h-4 mr-2 text-primary-500"></i>
276
+ Customer Experience
277
+ </li>
278
+ <li class="flex items-center">
279
+ <i data-feather="check" class="w-4 h-4 mr-2 text-primary-500"></i>
280
+ Product Management
281
+ </li>
282
+ <li class="flex items-center">
283
+ <i data-feather="check" class="w-4 h-4 mr-2 text-primary-500"></i>
284
+ Process Optimization
285
+ </li>
286
+ </ul>
287
+ </div>
288
+
289
+ <div class="bg-gray-50 p-8 rounded-xl border-2 border-black hover:border-primary-500 transition-colors duration-300">
290
+ <h3 class="text-2xl font-bold mb-6 flex items-center">
291
+ <i data-feather="layout" class="w-6 h-6 mr-3 text-primary-500"></i>
292
+ Design & UX
293
+ </h3>
294
+ <ul class="space-y-3">
295
+ <li class="flex items-center">
296
+ <i data-feather="check" class="w-4 h-4 mr-2 text-primary-500"></i>
297
+ UX/UI Design
298
+ </li>
299
+ <li class="flex items-center">
300
+ <i data-feather="check" class="w-4 h-4 mr-2 text-primary-500"></i>
301
+ Prototyping
302
+ </li>
303
+ <li class="flex items-center">
304
+ <i data-feather="check" class="w-4 h-4 mr-2 text-primary-500"></i>
305
+ User Research
306
+ </li>
307
+ <li class="flex items-center">
308
+ <i data-feather="check" class="w-4 h-4 mr-2 text-primary-500"></i>
309
+ Design Systems
310
+ </li>
311
+ </ul>
312
+ </div>
313
+
314
+ <div class="bg-gray-50 p-8 rounded-xl border-2 border-black hover:border-primary-500 transition-colors duration-300">
315
+ <h3 class="text-2xl font-bold mb-6 flex items-center">
316
+ <i data-feather="code" class="w-6 h-6 mr-3 text-primary-500
317
+ <!-- Results Section -->
318
+ <section id="results" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50">
319
+ <div class="max-w-7xl mx-auto">
320
+ <h2 class="text-4xl md:text-5xl font-bold mb-4 text-center font-heading">Measurable Results</h2>
321
+ <p class="text-xl text-center mb-12 text-gray-600 max-w-3xl mx-auto">
322
+ Tangible outcomes from past engagements
323
+ </p>
324
+
325
+ <div class="grid md:grid-cols-3 gap-8">
326
+ <div class="bg-white p-8 rounded-xl border-2 border-black shadow-lg">
327
+ <div class="text-5xl font-bold text-primary-500 mb-4">300%</div>
328
+ <h3 class="text-2xl font-bold mb-3">Revenue Growth</h3>
329
+ <p>For SaaS platform through strategic redesign and feature optimization</p>
330
+ </div>
331
+
332
+ <div class="bg-white p-8 rounded-xl border-2 border-black shadow-lg">
333
+ <div class="text-5xl font-bold text-primary-500 mb-4">80%</div>
334
+ <h3 class="text-2xl font-bold mb-3">Reduction</h3>
335
+ <p>In customer support tickets through UX improvements</p>
336
+ </div>
337
+
338
+ <div class="bg-white p-8 rounded-xl border-2 border-black shadow-lg">
339
+ <div class="text-5xl font-bold text-primary-500 mb-4">4.9★</div>
340
+ <h3 class="text-2xl font-bold mb-3">App Rating</h3>
341
+ <p>Achieved for mobile application after complete redesign</p>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ </section>
346
+
347
+ <!-- Contact Section -->
348
+ <section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 bg-white">
349
+ <div class="max-w-7xl mx-auto">
350
+ <h2 class="text-4xl md:text-5xl font-bold mb-4 text-center font-heading">Let's Build Something</h2>
351
+ <p class="text-xl text-center mb-12 text-gray-600 max-w-3xl mx-auto">
352
+ Ready to transform your business? Get in touch.
353
+ </p>
354
+
355
+ <div class="max-w-2xl mx-auto bg-gray-50 p-8 rounded-xl border-2 border-black">
356
+ <form id="contact-form" class="space-y-6">
357
+ <div>
358
+ <label for="name" class="block font-medium mb-2">Name</label>
359
+ <input type="text" id="name" name="name" required class="w-full px-4 py-3 border-2 border-black rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent">
360
+ </div>
361
+ <div>
362
+ <label for="email" class="block font-medium mb-2">Email</label>
363
+ <input type="email" id="email" name="email" required class="w-full px-4 py-3 border-2 border-black rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent">
364
+ </div>
365
+ <div>
366
+ <label for="message" class="block font-medium mb-2">Message</label>
367
+ <textarea id="message" name="message" rows="5" required class="w-full px-4 py-3 border-2 border-black rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"></textarea>
368
+ </div>
369
+ <button type="submit" class="w-full bg-primary-500 text-white font-bold py-3 px-6 rounded-lg hover:bg-primary-600 transition-colors duration-300 flex items-center justify-center">
370
+ <span>Send Message</span>
371
+ <i data-feather="send" class="ml-2 w-5 h-5"></i>
372
+ </button>
373
+ </form>
374
+ </div>
375
+ </div>
376
+ </section>
377
+
378
+ <!-- Footer -->
379
+ <footer class="bg-black text-white py-12 px-4 sm:px-6 lg:px-8">
380
+ <div class="max-w-7xl mx-auto">
381
+ <div class="grid md:grid-cols-3 gap-8">
382
+ <div>
383
+ <h3 class="text-xl font-bold font-mono mb-4">nathan.stack</h3>
384
+ <p class="text-gray-400">Full-Stack Business Strategist & Fixer</p>
385
+ </div>
386
+ <div>
387
+ <h3 class="text-xl font-bold mb-4">Quick Links</h3>
388
+ <ul class="space-y-2">
389
+ <li><a href="#process" class="text-gray-400 hover:text-white transition-colors duration-300">Process</a></li>
390
+ <li><a href="#skills" class="text-gray-400 hover:text-white transition-colors duration-300">Skills</a></li>
391
+ <li><a href="#results" class="text-gray-400 hover:text-white transition-colors duration-300">Results</a></li>
392
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition-colors duration-300">Contact</a></li>
393
+ </ul>
394
+ </div>
395
+ <div>
396
+ <h3 class="text-xl font-bold mb-4">Connect</h3>
397
+ <div class="flex space-x-4">
398
+ <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
399
+ <i data-feather="linkedin" class="w-6 h-6"></i>
400
+ </a>
401
+ <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
402
+ <i data-feather="twitter" class="w-6 h-6"></i>
403
+ </a>
404
+ <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
405
+ <i data-feather="github" class="w-6 h-6"></i>
406
+ </a>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500">
411
+ <p>&copy; 2023 Nathan Stower. All rights reserved.</p>
412
+ </div>
413
+ </div>
414
+ </footer>
415
+ </main>
416
+
417
+ <script>
418
+ // Initialize Feather Icons
419
+ feather.replace();
420
+
421
+ // Page Loader
422
+ window.addEventListener('load', function() {
423
+ setTimeout(function() {
424
+ document.getElementById('page-loader').style.opacity = '0';
425
+ setTimeout(function() {
426
+ document.getElementById('page-loader').style.display = 'none';
427
+ }, 500);
428
+ }, 800);
429
+ });
430
+
431
+ // Mobile Menu Toggle
432
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
433
+ const menu = document.getElementById('mobile-menu');
434
+ menu.classList.toggle('hidden');
435
+ });
436
+
437
+ // Smooth Scrolling for Anchor Links
438
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
439
+ anchor.addEventListener('click', function(e) {
440
+ e.preventDefault();
441
+ const target = document.querySelector(this.getAttribute('href'));
442
+ if (target) {
443
+ window.scrollTo({
444
+ top: target.offsetTop - 80,
445
+ behavior: 'smooth'
446
+ });
447
+ }
448
+ });
449
+ });
450
+
451
+ // Contact Form Submission
452
+ document.getElementById('contact-form').addEventListener('submit', function(e) {
453
+ e.preventDefault();
454
+ // Form submission logic would go here
455
+ alert('Thank you for your message! I will get back to you soon.');
456
+ this.reset();
457
+ });
458
+ </script>
459
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
460
+ </body>
461
+ </html>
style.css CHANGED
@@ -1,28 +1,51 @@
 
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
+ /* Custom Styles */
2
  body {
3
+ font-family: 'Inter', sans-serif;
4
+ line-height: 1.6;
5
  }
6
 
7
+ .font-heading {
8
+ font-family: 'Space Grotesk', sans-serif;
 
9
  }
10
 
11
+ .font-mono {
12
+ font-family: 'JetBrains Mono', monospace;
 
 
 
13
  }
14
 
15
+ /* Animation for cursor in logo */
16
+ @keyframes blink {
17
+ 0%, 100% { opacity: 1; }
18
+ 50% { opacity: 0; }
 
 
19
  }
20
 
21
+ .animate-pulse {
22
+ animation: blink 1s step-end infinite;
23
  }
24
+
25
+ /* Navigation */
26
+ #main-nav {
27
+ transition: all 0.3s ease;
28
+ }
29
+
30
+ /* Hero Section */
31
+ #home {
32
+ background-size: cover;
33
+ background-position: center;
34
+ }
35
+
36
+ /* Process Cards */
37
+ .hover\:-translate-y-2:hover {
38
+ transform: translateY(-0.5rem);
39
+ }
40
+
41
+ /* Form Inputs */
42
+ input:focus, textarea:focus {
43
+ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
44
+ }
45
+
46
+ /* Responsive Adjustments */
47
+ @media (max-width: 768px) {
48
+ #home h1 {
49
+ font-size: 3rem;
50
+ }
51
+ }