Hugging Face's logo

Spaces:
Marv12
/
2ppp
Running

App Files Community
Marv12 commited on
Commit
add0a59
·
verified ·
1 Parent(s): fddd102

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +265 -133
  2. prompts.txt +2 -1
index.html CHANGED
@@ -11,19 +11,28 @@
11
  <style>
12
  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;600&display=swap');
13
 
 
 
 
 
 
 
14
  body {
15
  font-family: 'Inter', sans-serif;
16
- background: linear-gradient(135deg, #fff9f0 0%, #f0fff9 100%);
17
- color: #333;
18
  margin: 0;
19
  padding: 0;
20
  overflow-x: hidden;
21
  cursor: default;
 
22
  }
23
 
24
  .hero-text {
25
  font-family: 'Playfair Display', serif;
26
  text-shadow: 0 2px 10px rgba(0,0,0,0.1);
 
 
27
  }
28
 
29
  .glass-card {
@@ -87,14 +96,96 @@
87
  -webkit-background-clip: text;
88
  -webkit-text-fill-color: transparent;
89
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
90
  </style>
91
  </head>
92
  <body>
93
  <!-- 3D Canvas Container -->
94
  <div id="canvas-container"></div>
95
 
96
- <!-- Navigation Spheres -->
97
- <div class="fixed right-8 top-1/2 transform -translate-y-1/2 flex flex-col space-y-4 z-50">
98
  <div class="nav-sphere w-12 h-12 rounded-full bg-gradient-to-br from-pink-100 to-teal-100 border border-white cursor-pointer flex items-center justify-center shadow-lg" data-section="hero"></div>
99
  <div class="nav-sphere w-12 h-12 rounded-full bg-gradient-to-br from-yellow-100 to-blue-100 border border-white cursor-pointer flex items-center justify-center shadow-lg" data-section="projects"></div>
100
  <div class="nav-sphere w-12 h-12 rounded-full bg-gradient-to-br from-purple-100 to-green-100 border border-white cursor-pointer flex items-center justify-center shadow-lg" data-section="gallery"></div>
@@ -102,83 +193,83 @@
102
  </div>
103
 
104
  <!-- Hero Section -->
105
- <section id="hero" class="min-h-screen flex flex-col justify-center items-center px-8 relative overflow-hidden">
106
  <div class="max-w-4xl mx-auto text-center z-10">
107
- <h1 class="hero-text text-5xl md:text-7xl font-bold mb-6 text-gray-800">Hello, I'm <span class="ribbon-text">Alex</span></h1>
108
- <p class="text-xl md:text-2xl text-gray-600 mb-12 max-w-2xl mx-auto">Creating digital experiences with <span class="font-semibold">trust</span>, <span class="font-semibold">understanding</span>, and <span class="font-semibold">creativity</span></p>
109
 
110
- <div class="flex flex-wrap justify-center gap-4 mb-16">
111
- <div class="px-6 py-3 glass-card rounded-full text-gray-700 font-medium">Hardworking</div>
112
- <div class="px-6 py-3 glass-card rounded-full text-gray-700 font-medium">Willingness</div>
113
- <div class="px-6 py-3 glass-card rounded-full text-gray-700 font-medium">Dedication</div>
114
  </div>
115
 
116
- <button class="btn-spring px-8 py-4 bg-white rounded-full text-gray-800 font-semibold shadow-lg flex items-center mx-auto">
117
- <span>Explore My Work</span>
118
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
119
  <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
120
  </svg>
121
  </button>
122
  </div>
123
 
124
- <!-- Floating keywords that will be animated with Three.js -->
125
  <div id="keywords-container" class="absolute inset-0 pointer-events-none"></div>
126
  </section>
127
 
128
  <!-- Projects Section -->
129
- <section id="projects" class="min-h-screen py-20 px-8 relative">
130
  <div class="max-w-6xl mx-auto">
131
- <h2 class="text-4xl font-bold text-center mb-16 text-gray-800">Featured Projects</h2>
132
 
133
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
134
  <!-- Project Tile 1 -->
135
- <div class="project-tile bg-white rounded-2xl overflow-hidden shadow-xl">
136
- <div class="h-48 bg-gradient-to-r from-pink-100 to-purple-100 flex items-center justify-center">
137
- <div class="text-5xl">🌐</div>
138
  </div>
139
- <div class="p-6">
140
- <h3 class="text-xl font-bold mb-2">Interactive Web Portal</h3>
141
- <p class="text-gray-600 mb-4">A responsive platform with real-time data visualization and user engagement features.</p>
142
- <div class="flex flex-wrap gap-2 mb-4">
143
- <span class="text-xs px-3 py-1 bg-pink-100 text-pink-800 rounded-full">React</span>
144
- <span class="text-xs px-3 py-1 bg-blue-100 text-blue-800 rounded-full">Three.js</span>
145
- <span class="text-xs px-3 py-1 bg-green-100 text-green-800 rounded-full">Node.js</span>
146
  </div>
147
- <button class="text-sm font-medium text-pink-600 hover:text-pink-800">View Case Study →</button>
148
  </div>
149
  </div>
150
 
151
  <!-- Project Tile 2 -->
152
- <div class="project-tile bg-white rounded-2xl overflow-hidden shadow-xl">
153
- <div class="h-48 bg-gradient-to-r from-blue-100 to-teal-100 flex items-center justify-center">
154
- <div class="text-5xl">📱</div>
155
  </div>
156
- <div class="p-6">
157
- <h3 class="text-xl font-bold mb-2">Mobile Experience</h3>
158
- <p class="text-gray-600 mb-4">An award-winning mobile app with gesture-based navigation and AR features.</p>
159
- <div class="flex flex-wrap gap-2 mb-4">
160
- <span class="text-xs px-3 py-1 bg-purple-100 text-purple-800 rounded-full">Swift</span>
161
- <span class="text-xs px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full">ARKit</span>
162
- <span class="text-xs px-3 py-1 bg-red-100 text-red-800 rounded-full">Firebase</span>
163
  </div>
164
- <button class="text-sm font-medium text-blue-600 hover:text-blue-800">View Case Study →</button>
165
  </div>
166
  </div>
167
 
168
  <!-- Project Tile 3 -->
169
- <div class="project-tile bg-white rounded-2xl overflow-hidden shadow-xl">
170
- <div class="h-48 bg-gradient-to-r from-yellow-100 to-orange-100 flex items-center justify-center">
171
- <div class="text-5xl">🎨</div>
172
  </div>
173
- <div class="p-6">
174
- <h3 class="text-xl font-bold mb-2">Generative Art</h3>
175
- <p class="text-gray-600 mb-4">An interactive installation that creates unique visual patterns based on user input.</p>
176
- <div class="flex flex-wrap gap-2 mb-4">
177
- <span class="text-xs px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full">p5.js</span>
178
- <span class="text-xs px-3 py-1 bg-green-100 text-green-800 rounded-full">WebGL</span>
179
- <span class="text-xs px-3 py-1 bg-pink-100 text-pink-800 rounded-full">GSAP</span>
180
  </div>
181
- <button class="text-sm font-medium text-orange-600 hover:text-orange-800">View Case Study →</button>
182
  </div>
183
  </div>
184
  </div>
@@ -186,32 +277,32 @@
186
  </section>
187
 
188
  <!-- Gallery Section -->
189
- <section id="gallery" class="min-h-screen py-20 px-8 bg-white bg-opacity-50 relative">
190
  <div class="max-w-6xl mx-auto">
191
- <h2 class="text-4xl font-bold text-center mb-16 text-gray-800">Creative Explorations</h2>
192
-
193
- <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
194
- <div class="glass-card rounded-3xl p-8">
195
- <h3 class="text-2xl font-bold mb-4 text-gray-800">Sculpture Garden</h3>
196
- <p class="text-gray-600 mb-6">Interactive 3D frames that reveal layered illustrations when manipulated. Each piece responds to user interaction with subtle physics and sound.</p>
197
- <div class="h-64 bg-gradient-to-r from-green-100 to-blue-100 rounded-2xl flex items-center justify-center">
198
- <div class="text-4xl">🖼️</div>
199
  </div>
200
  </div>
201
 
202
- <div class="glass-card rounded-3xl p-8">
203
- <h3 class="text-2xl font-bold mb-4 text-gray-800">Generative Systems</h3>
204
- <p class="text-gray-600 mb-6">Algorithmic compositions that evolve over time, creating unique visual and auditory experiences based on mathematical patterns.</p>
205
- <div class="h-64 bg-gradient-to-r from-purple-100 to-pink-100 rounded-2xl flex items-center justify-center">
206
- <div class="text-4xl">🌀</div>
207
  </div>
208
  </div>
209
  </div>
210
 
211
- <div class="text-center mt-12">
212
- <button class="btn-spring px-8 py-4 bg-white rounded-full text-gray-800 font-semibold shadow-lg flex items-center mx-auto">
213
- <span>View Full Gallery</span>
214
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
215
  <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
216
  </svg>
217
  </button>
@@ -220,48 +311,48 @@
220
  </section>
221
 
222
  <!-- Contact Section -->
223
- <section id="contact" class="min-h-screen py-20 px-8 relative">
224
  <div class="max-w-4xl mx-auto text-center">
225
- <h2 class="text-4xl font-bold mb-6 text-gray-800">Let's Build <span class="ribbon-text">Together</span></h2>
226
- <p class="text-xl text-gray-600 mb-12 max-w-2xl mx-auto">I'm always excited to collaborate on meaningful projects that push creative boundaries.</p>
227
 
228
- <div class="glass-card rounded-3xl p-8 md:p-12 max-w-2xl mx-auto">
229
- <form class="space-y-6">
230
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
231
  <div>
232
- <label for="name" class="block text-left text-gray-700 mb-2">Name</label>
233
- <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-pink-200">
234
  </div>
235
  <div>
236
- <label for="email" class="block text-left text-gray-700 mb-2">Email</label>
237
- <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-200">
238
  </div>
239
  </div>
240
 
241
  <div>
242
- <label for="message" class="block text-left text-gray-700 mb-2">Message</label>
243
- <textarea id="message" rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-teal-200"></textarea>
244
  </div>
245
 
246
- <button type="submit" class="btn-spring w-full md:w-auto px-8 py-4 bg-gradient-to-r from-pink-400 to-blue-400 text-white font-semibold rounded-full shadow-lg">
247
  Send Message
248
  </button>
249
  </form>
250
  </div>
251
 
252
- <div class="mt-16 flex justify-center space-x-6">
253
  <a href="#" class="text-gray-600 hover:text-pink-500">
254
- <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
255
  <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
256
  </svg>
257
  </a>
258
  <a href="#" class="text-gray-600 hover:text-blue-500">
259
- <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
260
  <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
261
  </svg>
262
  </a>
263
  <a href="#" class="text-gray-600 hover:text-orange-500">
264
- <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
265
  <path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd" />
266
  </svg>
267
  </a>
@@ -269,52 +360,65 @@
269
  </div>
270
 
271
  <!-- Floating lanterns -->
272
- <div class="absolute bottom-8 left-0 right-0 flex justify-center space-x-12 pointer-events-none">
273
- <div class="w-8 h-12 bg-gradient-to-b from-yellow-100 to-yellow-300 rounded-full opacity-80 floating" style="animation-delay: 0s;"></div>
274
- <div class="w-8 h-12 bg-gradient-to-b from-pink-100 to-pink-300 rounded-full opacity-80 floating" style="animation-delay: 1s;"></div>
275
- <div class="w-8 h-12 bg-gradient-to-b from-blue-100 to-blue-300 rounded-full opacity-80 floating" style="animation-delay: 2s;"></div>
276
  </div>
277
  </section>
278
 
279
  <script>
280
  // Initialize Three.js scene
281
  let scene, camera, renderer, objects = [];
 
282
 
283
  function initThreeJS() {
284
  // Scene setup
285
  scene = new THREE.Scene();
286
  scene.background = new THREE.Color(0xf9f9f9);
287
 
288
- // Camera setup
289
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
290
- camera.position.z = 30;
291
 
292
  // Renderer setup
293
- renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
 
 
 
 
294
  renderer.setSize(window.innerWidth, window.innerHeight);
295
- renderer.setPixelRatio(window.devicePixelRatio);
296
  document.getElementById('canvas-container').appendChild(renderer.domElement);
297
 
298
- // Lights
299
- const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
300
  scene.add(ambientLight);
301
 
302
- const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
303
- directionalLight.position.set(1, 1, 1);
304
- scene.add(directionalLight);
 
 
305
 
306
- // Create floating objects
307
  createFloatingObjects();
308
 
309
- // Handle window resize
310
- window.addEventListener('resize', onWindowResize);
 
 
 
 
311
 
312
  // Start animation loop
313
  animate();
314
  }
315
 
316
  function createFloatingObjects() {
317
- const geometry = new THREE.SphereGeometry(1, 32, 32);
 
 
318
  const material = new THREE.MeshPhongMaterial({
319
  color: 0xffd6e0,
320
  transparent: true,
@@ -324,12 +428,12 @@
324
  });
325
 
326
  // Create glass orbs
327
- for (let i = 0; i < 8; i++) {
328
  const sphere = new THREE.Mesh(geometry, material.clone());
329
- sphere.position.x = (Math.random() - 0.5) * 40;
330
- sphere.position.y = (Math.random() - 0.5) * 20;
331
- sphere.position.z = (Math.random() - 0.5) * 20;
332
- sphere.scale.setScalar(0.8 + Math.random() * 0.5);
333
 
334
  // Add slight color variation
335
  sphere.material.color.setHSL(
@@ -349,35 +453,41 @@
349
  objects.push(sphere);
350
  }
351
 
352
- // Create keywords inside the orbs (simplified for this example)
353
- const keywords = ['Trust', 'Understanding', 'Hardworking', 'Creativity', 'Willingness'];
354
- const container = document.getElementById('keywords-container');
355
-
356
- keywords.forEach((word, i) => {
357
- const el = document.createElement('div');
358
- el.className = 'absolute text-xl font-bold text-gray-700 opacity-70';
359
- el.style.top = `${30 + Math.random() * 40}%`;
360
- el.style.left = `${20 + Math.random() * 60}%`;
361
- el.textContent = word;
362
- container.appendChild(el);
363
- });
 
 
364
  }
365
 
366
  function onWindowResize() {
 
367
  camera.aspect = window.innerWidth / window.innerHeight;
368
  camera.updateProjectionMatrix();
369
  renderer.setSize(window.innerWidth, window.innerHeight);
 
 
 
370
  }
371
 
372
  function animate() {
373
  requestAnimationFrame(animate);
374
 
375
- // Animate floating objects
376
  objects.forEach(obj => {
377
- obj.userData.angle += obj.userData.speed * 0.01;
378
- obj.position.y = obj.userData.originalY + Math.sin(obj.userData.angle) * 2;
379
- obj.rotation.x += 0.005;
380
- obj.rotation.y += 0.005;
381
  });
382
 
383
  renderer.render(scene, camera);
@@ -390,19 +500,29 @@
390
  section.scrollIntoView({ behavior: 'smooth' });
391
 
392
  // Add animation to clicked sphere
393
- sphere.style.transform = 'scale(1.3)';
394
- sphere.style.boxShadow = '0 0 0 12px rgba(255,255,255,0.5)';
395
-
396
- setTimeout(() => {
397
- sphere.style.transform = '';
398
- sphere.style.boxShadow = '';
399
- }, 500);
 
 
 
 
 
 
 
400
  });
401
  });
