Hugging Face's logo

Spaces:
MidouEmail
/
biosphere-clone-hub
Running

App Files Community
MidouEmail commited on
Commit
61bf571
·
verified ·
1 Parent(s): 4242e6d

delete this section

Browse files
Files changed (1) hide show
  1. index.html +3 -226
index.html CHANGED
@@ -1,235 +1,12 @@
 
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>BioSphere Clone</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
8
- <script src="https://unpkg.com/feather-icons"></script>
9
- <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
- <style>
11
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
12
- body {
13
- font-family: 'Inter', sans-serif;
14
- }
15
- .glass-card {
16
- background: rgba(255, 255, 255, 0.08);
17
- backdrop-filter: blur(10px);
18
- -webkit-backdrop-filter: blur(10px);
19
- border-radius: 12px;
20
- border: 1px solid rgba(255, 255, 255, 0.18);
21
- }
22
- .gradient-text {
23
- background: linear-gradient(90deg, #3b82f6, #8b5cf6);
24
- -webkit-background-clip: text;
25
- background-clip: text;
26
- color: transparent;
27
- }
28
- </style>
29
  </head>
30
- <body class="bg-gray-900 text-white min-h-screen">
31
- <!-- Hero Section -->
32
- <div id="vanta-bg" class="min-h-screen flex items-center justify-center px-4">
33
- <div class="glass-card p-8 max-w-2xl w-full mx-auto text-center">
34
- <div class="w-32 h-32 mx-auto mb-6 rounded-full overflow-hidden border-4 border-indigo-500">
35
- <img src="http://static.photos/technology/320x240/42" alt="Profile" class="w-full h-full object-cover">
36
- </div>
37
- <h1 class="text-4xl font-bold mb-2 gradient-text">John Doe</h1>
38
- <p class="text-xl text-gray-300 mb-6">Full Stack Developer & UI/UX Designer</p>
39
- <p class="text-gray-400 mb-8">Building digital experiences that matter. Passionate about creating clean, efficient code and beautiful interfaces.</p>
40
-
41
- <div class="flex justify-center space-x-4 mb-8">
42
- <a href="#" class="p-3 rounded-full bg-indigo-600 hover:bg-indigo-700 transition">
43
- <i data-feather="github"></i>
44
- </a>
45
- <a href="#" class="p-3 rounded-full bg-blue-500 hover:bg-blue-600 transition">
46
- <i data-feather="twitter"></i>
47
- </a>
48
- <a href="#" class="p-3 rounded-full bg-red-500 hover:bg-red-600 transition">
49
- <i data-feather="youtube"></i>
50
- </a>
51
- <a href="#" class="p-3 rounded-full bg-blue-700 hover:bg-blue-800 transition">
52
- <i data-feather="linkedin"></i>
53
- </a>
54
- </div>
55
-
56
- <div class="flex flex-wrap justify-center gap-3">
57
- <a href="#projects" class="px-6 py-2 bg-indigo-600 rounded-full hover:bg-indigo-700 transition">Projects</a>
58
- <a href="#about" class="px-6 py-2 border border-indigo-500 rounded-full hover:bg-indigo-900/30 transition">About Me</a>
59
- <a href="#contact" class="px-6 py-2 border border-indigo-500 rounded-full hover:bg-indigo-900/30 transition">Contact</a>
60
- </div>
61
- </div>
62
- </div>
63
-
64
- <!-- Projects Section -->
65
- <section id="projects" class="py-20 px-4 max-w-6xl mx-auto">
66
- <h2 class="text-3xl font-bold text-center mb-12 gradient-text">Featured Projects</h2>
67
-
68
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
69
- <!-- Project 1 -->
70
- <div class="glass-card p-6 rounded-xl hover:scale-105 transition-transform">
71
- <div class="h-48 mb-4 rounded-lg overflow-hidden">
72
- <img src="http://static.photos/technology/640x360/1" alt="Project" class="w-full h-full object-cover">
73
- </div>
74
- <h3 class="text-xl font-semibold mb-2">E-Commerce Platform</h3>
75
- <p class="text-gray-400 mb-4">A full-featured online store with payment integration and inventory management.</p>
76
- <div class="flex flex-wrap gap-2">
77
- <span class="px-3 py-1 bg-indigo-900/50 rounded-full text-sm">React</span>
78
- <span class="px-3 py-1 bg-indigo-900/50 rounded-full text-sm">Node.js</span>
79
- <span class="px-3 py-1 bg-indigo-900/50 rounded-full text-sm">MongoDB</span>
80
- </div>
81
- </div>
82
-
83
- <!-- Project 2 -->
84
- <div class="glass-card p-6 rounded-xl hover:scale-105 transition-transform">
85
- <div class="h-48 mb-4 rounded-lg overflow-hidden">
86
- <img src="http://static.photos/technology/640x360/2" alt="Project" class="w-full h-full object-cover">
87
- </div>
88
- <h3 class="text-xl font-semibold mb-2">Health Tracker App</h3>
89
- <p class="text-gray-400 mb-4">Mobile application for tracking fitness goals and nutrition intake.</p>
90
- <div class="flex flex-wrap gap-2">
91
- <span class="px-3 py-1 bg-indigo-900/50 rounded-full text-sm">Flutter</span>
92
- <span class="px-3 py-1 bg-indigo-900/50 rounded-full text-sm">Firebase</span>
93
- </div>
94
- </div>
95
-
96
- <!-- Project 3 -->
97
- <div class="glass-card p-6 rounded-xl hover:scale-105 transition-transform">
98
- <div class="h-48 mb-4 rounded-lg overflow-hidden">
99
- <img src="http://static.photos/technology/640x360/3" alt="Project" class="w-full h-full object-cover">
100
- </div>
101
- <h3 class="text-xl font-semibold mb-2">Portfolio Website</h3>
102
- <p class="text-gray-400 mb-4">Custom portfolio website with CMS integration for easy content updates.</p>
103
- <div class="flex flex-wrap gap-2">
104
- <span class="px-3 py-1 bg-indigo-900/50 rounded-full text-sm">Next.js</span>
105
- <span class="px-3 py-1 bg-indigo-900/50 rounded-full text-sm">Tailwind CSS</span>
106
- </div>
107
- </div>
108
- </div>
109
- </section>
110
-
111
- <!-- About Section -->
112
- <section id="about" class="py-20 px-4 bg-gray-800">
113
- <div class="max-w-4xl mx-auto">
114
- <h2 class="text-3xl font-bold text-center mb-12 gradient-text">About Me</h2>
115
-
116
- <div class="glass-card p-8 rounded-xl">
117
- <div class="flex flex-col md:flex-row gap-8">
118
- <div class="md:w-1/3">
119
- <img src="http://static.photos/technology/320x240/42" alt="About" class="w-full rounded-lg">
120
- </div>
121
- <div class="md:w-2/3">
122
- <h3 class="text-2xl font-semibold mb-4">Hello, I'm John!</h3>
123
- <p class="text-gray-300 mb-4">
124
- I'm a passionate full-stack developer with over 5 years of experience building web applications.
125
- My journey in tech started when I built my first website at 15, and I've been hooked ever since.
126
- </p>
127
- <p class="text-gray-300 mb-6">
128
- I specialize in JavaScript frameworks like React and Vue.js for frontend development, and Node.js
129
- with Express for backend services. I also have experience with mobile development using Flutter.
130
- </p>
131
-
132
- <h4 class="text-xl font-semibold mb-3">Skills</h4>
133
- <div class="flex flex-wrap gap-2 mb-6">
134
- <span class="px-3 py-1 bg-indigo-900/50 rounded-full">JavaScript</span>
135
- <span class="px-3 py-1 bg-indigo-900/50 rounded-full">TypeScript</span>
136
- <span class="px-3 py-1 bg-indigo-900/50 rounded-full">React</span>
137
- <span class="px-3 py-1 bg-indigo-900/50 rounded-full">Node.js</span>
138
- <span class="px-3 py-1 bg-indigo-900/50 rounded-full">MongoDB</span>
139
- <span class="px-3 py-1 bg-indigo-900/50 rounded-full">Flutter</span>
140
- <span class="px-3 py-1 bg-indigo-900/50 rounded-full">UI/UX Design</span>
141
- </div>
142
-
143
- <a href="#" class="inline-flex items-center text-indigo-400 hover:text-indigo-300">
144
- Download Resume
145
- <i data-feather="download" class="ml-2"></i>
146
- </a>
147
- </div>
148
- </div>
149
- </div>
150
- </div>
151
- </section>
152
-
153
- <!-- Contact Section -->
154
- <section id="contact" class="py-20 px-4">
155
- <div class="max-w-2xl mx-auto">
156
- <h2 class="text-3xl font-bold text-center mb-12 gradient-text">Get In Touch</h2>
157
-
158
- <div class="glass-card p-8 rounded-xl">
159
- <form>
160
- <div class="mb-6">
161
- <label for="name" class="block text-gray-300 mb-2">Name</label>
162
- <input type="text" id="name" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
163
- </div>
164
-
165
- <div class="mb-6">
166
- <label for="email" class="block text-gray-300 mb-2">Email</label>
167
- <input type="email" id="email" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
168
- </div>
169
-
170
- <div class="mb-6">
171
- <label for="message" class="block text-gray-300 mb-2">Message</label>
172
- <textarea id="message" rows="5" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
173
- </div>
174
-
175
- <button type="submit" class="w-full py-3 bg-indigo-600 hover:bg-indigo-700 rounded-lg font-medium transition">
176
- Send Message
177
- </button>
178
- </form>
179
- </div>
180
- </div>
181
- </section>
182
-
183
- <!-- Footer -->
184
- <footer class="py-8 px-4 border-t border-gray-800">
185
- <div class="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center">
186
- <p class="text-gray-400 mb-4 md:mb-0">© 2023 BioSphere Clone. All rights reserved.</p>
187
- <div class="flex space-x-4">
188
- <a href="#" class="text-gray-400 hover:text-white transition">
189
- <i data-feather="github"></i>
190
- </a>
191
- <a href="#" class="text-gray-400 hover:text-white transition">
192
- <i data-feather="twitter"></i>
193
- </a>
194
- <a href="#" class="text-gray-400 hover:text-white transition">
195
- <i data-feather="linkedin"></i>
196
- </a>
197
- <a href="#" class="text-gray-400 hover:text-white transition">
198
- <i data-feather="mail"></i>
199
- </a>
200
- </div>
201
- </div>
202
- </footer>
203
-
204
- <!-- Scripts -->
205
- <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
206
- <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
207
- <script>
208
- VANTA.GLOBE({
209
- el: "#vanta-bg",
210
- mouseControls: true,
211
- touchControls: true,
212
- gyroControls: false,
213
- minHeight: 200.00,
214
- minWidth: 200.00,
215
- scale: 1.00,
216
- scaleMobile: 1.00,
217
- color: 0x3b82f6,
218
- backgroundColor: 0x111827,
219
- size: 0.8
220
- });
221
-
222
- feather.replace();
223
-
224
- // Smooth scrolling for anchor links
225
- document.querySelectorAll('a[href^="#"]').forEach(anchor => {
226
- anchor.addEventListener('click', function (e) {
227
- e.preventDefault();
228
- document.querySelector(this.getAttribute('href')).scrollIntoView({
229
- behavior: 'smooth'
230
- });
231
- });
232
- });
233
- </script>
234
  </body>
235
  </html>
 
1
+
2
  <!DOCTYPE html>
3
  <html lang="en">
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>BioSphere Clone</title>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  </head>
9
+ <body>
10
+ <canvas class="vanta-canvas" style="display: block; position: absolute; z-index: 0; top: 0px; left: 0px; width: 920px; height: 586px;" width="1150" height="732"></canvas>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11
  </body>
12
  </html>