Hugging Face's logo

Spaces:
MidouEmail
/
biosphere-clone-hub
Running

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

Promote version 39a5719 to main

Browse files

Promoted commit 39a5719b3bc9d8847ff25b895cc45b54fc588b8a to main branch

Files changed (1) hide show
  1. index.html +226 -3
index.html CHANGED
@@ -1,12 +1,235 @@
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>
 
 
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>