402
 
403
  // Initialize everything when DOM is loaded
404
  document.addEventListener('DOMContentLoaded', () => {
405
- initThreeJS();
 
 
 
406
 
407
  // Add GSAP animations for page elements
408
  gsap.from('.hero-text', {
@@ -423,7 +543,19 @@
423
  start: 'top 80%'
424
  }
425
  });
 
 
 
 
 
 
 
426
  });
 
 
 
 
 
427
  </script>
428
  <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=Marv12/2ppp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
429
  </html>
 
11
  <style>
12
  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;600&display=swap');
13
 
14
+ :root {
15
+ --primary-bg: linear-gradient(135deg, #fff9f0 0%, #f0fff9 100%);
16
+ --text-primary: #333;
17
+ --text-secondary: #555;
18
+ }
19
+
20
  body {
21
  font-family: 'Inter', sans-serif;
22
+ background: var(--primary-bg);
23
+ color: var(--text-primary);
24
  margin: 0;
25
  padding: 0;
26
  overflow-x: hidden;
27
  cursor: default;
28
+ min-height: 100vh;
29
  }
30
 
31
  .hero-text {
32
  font-family: 'Playfair Display', serif;
33
  text-shadow: 0 2px 10px rgba(0,0,0,0.1);
34
+ font-size: clamp(2.5rem, 8vw, 4.5rem);
35
+ line-height: 1.2;
36
  }
37
 
38
  .glass-card {
 
96
  -webkit-background-clip: text;
97
  -webkit-text-fill-color: transparent;
98
  }
99
+
100
+ /* Responsive adjustments */
101
+ @media (max-width: 768px) {
102
+ .nav-spheres {
103
+ bottom: 20px;
104
+ right: 50%;
105
+ transform: translateX(50%);
106
+ flex-direction: row;
107
+ gap: 12px;
108
+ }
109
+
110
+ .nav-sphere {
111
+ width: 10vw;
112
+ height: 10vw;
113
+ min-width: 40px;
114
+ min-height: 40px;
115
+ }
116
+
117
+ .project-tile {
118
+ max-width: 100%;
119
+ }
120
+
121
+ #hero {
122
+ padding-top: 20vh;
123
+ padding-bottom: 20vh;
124
+ }
125
+
126
+ .hero-subtext {
127
+ font-size: clamp(1rem, 4vw, 1.5rem);
128
+ }
129
+
130
+ .section-padding {
131
+ padding: 5rem 1.5rem;
132
+ }
133
+
134
+ .contact-form {
135
+ padding: 1.5rem;
136
+ }
137
+ }
138
+
139
+ @media (max-width: 480px) {
140
+ .keyword-tag {
141
+ font-size: 0.8rem;
142
+ padding: 0.4rem 0.8rem;
143
+ }
144
+
145
+ .project-tile h3 {
146
+ font-size: 1.2rem;
147
+ }
148
+
149
+ .project-tile p {
150
+ font-size: 0.9rem;
151
+ }
152
+ }
153
+
154
+ /* Fluid typography */
155
+ html {
156
+ font-size: 16px;
157
+ }
158
+
159
+ @media (min-width: 600px) {
160
+ html {
161
+ font-size: 18px;
162
+ }
163
+ }
164
+
165
+ @media (min-width: 900px) {
166
+ html {
167
+ font-size: 20px;
168
+ }
169
+ }
170
+
171
+ /* Touch device optimizations */
172
+ @media (hover: none) {
173
+ .project-tile:hover {
174
+ transform: none;
175
+ }
176
+
177
+ .btn-spring:hover {
178
+ transform: none;
179
+ }
180
+ }
181
  </style>
