Hugging Face's logo

Spaces:
Marv12
/
2ppp
Running

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

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +429 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
  title: 2ppp
3
- emoji: 🐢
4
- colorFrom: pink
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: 2ppp
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: red
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,429 @@
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>Luminous Portfolio</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
+ <script src="https://cdn.jsdelivr.net/npm/gsap@3.11.4/dist/gsap.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
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 {
30
+ backdrop-filter: blur(16px);
31
+ background: rgba(255, 255, 255, 0.2);
32
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
33
+ border: 1px solid rgba(255, 255, 255, 0.18);
34
+ }
35
+
36
+ .floating {
37
+ animation: floating 6s ease-in-out infinite;
38
+ }
39
+
40
+ @keyframes floating {
41
+ 0% { transform: translateY(0px); }
42
+ 50% { transform: translateY(-15px); }
43
+ 100% { transform: translateY(0px); }
44
+ }
45
+
46
+ #canvas-container {
47
+ position: fixed;
48
+ top: 0;
49
+ left: 0;
50
+ width: 100%;
51
+ height: 100%;
52
+ z-index: -1;
53
+ pointer-events: none;
54
+ }
55
+
56
+ .project-tile {
57
+ transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
58
+ transform-style: preserve-3d;
59
+ }
60
+
61
+ .project-tile:hover {
62
+ transform: translateY(-10px) rotateX(5deg);
63
+ box-shadow: 0 20px 40px rgba(0,0,0,0.1);
64
+ }
65
+
66
+ .nav-sphere {
67
+ transition: all 0.3s ease;
68
+ box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
69
+ }
70
+
71
+ .nav-sphere:hover {
72
+ transform: scale(1.1);
73
+ box-shadow: 0 0 0 8px rgba(255,255,255,0.3);
74
+ }
75
+
76
+ .btn-spring {
77
+ transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
78
+ }
79
+
80
+ .btn-spring:hover {
81
+ transform: translateY(-3px);
82
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
83
+ }
84
+
85
+ .ribbon-text {
86
+ background: linear-gradient(90deg, #ffd6e0 0%, #c8f7f4 100%);
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>
101
+ <div class="nav-sphere w-12 h-12 rounded-full bg-gradient-to-br from-red-100 to-indigo-100 border border-white cursor-pointer flex items-center justify-center shadow-lg" data-section="contact"></div>
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>
185
+ </div>
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>
218
+ </div>
219
+ </div>
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>
268
+ </div>
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,
321
+ opacity: 0.8,
322
+ shininess: 100,
323
+ refractionRatio: 0.8
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(
336
+ 0.6 + Math.random() * 0.1,
337
+ 0.3 + Math.random() * 0.2,
338
+ 0.8 + Math.random() * 0.2
339
+ );
340
+
341
+ // Store original position for floating animation
342
+ sphere.userData = {
343
+ originalY: sphere.position.y,
344
+ speed: 0.1 + Math.random() * 0.1,
345
+ angle: Math.random() * Math.PI * 2
346
+ };
347
+
348
+ scene.add(sphere);
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);
384
+ }
385
+
386
+ // Navigation sphere click handlers
387
+ document.querySelectorAll('.nav-sphere').forEach(sphere => {
388
+ sphere.addEventListener('click', () => {
389
+ const section = document.getElementById(sphere.dataset.section);
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', {
409
+ duration: 1.5,
410
+ y: 50,
411
+ opacity: 0,
412
+ ease: 'power3.out'
413
+ });
414
+
415
+ gsap.from('.project-tile', {
416
+ duration: 1,
417
+ y: 50,
418
+ opacity: 0,
419
+ stagger: 0.1,
420
+ ease: 'back.out(1.7)',
421
+ scrollTrigger: {
422
+ trigger: '#projects',
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>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
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.