Hugging Face's logo

Spaces:
WebashalarForML
/
anycoder-77f43fa2
Running

App Files Community
WebashalarForML commited on
Commit
a85264f
·
verified ·
1 Parent(s): 76ceb53

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +646 -19
index.html CHANGED
@@ -1,19 +1,646 @@
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>A.I. Engineer Portfolio | Cinematic Experience</title>
7
+
8
+ <!-- External Libraries -->
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
11
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
12
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
13
+ <script src="https://unpkg.com/lucide@latest"></script>
14
+
15
+ <!-- Google Fonts -->
16
+ <link rel="preconnect" href="https://fonts.googleapis.com">
17
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
18
+ <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;300;400;700&family=Space+Grotesk:wght@300;500;700&display=swap" rel="stylesheet">
19
+
20
+ <!-- Tailwind Config for Custom Colors/Fonts -->
21
+ <script>
22
+ tailwind.config = {
23
+ theme: {
24
+ extend: {
25
+ colors: {
26
+ void: '#050505',
27
+ obsidian: '#0a0a0a',
28
+ charcoal: '#1c1c1c',
29
+ platinum: '#e5e5e5',
30
+ accent: '#ff3333', // Subtle accent for rare elements
31
+ },
32
+ fontFamily: {
33
+ mono: ['"JetBrains Mono"', 'monospace'],
34
+ sans: ['"Space Grotesk"', 'sans-serif'],
35
+ },
36
+ backgroundImage: {
37
+ 'grid-pattern': "linear-gradient(to right, #1f1f1f 1px, transparent 1px), linear-gradient(to bottom, #1f1f1f 1px, transparent 1px)",
38
+ }
39
+ }
40
+ }
41
+ }
42
+ </script>
43
+
44
+ <style>
45
+ /* Base Reset & Typography */
46
+ body {
47
+ background-color: #050505;
48
+ color: #e5e5e5;
49
+ overflow-x: hidden;
50
+ cursor: none; /* Custom cursor */
51
+ }
52
+
53
+ ::selection {
54
+ background: #333;
55
+ color: #fff;
56
+ }
57
+
58
+ /* Custom Scrollbar */
59
+ ::-webkit-scrollbar {
60
+ width: 8px;
61
+ }
62
+ ::-webkit-scrollbar-track {
63
+ background: #0a0a0a;
64
+ }
65
+ ::-webkit-scrollbar-thumb {
66
+ background: #333;
67
+ border-radius: 4px;
68
+ }
69
+ ::-webkit-scrollbar-thumb:hover {
70
+ background: #555;
71
+ }
72
+
73
+ /* Custom Cursor */
74
+ #cursor {
75
+ position: fixed;
76
+ top: 0;
77
+ left: 0;
78
+ width: 20px;
79
+ height: 20px;
80
+ border: 1px solid rgba(255, 255, 255, 0.5);
81
+ border-radius: 50%;
82
+ pointer-events: none;
83
+ z-index: 9999;
84
+ transform: translate(-50%, -50%);
85
+ transition: width 0.3s, height 0.3s, background-color 0.3s;
86
+ mix-blend-mode: difference;
87
+ }
88
+ #cursor.hovered {
89
+ width: 50px;
90
+ height: 50px;
91
+ background-color: rgba(255, 255, 255, 0.1);
92
+ border-color: transparent;
93
+ }
94
+
95
+ /* Utilities */
96
+ .glass-panel {
97
+ background: rgba(10, 10, 10, 0.6);
98
+ backdrop-filter: blur(12px);
99
+ -webkit-backdrop-filter: blur(12px);
100
+ border: 1px solid rgba(255, 255, 255, 0.05);
101
+ }
102
+
103
+ .text-outline {
104
+ -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
105
+ color: transparent;
106
+ transition: all 0.5s ease;
107
+ }
108
+ .text-outline:hover {
109
+ color: #fff;
110
+ -webkit-text-stroke: 1px #fff;
111
+ }
112
+
113
+ /* Noise Texture Overlay */
114
+ .noise-overlay {
115
+ position: fixed;
116
+ top: 0;
117
+ left: 0;
118
+ width: 100%;
119
+ height: 100%;
120
+ pointer-events: none;
121
+ z-index: 50;
122
+ opacity: 0.05;
123
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
124
+ }
125
+
126
+ /* Loading Screen */
127
+ #loader {
128
+ position: fixed;
129
+ top: 0;
130
+ left: 0;
131
+ width: 100%;
132
+ height: 100%;
133
+ background: #000;
134
+ z-index: 10000;
135
+ display: flex;
136
+ justify-content: center;
137
+ align-items: center;
138
+ flex-direction: column;
139
+ }
140
+ .loader-bar {
141
+ width: 0%;
142
+ height: 2px;
143
+ background: #fff;
144
+ margin-top: 20px;
145
+ transition: width 0.1s;
146
+ }
147
+
148
+ /* 3D Canvas Container */
149
+ #canvas-container {
150
+ position: fixed;
151
+ top: 0;
152
+ left: 0;
153
+ width: 100%;
154
+ height: 100%;
155
+ z-index: -1;
156
+ opacity: 0; /* Fade in via JS */
157
+ transition: opacity 1.5s ease;
158
+ }
159
+ </style>
160
+ </head>
161
+ <body class="font-sans antialiased">
162
+
163
+ <!-- Loading Screen -->
164
+ <div id="loader">
165
+ <div class="font-mono text-xs tracking-[0.5em] text-gray-400">INITIALIZING SYSTEM</div>
166
+ <div class="loader-bar" id="loader-bar"></div>
167
+ </div>
168
+
169
+ <!-- Noise Overlay -->
170
+ <div class="noise-overlay"></div>
171
+
172
+ <!-- Custom Cursor -->
173
+ <div id="cursor"></div>
174
+
175
+ <!-- 3D Background -->
176
+ <div id="canvas-container"></div>
177
+
178
+ <!-- Navigation -->
179
+ <nav class="fixed top-0 left-0 w-full p-6 flex justify-between items-center z-40 mix-blend-difference">
180
+ <div class="font-mono text-sm font-bold tracking-widest hover-trigger">AI.ENGINEER</div>
181
+ <div class="hidden md:flex gap-8 font-mono text-xs tracking-wider">
182
+ <a href="#work" class="hover:text-white transition-colors hover-trigger">WORK</a>
183
+ <a href="#research" class="hover:text-white transition-colors hover-trigger">RESEARCH</a>
184
+ <a href="#about" class="hover:text-white transition-colors hover-trigger">ABOUT</a>
185
+ </div>
186
+ <button class="border border-white/20 px-4 py-2 rounded-full font-mono text-xs hover:bg-white hover:text-black transition-all hover-trigger">
187
+ CONTACT
188
+ </button>
189
+ </nav>
190
+
191
+ <!-- Main Content -->
192
+ <main class="relative z-10">
193
+
194
+ <!-- Hero Section -->
195
+ <section class="h-screen w-full flex flex-col justify-center items-center relative px-4">
196
+ <div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-[#050505] pointer-events-none"></div>
197
+
198
+ <div class="text-center z-10">
199
+ <p class="font-mono text-xs md:text-sm text-gray-400 mb-4 tracking-[0.3em] hero-anim opacity-0 translate-y-10">
200
+ ARTIFICIAL INTELLIGENCE & RESEARCH
201
+ </p>
202
+ <h1 class="text-5xl md:text-8xl lg:text-9xl font-bold tracking-tighter leading-none mb-6 hero-anim opacity-0 translate-y-10">
203
+ <span class="block bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-600">PRECISION</span>
204
+ <span class="block text-outline">ENGINEERING</span>
205
+ </h1>
206
+ <p class="max-w-xl mx-auto font-light text-gray-400 text-sm md:text-base leading-relaxed hero-anim opacity-0 translate-y-10">
207
+ Architecting the future through neural networks and high-performance algorithms.
208
+ </p>
209
+ </div>
210
+
211
+ <div class="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 hero-anim opacity-0">
212
+ <span class="font-mono text-[10px] tracking-widest text-gray-500">SCROLL TO EXPLORE</span>
213
+ <div class="w-[1px] h-12 bg-gradient-to-b from-white to-transparent"></div>
214
+ </div>
215
+ </section>
216
+
217
+ <!-- KPI Slider Section -->
218
+ <section id="kpi-section" class="py-32 px-6 md:px-20 relative">
219
+ <div class="absolute top-0 left-0 w-full h-[1px] bg-white/10"></div>
220
+
221
+ <div class="flex flex-col md:flex-row justify-between items-end mb-20 border-b border-white/10 pb-8">
222
+ <h2 class="text-4xl md:text-6xl font-bold">SYSTEM METRICS</h2>
223
+ <div class="font-mono text-xs text-gray-500 mt-4 md:mt-0">
224
+ REAL-TIME DATA STREAM
225
+ </div>
226
+ </div>
227
+
228
+ <!-- KPI Cards Container -->
229
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
230
+ <!-- Card 1 -->
231
+ <div class="kpi-card group p-8 border border-white/5 bg-[#0a0a0a] relative overflow-hidden hover-trigger">
232
+ <div class="absolute top-0 right-0 p-4 opacity-50 group-hover:opacity-100 transition-opacity">
233
+ <i data-lucide="cpu" class="w-6 h-6"></i>
234
+ </div>
235
+ <div class="font-mono text-xs text-gray-500 mb-2">MODEL ACCURACY</div>
236
+ <div class="text-5xl md:text-6xl font-bold font-mono mb-4 counter" data-target="99.8">0</div>
237
+ <div class="w-full h-[1px] bg-white/10 mb-4 relative overflow-hidden">
238
+ <div class="absolute top-0 left-0 h-full w-1/2 bg-white group-hover:w-full transition-all duration-1000 ease-out"></div>
239
+ </div>
240
+ <p class="text-sm text-gray-400">Optimized for edge deployment and low-latency inference.</p>
241
+ </div>
242
+
243
+ <!-- Card 2 -->
244
+ <div class="kpi-card group p-8 border border-white/5 bg-[#0a0a0a] relative overflow-hidden hover-trigger">
245
+ <div class="absolute top-0 right-0 p-4 opacity-50 group-hover:opacity-100 transition-opacity">
246
+ <i data-lucide="database" class="w-6 h-6"></i>
247
+ </div>
248
+ <div class="font-mono text-xs text-gray-500 mb-2">DATA PROCESSED</div>
249
+ <div class="text-5xl md:text-6xl font-bold font-mono mb-4 counter" data-target="850">0</div>
250
+ <div class="w-full h-[1px] bg-white/10 mb-4 relative overflow-hidden">
251
+ <div class="absolute top-0 left-0 h-full w-0 group-hover:w-full transition-all duration-1000 ease-out delay-200"></div>
252
+ </div>
253
+ <p class="text-sm text-gray-400">Petabytes of structured and unstructured data analyzed.</p>
254
+ </div>
255
+
256
+ <!-- Card 3 -->
257
+ <div class="kpi-card group p-8 border border-white/5 bg-[#0a0a0a] relative overflow-hidden hover-trigger">
258
+ <div class="absolute top-0 right-0 p-4 opacity-50 group-hover:opacity-100 transition-opacity">
259
+ <i data-lucide="zap" class="w-6 h-6"></i>
260
+ </div>
261
+ <div class="font-mono text-xs text-gray-500 mb-2">INFERENCE TIME</div>
262
+ <div class="text-5xl md:text-6xl font-bold font-mono mb-4 counter" data-target="12">0</div>
263
+ <div class="text-xs text-gray-500 font-mono mb-4">ms</div>
264
+ <div class="w-full h-[1px] bg-white/10 mb-4 relative overflow-hidden">
265
+ <div class="absolute top-0 left-0 h-full w-1/3 bg-white group-hover:w-full transition-all duration-1000 ease-out delay-400"></div>
266
+ </div>
267
+ <p class="text-sm text-gray-400">Achieving sub-15ms response times on consumer hardware.</p>
268
+ </div>
269
+ </div>
270
+ </section>
271
+
272
+ <!-- Wireframe / Grid Section -->
273
+ <section id="work" class="py-32 relative overflow-hidden">
274
+ <div class="container mx-auto px-6">
275
+ <div class="flex flex-col md:flex-row justify-between items-start mb-16">
276
+ <h2 class="text-4xl md:text-6xl font-bold">PROJECTS</h2>
277
+ <div class="font-mono text-xs text-gray-500 mt-4 md:mt-0">ARCHIVE: 2023 - 2024</div>
278
+ </div>
279
+
280
+ <!-- Vertical Crop Grid Trigger -->
281
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
282
+
283
+ <!-- Left: Text Description -->
284
+ <div class="order-2 md:order-1 space-y-8">
285
+ <div class="project-trigger group cursor-pointer">
286
+ <div class="flex items-center gap-4 mb-2">
287
+ <span class="font-mono text-xs text-accent">01</span>
288
+ <span class="font-mono text-xs text-gray-500">NEURAL INTERFACE</span>
289
+ </div>
290
+ <h3 class="text-3xl md:text-5xl font-bold group-hover:text-white transition-colors">Brain-Computer Interface</h3>
291
+ <p class="text-gray-400 mt-4 leading-relaxed">
292
+ Decoding motor cortex signals in real-time to control robotic prosthetics with millimeter precision.
293
+ </p>
294
+ </div>
295
+
296
+ <div class="w-full h-[1px] bg-white/10"></div>
297
+
298
+ <div class="project-trigger group cursor-pointer">
299
+ <div class="flex items-center gap-4 mb-2">
300
+ <span class="font-mono text-xs text-accent">02</span>
301
+ <span class="font-mono text-xs text-gray-500">GENERATIVE MODEL</span>
302
+ </div>
303
+ <h3 class="text-3xl md:text-5xl font-bold group-hover:text-white transition-colors">Synthetic Data Fabric</h3>
304
+ <p class="text-gray-400 mt-4 leading-relaxed">
305
+ Creating infinite, privacy-compliant datasets for training LLMs and Computer Vision models.
306
+ </p>
307
+ </div>
308
+ </div>
309
+
310
+ <!-- Right: Visual Reveal -->
311
+ <div class="order-1 md:order-2 relative h-[600px] w-full border border-white/10 bg-charcoal overflow-hidden group hover-trigger">
312
+ <!-- Abstract geometric representation -->
313
+ <div class="absolute inset-0 bg-grid-pattern opacity-20"></div>
314
+ <div class="absolute inset-0 flex items-center justify-center">
315
+ <div class="w-64 h-64 border border-white/20 rounded-full animate-[spin_10s_linear_infinite]"></div>
316
+ <div class="absolute w-48 h-48 border border-white/10 rotate-45"></div>
317
+ <div class="absolute w-32 h-32 bg-white/5 blur-xl rounded-full"></div>
318
+ </div>
319
+ <div class="absolute bottom-0 left-0 p-8 bg-gradient-to-t from-black to-transparent w-full">
320
+ <span class="font-mono text-xs">FIG 1.1: ARCHITECTURE</span>
321
+ </div>
322
+ </div>
323
+
324
+ </div>
325
+ </div>
326
+ </section>
327
+
328
+ <!-- Accordion Slider / Showcase -->
329
+ <section id="research" class="py-32 bg-[#0a0a0a] relative">
330
+ <div class="container mx-auto px-6">
331
+ <h2 class="text-4xl md:text-6xl font-bold mb-20 text-center">RESEARCH PAPERS</h2>
332
+
333
+ <div class="max-w-4xl mx-auto space-y-4">
334
+ <!-- Paper 1 -->
335
+ <div class="research-item group border-b border-white/10 pb-4 cursor-pointer hover:bg-white/5 transition-colors">
336
+ <div class="flex justify-between items-center py-6">
337
+ <h3 class="text-2xl font-bold">Attention Is All You Need (Redux)</h3>
338
+ <i data-lucide="chevron-down" class="w-6 h-6 transform transition-transform duration-300"></i>
339
+ </div>
340
+ <div class="max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
341
+ <div class="pb-8 grid grid-cols-1 md:grid-cols-3 gap-6">
342
+ <div class="md:col-span-2 text-gray-400 text-sm leading-relaxed">
343
+ <p class="mb-4">An exploration into self-attention mechanisms in transformer architectures, optimized for sparse computation.</p>
344
+ <ul class="list-disc list-inside text-gray-500 font-mono text-xs space-y-1">
345
+ <li>ArXiv: 2023.10.24</li>
346
+ <li>Latex Source Available</li>
347
+ <li>Code: GitHub.com/AI-Eng/Transformer</li>
348
+ </ul>
349
+ </div>
350
+ <div class="bg-white/5 p-4 border border-white/10">
351
+ <div class="text-xs font-mono text-gray-500 mb-2">CITATION SCORE</div>
352
+ <div class="text-3xl font-bold">142</div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+
358
+ <!-- Paper 2 -->
359
+ <div class="research-item group border-b border-white/10 pb-4 cursor-pointer hover:bg-white/5 transition-colors">
360
+ <div class="flex justify-between items-center py-6">
361
+ <h3 class="text-2xl font-bold">Quantum-Classical Hybrid Heuristics</h3>
362
+ <i data-lucide="chevron-down" class="w-6 h-6 transform transition-transform duration-300"></i>
363
+ </div>
364
+ <div class="max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
365
+ <div class="pb-8 grid grid-cols-1 md:grid-cols-3 gap-6">
366
+ <div class="md:col-span-2 text-gray-400 text-sm leading-relaxed">
367
+ <p class="mb-4">Leveraging variational quantum eigensolvers (VQE) to optimize reinforcement learning policies.</p>
368
+ </div>
369
+ <div class="bg-white/5 p-4 border border-white/10">
370
+ <div class="text-xs font-mono text-gray-500 mb-2">CITATION SCORE</div>
371
+ <div class="text-3xl font-bold">89</div>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ </section>
379
+
380
+ <!-- Footer -->
381
+ <footer class="py-20 border-t border-white/10 bg-void relative overflow-hidden">
382
+ <div class="container mx-auto px-6 flex flex-col md:flex-row justify-between items-center relative z-10">
383
+ <div class="mb-8 md:mb-0 text-center md:text-left">
384
+ <h2 class="text-2xl font-bold">READY TO COLLABORATE?</h2>
385
+ <p class="text-gray-500 font-mono text-sm mt-2">Open for select research partnerships.</p>
386
+ </div>
387
+ <div class="flex gap-6">
388
+ <a href="#" class="hover:text-white transition-colors hover-trigger"><i data-lucide="github" class="w-6 h-6"></i></a>
389
+ <a href="#" class="hover:text-white transition-colors hover-trigger"><i data-lucide="twitter" class="w-6 h-6"></i></a>
390
+ <a href="#" class="hover:text-white transition-colors hover-trigger"><i data-lucide="linkedin" class="w-6 h-6"></i></a>
391
+ </div>
392
+ </div>
393
+ <div class="absolute bottom-4 right-6 font-mono text-[10px] text-gray-700">
394
+ Built with anycoder
395
+ </div>
396
+ </footer>
397
+
398
+ </main>
399
+
400
+ <script>
401
+ // Initialize Icons
402
+ lucide.createIcons();
403
+
404
+ // --- 1. PRELOADER LOGIC ---
405
+ const loader = document.getElementById('loader');
406
+ const loaderBar = document.getElementById('loader-bar');
407
+ const canvasContainer = document.getElementById('canvas-container');
408
+
409
+ let progress = 0;
410
+ const interval = setInterval(() => {
411
+ progress += Math.random() * 10;
412
+ if (progress >= 100) {
413
+ progress = 100;
414
+ clearInterval(interval);
415
+ // Finish loading
416
+ gsap.to(loaderBar, { width: '100%', duration: 0.2, onComplete: () => {
417
+ gsap.to(loader, {
418
+ yPercent: -100,
419
+ duration: 1,
420
+ ease: "power4.inOut",
421
+ onComplete: () => {
422
+ canvasContainer.style.opacity = 1;
423
+ initAnimations(); // Start main animations after loader
424
+ }
425
+ });
426
+ }});
427
+ }
428
+ loaderBar.style.width = `${progress}%`;
429
+ }, 100);
430
+
431
+ // --- 2. THREE.JS BACKGROUND (Data Tunnel Effect) ---
432
+ // Combining concepts from multiple pens for a unique look
433
+ const scene = new THREE.Scene();
434
+ // Fog for depth fading
435
+ scene.fog = new THREE.FogExp2(0x050505, 0.002);
436
+
437
+ const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
438
+ camera.position.z = 100;
439
+
440
+ const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
441
+ renderer.setSize(window.innerWidth, window.innerHeight);
442
+ renderer.setPixelRatio(window.devicePixelRatio);
443
+ canvasContainer.appendChild(renderer.domElement);
444
+
445
+ // Create Particles (The "Data Tunnel")
446
+ const geometry = new THREE.BufferGeometry();
447
+ const count = 3000;
448
+ const positions = new Float32Array(count * 3);
449
+ const colors = new Float32Array(count * 3);
450
+ const sizes = new Float32Array(count);
451
+
452
+ const color1 = new THREE.Color(0xffffff); // White
453
+ const color2 = new THREE.Color(0x333333); // Grey
454
+
455
+ for(let i = 0; i < count; i++) {
456
+ // Tunnel shape logic
457
+ const angle = Math.random() * Math.PI * 2;
458
+ const radius = 20 + Math.random() * 80; // Tunnel width
459
+ const z = (Math.random() - 0.5) * 400; // Length
460
+
461
+ positions[i * 3] = Math.cos(angle) * radius;
462
+ positions[i * 3 + 1] = Math.sin(angle) * radius;
463
+ positions[i * 3 + 2] = z;
464
+
465
+ // Mix colors
466
+ const mixedColor = Math.random() > 0.5 ? color1 : color2;
467
+ colors[i * 3] = mixedColor.r;
468
+ colors[i * 3 + 1] = mixedColor.g;
469
+ colors[i * 3 + 2] = mixedColor.b;
470
+
471
+ sizes[i] = Math.random() * 2;
472
+ }
473
+
474
+ geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
475
+ geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
476
+ geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
477
+
478
+ // Custom Shader Material for particles
479
+ const material = new THREE.PointsMaterial({
480
+ size: 0.5,
481
+ vertexColors: true,
482
+ transparent: true,
483
+ opacity: 0.8,
484
+ blending: THREE.AdditiveBlending
485
+ });
486
+
487
+ const particles = new THREE.Points(geometry, material);
488
+ scene.add(particles);
489
+
490
+ // Add a secondary geometric grid (The "Wireframe" feel)
491
+ const gridHelper = new THREE.GridHelper(200, 50, 0x333333, 0x111111);
492
+ gridHelper.position.y = -50;
493
+ scene.add(gridHelper);
494
+
495
+ // Animation Loop
496
+ let mouseX = 0;
497
+ let mouseY = 0;
498
+ let targetX = 0;
499
+ let targetY = 0;
500
+
501
+ document.addEventListener('mousemove', (event) => {
502
+ mouseX = event.clientX - window.innerWidth / 2;
503
+ mouseY = event.clientY - window.innerHeight / 2;
504
+ });
505
+
506
+ const clock = new THREE.Clock();
507
+
508
+ function animate() {
509
+ requestAnimationFrame(animate);
510
+ const elapsedTime = clock.getElapsedTime();
511
+
512
+ targetX = mouseX * 0.001;
513
+ targetY = mouseY * 0.001;
514
+
515
+ // Rotate particles based on mouse
516
+ particles.rotation.y += 0.002;
517
+ particles.rotation.x += (targetY - particles.rotation.x) * 0.05;
518
+ particles.rotation.y += (targetX - particles.rotation.y) * 0.05;
519
+
520
+ // Move particles towards camera to simulate tunnel
521
+ const positions = particles.geometry.attributes.position.array;
522
+ for(let i = 0; i < count; i++) {
523
+ // Move Z
524
+ positions[i * 3 + 2] += 0.5; // Speed
525
+
526
+ // Reset if too close
527
+ if(positions[i * 3 + 2] > 150) {
528
+ positions[i * 3 + 2] = -250;
529
+ }
530
+ }
531
+ particles.geometry.attributes.position.needsUpdate = true;
532
+
533
+ // Subtle grid movement
534
+ gridHelper.rotation.y = -mouseX * 0.0002;
535
+
536
+ renderer.render(scene, camera);
537
+ }
538
+
539
+ animate();
540
+
541
+ // Handle Resize
542
+ window.addEventListener('resize', () => {
543
+ camera.aspect = window.innerWidth / window.innerHeight;
544
+ camera.updateProjectionMatrix();
545
+ renderer.setSize(window.innerWidth, window.innerHeight);
546
+ });
547
+
548
+ // --- 3. GSAP SCROLL ANIMATIONS ---
549
+ gsap.registerPlugin(ScrollTrigger);
550
+
551
+ function initAnimations() {
552
+ // Hero Animations
553
+ const heroTl = gsap.timeline();
554
+ heroTl.to('.hero-anim', {
555
+ y: 0,
556
+ opacity: 1,
557
+ duration: 1,
558
+ stagger: 0.2,
559
+ ease: "power3.out"
560
+ });
561
+
562
+ // KPI Counter Animation
563
+ gsap.utils.toArray('.counter').forEach(counter => {
564
+ const target = parseFloat(counter.getAttribute('data-target'));
565
+ gsap.to(counter, {
566
+ innerText: target,
567
+ duration: 2,
568
+ snap: { innerText: 0.1 },
569
+ scrollTrigger: {
570
+ trigger: counter,
571
+ start: "top 85%",
572
+ toggleActions: "play none none reverse"
573
+ }
574
+ });
575
+ });
576
+
577
+ // Card Stagger Reveal
578
+ gsap.from('.kpi-card', {
579
+ y: 50,
580
+ opacity: 0,
581
+ duration: 1,
582
+ stagger: 0.2,
583
+ scrollTrigger: {
584
+ trigger: '#kpi-section',
585
+ start: "top 70%"
586
+ }
587
+ });
588
+
589
+ // Project Wireframe Reveal
590
+ gsap.from('.project-trigger', {
591
+ x: -50,
592
+ opacity: 0,
593
+ duration: 1,
594
+ stagger: 0.2,
595
+ scrollTrigger: {
596
+ trigger: '#work',
597
+ start: "top 70%"
598
+ }
599
+ });
600
+
601
+ // Research Accordion Logic (Manual JS for accordion effect)
602
+ const researchItems = document.querySelectorAll('.research-item');
603
+ researchItems.forEach(item => {
604
+ const header = item.querySelector('div.flex');
605
+ const content = item.querySelector('.max-h-0');
606
+ const icon = item.querySelector('i');
607
+
608
+ header.addEventListener('click', () => {
609
+ const isOpen = content.style.maxHeight;
610
+
611
+ // Close all others
612
+ researchItems.forEach(otherItem => {
613
+ otherItem.querySelector('.max-h-0').style.maxHeight = null;
614
+ otherItem.querySelector('i').style.transform = 'rotate(0deg)';
615
+ });
616
+
617
+ // Toggle current
618
+ if (!isOpen) {
619
+ content.style.maxHeight = content.scrollHeight + "px";
620
+ icon.style.transform = 'rotate(180deg)';
621
+ }
622
+ });
623
+ });
624
+ }
625
+
626
+ // --- 4. CUSTOM CURSOR LOGIC ---
627
+ const cursor = document.getElementById('cursor');
628
+ const triggers = document.querySelectorAll('.hover-trigger');
629
+
630
+ document.addEventListener('mousemove', (e) => {
631
+ cursor.style.left = e.clientX + 'px';
632
+ cursor.style.top = e.clientY + 'px';
633
+ });
634
+
635
+ triggers.forEach(trigger => {
636
+ trigger.addEventListener('mouseenter', () => {
637
+ cursor.classList.add('hovered');
638
+ });
639
+ trigger.addEventListener('mouseleave', () => {
640
+ cursor.classList.remove('hovered');
641
+ });
642
+ });
643
+
644
+ </script>
645
+ </body>
646
+ </html>