182
  </head>
183
  <body>
184
  <!-- 3D Canvas Container -->
185
  <div id="canvas-container"></div>
186
 
187
+ <!-- Navigation Spheres - Positioned differently for mobile -->
188
+ <div class="fixed right-8 top-1/2 transform -translate-y-1/2 flex flex-col space-y-4 z-50 nav-spheres md:flex">
189
  <div class="nav-sphere w-12 h-12 rounded-full bg-gradient-to-br from-pink-100 to-teal-100 border border-white cursor-pointer flex items-center justify-center shadow-lg" data-section="hero"></div>
190
  <div class="nav-sphere w-12 h-12 rounded-full bg-gradient-to-br from-yellow-100 to-blue-100 border border-white cursor-pointer flex items-center justify-center shadow-lg" data-section="projects"></div>
191
  <div class="nav-sphere w-12 h-12 rounded-full bg-gradient-to-br from-purple-100 to-green-100 border border-white cursor-pointer flex items-center justify-center shadow-lg" data-section="gallery"></div>
 
193
  </div>
194
 
195
  <!-- Hero Section -->
196
+ <section id="hero" class="min-h-screen flex flex-col justify-center items-center px-4 sm:px-8 relative overflow-hidden section-padding">
197
  <div class="max-w-4xl mx-auto text-center z-10">
