Hugging Face's logo

Spaces:
AAhad
/
deeksite-demo
Running

App Files Community
AAhad commited on
Commit
0834fa7
·
verified ·
1 Parent(s): 5495478

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +504 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Deeksite Demo
3
- emoji: 🏆
4
- colorFrom: red
5
- colorTo: green
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: deeksite-demo
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,504 @@
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>Modern 3D Website</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
9
+ <style>
10
+ /* Custom CSS for 3D effect */
11
+ body {
12
+ margin: 0;
13
+ overflow-x: hidden;
14
+ font-family: 'Inter', sans-serif;
15
+ }
16
+
17
+ #canvas-container {
18
+ position: fixed;
19
+ top: 0;
20
+ left: 0;
21
+ width: 100%;
22
+ height: 100%;
23
+ z-index: -1;
24
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
25
+ }
26
+
27
+ .content {
28
+ position: relative;
29
+ z-index: 1;
30
+ min-height: 100vh;
31
+ color: white;
32
+ }
33
+
34
+ .card {
35
+ backdrop-filter: blur(10px);
36
+ background: rgba(255, 255, 255, 0.1);
37
+ border-radius: 16px;
38
+ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
39
+ border: 1px solid rgba(255, 255, 255, 0.2);
40
+ transition: all 0.3s ease;
41
+ }
42
+
43
+ .card:hover {
44
+ transform: translateY(-5px);
45
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
46
+ }
47
+
48
+ .btn-glow {
49
+ position: relative;
50
+ overflow: hidden;
51
+ z-index: 1;
52
+ }
53
+
54
+ .btn-glow::before {
55
+ content: '';
56
+ position: absolute;
57
+ top: 0;
58
+ left: 0;
59
+ width: 100%;
60
+ height: 100%;
61
+ background: linear-gradient(45deg, #00dbde, #fc00ff, #00dbde, #fc00ff);
62
+ background-size: 400%;
63
+ z-index: -1;
64
+ filter: blur(5px);
65
+ opacity: 0;
66
+ transition: 0.5s;
67
+ }
68
+
69
+ .btn-glow:hover::before {
70
+ opacity: 0.7;
71
+ animation: animate 8s linear infinite;
72
+ }
73
+
74
+ @keyframes animate {
75
+ 0% { background-position: 0 0; }
76
+ 50% { background-position: 300% 0; }
77
+ 100% { background-position: 0 0; }
78
+ }
79
+
80
+ .nav-link {
81
+ position: relative;
82
+ }
83
+
84
+ .nav-link::after {
85
+ content: '';
86
+ position: absolute;
87
+ width: 0;
88
+ height: 2px;
89
+ bottom: 0;
90
+ left: 0;
91
+ background: linear-gradient(90deg, #00dbde, #fc00ff);
92
+ transition: width 0.3s ease;
93
+ }
94
+
95
+ .nav-link:hover::after {
96
+ width: 100%;
97
+ }
98
+
99
+ .skill-bar {
100
+ height: 8px;
101
+ border-radius: 4px;
102
+ background: rgba(255, 255, 255, 0.2);
103
+ overflow: hidden;
104
+ }
105
+
106
+ .skill-progress {
107
+ height: 100%;
108
+ border-radius: 4px;
109
+ background: linear-gradient(90deg, #00dbde, #fc00ff);
110
+ transition: width 1s ease-in-out;
111
+ }
112
+ </style>
113
+ </head>
114
+ <body>
115
+ <div id="canvas-container"></div>
116
+
117
+ <div class="content">
118
+ <!-- Navigation -->
119
+ <nav class="px-6 py-4 flex justify-between items-center">
120
+ <div class="text-2xl font-bold bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent">
121
+ Demo
122
+ </div>
123
+ <div class="hidden md:flex space-x-8">
124
+
125
+ <a href="https://huggingface.co/AAhad" class="nav-link text-white hover:text-purple-300 transition">About</a>
126
+
127
+ </div>
128
+ <button class="md:hidden text-white">
129
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
130
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
131
+ </svg>
132
+ </button>
133
+ </nav>
134
+
135
+ <!-- Hero Section -->
136
+ <section class="container mx-auto px-6 py-20 md:py-32">
137
+ <div class="flex flex-col md:flex-row items-center">
138
+ <div class="md:w-1/2 mb-12 md:mb-0">
139
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
140
+ <span class="bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent">Deepsite</span> Generated Site Demo
141
+ </h1>
142
+ <p class="text-lg text-gray-300 mb-8">
143
+ This demonstrate Deepseek capabilities to easily generate single page web application easily and quickly
144
+ </p>
145
+ <div class="flex space-x-4">
146
+ <button class="btn-glow px-8 py-3 rounded-full bg-gradient-to-r from-cyan-500 to-purple-500 text-white font-semibold">
147
+ Get Started
148
+ </button>
149
+ <a href="#about" class="px-8 py-3 rounded-full border border-white text-white font-semibold hover:bg-white hover:bg-opacity-10 transition">
150
+ About Me
151
+ </a>
152
+ </div>
153
+ </div>
154
+ <div class="md:w-1/2 flex justify-center">
155
+ <div class="card w-80 h-80 md:w-96 md:h-96 flex items-center justify-center">
156
+ <div class="text-center p-6">
157
+ <div class="text-5xl mb-4">✨</div>
158
+ <h3 class="text-xl font-semibold mb-2">Deepseek 3D</h3>
159
+ <p class="text-gray-300">Move your cursor to see the dynamic background respond to your movements.</p>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </section>
165
+
166
+ <!-- About Me Section -->
167
+ <section id="about" class="container mx-auto px-6 py-20">
168
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">
169
+ About <span class="bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent">Me</span>
170
+ </h2>
171
+
172
+ <div class="flex flex-col lg:flex-row gap-12 items-center">
173
+ <div class="lg:w-1/3">
174
+ <div class="card p-8 h-full">
175
+ <div class="flex flex-col items-center">
176
+ <div class="w-40 h-40 rounded-full bg-gradient-to-r from-cyan-400 to-purple-500 p-1 mb-6">
177
+ <div class="w-full h-full rounded-full bg-gray-900 overflow-hidden">
178
+ <img src="https://avatars.githubusercontent.com/u/124599?v=4" alt="Profile" class="w-full h-full object-cover">
179
+ </div>
180
+ </div>
181
+ <h3 class="text-2xl font-bold mb-2">AAhad</h3>
182
+ <p class="text-cyan-300 mb-4">AI & Web Developer</p>
183
+ <p class="text-gray-300 text-center mb-6">
184
+ Passionate about creating innovative solutions that bridge the gap between technology and human experience.
185
+ </p>
186
+ <a href="https://huggingface.co/AAhad" target="_blank" class="btn-glow px-6 py-2 rounded-full bg-gradient-to-r from-cyan-500 to-purple-500 text-white font-semibold flex items-center">
187
+ <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2">
188
+ <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
189
+ <polyline points="15 3 21 3 21 9"></polyline>
190
+ <line x1="10" y1="14" x2="21" y2="3"></line>
191
+ </svg>
192
+ My Hugging Face
193
+ </a>
194
+ </div>
195
+ </div>
196
+ </div>
197
+
198
+ <div class="lg:w-2/3">
199
+ <div class="card p-8 h-full">
200
+ <h3 class="text-xl font-semibold mb-6">My Journey</h3>
201
+ <p class="text-gray-300 mb-6">
202
+ With over 5 years of experience in AI and web development, I've dedicated my career to pushing the boundaries of what's possible with technology. My work focuses on creating intelligent systems that enhance human capabilities and deliver meaningful experiences.
203
+ </p>
204
+
205
+ <div class="mb-8">
206
+ <h4 class="text-lg font-semibold mb-4">Skills & Expertise</h4>
207
+ <div class="space-y-4">
208
+ <div>
209
+ <div class="flex justify-between mb-1">
210
+ <span>AI/ML Development</span>
211
+ <span>95%</span>
212
+ </div>
213
+ <div class="skill-bar">
214
+ <div class="skill-progress" style="width: 95%"></div>
215
+ </div>
216
+ </div>
217
+ <div>
218
+ <div class="flex justify-between mb-1">
219
+ <span>Web Development</span>
220
+ <span>90%</span>
221
+ </div>
222
+ <div class="skill-bar">
223
+ <div class="skill-progress" style="width: 90%"></div>
224
+ </div>
225
+ </div>
226
+ <div>
227
+ <div class="flex justify-between mb-1">
228
+ <span>Natural Language Processing</span>
229
+ <span>85%</span>
230
+ </div>
231
+ <div class="skill-bar">
232
+ <div class="skill-progress" style="width: 85%"></div>
233
+ </div>
234
+ </div>
235
+ <div>
236
+ <div class="flex justify-between mb-1">
237
+ <span>Computer Vision</span>
238
+ <span>80%</span>
239
+ </div>
240
+ <div class="skill-bar">
241
+ <div class="skill-progress" style="width: 80%"></div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+
247
+ <h4 class="text-lg font-semibold mb-4">Projects & Contributions</h4>
248
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
249
+ <div class="card p-4 hover:bg-white hover:bg-opacity-10">
250
+ <h5 class="font-medium mb-1">Hugging Face Models</h5>
251
+ <p class="text-sm text-gray-400">State-of-the-art NLP models</p>
252
+ </div>
253
+ <div class="card p-4 hover:bg-white hover:bg-opacity-10">
254
+ <h5 class="font-medium mb-1">AI Applications</h5>
255
+ <p class="text-sm text-gray-400">Real-world AI solutions</p>
256
+ </div>
257
+ <div class="card p-4 hover:bg-white hover:bg-opacity-10">
258
+ <h5 class="font-medium mb-1">Web Platforms</h5>
259
+ <p class="text-sm text-gray-400">Interactive web experiences</p>
260
+ </div>
261
+ <div class="card p-4 hover:bg-white hover:bg-opacity-10">
262
+ <h5 class="font-medium mb-1">Open Source</h5>
263
+ <p class="text-sm text-gray-400">Community contributions</p>
264
+ </div>
265
+ </div>
266
+
267
+ <div class="flex flex-wrap gap-4">
268
+ <span class="px-3 py-1 rounded-full text-sm bg-cyan-900 bg-opacity-50 text-cyan-300">Python</span>
269
+ <span class="px-3 py-1 rounded-full text-sm bg-purple-900 bg-opacity-50 text-purple-300">TensorFlow</span>
270
+ <span class="px-3 py-1 rounded-full text-sm bg-cyan-900 bg-opacity-50 text-cyan-300">PyTorch</span>
271
+ <span class="px-3 py-1 rounded-full text-sm bg-purple-900 bg-opacity-50 text-purple-300">JavaScript</span>
272
+ <span class="px-3 py-1 rounded-full text-sm bg-cyan-900 bg-opacity-50 text-cyan-300">React</span>
273
+ <span class="px-3 py-1 rounded-full text-sm bg-purple-900 bg-opacity-50 text-purple-300">Node.js</span>
274
+ </div>
275
+ </div>
276
+ </div>
277
+ </div>
278
+ </section>
279
+
280
+ <!-- Features Section -->
281
+ <section class="container mx-auto px-6 py-20">
282
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">
283
+ Our <span class="bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent">Features</span>
284
+ </h2>
285
+
286
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
287
+ <!-- Feature 1 -->
288
+ <div class="card p-8">
289
+ <div class="text-4xl mb-4 bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent">🚀</div>
290
+ <h3 class="text-xl font-semibold mb-3">Lightning Fast</h3>
291
+ <p class="text-gray-300">Optimized performance that ensures your website loads in milliseconds, keeping your visitors engaged.</p>
292
+ </div>
293
+
294
+ <!-- Feature 2 -->
295
+ <div class="card p-8">
296
+ <div class="text-4xl mb-4 bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent">🎨</div>
297
+ <h3 class="text-xl font-semibold mb-3">Stunning Design</h3>
298
+ <p class="text-gray-300">Custom designs tailored to your brand that captivate your audience and leave a lasting impression.</p>
299
+ </div>
300
+
301
+ <!-- Feature 3 -->
302
+ <div class="card p-8">
303
+ <div class="text-4xl mb-4 bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent">🔒</div>
304
+ <h3 class="text-xl font-semibold mb-3">Secure Platform</h3>
305
+ <p class="text-gray-300">Enterprise-grade security measures to protect your data and your customers' information.</p>
306
+ </div>
307
+ </div>
308
+ </section>
309
+
310
+ <!-- CTA Section -->
311
+ <section class="container mx-auto px-6 py-20">
312
+ <div class="card p-12 text-center">
313
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Digital Presence?</h2>
314
+ <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
315
+ Join thousands of businesses that have elevated their brand with our innovative solutions.
316
+ </p>
317
+ <button class="btn-glow px-10 py-4 rounded-full bg-gradient-to-r from-cyan-500 to-purple-500 text-white font-semibold text-lg">
318
+ Start Your Journey Today
319
+ </button>
320
+ </div>
321
+ </section>
322
+
323
+ <!-- Footer -->
324
+ <footer class="border-t border-gray-800 py-12">
325
+ <div class="container mx-auto px-6">
326
+ <div class="flex flex-col md:flex-row justify-between">
327
+ <div class="mb-8 md:mb-0">
328
+ <div class="text-2xl font-bold bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent mb-4">
329
+ Demo
330
+ </div>
331
+ <p class="text-gray-400 max-w-xs">
332
+ Pioneering digital experiences that connect brands with their audiences in meaningful ways.
333
+ </p>
334
+ </div>
335
+
336
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
337
+ <div>
338
+ <h3 class="text-white font-semibold mb-4">Company</h3>
339
+ <ul class="space-y-2">
340
+ <li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li>
341
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
342
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
343
+ </ul>
344
+ </div>
345
+
346
+ <div>
347
+ <h3 class="text-white font-semibold mb-4">Resources</h3>
348
+ <ul class="space-y-2">
349
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
350
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Guides</a></li>
351
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Support</a></li>
352
+ </ul>
353
+ </div>
354
+
355
+ <div>
356
+ <h3 class="text-white font-semibold mb-4">Legal</h3>
357
+ <ul class="space-y-2">
358
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy</a></li>
359
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Terms</a></li>
360
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Cookies</a></li>
361
+ </ul>
362
+ </div>
363
+ </div>
364
+ </div>
365
+
366
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
367
+ <p class="text-gray-400 mb-4 md:mb-0">
368
+ © 2023 Demo. All rights reserved.
369
+ </p>
370
+ <div class="flex space-x-6">
371
+ <a href="#" class="text-gray-400 hover:text-white transition">
372
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
373
+ </a>
374
+ <a href="#" class="text-gray-400 hover:text-white transition">
375
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-instagram"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
376
+ </a>
377
+ <a href="#" class="text-gray-400 hover:text-white transition">
378
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
379
+ </a>
380
+ </div>
381
+ </div>
382
+ </div>
383
+ </footer>
384
+ </div>
385
+
386
+ <script>
387
+ // Three.js 3D Particle Background
388
+ document.addEventListener('DOMContentLoaded', function() {
389
+ // Scene setup
390
+ const scene = new THREE.Scene();
391
+ const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
392
+ const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
393
+ renderer.setSize(window.innerWidth, window.innerHeight);
394
+ document.getElementById('canvas-container').appendChild(renderer.domElement);
395
+
396
+ // Particles
397
+ const particlesGeometry = new THREE.BufferGeometry();
398
+ const particlesCount = 1500;
399
+
400
+ const posArray = new Float32Array(particlesCount * 3);
401
+
402
+ for(let i = 0; i < particlesCount * 3; i++) {
403
+ posArray[i] = (Math.random() - 0.5) * 10;
404
+ }
405
+
406
+ particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
407
+
408
+ // Particle material
409
+ const particlesMaterial = new THREE.PointsMaterial({
410
+ size: 0.02,
411
+ color: 0xffffff,
412
+ transparent: true,
413
+ opacity: 0.8,
414
+ blending: THREE.AdditiveBlending
415
+ });
416
+
417
+ // Particle system
418
+ const particlesSystem = new THREE.Points(particlesGeometry, particlesMaterial);
419
+ scene.add(particlesSystem);
420
+
421
+ // Camera position
422
+ camera.position.z = 3;
423
+
424
+ // Mouse movement effect
425
+ let mouseX = 0;
426
+ let mouseY = 0;
427
+
428
+ document.addEventListener('mousemove', (event) => {
429
+ mouseX = (event.clientX / window.innerWidth) * 2 - 1;
430
+ mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
431
+ });
432
+
433
+ // Animation loop
434
+ function animate() {
435
+ requestAnimationFrame(animate);
436
+
437
+ particlesSystem.rotation.x += 0.0005;
438
+ particlesSystem.rotation.y += 0.0005;
439
+
440
+ // Mouse interaction
441
+ camera.position.x += (mouseX * 0.5 - camera.position.x) * 0.05;
442
+ camera.position.y += (mouseY * 0.5 - camera.position.y) * 0.05;
443
+ camera.lookAt(scene.position);
444
+
445
+ renderer.render(scene, camera);
446
+ }
447
+
448
+ animate();
449
+
450
+ // Handle window resize
451
+ window.addEventListener('resize', () => {
452
+ camera.aspect = window.innerWidth / window.innerHeight;
453
+ camera.updateProjectionMatrix();
454
+ renderer.setSize(window.innerWidth, window.innerHeight);
455
+ });
456
+
457
+ // Mobile menu toggle
458
+ const mobileMenuButton = document.querySelector('.md\\:hidden');
459
+ const navLinks = document.querySelector('.hidden.md\\:flex');
460
+
461
+ mobileMenuButton.addEventListener('click', () => {
462
+ navLinks.classList.toggle('hidden');
463
+ navLinks.classList.toggle('flex');
464
+ navLinks.classList.toggle('flex-col');
465
+ navLinks.classList.toggle('absolute');
466
+ navLinks.classList.toggle('top-16');
467
+ navLinks.classList.toggle('left-0');
468
+ navLinks.classList.toggle('right-0');
469
+ navLinks.classList.toggle('bg-gray-900');
470
+ navLinks.classList.toggle('bg-opacity-90');
471
+ navLinks.classList.toggle('p-4');
472
+ navLinks.classList.toggle('space-y-4');
473
+ navLinks.classList.toggle('space-x-8');
474
+ });
475
+
476
+ // Animate skill bars on scroll
477
+ const skillBars = document.querySelectorAll('.skill-progress');
478
+
479
+ const animateSkills = () => {
480
+ skillBars.forEach(bar => {
481
+ const width = bar.style.width;
482
+ bar.style.width = '0%';
483
+ setTimeout(() => {
484
+ bar.style.width = width;
485
+ }, 100);
486
+ });
487
+ };
488
+
489
+ const observer = new IntersectionObserver((entries) => {
490
+ entries.forEach(entry => {
491
+ if (entry.isIntersecting) {
492
+ animateSkills();
493
+ observer.unobserve(entry.target);
494
+ }
495
+ });
496
+ }, { threshold: 0.1 });
497
+
498
+ document.querySelectorAll('.skill-bar').forEach(bar => {
499
+ observer.observe(bar);
500
+ });
501
+ });
502
+ </script>
503
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=AAhad/deeksite-demo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
504
+ </html>