Hugging Face's logo

Spaces:
Thnesko
/
undefined
Running

App Files Community
Thnesko commited on
Commit
941b932
·
verified ·
1 Parent(s): 611ca24

Create a personal portfolio website for a mechanical engineer using utilitarian design and mixing it with ascii. The website's background should have ascii characters that interact with the mouse cursor, the ascii characters should be of a color duller than the website.

Browse files
Files changed (3) hide show
  1. README.md +8 -4
  2. index.html +852 -19
  3. portfolio.html +640 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 👀
4
  colorFrom: blue
5
- colorTo: gray
 
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: undefined
 
3
  colorFrom: blue
4
+ colorTo: green
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).
14
+
index.html CHANGED
@@ -1,19 +1,852 @@
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>Man 'o War Mouse Mods | Ultra-Lightweight 3D-Printed Mouse Shells</title>
7
+ <meta name="description" content="Revolutionary 3D-printed mouse shells under 40g. Experience the future of gaming peripherals with our cutting-edge lightweight designs.">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <link rel="preconnect" href="https://fonts.googleapis.com">
11
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
13
+ <style>
14
+ :root {
15
+ --primary: #3a86ff;
16
+ --primary-dark: #2667cc;
17
+ --dark: #1a1a2e;
18
+ --light: #f8f9fa;
19
+ }
20
+
21
+ body {
22
+ font-family: 'Inter', sans-serif;
23
+ background-color: var(--light);
24
+ color: var(--dark);
25
+ transition: all 0.3s ease;
26
+ }
27
+
28
+ .dark body {
29
+ background-color: var(--dark);
30
+ color: var(--light);
31
+ }
32
+
33
+ .title-font {
34
+ font-family: 'Space Grotesk', sans-serif;
35
+ }
36
+
37
+ .glass-effect {
38
+ background: rgba(255, 255, 255, 0.2);
39
+ backdrop-filter: blur(10px);
40
+ -webkit-backdrop-filter: blur(10px);
41
+ border: 1px solid rgba(255, 255, 255, 0.18);
42
+ }
43
+
44
+ .dark .glass-effect {
45
+ background: rgba(26, 26, 46, 0.7);
46
+ }
47
+
48
+ .hero-gradient {
49
+ background: linear-gradient(135deg, rgba(58, 134, 255, 0.15) 0%, rgba(26, 26, 46, 0) 60%);
50
+ }
51
+
52
+ .dark .hero-gradient {
53
+ background: linear-gradient(135deg, rgba(58, 134, 255, 0.25) 0%, rgba(26, 26, 46, 0) 60%);
54
+ }
55
+
56
+ .product-card:hover {
57
+ transform: translateY(-5px);
58
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
59
+ }
60
+
61
+ .testimonial-card {
62
+ transition: all 0.3s ease;
63
+ }
64
+
65
+ .testimonial-card:hover {
66
+ transform: scale(1.02);
67
+ }
68
+
69
+ .nav-link {
70
+ position: relative;
71
+ }
72
+
73
+ .nav-link::after {
74
+ content: '';
75
+ position: absolute;
76
+ width: 0;
77
+ height: 2px;
78
+ bottom: -2px;
79
+ left: 0;
80
+ background-color: var(--primary);
81
+ transition: width 0.3s ease;
82
+ }
83
+
84
+ .nav-link:hover::after {
85
+ width: 100%;
86
+ }
87
+
88
+ .toggle-checkbox:checked {
89
+ right: 0;
90
+ border-color: var(--primary);
91
+ }
92
+
93
+ .toggle-checkbox:checked + .toggle-label {
94
+ background-color: var(--primary);
95
+ }
96
+
97
+ .scroll-down {
98
+ animation: bounce 2s infinite;
99
+ }
100
+
101
+ @keyframes bounce {
102
+ 0%, 20%, 50%, 80%, 100% {
103
+ transform: translateY(0);
104
+ }
105
+ 40% {
106
+ transform: translateY(-10px);
107
+ }
108
+ 60% {
109
+ transform: translateY(-5px);
110
+ }
111
+ }
112
+
113
+ .fade-in {
114
+ animation: fadeIn 1s ease-in;
115
+ }
116
+
117
+ @keyframes fadeIn {
118
+ from { opacity: 0; }
119
+ to { opacity: 1; }
120
+ }
121
+
122
+ .parallax {
123
+ background-attachment: fixed;
124
+ background-position: center;
125
+ background-repeat: no-repeat;
126
+ background-size: cover;
127
+ }
128
+
129
+ @media (max-width: 768px) {
130
+ .parallax {
131
+ background-attachment: scroll;
132
+ }
133
+ }
134
+ </style>
135
+ </head>
136
+ <body class="dark:bg-gray-900">
137
+ <!-- Dark Mode Toggle -->
138
+ <div class="fixed top-4 right-4 z-50">
139
+ <div class="relative inline-block w-12 mr-2 align-middle select-none">
140
+ <input type="checkbox" name="toggle" id="toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
141
+ <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
142
+ </div>
143
+ <label for="toggle" class="text-xs font-medium text-gray-700 dark:text-gray-300">
144
+ <i class="fas fa-moon"></i>
145
+ </label>
146
+ </div>
147
+
148
+ <!-- Navigation -->
149
+ <nav class="fixed w-full z-40 glass-effect dark:bg-gray-900/80 shadow-sm">
150
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
151
+ <div class="flex justify-between h-16 items-center">
152
+ <div class="flex-shrink-0 flex items-center">
153
+ <span class="title-font text-2xl font-bold text-blue-500">Man 'o War</span>
154
+ <span class="ml-1 title-font text-2xl font-light">Mouse Mods</span>
155
+ </div>
156
+ <div class="hidden md:block">
157
+ <div class="ml-10 flex items-baseline space-x-8">
158
+ <a href="#home" class="nav-link px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-blue-500">Home</a>
159
+ <a href="#about" class="nav-link px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-blue-500">About</a>
160
+ <a href="#products" class="nav-link px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-blue-500">Products</a>
161
+ <a href="#technology" class="nav-link px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-blue-500">Technology</a>
162
+ <a href="#testimonials" class="nav-link px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-blue-500">Testimonials</a>
163
+ <a href="#contact" class="ml-4 px-4 py-2 rounded-md text-sm font-medium text-white bg-blue-500 hover:bg-blue-600 transition duration-300">Order Now</a>
164
+ </div>
165
+ </div>
166
+ <div class="-mr-2 flex md:hidden">
167
+ <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 dark:text-gray-300 hover:text-blue-500 focus:outline-none">
168
+ <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
169
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
170
+ </svg>
171
+ </button>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- Mobile menu -->
177
+ <div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-gray-800 shadow-lg rounded-b-lg">
178
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
179
+ <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:text-blue-500">Home</a>
180
+ <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:text-blue-500">About</a>
181
+ <a href="#products" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:text-blue-500">Products</a>
182
+ <a href="#technology" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:text-blue-500">Technology</a>
183
+ <a href="#testimonials" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:text-blue-500">Testimonials</a>
184
+ <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-blue-500 hover:bg-blue-600">Order Now</a>
185
+ </div>
186
+ </div>
187
+ </nav>
188
+
189
+ <!-- Hero Section -->
190
+ <section id="home" class="relative h-screen flex items-center justify-center overflow-hidden hero-gradient">
191
+ <div class="absolute inset-0 z-0">
192
+ <video autoplay loop muted playsinline class="w-full h-full object-cover">
193
+ <source src="https://assets.mixkit.co/videos/preview/mixkit-close-up-of-computer-mouse-clicking-17253-large.mp4" type="video/mp4">
194
+ </video>
195
+ <div class="absolute inset-0 bg-black opacity-30"></div>
196
+ </div>
197
+
198
+ <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
199
+ <div class="glass-effect rounded-2xl p-8 md:p-12 inline-block max-w-4xl">
200
+ <h1 class="title-font text-4xl md:text-6xl font-bold text-white mb-4">Redefining Mouse Performance</h1>
201
+ <p class="text-xl md:text-2xl text-gray-200 mb-8">Ultra-lightweight 3D-printed shells under 40g for competitive gaming</p>
202
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
203
+ <a href="#products" class="px-8 py-3 rounded-lg text-lg font-semibold text-white bg-blue-500 hover:bg-blue-600 transition duration-300 transform hover:scale-105">Explore Products</a>
204
+ <a href="#technology" class="px-8 py-3 rounded-lg text-lg font-semibold text-white bg-transparent border-2 border-white hover:bg-white hover:bg-opacity-20 transition duration-300 transform hover:scale-105">Our Technology</a>
205
+ </div>
206
+ </div>
207
+ </div>
208
+
209
+ <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 z-10 scroll-down">
210
+ <a href="#about" class="text-white">
211
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 animate-bounce" fill="none" viewBox="0 0 24 24" stroke="currentColor">
212
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
213
+ </svg>
214
+ </a>
215
+ </div>
216
+ </section>
217
+
218
+ <!-- About Section -->
219
+ <section id="about" class="py-20 bg-white dark:bg-gray-900">
220
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
221
+ <div class="text-center mb-16">
222
+ <h2 class="title-font text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">The Future of Gaming Peripherals</h2>
223
+ <div class="w-20 h-1 bg-blue-500 mx-auto mb-6"></div>
224
+ <p class="max-w-2xl mx-auto text-lg text-gray-600 dark:text-gray-300">Pushing the boundaries of weight reduction without compromising durability or performance.</p>
225
+ </div>
226
+
227
+ <div class="grid md:grid-cols-2 gap-12 items-center">
228
+ <div class="fade-in">
229
+ <h3 class="title-font text-2xl font-semibold text-gray-900 dark:text-white mb-4">Why Weight Matters</h3>
230
+ <p class="text-gray-600 dark:text-gray-300 mb-6">In competitive gaming, every millisecond counts. Our sub-40g mouse shells provide the ultimate advantage with faster movements, reduced fatigue, and improved precision during extended gaming sessions.</p>
231
+
232
+ <div class="space-y-4">
233
+ <div class="flex items-start">
234
+ <div class="flex-shrink-0 mt-1">
235
+ <div class="flex items-center justify-center h-6 w-6 rounded-full bg-blue-500 text-white">
236
+ <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
237
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
238
+ </svg>
239
+ </div>
240
+ </div>
241
+ <div class="ml-3">
242
+ <p class="text-gray-700 dark:text-gray-300 font-medium">Up to 60% lighter than standard gaming mice</p>
243
+ </div>
244
+ </div>
245
+
246
+ <div class="flex items-start">
247
+ <div class="flex-shrink-0 mt-1">
248
+ <div class="flex items-center justify-center h-6 w-6 rounded-full bg-blue-500 text-white">
249
+ <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
250
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
251
+ </svg>
252
+ </div>
253
+ </div>
254
+ <div class="ml-3">
255
+ <p class="text-gray-700 dark:text-gray-300 font-medium">Precision-engineered for optimal weight distribution</p>
256
+ </div>
257
+ </div>
258
+
259
+ <div class="flex items-start">
260
+ <div class="flex-shrink-0 mt-1">
261
+ <div class="flex items-center justify-center h-6 w-6 rounded-full bg-blue-500 text-white">
262
+ <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
263
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
264
+ </svg>
265
+ </div>
266
+ </div>
267
+ <div class="ml-3">
268
+ <p class="text-gray-700 dark:text-gray-300 font-medium">Customizable designs to match your play style</p>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </div>
273
+
274
+ <div class="relative">
275
+ <div class="glass-effect rounded-2xl overflow-hidden shadow-xl transform rotate-1 hover:rotate-0 transition duration-500">
276
+ <img src="https://images.unsplash.com/photo-1591488320449-011701bb6704?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="3D printed mouse shell" class="w-full h-auto">
277
+ </div>
278
+ <div class="absolute -bottom-6 -right-6 bg-blue-500 text-white px-6 py-3 rounded-lg shadow-lg">
279
+ <span class="title-font text-xl font-bold">39g</span>
280
+ <span class="block text-xs">ULTRA-LIGHTWEIGHT</span>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </section>
286
+
287
+ <!-- Products Section -->
288
+ <section id="products" class="py-20 bg-gray-50 dark:bg-gray-800 parallax" style="background-image: url('https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');">
289
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
290
+ <div class="text-center mb-16">
291
+ <h2 class="title-font text-3xl md:text-4xl font-bold text-white mb-4">Our Product Line</h2>
292
+ <div class="w-20 h-1 bg-blue-500 mx-auto mb-6"></div>
293
+ <p class="max-w-2xl mx-auto text-lg text-gray-200">Choose the perfect shell for your gaming needs</p>
294
+ </div>
295
+
296
+ <div class="grid md:grid-cols-3 gap-8">
297
+ <!-- Product 1 -->
298
+ <div class="product-card bg-white dark:bg-gray-900 rounded-xl shadow-lg overflow-hidden transition duration-300">
299
+ <div class="relative h-64">
300
+ <img src="https://images.unsplash.com/photo-1527814050087-3793815479db?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80" alt="Vanguard Shell" class="w-full h-full object-cover">
301
+ <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
302
+ <div class="absolute bottom-0 left-0 p-4">
303
+ <h3 class="title-font text-2xl font-bold text-white">Vanguard</h3>
304
+ <p class="text-blue-300 font-medium">38g</p>
305
+ </div>
306
+ </div>
307
+ <div class="p-6">
308
+ <div class="flex justify-between items-center mb-4">
309
+ <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800">BEST SELLER</span>
310
+ <span class="text-gray-900 dark:text-white font-bold text-xl">$89.99</span>
311
+ </div>
312
+ <p class="text-gray-600 dark:text-gray-300 mb-4">Our flagship design with optimal weight distribution for FPS games.</p>
313
+ <ul class="space-y-2 mb-6">
314
+ <li class="flex items-center">
315
+ <svg class="w-4 h-4 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
316
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
317
+ </svg>
318
+ <span class="text-gray-600 dark:text-gray-300">Honeycomb structure</span>
319
+ </li>
320
+ <li class="flex items-center">
321
+ <svg class="w-4 h-4 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
322
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
323
+ </svg>
324
+ <span class="text-gray-600 dark:text-gray-300">Reinforced stress points</span>
325
+ </li>
326
+ <li class="flex items-center">
327
+ <svg class="w-4 h-4 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
328
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
329
+ </svg>
330
+ <span class="text-gray-600 dark:text-gray-300">Ergonomic thumb rest</span>
331
+ </li>
332
+ </ul>
333
+ <button class="w-full px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg transition duration-300">Add to Cart</button>
334
+ </div>
335
+ </div>
336
+
337
+ <!-- Product 2 -->
338
+ <div class="product-card bg-white dark:bg-gray-900 rounded-xl shadow-lg overflow-hidden transition duration-300">
339
+ <div class="relative h-64">
340
+ <img src="https://images.unsplash.com/photo-1546054454-aa26e2b734c7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1480&q=80" alt="Phantom Shell" class="w-full h-full object-cover">
341
+ <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
342
+ <div class="absolute bottom-0 left-0 p-4">
343
+ <h3 class="title-font text-2xl font-bold text-white">Phantom</h3>
344
+ <p class="text-blue-300 font-medium">36g</p>
345
+ </div>
346
+ </div>
347
+ <div class="p-6">
348
+ <div class="flex justify-between items-center mb-4">
349
+ <span class="bg-purple-100 text-purple-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-purple-200 dark:text-purple-800">NEW</span>
350
+ <span class="text-gray-900 dark:text-white font-bold text-xl">$99.99</span>
351
+ </div>
352
+ <p class="text-gray-600 dark:text-gray-300 mb-4">Ultra-light design with enhanced airflow for palm grip users.</p>
353
+ <ul class="space-y-2 mb-6">
354
+ <li class="flex items-center">
355
+ <svg class="w-4 h-4 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
356
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
357
+ </svg>
358
+ <span class="text-gray-600 dark:text-gray-300">Full honeycomb coverage</span>
359
+ </li>
360
+ <li class="flex items-center">
361
+ <svg class="w-4 h-4 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
362
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
363
+ </svg>
364
+ <span class="text-gray-600 dark:text-gray-300">Extended pinky rest</span>
365
+ </li>
366
+ <li class="flex items-center">
367
+ <svg class="w-4 h-4 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
368
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
369
+ </svg>
370
+ <span class="text-gray-600 dark:text-gray-300">Anti-slip side grips</span>
371
+ </li>
372
+ </ul>
373
+ <button class="w-full px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg transition duration-300">Add to Cart</button>
374
+ </div>
375
+ </div>
376
+
377
+ <!-- Product 3 -->
378
+ <div class="product-card bg-white dark:bg-gray-900 rounded-xl shadow-lg overflow-hidden transition duration-300">
379
+ <div class="relative h-64">
380
+ <img src="https://images.unsplash.com/photo-1600086824249-55a8153e9a08?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Titan Shell" class="w-full h-full object-cover">
381
+ <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
382
+ <div class="absolute bottom-0 left-0 p-4">
383
+ <h3 class="title-font text-2xl font-bold text-white">Titan</h3>
384
+ <p class="text-blue-300 font-medium">39g</p>
385
+ </div>
386
+ </div>
387
+ <div class="p-6">
388
+ <div class="flex justify-between items-center mb-4">
389
+ <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-green-200 dark:text-green-800">DURABLE</span>
390
+ <span class="text-gray-900 dark:text-white font-bold text-xl">$79.99</span>
391
+ </div>
392
+ <p class="text-gray-600 dark:text-gray-300 mb-4">Balanced design with reinforced structure for durability.</p>
393
+ <ul class="space-y-2 mb-6">
394
+ <li class="flex items-center">
395
+ <svg class="w-4 h-4 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
396
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
397
+ </svg>
398
+ <span class="text-gray-600 dark:text-gray-300">Strategic honeycomb pattern</span>
399
+ </li>
400
+ <li class="flex items-center">
401
+ <svg class="w-4 h-4 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
402
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
403
+ </svg>
404
+ <span class="text-gray-600 dark:text-gray-300">Thicker base structure</span>
405
+ </li>
406
+ <li class="flex items-center">
407
+ <svg class="w-4 h-4 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
408
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
409
+ </svg>
410
+ <span class="text-gray-600 dark:text-gray-300">Enhanced side grips</span>
411
+ </li>
412
+ </ul>
413
+ <button class="w-full px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg transition duration-300">Add to Cart</button>
414
+ </div>
415
+ </div>
416
+ </div>
417
+
418
+ <div class="text-center mt-12">
419
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-500 hover:bg-blue-600 transition duration-300">
420
+ View All Products
421
+ <svg class="ml-3 -mr-1 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
422
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
423
+ </svg>
424
+ </a>
425
+ </div>
426
+ </div>
427
+ </section>
428
+
429
+ <!-- Technology Section -->
430
+ <section id="technology" class="py-20 bg-white dark:bg-gray-900">
431
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
432
+ <div class="text-center mb-16">
433
+ <h2 class="title-font text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">Cutting-Edge Technology</h2>
434
+ <div class="w-20 h-1 bg-blue-500 mx-auto mb-6"></div>
435
+ <p class="max-w-2xl mx-auto text-lg text-gray-600 dark:text-gray-300">Innovative manufacturing techniques for unparalleled performance</p>
436
+ </div>
437
+
438
+ <div class="grid md:grid-cols-3 gap-8">
439
+ <!-- Tech 1 -->
440
+ <div class="glass-effect rounded-xl p-8 transition duration-300 hover:shadow-xl">
441
+ <div class="flex justify-center mb-6">
442
+ <div class="flex items-center justify-center h-16 w-16 rounded-full bg-blue-100 text-blue-500">
443
+ <i class="fas fa-print text-2xl"></i>
444
+ </div>
445
+ </div>
446
+ <h3 class="text-center text-xl font-semibold text-gray-900 dark:text-white mb-3">Advanced 3D Printing</h3>
447
+ <p class="text-center text-gray-600 dark:text-gray-300">Using industrial-grade resin printers with 25μm resolution for precision that rivals injection molding.</p>
448
+ </div>
449
+
450
+ <!-- Tech 2 -->
451
+ <div class="glass-effect rounded-xl p-8 transition duration-300 hover:shadow-xl">
452
+ <div class="flex justify-center mb-6">
453
+ <div class="flex items-center justify-center h-16 w-16 rounded-full bg-blue-100 text-blue-500">
454
+ <i class="fas fa-atom text-2xl"></i>
455
+ </div>
456
+ </div>
457
+ <h3 class="text-center text-xl font-semibold text-gray-900 dark:text-white mb-3">Material Innovation</h3>
458
+ <p class="text-center text-gray-600 dark:text-gray-300">Our proprietary resin blend offers the perfect balance of strength and weight reduction.</p>
459
+ </div>
460
+
461
+ <!-- Tech 3 -->
462
+ <div class="glass-effect rounded-xl p-8 transition duration-300 hover:shadow-xl">
463
+ <div class="flex justify-center mb-6">
464
+ <div class="flex items-center justify-center h-16 w-16 rounded-full bg-blue-100 text-blue-500">
465
+ <i class="fas fa-project-diagram text-2xl"></i>
466
+ </div>
467
+ </div>
468
+ <h3 class="text-center text-xl font-semibold text-gray-900 dark:text-white mb-3">Structural Optimization</h3>
469
+ <p class="text-center text-gray-600 dark:text-gray-300">AI-assisted design creates optimal honeycomb patterns for maximum strength with minimal weight.</p>
470
+ </div>
471
+ </div>
472
+
473
+ <div class="mt-16 grid md:grid-cols-2 gap-12 items-center">
474
+ <div class="order-2 md:order-1">
475
+ <h3 class="title-font text-2xl font-semibold text-gray-900 dark:text-white mb-4">Precision Engineering</h3>
476
+ <p class="text-gray-600 dark:text-gray-300 mb-6">Each shell undergoes rigorous testing to ensure perfect balance and structural integrity. Our quality control process includes:</p>
477
+
478
+ <div class="space-y-4">
479
+ <div class="flex">
480
+ <div class="flex-shrink-0">
481
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
482
+ <span class="text-xl font-bold">1</span>
483
+ </div>
484
+ </div>
485
+ <div class="ml-4">
486
+ <h4 class="text-lg font-medium text-gray-900 dark:text-white">Stress Simulation</h4>
487
+ <p class="mt-1 text-gray-600 dark:text-gray-300">Finite element analysis predicts weak points before printing.</p>
488
+ </div>
489
+ </div>
490
+
491
+ <div class="flex">
492
+ <div class="flex-shrink-0">
493
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
494
+ <span class="text-xl font-bold">2</span>
495
+ </div>
496
+ </div>
497
+ <div class="ml-4">
498
+ <h4 class="text-lg font-medium text-gray-900 dark:text-white">Dimensional Verification</h4>
499
+ <p class="mt-1 text-gray-600 dark:text-gray-300">Laser scanning ensures micron-level accuracy to original specs.</p>
500
+ </div>
501
+ </div>
502
+
503
+ <div class="flex">
504
+ <div class="flex-shrink-0">
505
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
506
+ <span class="text-xl font-bold">3</span>
507
+ </div>
508
+ </div>
509
+ <div class="ml-4">
510
+ <h4 class="text-lg font-medium text-gray-900 dark:text-white">Weight Certification</h4>
511
+ <p class="mt-1 text-gray-600 dark:text-gray-300">Each shell is individually weighed to guarantee sub-40g compliance.</p>
512
+ </div>
513
+ </div>
514
+ </div>
515
+ </div>
516
+
517
+ <div class="order-1 md:order-2">
518
+ <div class="relative">
519
+ <img src="https://images.unsplash.com/photo-1581093458171-13a1187f946f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="3D printing process" class="rounded-xl shadow-xl w-full">
520
+ <div class="absolute -bottom-6 -left-6 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
521
+ <div class="flex items-center">
522
+ <div class="flex-shrink-0 bg-blue-500 rounded-md p-2">
523
+ <i class="fas fa-weight text-white"></i>
524
+ </div>
525
+ <div class="ml-3">
526
+ <p class="text-sm font-medium text-gray-500 dark:text-gray-300">AVERAGE WEIGHT</p>
527
+ <p class="text-lg font-bold text-gray-900 dark:text-white">38.7g</p>
528
+ </div>
529
+ </div>
530
+ </div>
531
+ </div>
532
+ </div>
533
+ </div>
534
+ </div>
535
+ </section>
536
+
537
+ <!-- Testimonials Section -->
538
+ <section id="testimonials" class="py-20 bg-gray-50 dark:bg-gray-800">
539
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
540
+ <div class="text-center mb-16">
541
+ <h2 class="title-font text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">What Gamers Say</h2>
542
+ <div class="w-20 h-1 bg-blue-500 mx-auto mb-6"></div>
543
+ <p class="max-w-2xl mx-auto text-lg text-gray-600 dark:text-gray-300">Professional gamers and enthusiasts trust our products</p>
544
+ </div>
545
+
546
+ <div class="grid md:grid-cols-3 gap-8">
547
+ <!-- Testimonial 1 -->
548
+ <div class="testimonial-card bg-white dark:bg-gray-900 rounded-xl shadow-lg p-8">
549
+ <div class="flex items-center mb-4">
550
+ <div class="flex-shrink-0">
551
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Testimonial author">
552
+ </div>
553
+ <div class="ml-4">
554
+ <h4 class="text-lg font-semibold text-gray-900 dark:text-white">Marcus "Frost" Chen</h4>
555
+ <p class="text-blue-500">Professional FPS Player</p>
556
+ </div>
557
+ </div>
558
+ <div class="text-gray-600 dark:text-gray-300 mb-4">
559
+ <p>"The Vanguard shell transformed my gameplay. The weight reduction gave me faster flicks while maintaining perfect balance. My K/D ratio improved by 18% after switching."</p>
560
+ </div>
561
+ <div class="flex">
562
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
563
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
564
+ </svg>
565
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
566
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
567
+ </svg>
568
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
569
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
570
+ </svg>
571
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
572
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
573
+ </svg>
574
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
575
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
576
+ </svg>
577
+ </div>
578
+ </div>
579
+
580
+ <!-- Testimonial 2 -->
581
+ <div class="testimonial-card bg-white dark:bg-gray-900 rounded-xl shadow-lg p-8">
582
+ <div class="flex items-center mb-4">
583
+ <div class="flex-shrink-0">
584
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Testimonial author">
585
+ </div>
586
+ <div class="ml-4">
587
+ <h4 class="text-lg font-semibold text-gray-900 dark:text-white">Sarah "Valkyrie" Park</h4>
588
+ <p class="text-blue-500">Esports Team Captain</p>
589
+ </div>
590
+ </div>
591
+ <div class="text-gray-600 dark:text-gray-300 mb-4">
592
+ <p>"After trying multiple lightweight options, Man 'o War stands out for durability. Our entire team switched and we've seen consistent performance improvements across tournaments."</p>
593
+ </div>
594
+ <div class="flex">
595
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
596
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
597
+ </svg>
598
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
599
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
600
+ </svg>
601
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
602
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
603
+ </svg>
604
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
605
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
606
+ </svg>
607
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
608
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
609
+ </svg>
610
+ </div>
611
+ </div>
612
+
613
+ <!-- Testimonial 3 -->
614
+ <div class="testimonial-card bg-white dark:bg-gray-900 rounded-xl shadow-lg p-8">
615
+ <div class="flex items-center mb-4">
616
+ <div class="flex-shrink-0">
617
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Testimonial author">
618
+ </div>
619
+ <div class="ml-4">
620
+ <h4 class="text-lg font-semibold text-gray-900 dark:text-white">David "Trigger" Müller</h4>
621
+ <p class="text-blue-500">Tech Reviewer</p>
622
+ </div>
623
+ </div>
624
+ <div class="text-gray-600 dark:text-gray-300 mb-4">
625
+ <p>"The engineering behind these shells is revolutionary. After 6 months of heavy use, my Phantom shell shows no signs of wear while maintaining its original weight and balance."</p>
626
+ </div>
627
+ <div class="flex">
628
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
629
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
630
+ </svg>
631
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
632
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.� 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
633
+ </svg>
634
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
635
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
636
+ </svg>
637
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
638
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
639
+ </svg>
640
+ <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
641
+ <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
642
+ </svg>
643
+ </div>
644
+ </div>
645
+ </div>
646
+ </div>
647
+ </section>
648
+
649
+ <!-- Contact Section -->
650
+ <section id="contact" class="py-20 bg-white dark:bg-gray-900">
651
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
652
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8">
653
+ <div class="max-w-lg mx-auto lg:max-w-none lg:mx-0">
654
+ <div class="text-center lg:text-left">
655
+ <h2 class="title-font text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">Ready to Upgrade?</h2>
656
+ <div class="w-20 h-1 bg-blue-500 mb-6 lg:mx-0 mx-auto"></div>
657
+ <p class="text-lg text-gray-600 dark:text-gray-300 mb-8">Have questions about our products or want to discuss custom solutions? Our team is here to help.</p>
658
+
659
+ <div class="space-y-6">
660
+ <div class="flex items-start">
661
+ <div class="flex-shrink-0">
662
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
663
+ <i class="fas fa-envelope"></i>
664
+ </div>
665
+ </div>
666
+ <div class="ml-4">
667
+ <h3 class="text-lg font-medium text-gray-900 dark:text-white">Email us</h3>
668
+ <p class="text-gray-600 dark:text-gray-300">support@manowarmods.com</p>
669
+ </div>
670
+ </div>
671
+
672
+ <div class="flex items-start">
673
+ <div class="flex-shrink-0">
674
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
675
+ <i class="fas fa-phone-alt"></i>
676
+ </div>
677
+ </div>
678
+ <div class="ml-4">
679
+ <h3 class="text-lg font-medium text-gray-900 dark:text-white">Call us</h3>
680
+ <p class="text-gray-600 dark:text-gray-300">+1 (555) 123-4567</p>
681
+ </div>
682
+ </div>
683
+
684
+ <div class="flex items-start">
685
+ <div class="flex-shrink-0">
686
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
687
+ <i class="fas fa-map-marker-alt"></i>
688
+ </div>
689
+ </div>
690
+ <div class="ml-4">
691
+ <h3 class="text-lg font-medium text-gray-900 dark:text-white">Visit us</h3>
692
+ <p class="text-gray-600 dark:text-gray-300">123 Tech Park, Innovation City</p>
693
+ </div>
694
+ </div>
695
+ </div>
696
+ </div>
697
+ </div>
698
+
699
+ <div class="mt-12 lg:mt-0">
700
+ <div class="glass-effect rounded-lg shadow-xl p-8">
701
+ <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-6">Send us a message</h3>
702
+ <form class="space-y-6">
703
+ <div>
704
+ <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Your Name</label>
705
+ <input type="text" id="name" name="name" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white" required>
706
+ </div>
707
+
708
+ <div>
709
+ <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
710
+ <input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white" required>
711
+ </div>
712
+
713
+ <div>
714
+ <label for="subject" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Subject</label>
715
+ <input type="text" id="subject" name="subject" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white" required>
716
+ </div>
717
+
718
+ <div>
719
+ <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Message</label>
720
+ <textarea id="message" name="message" rows="4" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white" required></textarea>
721
+ </div>
722
+
723
+ <div>
724
+ <button type="submit" class="w-full px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-md transition duration-300">Send Message</button>
725
+ </div>
726
+ </form>
727
+ </div>
728
+ </div>
729
+ </div>
730
+ </div>
731
+ </section>
732
+
733
+ <!-- Newsletter -->
734
+ <div class="bg-gray-50 dark:bg-gray-800 py-16">
735
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
736
+ <div class="glass-effect rounded-xl p-8 md:p-12 text-center">
737
+ <h2 class="title-font text-3xl font-bold text-gray-900 dark:text-white mb-4">Stay Updated</h2>
738
+ <p class="max-w-2xl mx-auto text-lg text-gray-600 dark:text-gray-300 mb-8">Subscribe to our newsletter for product updates, exclusive offers, and gaming tips.</p>
739
+
740
+ <form class="max-w-md mx-auto flex">
741
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-md border border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white" required>
742
+ <button type="submit" class="px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-r-md transition duration-300">Subscribe</button>
743
+ </form>
744
+ </div>
745
+ </div>
746
+ </div>
747
+
748
+ <!-- Footer -->
749
+ <footer class="bg-gray-900 text-white pt-12 pb-8">
750
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
751
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
752
+ <div>
753
+ <h3 class="title-font text-lg font-semibold mb-4">Products</h3>
754
+ <ul class="space-y-2">
755
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Vanguard</a></li>
756
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Phantom</a></li>
757
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Titan</a></li>
758
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Accessories</a></li>
759
+ </ul>
760
+ </div>
761
+
762
+ <div>
763
+ <h3 class="title-font text-lg font-semibold mb-4">Support</h3>
764
+ <ul class="space-y-2">
765
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Documentation</a></li>
766
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Guides</a></li>
767
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">API Status</a></li>
768
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li>
769
+ </ul>
770
+ </div>
771
+
772
+ <div>
773
+ <h3 class="title-font text-lg font-semibold mb-4">Company</h3>
774
+ <ul class="space-y-2">
775
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">About</a></li>
776
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li>
777
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Careers</a></li>
778
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Press</a></li>
779
+ </ul>
780
+ </div>
781
+
782
+ <div>
783
+ <h3 class="title-font text-lg font-semibold mb-4">Legal</h3>
784
+ <ul class="space-y-2">
785
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Privacy</a></li>
786
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Terms</a></li>
787
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Cookie Policy</a></li>
788
+ </ul>
789
+ </div>
790
+ </div>
791
+
792
+ <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
793
+ <div class="flex items-center mb-4 md:mb-0">
794
+ <span class="title-font text-xl font-bold text-blue-500">Man 'o War</span>
795
+ <span class="ml-1 title-font text-xl font-light text-white">Mouse Mods</span>
796
+ </div>
797
+
798
+ <div class="flex space-x-6">
799
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
800
+ <i class="fab fa-twitter text-xl"></i>
801
+ </a>
802
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
803
+ <i class="fab fa-instagram text-xl"></i>
804
+ </a>
805
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
806
+ <i class="fab fa-discord text-xl"></i>
807
+ </a>
808
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
809
+ <i class="fab fa-youtube text-xl"></i>
810
+ </a>
811
+ </div>
812
+ </div>
813
+
814
+ <div class="mt-8 text-center text-gray-500 text-sm">
815
+ <p>&copy; 2023 Man 'o War Mouse Mods. All rights reserved.</p>
816
+ </div>
817
+ </div>
818
+ </footer>
819
+
820
+ <script>
821
+ // Mobile menu toggle
822
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
823
+ const menu = document.getElementById('mobile-menu');
824
+ menu.classList.toggle('hidden');
825
+ });
826
+
827
+ // Dark mode toggle
828
+ const toggle = document.getElementById('toggle');
829
+ const html = document.querySelector('html');
830
+
831
+ // Check for saved user preference, if any, on load of the website
832
+ if (localStorage.getItem('darkMode') === 'true') {
833
+ html.classList.add('dark');
834
+ toggle.checked = true;
835
+ } else {
836
+ html.classList.remove('dark');
837
+ toggle.checked = false;
838
+ }
839
+
840
+ // Toggle dark mode on button click
841
+ toggle.addEventListener('change', function() {
842
+ if (this.checked) {
843
+ html.classList.add('dark');
844
+ localStorage.setItem('darkMode', 'true');
845
+ } else {
846
+ html.classList.remove('dark');
847
+ localStorage.setItem('darkMode', 'false');
848
+ }
849
+ });
850
+
851
+ //
852
+ </html>
portfolio.html ADDED
@@ -0,0 +1,640 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Johnathan Pierce | Mechanical Engineer</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');
11
+
12
+ :root {
13
+ --primary: #2a9d8f;
14
+ --primary-dark: #1d7a6e;
15
+ --accent: #e76f51;
16
+ --dark: #264653;
17
+ --light: #f8f9fa;
18
+ --gray: #6c757d;
19
+ }
20
+
21
+ body {
22
+ font-family: 'Inter', sans-serif;
23
+ background-color: var(--light);
24
+ color: var(--dark);
25
+ overflow-x: hidden;
26
+ position: relative;
27
+ }
28
+
29
+ .mono {
30
+ font-family: 'JetBrains Mono', monospace;
31
+ }
32
+
33
+ .ascii-bg {
34
+ position: fixed;
35
+ top: 0;
36
+ left: 0;
37
+ width: 100%;
38
+ height: 100%;
39
+ z-index: -1;
40
+ pointer-events: none;
41
+ color: rgba(108, 117, 125, 0.15);
42
+ font-size: 12px;
43
+ line-height: 1;
44
+ overflow: hidden;
45
+ }
46
+
47
+ .ascii-char {
48
+ position: absolute;
49
+ transition: all 0.3s ease;
50
+ font-family: 'JetBrains Mono', monospace;
51
+ }
52
+
53
+ .section-divider {
54
+ border: none;
55
+ height: 2px;
56
+ background: linear-gradient(90deg, transparent, var(--primary), transparent);
57
+ margin: 4rem 0;
58
+ }
59
+
60
+ .card-3d {
61
+ transform-style: preserve-3d;
62
+ transform: perspective(1000px);
63
+ }
64
+
65
+ .skill-bar {
66
+ background: linear-gradient(90deg, var(--primary), var(--primary-dark));
67
+ height: 8px;
68
+ border-radius: 4px;
69
+ position: relative;
70
+ overflow: hidden;
71
+ }
72
+
73
+ .skill-bar::after {
74
+ content: '';
75
+ position: absolute;
76
+ top: 0;
77
+ left: 0;
78
+ height: 100%;
79
+ width: 100%;
80
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
81
+ animation: shimmer 2s infinite;
82
+ }
83
+
84
+ @keyframes shimmer {
85
+ 0% { transform: translateX(-100%); }
86
+ 100% { transform: translateX(100%); }
87
+ }
88
+
89
+ .terminal-window {
90
+ background: #1a1a1a;
91
+ border-radius: 8px;
92
+ box-shadow: 0 10px 30px rgba(0,0,0,0.3);
93
+ overflow: hidden;
94
+ }
95
+
96
+ .terminal-header {
97
+ background: #2d2d2d;
98
+ padding: 12px 16px;
99
+ border-bottom: 1px solid #404040;
100
+ }
101
+
102
+ .terminal-buttons {
103
+ display: flex;
104
+ gap: 8px;
105
+ }
106
+
107
+ .terminal-button {
108
+ width: 12px;
109
+ height: 12px;
110
+ border-radius: 50%;
111
+ }
112
+
113
+ .terminal-button.close { background: #ff5f57; }
114
+ .terminal-button.minimize { background: #ffbd2e; }
115
+ .terminal-button.maximize { background: #28c940; }
116
+
117
+ .terminal-content {
118
+ padding: 20px;
119
+ color: #00ff00;
120
+ font-family: 'JetBrains Mono', monospace;
121
+ font-size: 14px;
122
+ line-height: 1.5;
123
+ }
124
+
125
+ .project-card {
126
+ border: 1px solid #e2e8f0;
127
+ transition: all 0.3s ease;
128
+ background: white;
129
+ }
130
+
131
+ .project-card:hover {
132
+ transform: translateY(-5px);
133
+ box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
134
+ border-color: var(--primary);
135
+ }
136
+
137
+ .dark .project-card {
138
+ background: #1e293b;
139
+ border-color: #374151;
140
+ }
141
+
142
+ .dark .project-card:hover {
143
+ border-color: var(--primary);
144
+ }
145
+ </style>
146
+ </head>
147
+ <body class="bg-white dark:bg-gray-900">
148
+ <!-- ASCII Background Canvas -->
149
+ <div id="asciiCanvas" class="ascii-bg"></div>
150
+
151
+ <!-- Navigation -->
152
+ <nav class="fixed w-full z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-700">
153
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
154
+ <div class="flex justify-between h-16 items-center">
155
+ <div class="flex-shrink-0 flex items-center">
156
+ <span class="mono text-xl font-bold text-gray-900 dark:text-white">JP_ENGINEER</span>
157
+ </div>
158
+ <div class="hidden md:block">
159
+ <div class="ml-10 flex items-baseline space-x-8 mono">
160
+ <a href="#home" class="text-gray-700 dark:text-gray-300 hover:text-primary transition-colors">[HOME]</a>
161
+ <a href="#about" class="text-gray-700 dark:text-gray-300 hover:text-primary transition-colors">[ABOUT]</a>
162
+ <a href="#skills" class="text-gray-700 dark:text-gray-300 hover:text-primary transition-colors">[SKILLS]</a>
163
+ <a href="#projects" class="text-gray-700 dark:text-gray-300 hover:text-primary transition-colors">[PROJECTS]</a>
164
+ <a href="#contact" class="text-gray-700 dark:text-gray-300 hover:text-primary transition-colors">[CONTACT]</a>
165
+ </div>
166
+ </div>
167
+ <div class="md:hidden">
168
+ <button id="mobile-menu-button" class="text-gray-700 dark:text-gray-300">
169
+ <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
170
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
171
+ </svg>
172
+ </button>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </nav>
177
+
178
+ <!-- Hero Section -->
179
+ <section id="home" class="min-h-screen flex items-center justify-center pt-16">
180
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
181
+ <div class="terminal-window max-w-3xl mx-auto">
182
+ <div class="terminal-header">
183
+ <div class="terminal-buttons">
184
+ <div class="terminal-button close"></div>
185
+ <div class="terminal-button minimize"></div>
186
+ <div class="terminal-button maximize"></div>
187
+ </div>
188
+ </div>
189
+ <div class="terminal-content">
190
+ <div class="text-left">
191
+ <p class="text-green-400">$ whoami</p>
192
+ <p class="text-white mb-4">johnathan_pierce_mechanical_engineer</p>
193
+
194
+ <p class="text-green-400">$ cat about_me.txt</p>
195
+ <p class="text-white mb-4">NAME: Johnathan Pierce</p>
196
+ <p class="text-white mb-4">TITLE: Senior Mechanical Engineer</p>
197
+ <p class="text-white mb-4">SPECIALTY: Robotics & Automation Systems</p>
198
+ <p class="text-white mb-4">LOCATION: Boston, MA</p>
199
+
200
+ <p class="text-green-400">$ ls skills/</p>
201
+ <p class="text-white">CAD_Design FEA_Analysis Prototyping Robotics Automation Python MATLAB</p>
202
+
203
+ <p class="text-green-400 mt-4">$ <span class="cursor-blink">_</span></p>
204
+ </div>
205
+ </div>
206
+ </div>
207
+
208
+ <div class="mt-12">
209
+ <h1 class="text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-4 mono">
210
+ &gt; ENGINEERING_EXCELLENCE
211
+ </h1>
212
+ <p class="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto">
213
+ Designing the future through precision mechanics and innovative automation solutions.
214
+ </p>
215
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
216
+ <a href="#projects" class="px-8 py-3 bg-primary hover:bg-primary-dark text-white font-medium rounded-lg transition-colors mono">
217
+ [VIEW_PROJECTS]
218
+ </a>
219
+ <a href="#contact" class="px-8 py-3 border-2 border-primary text-primary hover:bg-primary hover:text-white font-medium rounded-lg transition-colors mono">
220
+ [GET_IN_TOUCH]
221
+ </a>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ </section>
226
+
227
+ <hr class="section-divider">
228
+
229
+ <!-- About Section -->
230
+ <section id="about" class="py-20">
231
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
232
+ <div class="grid md:grid-cols-2 gap-12 items-center">
233
+ <div>
234
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6 mono">
235
+ &gt; ABOUT_ME
236
+ </h2>
237
+ <div class="space-y-4 text-gray-600 dark:text-gray-300">
238
+ <p>
239
+ With over 8 years of experience in mechanical engineering, I specialize in creating
240
+ innovative solutions for complex problems. My expertise spans robotics, automation,
241
+ and precision mechanical design.
242
+ </p>
243
+ <p>
244
+ I believe in the power of elegant engineering - creating systems that are not only
245
+ functional but also efficient, reliable, and beautifully simple in their execution.
246
+ </p>
247
+ <p>
248
+ Currently leading the robotics division at TechInnovate Solutions, where we're
249
+ developing next-generation automation systems for manufacturing and logistics.
250
+ </p>
251
+ </div>
252
+
253
+ <div class="mt-8 grid grid-cols-2 gap-4">
254
+ <div class="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
255
+ <div class="text-2xl font-bold text-primary mono">50+</div>
256
+ <div class="text-sm text-gray-600 dark:text-gray-300">Projects Completed</div>
257
+ </div>
258
+ <div class="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
259
+ <div class="text-2xl font-bold text-primary mono">8+</div>
260
+ <div class="text-sm text-gray-600 dark:text-gray-300">Years Experience</div>
261
+ </div>
262
+ <div class="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
263
+ <div class="text-2xl font-bold text-primary mono">12</div>
264
+ <div class="text-sm text-gray-600 dark:text-gray-300">Patents Filed</div>
265
+ </div>
266
+ <div class="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
267
+ <div class="text-2xl font-bold text-primary mono">100%</div>
268
+ <div class="text-sm text-gray-600 dark:text-gray-300">Client Satisfaction</div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+
273
+ <div class="relative">
274
+ <div class="bg-primary/10 p-8 rounded-2xl">
275
+ <div class="terminal-window">
276
+ <div class="terminal-header">
277
+ <div class="terminal-buttons">
278
+ <div class="terminal-button close"></div>
279
+ <div class="terminal-button minimize"></div>
280
+ <div class="terminal-button maximize"></div>
281
+ </div>
282
+ </div>
283
+ <div class="terminal-content">
284
+ <p class="text-green-400">$ cat education.txt</p>
285
+ <p class="text-white">MS Mechanical Engineering - MIT '15</p>
286
+ <p class="text-white">BS Mechanical Engineering - Stanford '13</p>
287
+ <br>
288
+ <p class="text-green-400">$ cat certifications.txt</p>
289
+ <p class="text-white">Certified SolidWorks Professional</p>
290
+ <p class="text-white">Professional Engineer (PE) License</p>
291
+ <p class="text-white">Robotics Systems Certification</p>
292
+ <br>
293
+ <p class="text-green-400">$ cat interests.txt</p>
294
+ <p class="text-white">3D Printing & Prototyping</p>
295
+ <p class="text-white">Industrial Robotics</p>
296
+ <p class="text-white">Renewable Energy Systems</p>
297
+ <p class="text-white">Mountain Biking & Engineering</p>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ </div>
303
+ </div>
304
+ </section>
305
+
306
+ <hr class="section-divider">
307
+
308
+ <!-- Skills Section -->
309
+ <section id="skills" class="py-20 bg-gray-50 dark:bg-gray-800">
310
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
311
+ <h2 class="text-3xl md:text-4xl font-bold text-center text-gray-900 dark:text-white mb-16 mono">
312
+ &gt; TECHNICAL_SKILLS
313
+ </h2>
314
+
315
+ <div class="grid md:grid-cols-2 gap-12">
316
+ <div>
317
+ <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-6 mono">[ENGINEERING_SOFTWARE]</h3>
318
+ <div class="space-y-6">
319
+ <div>
320
+ <div class="flex justify-between mb-2">
321
+ <span class="text-gray-700 dark:text-gray-300 mono">SolidWorks</span>
322
+ <span class="text-primary font-medium mono">95%</span>
323
+ </div>
324
+ <div class="skill-bar" style="width: 95%"></div>
325
+ </div>
326
+ <div>
327
+ <div class="flex justify-between mb-2">
328
+ <span class="text-gray-700 dark:text-gray-300 mono">AutoCAD</span>
329
+ <span class="text-primary font-medium mono">90%</span>
330
+ </div>
331
+ <div class="skill-bar" style="width: 90%"></div>
332
+ </div>
333
+ <div>
334
+ <div class="flex justify-between mb-2">
335
+ <span class="text-gray-700 dark:text-gray-300 mono">ANSYS</span>
336
+ <span class="text-primary font-medium mono">85%</span>
337
+ </div>
338
+ <div class="skill-bar" style="width: 85%"></div>
339
+ </div>
340
+ <div>
341
+ <div class="flex justify-between mb-2">
342
+ <span class="text-gray-700 dark:text-gray-300 mono">MATLAB</span>
343
+ <span class="text-primary font-medium mono">88%</span>
344
+ </div>
345
+ <div class="skill-bar" style="width: 88%"></div>
346
+ </div>
347
+ </div>
348
+ </div>
349
+
350
+ <div>
351
+ <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-6 mono">[PROGRAMMING]</h3>
352
+ <div class="space-y-6">
353
+ <div>
354
+ <div class="flex justify-between mb-2">
355
+ <span class="text-gray-700 dark:text-gray-300 mono">Python</span>
356
+ <span class="text-primary font-medium mono">92%</span>
357
+ </div>
358
+ <div class="skill-bar" style="width: 92%"></div>
359
+ </div>
360
+ <div>
361
+ <div class="flex justify-between mb-2">
362
+ <span class="text-gray-700 dark:text-gray-300 mono">C++</span>
363
+ <span class="text-primary font-medium mono">80%</span>
364
+ </div>
365
+ <div class="skill-bar" style="width: 80%"></div>
366
+ </div>
367
+ <div>
368
+ <div class="flex justify-between mb-2">
369
+ <span class="text-gray-700 dark:text-gray-300 mono">ROS</span>
370
+ <span class="text-primary font-medium mono">85%</span>
371
+ </div>
372
+ <div class="skill-bar" style="width: 85%"></div>
373
+ </div>
374
+ <div>
375
+ <div class="flex justify-between mb-2">
376
+ <span class="text-gray-700 dark:text-gray-300 mono">LabVIEW</span>
377
+ <span class="text-primary font-medium mono">78%</span>
378
+ </div>
379
+ <div class="skill-bar" style="width: 78%"></div>
380
+ </div>
381
+ </div>
382
+ </div>
383
+ </div>
384
+
385
+ <div class="mt-16">
386
+ <h3 class="text-xl font-semibold text-center text-gray-900 dark:text-white mb-8 mono">[DOMAIN_EXPERTISE]</h3>
387
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
388
+ <div class="text-center p-6 bg-white dark:bg-gray-900 rounded-lg shadow-sm">
389
+ <div class="text-4xl mb-3">🤖</div>
390
+ <h4 class="font-semibold text-gray-900 dark:text-white mono">Robotics</h4>
391
+ </div>
392
+ <div class="text-center p-6 bg-white dark:bg-gray-900 rounded-lg shadow-sm">
393
+ <div class="text-4xl mb-3">⚙️</div>
394
+ <h4 class="font-semibold text-gray-900 dark:text-white mono">Automation</h4>
395
+ </div>
396
+ <div class="text-center p-6 bg-white dark:bg-gray-900 rounded-lg shadow-sm">
397
+ <div class="text-4xl mb-3">📐</div>
398
+ <h4 class="font-semibold text-gray-900 dark:text-white mono">CAD Design</h4>
399
+ </div>
400
+ <div class="text-center p-6 bg-white dark:bg-gray-900 rounded-lg shadow-sm">
401
+ <div class="text-4xl mb-3">🔬</div>
402
+ <h4 class="font-semibold text-gray-900 dark:text-white mono">FEA Analysis</h4>
403
+ </div>
404
+ </div>
405
+ </div>
406
+ </div>
407
+ </section>
408
+
409
+ <hr class="section-divider">
410
+
411
+ <!-- Projects Section -->
412
+ <section id="projects" class="py-20">
413
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
414
+ <h2 class="text-3xl md:text-4xl font-bold text-center text-gray-900 dark:text-white mb-16 mono">
415
+ &gt; FEATURED_PROJECTS
416
+ </h2>
417
+
418
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
419
+ <!-- Project 1 -->
420
+ <div class="project-card rounded-xl p-6">
421
+ <div class="text-4xl mb-4">🏭</div>
422
+ <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 mono">AutoAssembly Bot</h3>
423
+ <p class="text-gray-600 dark:text-gray-300 mb-4">
424
+ Industrial robotic arm with computer vision for automated assembly line operations.
425
+ </p>
426
+ <div class="flex flex-wrap gap-2 mb-4">
427
+ <span class="px-3 py-1 bg-primary/10 text-primary text-sm rounded-full mono">ROS</span>
428
+ <span class="px-3 py-1 bg-primary/10 text-primary text-sm rounded-full mono">Python</span>
429
+ <span class="px-3 py-1 bg-primary/10 text-primary text-sm rounded-full mono">SolidWorks</span>
430
+ </div>
431
+ <a href="#" class="text-primary hover:text-primary-dark font-medium mono text-sm">[VIEW_DETAILS]</a>
432
+ </div>
433
+
434
+ <!-- Project 2 -->
435
+ <div class="project-card rounded-xl p-6">
436
+ <div class="text-4xl mb-4">🔋</div>
437
+ <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 mono">Battery Pack System</h3>
438
+ <p class="text-gray-600 dark:text-gray-300 mb-4">
439
+ Modular battery pack design with thermal management for electric vehicles.
440
+ </p>
441
+ <div class="flex flex-wrap gap-2 mb-4">
442
+ <span class="px-3 py-1 bg-primary/10 text-primary text-sm rounded-full mono">Thermal</span>
443
+ <span class="px-3 py-1 bg-primary/10 text-primary text-sm rounded-full mono">FEA</span>
444
+ <span class="px-3 py-1 bg-primary/10 text-primary text-sm rounded-full mono">Prototyping</span>
445
+ </div>
446
+ <a href="#" class="text-primary hover:text-primary-dark font-medium mono text-sm">[VIEW_DETAILS]</a>
447
+ </div>
448
+
449
+ <!-- Project 3 -->
450
+ <div class="project-card rounded-xl p-6">
451
+ <div class="text-4xl mb-4">🦾</div>
452
+ <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 mono">ExoSkeleton Arm</h3>
453
+ <p class="text-gray-600 dark:text-gray-300 mb-4">
454
+ Lightweight exoskeleton for industrial workers to reduce fatigue and prevent injury.
455
+ </p>
456
+ <div class="flex flex-wrap gap-2 mb-4">
457
+ <span class="px-3 py-1 bg-primary/10 text-primary text-sm rounded-full mono">Biomechanics</span>
458
+ <span class="px-3 py-1 bg-primary/10 text-primary text-sm rounded-full mono">CAD</span>
459
+ <span class="px-3 py-1 bg-primary/10 text-primary text-sm rounded-full mono">Testing</span>
460
+ </div>
461
+ <a href="#" class="text-primary hover:text-primary-dark font-medium mono text-sm">[VIEW_DETAILS]</a>
462
+ </div>
463
+ </div>
464
+
465
+ <div class="text-center mt-12">
466
+ <a href="#" class="px-8 py-3 border-2 border-primary text-primary hover:bg-primary hover:text-white font-medium rounded-lg transition-colors mono">
467
+ [VIEW_ALL_PROJECTS]
468
+ </a>
469
+ </div>
470
+ </div>
471
+ </section>
472
+
473
+ <hr class="section-divider">
474
+
475
+ <!-- Contact Section -->
476
+ <section id="contact" class="py-20 bg-gray-50 dark:bg-gray-800">
477
+ <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
478
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6 mono">
479
+ &gt; LET'S_CONNECT
480
+ </h2>
481
+ <p class="text-xl text-gray-600 dark:text-gray-300 mb-12 max-w-2xl mx-auto">
482
+ Interested in collaborating on innovative engineering projects? Let's discuss how we can bring your ideas to life.
483
+ </p>
484
+
485
+ <div class="grid md:grid-cols-3 gap-8 mb-12">
486
+ <div class="text-center">
487
+ <div class="text-3xl mb-4">📧</div>
488
+ <h3 class="font-semibold text-gray-900 dark:text-white mb-2 mono">EMAIL</h3>
489
+ <p class="text-gray-600 dark:text-gray-300">johnathan@jpengineer.dev</p>
490
+ </div>
491
+ <div class="text-center">
492
+ <div class="text-3xl mb-4">💼</div>
493
+ <h3 class="font-semibold text-gray-900 dark:text-white mb-2 mono">LINKEDIN</h3>
494
+ <p class="text-gray-600 dark:text-gray-300">/in/johnathanpierce</p>
495
+ </div>
496
+ <div class="text-center">
497
+ <div class="text-3xl mb-4">📍</div>
498
+ <h3 class="font-semibold text-gray-900 dark:text-white mb-2 mono">LOCATION</h3>
499
+ <p class="text-gray-600 dark:text-gray-300">Boston, MA</p>
500
+ </div>
501
+ </div>
502
+
503
+ <div class="bg-white dark:bg-gray-900 rounded-xl p-8 shadow-sm">
504
+ <form class="space-y-6 max-w-2xl mx-auto">
505
+ <div class="grid md:grid-cols-2 gap-6">
506
+ <div>
507
+ <label class="block text-left text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 mono">[NAME]</label>
508
+ <input type="text" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-primary focus:border-primary dark:bg-gray-800 dark:text-white" required>
509
+ </div>
510
+ <div>
511
+ <label class="block text-left text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 mono">[EMAIL]</label>
512
+ <input type="email" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-primary focus:border-primary dark:bg-gray-800 dark:text-white" required>
513
+ </div>
514
+ </div>
515
+ <div>
516
+ <label class="block text-left text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 mono">[SUBJECT]</label>
517
+ <input type="text" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-primary focus:border-primary dark:bg-gray-800 dark:text-white" required>
518
+ </div>
519
+ <div>
520
+ <label class="block text-left text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 mono">[MESSAGE]</label>
521
+ <textarea rows="5" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-primary focus:border-primary dark:bg-gray-800 dark:text-white" required></textarea>
522
+ </div>
523
+ <button type="submit" class="w-full px-8 py-4 bg-primary hover:bg-primary-dark text-white font-medium rounded-lg transition-colors mono">
524
+ [SEND_MESSAGE]
525
+ </button>
526
+ </form>
527
+ </div>
528
+ </div>
529
+ </section>
530
+
531
+ <!-- Footer -->
532
+ <footer class="bg-gray-900 text-white py-12">
533
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
534
+ <div class="mono text-2xl font-bold text-primary mb-4">JP_ENGINEER</div>
535
+ <p class="text-gray-400 mb-8">Engineering solutions for tomorrow's challenges</p>
536
+
537
+ <div class="flex justify-center space-x-6 mb-8">
538
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
539
+ <span class="mono">[GITHUB]</span>
540
+ </a>
541
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
542
+ <span class="mono">[LINKEDIN]</span>
543
+ </a>
544
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
545
+ <span class="mono">[TWITTER]</span>
546
+ </a>
547
+ </div>
548
+
549
+ <div class="text-gray-500 text-sm mono">
550
+ &copy; 2024 JOHNATHAN PIERCE. ALL RIGHTS RESERVED.
551
+ </div>
552
+ </div>
553
+ </footer>
554
+
555
+ <script>
556
+ // ASCII Background Animation
557
+ const asciiChars = ['#', '*', '+', '-', '.', ':', ';', '=', '?', '@', '[', ']', '^', '_', '{', '|', '}', '~'];
558
+ const asciiCanvas = document.getElementById('asciiCanvas');
559
+ let asciiElements = [];
560
+
561
+ function createAsciiBackground() {
562
+ const density = 0.5; // Characters per 100px²
563
+ const width = window.innerWidth;
564
+ const height = window.innerHeight;
565
+ const charCount = Math.floor((width * height * density) / 10000);
566
+
567
+ // Clear existing characters
568
+ asciiElements.forEach(el => el.remove());
569
+ asciiElements = [];
570
+
571
+ // Create new characters
572
+ for (let i = 0; i < charCount; i++) {
573
+ const char = document.createElement('div');
574
+ char.className = 'ascii-char';
575
+ char.textContent = asciiChars[Math.floor(Math.random() * asciiChars.length)];
576
+ char.style.left = Math.random() * width + 'px';
577
+ char.style.top = Math.random() * height + 'px';
578
+ char.style.opacity = Math.random() * 0.3 + 0.1;
579
+ char.style.fontSize = (Math.random() * 8 + 8) + 'px';
580
+
581
+ asciiCanvas.appendChild(char);
582
+ asciiElements.push(char);
583
+ }
584
+ }
585
+
586
+ function handleMouseMove(e) {
587
+ const mouseX = e.clientX;
588
+ const mouseY = e.clientY;
589
+
590
+ asciiElements.forEach(char => {
591
+ const rect = char.getBoundingClientRect();
592
+ const charX = rect.left + rect.width / 2;
593
+ const charY = rect.top + rect.height / 2;
594
+
595
+ const distance = Math.sqrt(Math.pow(mouseX - charX, 2) + Math.pow(mouseY - charY, 2));
596
+ const maxDistance = 150;
597
+
598
+ if (distance < maxDistance) {
599
+ const force = (maxDistance - distance) / maxDistance;
600
+ const angle = Math.atan2(charY - mouseY, charX - mouseX);
601
+ const moveX = Math.cos(angle) * force * 20;
602
+ const moveY = Math.sin(angle) * force * 20;
603
+
604
+ char.style.transform = `translate(${moveX}px, ${moveY}px)`;
605
+ char.style.opacity = Math.min(0.8, parseFloat(char.style.opacity) + force * 0.3);
606
+ } else {
607
+ char.style.transform = 'translate(0, 0)';
608
+ char.style.opacity = char.getAttribute('data-original-opacity') || '0.2';
609
+ }
610
+ });
611
+ }
612
+
613
+ // Initialize
614
+ createAsciiBackground();
615
+ document.addEventListener('mousemove', handleMouseMove);
616
+ window.addEventListener('resize', createAsciiBackground);
617
+
618
+ // Store original opacities
619
+ setTimeout(() => {
620
+ asciiElements.forEach(char => {
621
+ char.setAttribute('data-original-opacity', char.style.opacity);
622
+ });
623
+ }, 100);
624
+
625
+ // Mobile menu toggle
626
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
627
+ // Add mobile menu functionality here
628
+ alert('Mobile menu would open here');
629
+ });
630
+
631
+ // Cursor blink animation
632
+ const cursor = document.querySelector('.cursor-blink');
633
+ if (cursor) {
634
+ setInterval(() => {
635
+ cursor.style.visibility = cursor.style.visibility === 'hidden' ? 'visible' : 'hidden';
636
+ }, 500);
637
+ }
638
+ </script>
639
+ </body>
640
+ </html>