198
+ <h1 class="hero-text text-5xl md:text-7xl font-bold mb-4 md:mb-6 text-gray-800">Hello, I'm <span class="ribbon-text">Alex</span></h1>
199
+ <p class="hero-subtext text-xl md:text-2xl text-gray-600 mb-8 md:mb-12 max-w-2xl mx-auto">Creating digital experiences with <span class="font-semibold">trust</span>, <span class="font-semibold">understanding</span>, and <span class="font-semibold">creativity</span></p>
200
 
201
+ <div class="flex flex-wrap justify-center gap-3 mb-8 md:mb-16">
202
+ <div class="px-4 py-2 md:px-6 md:py-3 glass-card rounded-full text-gray-700 font-medium keyword-tag">Hardworking</div>
203
+ <div class="px-4 py-2 md:px-6 md:py-3 glass-card rounded-full text-gray-700 font-medium keyword-tag">Willingness</div>
204
+ <div class="px-4 py-2 md:px-6 md:py-3 glass-card rounded-full text-gray-700 font-medium keyword-tag">Dedication</div>
205
  </div>
206
 
207
+ <button class="btn-spring px-6 py-3 md:px-8 md:py-4 bg-white rounded-full text-gray-800 font-semibold shadow-lg flex items-center mx-auto">
208
+ <span class="text-sm md:text-base">Explore My Work</span>
209
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
210
  <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
211
  </svg>
212
  </button>
213
  </div>
214
 
215
+ <!-- Floating keywords -->
216
  <div id="keywords-container" class="absolute inset-0 pointer-events-none"></div>
217
  </section>
218
 
219
  <!-- Projects Section -->
220
+ <section id="projects" class="min-h-screen py-12 md:py-20 px-4 sm:px-8 relative section-padding">
221
  <div class="max-w-6xl mx-auto">
222
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-8 md:mb-16 text-gray-800">Featured Projects</h2>
223
 
224
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
225
  <!-- Project Tile 1 -->
226
+ <div class="project-tile bg-white rounded-xl md:rounded-2xl overflow-hidden shadow-lg md:shadow-xl">
227
+ <div class="h-40 md:h-48 bg-gradient-to-r from-pink-100 to-purple-100 flex items-center justify-center">
228
+ <div class="text-4xl md:text-5xl">🌐</div>
229
  </div>
230
+ <div class="p-4 md:p-6">
231
+ <h3 class="text-lg md:text-xl font-bold mb-2">Interactive Web Portal</h3>
232
+ <p class="text-sm md:text-base text-gray-600 mb-3 md:mb-4">A responsive platform with real-time data visualization and user engagement features.</p>
233
+ <div class="flex flex-wrap gap-1 md:gap-2 mb-3 md:mb-4">
234
+ <span class="text-xs px-2 py-1 md:px-3 md:py-1 bg-pink-100 text-pink-800 rounded-full">React</span>
235
+ <span class="text-xs px-2 py-1 md:px-3 md:py-1 bg-blue-100 text-blue-800 rounded-full">Three.js</span>
236
+ <span class="text-xs px-2 py-1 md:px-3 md:py-1 bg-green-100 text-green-800 rounded-full">Node.js</span>
237
  </div>
238
+ <button class="text-xs md:text-sm font-medium text-pink-600 hover:text-pink-800">View Case Study →</button>
239
  </div>
240
  </div>
241
 
242
  <!-- Project Tile 2 -->
243
+ <div class="project-tile bg-white rounded-xl md:rounded-2xl overflow-hidden shadow-lg md:shadow-xl">
244
+ <div class="h-40 md:h-48 bg-gradient-to-r from-blue-100 to-teal-100 flex items-center justify-center">
245
+ <div class="text-4xl md:text-5xl">📱</div>
246
  </div>
247
+ <div class="p-4 md:p-6">
248
+ <h3 class="text-lg md:text-xl font-bold mb-2">Mobile Experience</h3>
249
+ <p class="text-sm md:text-base text-gray-600 mb-3 md:mb-4">An award-winning mobile app with gesture-based navigation and AR features.</p>
250
+ <div class="flex flex-wrap gap-1 md:gap-2 mb-3 md:mb-4">
251
+ <span class="text-xs px-2 py-1 md:px-3 md:py-1 bg-purple-100 text-purple-800 rounded-full">Swift</span>
252
+ <span class="text-xs px-2 py-1 md:px-3 md:py-1 bg-yellow-100 text-yellow-800 rounded-full">ARKit</span>
253
+ <span class="text-xs px-2 py-1 md:px-3 md:py-1 bg-red-100 text-red-800 rounded-full">Firebase</span>
254
  </div>
255
+ <button class="text-xs md:text-sm font-medium text-blue-600 hover:text-blue-800">View Case Study →</button>
256
  </div>
257
  </div>
258
 
259
  <!-- Project Tile 3 -->
260
+ <div class="project-tile bg-white rounded-xl md:rounded-2xl overflow-hidden shadow-lg md:shadow-xl">
261
+ <div class="h-40 md:h-48 bg-gradient-to-r from-yellow-100 to-orange-100 flex items-center justify-center">
262
+ <div class="text-4xl md:text-5xl">🎨</div>
263
  </div>
264
+ <div class="p-4 md:p-6">
265
+ <h3 class="text-lg md:text-xl font-bold mb-2">Generative Art</h3>
266
+ <p class="text-sm md:text-base text-gray-600 mb-3 md:mb-4">An interactive installation that creates unique visual patterns based on user input.</p>
267
+ <div class="flex flex-wrap gap-1 md:gap-2 mb-3 md:mb-4">
268
+ <span class="text-xs px-2 py-1 md:px-3 md:py-1 bg-indigo-100 text-indigo-800 rounded-full">p5.js</span>
269
+ <span class="text-xs px-2 py-1 md:px-3 md:py-1 bg-green-100 text-green-800 rounded-full">WebGL</span>
270
+ <span class="text-xs px-2 py-1 md:px-3 md:py-1 bg-pink-100 text-pink-800 rounded-full">GSAP</span>
271
  </div>
272
+ <button class="text-xs md:text-sm font-medium text-orange-600 hover:text-orange-800">View Case Study →</button>
273
  </div>
274
  </div>
275
  </div>
 
277
  </section>
278
 
279
  <!-- Gallery Section -->
280
+ <section id="gallery" class="min-h-screen py-12 md:py-20 px-4 sm:px-8 bg-white bg-opacity-50 relative section-padding">
281
  <div class="max-w-6xl mx-auto">
282
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-8 md:mb-16 text-gray-800">Creative Explorations</h2>
283
+
284
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 mb-8 md:mb-12">
285
+ <div class="glass-card rounded-2xl md:rounded-3xl p-4 md:p-8">
286
+ <h3 class="text-xl md:text-2xl font-bold mb-3 md:mb-4 text-gray-800">Sculpture Garden</h3>
287
+ <p class="text-sm md:text-base text-gray-600 mb-4 md:mb-6">Interactive 3D frames that reveal layered illustrations when manipulated. Each piece responds to user interaction with subtle physics and sound.</p>
288
+ <div class="h-48 md:h-64 bg-gradient-to-r from-green-100 to-blue-100 rounded-xl md:rounded-2xl flex items-center justify-center">
289
+ <div class="text-3xl md:text-4xl">🖼️</div>
290
  </div>
291
  </div>
292
 
293
+ <div class="glass-card rounded-2xl md:rounded-3xl p-4 md:p-8">
294
+ <h3 class="text-xl md:text-2xl font-bold mb-3 md:mb-4 text-gray-800">Generative Systems</h3>
295
+ <p class="text-sm md:text-base text-gray-600 mb-4 md:mb-6">Algorithmic compositions that evolve over time, creating unique visual and auditory experiences based on mathematical patterns.</p>
296
+ <div class="h-48 md:h-64 bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl md:rounded-2xl flex items-center justify-center">
297
+ <div class="text-3xl md:text-4xl">🌀</div>
298
  </div>
299
  </div>
300
  </div>
301
 
302
+ <div class="text-center mt-8 md:mt-12">
303
+ <button class="btn-spring px-6 py-3 md:px-8 md:py-4 bg-white rounded-full text-gray-800 font-semibold shadow-lg flex items-center mx-auto">
304
+ <span class="text-sm md:text-base">View Full Gallery</span>
305
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
306
  <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
307
  </svg>
308
  </button>
 
311
  </section>
312
 
313
  <!-- Contact Section -->
314
+ <section id="contact" class="min-h-screen py-12 md:py-20 px-4 sm:px-8 relative section-padding">
315
  <div class="max-w-4xl mx-auto text-center">
316
+ <h2 class="text-3xl md:text-4xl font-bold mb-4 md:mb-6 text-gray-800">Let's Build <span class="ribbon-text">Together</span></h2>
317
+ <p class="text-lg md:text-xl text-gray-600 mb-8 md:mb-12 max-w-2xl mx-auto">I'm always excited to collaborate on meaningful projects that push creative boundaries.</p>
318
 
319
+ <div class="glass-card rounded-2xl md:rounded-3xl p-4 md:p-8 lg:p-12 max-w-2xl mx-auto contact-form">
320
+ <form class="space-y-4 md:space-y-6">
321
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
322
  <div>
323
+ <label for="name" class="block text-left text-sm md:text-base text-gray-700 mb-1 md:mb-2">Name</label>
324
+ <input type="text" id="name" class="w-full px-3 py-2 md:px-4 md:py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-pink-200 text-sm md:text-base">
325
  </div>
326
  <div>
327
+ <label for="email" class="block text-left text-sm md:text-base text-gray-700 mb-1 md:mb-2">Email</label>
328
+ <input type="email" id="email" class="w-full px-3 py-2 md:px-4 md:py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-200 text-sm md:text-base">
329
  </div>
330
  </div>
331
 
332
  <div>
333
+ <label for="message" class="block text-left text-sm md:text-base text-gray-700 mb-1 md:mb-2">Message</label>
334
+ <textarea id="message" rows="4" class="w-full px-3 py-2 md:px-4 md:py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-teal-200 text-sm md:text-base"></textarea>
335
  </div>
336
 
337
+ <button type="submit" class="btn-spring w-full md:w-auto px-6 py-3 md:px-8 md:py-4 bg-gradient-to-r from-pink-400 to-blue-400 text-white font-semibold rounded-full shadow-lg text-sm md:text-base">
338
  Send Message
339
  </button>
340
  </form>
341
  </div>
342
 
343
+ <div class="mt-8 md:mt-16 flex justify-center space-x-4 md:space-x-6">
344
  <a href="#" class="text-gray-600 hover:text-pink-500">
345
+ <svg class="w-5 h-5 md:w-6 md:h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
346
  <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
347
  </svg>
348
  </a>
349
  <a href="#" class="text-gray-600 hover:text-blue-500">
350
+ <svg class="w-5 h-5 md:w-6 md:h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
351
  <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
352
  </svg>
353
  </a>
354
  <a href="#" class="text-gray-600 hover:text-orange-500">
355
+ <svg class="w-5 h-5 md:w-6 md:h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
356
  <path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd" />
357
  </svg>
358
  </a>
 
360
  </div>
361
 
362
  <!-- Floating lanterns -->
363
+ <div class="absolute bottom-8 left-0 right-0 flex justify-center space-x-8 md:space-x-12 pointer-events-none">
364
+ <div class="w-6 h-10 md:w-8 md:h-12 bg-gradient-to-b from-yellow-100 to-yellow-300 rounded-full opacity-80 floating" style="animation-delay: 0s;"></div>
365
+ <div class="w-6 h-10 md:w-8 md:h-12 bg-gradient-to-b from-pink-100 to-pink-300 rounded-full opacity-80 floating" style="animation-delay: 1s;"></div>
366
+ <div class="w-6 h-10 md:w-8 md:h-12 bg-gradient-to-b from-blue-100 to-blue-300 rounded-full opacity-80 floating" style="animation-delay: 2s;"></div>
367
  </div>
368
  </section>
369
 
370
  <script>
371
  // Initialize Three.js scene
372
  let scene, camera, renderer, objects = [];
373
+ let isMobile = window.matchMedia("(max-width: 768px)").matches;
374
 
375
  function initThreeJS() {
376
  // Scene setup
377
  scene = new THREE.Scene();
378
  scene.background = new THREE.Color(0xf9f9f9);
379
 
380
+ // Camera setup - adjust for mobile
381
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
382
+ camera.position.z = isMobile ? 40 : 30;
383
 
384
  // Renderer setup
385
+ renderer = new THREE.WebGLRenderer({
386
+ antialias: true,
387
+ alpha: true,
388
+ powerPreference: "high-performance"
389
+ });
390
  renderer.setSize(window.innerWidth, window.innerHeight);
391
+ renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // Limit pixel ratio for performance
392
  document.getElementById('canvas-container').appendChild(renderer.domElement);
393
 
394
+ // Lights - simplified for mobile
395
+ const ambientLight = new THREE.AmbientLight(0xffffff, isMobile ? 0.8 : 0.6);
396
  scene.add(ambientLight);
397
 
398
+ if (!isMobile) {
399
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
400
+ directionalLight.position.set(1, 1, 1);
401
+ scene.add(directionalLight);
402
+ }
403
 
404
+ // Create floating objects - fewer on mobile
405
  createFloatingObjects();
406
 
407
+ // Handle window resize with debounce
408
+ let resizeTimeout;
409
+ window.addEventListener('resize', () => {
410
+ clearTimeout(resizeTimeout);
411
+ resizeTimeout = setTimeout(onWindowResize, 200);
412
+ });
413
 
414
  // Start animation loop
415
  animate();
416
  }
417
 
418
  function createFloatingObjects() {
419
+ const count = isMobile ? 4 : 8; // Fewer objects on mobile
420
+ const geometry = new THREE.SphereGeometry(1, isMobile ? 16 : 32, isMobile ? 16 : 32);
421
+
422
  const material = new THREE.MeshPhongMaterial({
423
  color: 0xffd6e0,
424
  transparent: true,
 
428
  });
429
 
430
  // Create glass orbs
431
+ for (let i = 0; i < count; i++) {
432
  const sphere = new THREE.Mesh(geometry, material.clone());
433
+ sphere.position.x = (Math.random() - 0.5) * (isMobile ? 30 : 40);
434
+ sphere.position.y = (Math.random() - 0.5) * (isMobile ? 15 : 20);
435
+ sphere.position.z = (Math.random() - 0.5) * (isMobile ? 15 : 20);
436
+ sphere.scale.setScalar(0.6 + Math.random() * (isMobile ? 0.4 : 0.5));
437
 
438
  // Add slight color variation
439
  sphere.material.color.setHSL(
 
453
  objects.push(sphere);
454
  }
455
 
456
+ // Create keywords inside the orbs (only on desktop)
457
+ if (!isMobile) {
458
+ const keywords = ['Trust', 'Understanding', 'Hardworking', 'Creativity', 'Willingness'];
459
+ const container = document.getElementById('keywords-container');
460
+
461
+ keywords.forEach((word, i) => {
462
+ const el = document.createElement('div');
463
+ el.className = 'absolute text-lg md:text-xl font-bold text-gray-700 opacity-70';
464
+ el.style.top = `${30 + Math.random() * 40}%`;
465
+ el.style.left = `${20 + Math.random() * 60}%`;
466
+ el.textContent = word;
467
+ container.appendChild(el);
468
+ });
469
+ }
470
  }
471
 
472
  function onWindowResize() {
473
+ isMobile = window.matchMedia("(max-width: 768px)").matches;
474
  camera.aspect = window.innerWidth / window.innerHeight;
475
  camera.updateProjectionMatrix();
476
  renderer.setSize(window.innerWidth, window.innerHeight);
477
+
478
+ // Adjust camera position for mobile
479
+ camera.position.z = isMobile ? 40 : 30;
480
  }
481
 
482
  function animate() {
483
  requestAnimationFrame(animate);
484
 
485
+ // Animate floating objects with reduced motion on mobile
486
  objects.forEach(obj => {
487
+ obj.userData.angle += obj.userData.speed * (isMobile ? 0.005 : 0.01);
488
+ obj.position.y = obj.userData.originalY + Math.sin(obj.userData.angle) * (isMobile ? 1 : 2);
489
+ obj.rotation.x += isMobile ? 0.002 : 0.005;
490
+ obj.rotation.y += isMobile ? 0.002 : 0.005;
491
  });
492
 
493
  renderer.render(scene, camera);
 
500
  section.scrollIntoView({ behavior: 'smooth' });
501
 
502
  // Add animation to clicked sphere
503
+ gsap.to(sphere, {
504
+ scale: 1.3,
505
+ boxShadow: '0 0 0 12px rgba(255,255,255,0.5)',
506
+ duration: 0.3,
507
+ ease: 'power2.out',
508
+ onComplete: () => {
509
+ gsap.to(sphere, {
510
+ scale: 1,
511
+ boxShadow: '0 0 0 0 rgba(255,255,255,0.7)',
512
+ duration: 0.5,
513
+ ease: 'elastic.out(1, 0.5)'
514
+ });
515
+ }
516
+ });
517
  });
518
  });
519
 
520
  // Initialize everything when DOM is loaded
521
  document.addEventListener('DOMContentLoaded', () => {
522
+ // Only initialize Three.js on desktop
523
+ if (!isMobile) {
524
+ initThreeJS();
525
+ }
526
 
527
  // Add GSAP animations for page elements
528
  gsap.from('.hero-text', {
 
543
  start: 'top 80%'
544
  }
545
  });
546
+
547
+ // Mobile navigation spheres repositioning
548
+ if (isMobile) {
549
+ const navSpheres = document.querySelector('.nav-spheres');
550
+ navSpheres.classList.remove('right-8', 'top-1/2', 'transform', '-translate-y-1/2', 'flex-col', 'space-y-4');
551
+ navSpheres.classList.add('bottom-8', 'right-1/2', 'transform', 'translate-x-1/2', 'flex-row', 'space-x-4');
552
+ }
553
  });
554
+
555
+ // Touch device optimizations
556
+ if ('ontouchstart' in window) {
557
+ document.body.classList.add('touch-device');
558
+ }
559
  </script>
560
  <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=Marv12/2ppp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
561
  </html>
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- Imagine an ultra-high-fidelity 3D interactive portfolio website set in a luminous, soft-white environment with gentle sunlit gradients of pale peach and mint. The hero landing scene features a constellation of floating 3D objects—hand-modeled glass orbs, geometric prisms, and sculpted paper-like planes—that drift on invisible currents. Each object is textured in warm pastels and softly lit to evoke love. As you move your cursor, the glass orbs refract light to reveal nested keywords: “Trust,” “Understanding,” “Hardworking,” “Creativity,” “Willingness.” Micro-interactions cause nearby prisms to rotate and align in friendly, physics-driven choreography. Scroll down to discover clusters of 3D “tiles” resembling folded origami shapes; clicking one unfolds it into a crisp white panel showing your project case study—live data streams, code snippets, and hand-sketch animations—underscoring dedication and drive. The creativity gallery is a floating sculpture garden: draggable, 3D art frames that pivot to reveal layered illustrations and generative-art simulations. Ambient sound cues (soft chimes) play as each piece snaps into focus, reinforcing empathy and understanding. Navigation is achieved by interacting with a series of marble-textured spheres that hover in a semi-circle; click a sphere and it morphs into a translucent panel with intuitive UI controls. Every button uses spring-physics easing and subtle shadowing for a reassuring, tactile feel. Finally, an elegant 3D call-to-action ribbon weaves through the scene—ribbons of pastel fabric that spell out “Let’s Build Together”—anchored by small, floating lanterns symbolizing your willingness to light the way for future collaborations.
 
 
1
+ Imagine an ultra-high-fidelity 3D interactive portfolio website set in a luminous, soft-white environment with gentle sunlit gradients of pale peach and mint. The hero landing scene features a constellation of floating 3D objects—hand-modeled glass orbs, geometric prisms, and sculpted paper-like planes—that drift on invisible currents. Each object is textured in warm pastels and softly lit to evoke love. As you move your cursor, the glass orbs refract light to reveal nested keywords: “Trust,” “Understanding,” “Hardworking,” “Creativity,” “Willingness.” Micro-interactions cause nearby prisms to rotate and align in friendly, physics-driven choreography. Scroll down to discover clusters of 3D “tiles” resembling folded origami shapes; clicking one unfolds it into a crisp white panel showing your project case study—live data streams, code snippets, and hand-sketch animations—underscoring dedication and drive. The creativity gallery is a floating sculpture garden: draggable, 3D art frames that pivot to reveal layered illustrations and generative-art simulations. Ambient sound cues (soft chimes) play as each piece snaps into focus, reinforcing empathy and understanding. Navigation is achieved by interacting with a series of marble-textured spheres that hover in a semi-circle; click a sphere and it morphs into a translucent panel with intuitive UI controls. Every button uses spring-physics easing and subtle shadowing for a reassuring, tactile feel. Finally, an elegant 3D call-to-action ribbon weaves through the scene—ribbons of pastel fabric that spell out “Let’s Build Together”—anchored by small, floating lanterns symbolizing your willingness to light the way for future collaborations.
2
+ It's not responsive enough