Hugging Face's logo

Spaces:
PeterAdel
/
agent-zone
Running

App Files Community
PeterAdel commited on
Commit
f785ea5
·
verified ·
1 Parent(s): b37cca2

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +550 -38
  2. prompts.txt +1 -0
index.html CHANGED
@@ -1,41 +1,553 @@
1
  <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>My app</title>
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <meta charset="utf-8">
 
 
7
  <style>
8
- body {
9
- display: flex;
10
- justify-content: center;
11
- align-items: center;
12
- overflow: hidden;
13
- height: 100dvh;
14
- font-family: "Arial", sans-serif;
15
- text-align: center;
16
- }
17
- .arrow {
18
- position: absolute;
19
- bottom: 32px;
20
- left: 0px;
21
- width: 100px;
22
- transform: rotate(30deg);
23
- }
24
- h1 {
25
- font-size: 50px;
26
- }
27
- h1 span {
28
- color: #acacac;
29
- font-size: 32px;
30
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
  </style>
32
- </head>
33
- <body>
34
- <h1>
35
- <span>I'm ready to work,</span><br />
36
- Ask me anything.
37
- </h1>
38
- <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="arrow" />
39
- <script></script>
40
- <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=PeterAdel/agent-zone" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
41
- </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>My Personal Introduction</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
+ /* Custom CSS for animations and effects */
11
+ .floating {
12
+ animation: floating 3s ease-in-out infinite;
13
+ }
14
+
15
+ @keyframes floating {
16
+ 0% { transform: translateY(0px); }
17
+ 50% { transform: translateY(-15px); }
18
+ 100% { transform: translateY(0px); }
19
+ }
20
+
21
+ .gradient-text {
22
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
23
+ -webkit-background-clip: text;
24
+ background-clip: text;
25
+ color: transparent;
26
+ }
27
+
28
+ .card-hover:hover {
29
+ transform: translateY(-5px);
30
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
31
+ }
32
+
33
+ .typewriter {
34
+ overflow: hidden;
35
+ border-right: .15em solid #3b82f6;
36
+ white-space: nowrap;
37
+ margin: 0 auto;
38
+ letter-spacing: .15em;
39
+ animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
40
+ }
41
+
42
+ @keyframes typing {
43
+ from { width: 0 }
44
+ to { width: 100% }
45
+ }
46
+
47
+ @keyframes blink-caret {
48
+ from, to { border-color: transparent }
49
+ 50% { border-color: #3b82f6; }
50
+ }
51
  </style>
52
+ </head>
53
+ <body class="bg-gray-50 min-h-screen font-sans">
54
+ <!-- Navigation -->
55
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
56
+ <div class="max-w-6xl mx-auto px-4">
57
+ <div class="flex justify-between h-16">
58
+ <div class="flex items-center">
59
+ <span class="text-xl font-bold gradient-text">MyPortfolio</span>
60
+ </div>
61
+ <div class="hidden md:flex items-center space-x-8">
62
+ <a href="#about" class="text-gray-700 hover:text-blue-600 transition">About</a>
63
+ <a href="#skills" class="text-gray-700 hover:text-blue-600 transition">Skills</a>
64
+ <a href="#projects" class="text-gray-700 hover:text-blue-600 transition">Projects</a>
65
+ <a href="#contact" class="text-gray-700 hover:text-blue-600 transition">Contact</a>
66
+ </div>
67
+ <div class="md:hidden flex items-center">
68
+ <button id="menu-btn" class="text-gray-700">
69
+ <i class="fas fa-bars text-2xl"></i>
70
+ </button>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ <!-- Mobile menu -->
75
+ <div id="mobile-menu" class="hidden md:hidden bg-white pb-4 px-4">
76
+ <a href="#about" class="block py-2 text-gray-700 hover:text-blue-600 transition">About</a>
77
+ <a href="#skills" class="block py-2 text-gray-700 hover:text-blue-600 transition">Skills</a>
78
+ <a href="#projects" class="block py-2 text-gray-700 hover:text-blue-600 transition">Projects</a>
79
+ <a href="#contact" class="block py-2 text-gray-700 hover:text-blue-600 transition">Contact</a>
80
+ </div>
81
+ </nav>
82
+
83
+ <!-- Hero Section -->
84
+ <section class="py-20 px-4">
85
+ <div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center">
86
+ <div class="md:w-1/2 mb-10 md:mb-0">
87
+ <h1 class="text-4xl md:text-6xl font-bold mb-4">
88
+ <span class="gradient-text">Hello, I'm</span>
89
+ <div class="typewriter text-3xl md:text-5xl mt-2">Web Developer & Designer</div>
90
+ </h1>
91
+ <p class="text-gray-600 text-lg mb-8">
92
+ I create beautiful, functional websites and applications with modern technologies.
93
+ </p>
94
+ <div class="flex space-x-4">
95
+ <button id="cta-btn" class="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-6 py-3 rounded-full font-medium hover:opacity-90 transition shadow-lg">
96
+ Contact Me
97
+ </button>
98
+ <button class="border border-gray-300 text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition">
99
+ View Projects
100
+ </button>
101
+ </div>
102
+ </div>
103
+ <div class="md:w-1/2 flex justify-center">
104
+ <div class="relative w-64 h-64 md:w-80 md:h-80">
105
+ <div class="absolute inset-0 bg-gradient-to-r from-blue-400 to-purple-500 rounded-full opacity-20 blur-xl"></div>
106
+ <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
107
+ alt="Profile"
108
+ class="relative w-full h-full rounded-full object-cover border-4 border-white shadow-xl floating">
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </section>
113
+
114
+ <!-- About Section -->
115
+ <section id="about" class="py-20 px-4 bg-white">
116
+ <div class="max-w-6xl mx-auto">
117
+ <h2 class="text-3xl font-bold text-center mb-12 gradient-text">About Me</h2>
118
+ <div class="flex flex-col md:flex-row items-center">
119
+ <div class="md:w-1/3 mb-8 md:mb-0 flex justify-center">
120
+ <div class="relative w-48 h-48 md:w-64 md:h-64">
121
+ <div class="absolute inset-0 bg-gradient-to-r from-blue-400 to-purple-500 rounded-full opacity-20 blur-xl"></div>
122
+ <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
123
+ alt="Profile"
124
+ class="relative w-full h-full rounded-full object-cover border-4 border-white shadow-lg">
125
+ </div>
126
+ </div>
127
+ <div class="md:w-2/3 md:pl-12">
128
+ <h3 class="text-2xl font-semibold mb-4">Who am I?</h3>
129
+ <p class="text-gray-600 mb-6">
130
+ I'm a passionate web developer with over 5 years of experience creating digital experiences.
131
+ My journey in tech started when I was just 15 years old, and I've been in love with coding ever since.
132
+ </p>
133
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
134
+ <div class="flex items-start">
135
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
136
+ <i class="fas fa-code text-blue-600"></i>
137
+ </div>
138
+ <div>
139
+ <h4 class="font-medium">Web Development</h4>
140
+ <p class="text-gray-500 text-sm">HTML, CSS, JavaScript, React, Node.js</p>
141
+ </div>
142
+ </div>
143
+ <div class="flex items-start">
144
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
145
+ <i class="fas fa-paint-brush text-purple-600"></i>
146
+ </div>
147
+ <div>
148
+ <h4 class="font-medium">UI/UX Design</h4>
149
+ <p class="text-gray-500 text-sm">Figma, Adobe XD, User Research</p>
150
+ </div>
151
+ </div>
152
+ <div class="flex items-start">
153
+ <div class="bg-green-100 p-3 rounded-full mr-4">
154
+ <i class="fas fa-mobile-alt text-green-600"></i>
155
+ </div>
156
+ <div>
157
+ <h4 class="font-medium">Mobile Apps</h4>
158
+ <p class="text-gray-500 text-sm">React Native, Flutter</p>
159
+ </div>
160
+ </div>
161
+ <div class="flex items-start">
162
+ <div class="bg-yellow-100 p-3 rounded-full mr-4">
163
+ <i class="fas fa-server text-yellow-600"></i>
164
+ </div>
165
+ <div>
166
+ <h4 class="font-medium">Backend</h4>
167
+ <p class="text-gray-500 text-sm">Node.js, Express, MongoDB</p>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ <button class="border border-blue-500 text-blue-500 px-6 py-2 rounded-full font-medium hover:bg-blue-50 transition">
172
+ Download CV
173
+ </button>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </section>
178
+
179
+ <!-- Skills Section -->
180
+ <section id="skills" class="py-20 px-4 bg-gray-50">
181
+ <div class="max-w-6xl mx-auto">
182
+ <h2 class="text-3xl font-bold text-center mb-12 gradient-text">My Skills</h2>
183
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
184
+ <!-- Skill cards -->
185
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition card-hover">
186
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto">
187
+ <i class="fab fa-html5 text-blue-600 text-3xl"></i>
188
+ </div>
189
+ <h3 class="text-center font-semibold mb-2">HTML5</h3>
190
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
191
+ <div class="bg-blue-600 h-2.5 rounded-full" style="width: 95%"></div>
192
+ </div>
193
+ </div>
194
+
195
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition card-hover">
196
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4 mx-auto">
197
+ <i class="fab fa-css3-alt text-purple-600 text-3xl"></i>
198
+ </div>
199
+ <h3 class="text-center font-semibold mb-2">CSS3</h3>
200
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
201
+ <div class="bg-purple-600 h-2.5 rounded-full" style="width: 90%"></div>
202
+ </div>
203
+ </div>
204
+
205
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition card-hover">
206
+ <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mb-4 mx-auto">
207
+ <i class="fab fa-js text-yellow-600 text-3xl"></i>
208
+ </div>
209
+ <h3 class="text-center font-semibold mb-2">JavaScript</h3>
210
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
211
+ <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 85%"></div>
212
+ </div>
213
+ </div>
214
+
215
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition card-hover">
216
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4 mx-auto">
217
+ <i class="fab fa-react text-blue-400 text-3xl"></i>
218
+ </div>
219
+ <h3 class="text-center font-semibold mb-2">React</h3>
220
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
221
+ <div class="bg-blue-400 h-2.5 rounded-full" style="width: 80%"></div>
222
+ </div>
223
+ </div>
224
+
225
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition card-hover">
226
+ <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4 mx-auto">
227
+ <i class="fab fa-node-js text-green-600 text-3xl"></i>
228
+ </div>
229
+ <h3 class="text-center font-semibold mb-2">Node.js</h3>
230
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
231
+ <div class="bg-green-600 h-2.5 rounded-full" style="width: 75%"></div>
232
+ </div>
233
+ </div>
234
+
235
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition card-hover">
236
+ <div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mb-4 mx-auto">
237
+ <i class="fas fa-database text-pink-600 text-3xl"></i>
238
+ </div>
239
+ <h3 class="text-center font-semibold mb-2">MongoDB</h3>
240
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
241
+ <div class="bg-pink-600 h-2.5 rounded-full" style="width: 70%"></div>
242
+ </div>
243
+ </div>
244
+
245
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition card-hover">
246
+ <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4 mx-auto">
247
+ <i class="fab fa-git-alt text-red-600 text-3xl"></i>
248
+ </div>
249
+ <h3 class="text-center font-semibold mb-2">Git</h3>
250
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
251
+ <div class="bg-red-600 h-2.5 rounded-full" style="width: 85%"></div>
252
+ </div>
253
+ </div>
254
+
255
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition card-hover">
256
+ <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4 mx-auto">
257
+ <i class="fas fa-mobile-alt text-indigo-600 text-3xl"></i>
258
+ </div>
259
+ <h3 class="text-center font-semibold mb-2">React Native</h3>
260
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
261
+ <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 65%"></div>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ </section>
267
+
268
+ <!-- Projects Section -->
269
+ <section id="projects" class="py-20 px-4 bg-white">
270
+ <div class="max-w-6xl mx-auto">
271
+ <h2 class="text-3xl font-bold text-center mb-12 gradient-text">My Projects</h2>
272
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
273
+ <!-- Project 1 -->
274
+ <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition card-hover">
275
+ <div class="h-48 bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center">
276
+ <i class="fas fa-laptop-code text-white text-6xl"></i>
277
+ </div>
278
+ <div class="p-6">
279
+ <h3 class="text-xl font-semibold mb-2">E-commerce Platform</h3>
280
+ <p class="text-gray-600 mb-4">A full-stack e-commerce solution with React, Node.js, and MongoDB.</p>
281
+ <div class="flex flex-wrap gap-2 mb-4">
282
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">React</span>
283
+ <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">Node.js</span>
284
+ <span class="bg-yellow-100 text-yellow-800 text-xs px-3 py-1 rounded-full">MongoDB</span>
285
+ </div>
286
+ <div class="flex space-x-3">
287
+ <a href="#" class="text-blue-500 hover:text-blue-700">
288
+ <i class="fas fa-external-link-alt"></i> Live Demo
289
+ </a>
290
+ <a href="#" class="text-gray-500 hover:text-gray-700">
291
+ <i class="fab fa-github"></i> Code
292
+ </a>
293
+ </div>
294
+ </div>
295
+ </div>
296
+
297
+ <!-- Project 2 -->
298
+ <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition card-hover">
299
+ <div class="h-48 bg-gradient-to-r from-purple-400 to-pink-500 flex items-center justify-center">
300
+ <i class="fas fa-mobile-alt text-white text-6xl"></i>
301
+ </div>
302
+ <div class="p-6">
303
+ <h3 class="text-xl font-semibold mb-2">Fitness Tracker App</h3>
304
+ <p class="text-gray-600 mb-4">A mobile application to track workouts and nutrition using React Native.</p>
305
+ <div class="flex flex-wrap gap-2 mb-4">
306
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">React Native</span>
307
+ <span class="bg-red-100 text-red-800 text-xs px-3 py-1 rounded-full">Firebase</span>
308
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">Expo</span>
309
+ </div>
310
+ <div class="flex space-x-3">
311
+ <a href="#" class="text-blue-500 hover:text-blue-700">
312
+ <i class="fas fa-external-link-alt"></i> Live Demo
313
+ </a>
314
+ <a href="#" class="text-gray-500 hover:text-gray-700">
315
+ <i class="fab fa-github"></i> Code
316
+ </a>
317
+ </div>
318
+ </div>
319
+ </div>
320
+
321
+ <!-- Project 3 -->
322
+ <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition card-hover">
323
+ <div class="h-48 bg-gradient-to-r from-green-400 to-blue-500 flex items-center justify-center">
324
+ <i class="fas fa-chart-line text-white text-6xl"></i>
325
+ </div>
326
+ <div class="p-6">
327
+ <h3 class="text-xl font-semibold mb-2">Data Visualization Dashboard</h3>
328
+ <p class="text-gray-600 mb-4">Interactive dashboard for analyzing business metrics with D3.js.</p>
329
+ <div class="flex flex-wrap gap-2 mb-4">
330
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">D3.js</span>
331
+ <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">Express</span>
332
+ <span class="bg-orange-100 text-orange-800 text-xs px-3 py-1 rounded-full">Chart.js</span>
333
+ </div>
334
+ <div class="flex space-x-3">
335
+ <a href="#" class="text-blue-500 hover:text-blue-700">
336
+ <i class="fas fa-external-link-alt"></i> Live Demo
337
+ </a>
338
+ <a href="#" class="text-gray-500 hover:text-gray-700">
339
+ <i class="fab fa-github"></i> Code
340
+ </a>
341
+ </div>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ <div class="text-center mt-12">
346
+ <button class="border border-gray-300 text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition">
347
+ View All Projects
348
+ </button>
349
+ </div>
350
+ </div>
351
+ </section>
352
+
353
+ <!-- Contact Section -->
354
+ <section id="contact" class="py-20 px-4 bg-gray-50">
355
+ <div class="max-w-6xl mx-auto">
356
+ <h2 class="text-3xl font-bold text-center mb-12 gradient-text">Get In Touch</h2>
357
+ <div class="flex flex-col md:flex-row">
358
+ <div class="md:w-1/2 mb-10 md:mb-0">
359
+ <h3 class="text-2xl font-semibold mb-4">Contact Information</h3>
360
+ <p class="text-gray-600 mb-8">
361
+ Feel free to reach out to me for any questions or opportunities. I'm always open to discussing new projects, creative ideas or opportunities to be part of your vision.
362
+ </p>
363
+ <div class="space-y-6">
364
+ <div class="flex items-center">
365
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
366
+ <i class="fas fa-envelope text-blue-600"></i>
367
+ </div>
368
+ <div>
369
+ <h4 class="font-medium">Email</h4>
370
+ <p class="text-gray-500">contact@example.com</p>
371
+ </div>
372
+ </div>
373
+ <div class="flex items-center">
374
+ <div class="bg-green-100 p-3 rounded-full mr-4">
375
+ <i class="fas fa-phone-alt text-green-600"></i>
376
+ </div>
377
+ <div>
378
+ <h4 class="font-medium">Phone</h4>
379
+ <p class="text-gray-500">+1 (123) 456-7890</p>
380
+ </div>
381
+ </div>
382
+ <div class="flex items-center">
383
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
384
+ <i class="fas fa-map-marker-alt text-purple-600"></i>
385
+ </div>
386
+ <div>
387
+ <h4 class="font-medium">Location</h4>
388
+ <p class="text-gray-500">San Francisco, CA</p>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ <div class="mt-8">
393
+ <h4 class="font-medium mb-4">Follow Me</h4>
394
+ <div class="flex space-x-4">
395
+ <a href="#" class="bg-gray-200 p-3 rounded-full hover:bg-blue-100 hover:text-blue-600 transition">
396
+ <i class="fab fa-twitter"></i>
397
+ </a>
398
+ <a href="#" class="bg-gray-200 p-3 rounded-full hover:bg-blue-600 hover:text-white transition">
399
+ <i class="fab fa-linkedin-in"></i>
400
+ </a>
401
+ <a href="#" class="bg-gray-200 p-3 rounded-full hover:bg-gray-800 hover:text-white transition">
402
+ <i class="fab fa-github"></i>
403
+ </a>
404
+ <a href="#" class="bg-gray-200 p-3 rounded-full hover:bg-pink-600 hover:text-white transition">
405
+ <i class="fab fa-dribbble"></i>
406
+ </a>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ <div class="md:w-1/2 md:pl-12">
411
+ <form class="bg-white p-8 rounded-xl shadow-sm">
412
+ <div class="mb-6">
413
+ <label for="name" class="block text-gray-700 font-medium mb-2">Your Name</label>
414
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
415
+ </div>
416
+ <div class="mb-6">
417
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label>
418
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
419
+ </div>
420
+ <div class="mb-6">
421
+ <label for="subject" class="block text-gray-700 font-medium mb-2">Subject</label>
422
+ <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
423
+ </div>
424
+ <div class="mb-6">
425
+ <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
426
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
427
+ </div>
428
+ <button type="submit" class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:opacity-90 transition shadow-lg">
429
+ Send Message
430
+ </button>
431
+ </form>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ </section>
436
+
437
+ <!-- Footer -->
438
+ <footer class="bg-gray-800 text-white py-12 px-4">
439
+ <div class="max-w-6xl mx-auto">
440
+ <div class="flex flex-col md:flex-row justify-between items-center">
441
+ <div class="mb-6 md:mb-0">
442
+ <span class="text-xl font-bold gradient-text">MyPortfolio</span>
443
+ <p class="text-gray-400 mt-2">Creating digital experiences that matter.</p>
444
+ </div>
445
+ <div class="flex space-x-6">
446
+ <a href="#" class="text-gray-400 hover:text-white transition">
447
+ <i class="fab fa-twitter"></i>
448
+ </a>
449
+ <a href="#" class="text-gray-400 hover:text-white transition">
450
+ <i class="fab fa-linkedin-in"></i>
451
+ </a>
452
+ <a href="#" class="text-gray-400 hover:text-white transition">
453
+ <i class="fab fa-github"></i>
454
+ </a>
455
+ <a href="#" class="text-gray-400 hover:text-white transition">
456
+ <i class="fab fa-codepen"></i>
457
+ </a>
458
+ </div>
459
+ </div>
460
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
461
+ <p>&copy; 2023 MyPortfolio. All rights reserved.</p>
462
+ </div>
463
+ </div>
464
+ </footer>
465
+
466
+ <!-- Back to top button -->
467
+ <button id="back-to-top" class="fixed bottom-8 right-8 bg-blue-600 text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300">
468
+ <i class="fas fa-arrow-up"></i>
469
+ </button>
470
+
471
+ <!-- JavaScript -->
472
+ <script>
473
+ // Mobile menu toggle
474
+ const menuBtn = document.getElementById('menu-btn');
475
+ const mobileMenu = document.getElementById('mobile-menu');
476
+
477
+ menuBtn.addEventListener('click', () => {
478
+ mobileMenu.classList.toggle('hidden');
479
+ });
480
+
481
+ // Smooth scrolling for navigation links
482
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
483
+ anchor.addEventListener('click', function (e) {
484
+ e.preventDefault();
485
+
486
+ const targetId = this.getAttribute('href');
487
+ const targetElement = document.querySelector(targetId);
488
+
489
+ window.scrollTo({
490
+ top: targetElement.offsetTop - 80,
491
+ behavior: 'smooth'
492
+ });
493
+
494
+ // Close mobile menu if open
495
+ mobileMenu.classList.add('hidden');
496
+ });
497
+ });
498
+
499
+ // Back to top button
500
+ const backToTopBtn = document.getElementById('back-to-top');
501
+
502
+ window.addEventListener('scroll', () => {
503
+ if (window.pageYOffset > 300) {
504
+ backToTopBtn.classList.remove('opacity-0', 'invisible');
505
+ backToTopBtn.classList.add('opacity-100', 'visible');
506
+ } else {
507
+ backToTopBtn.classList.remove('opacity-100', 'visible');
508
+ backToTopBtn.classList.add('opacity-0', 'invisible');
509
+ }
510
+ });
511
+
512
+ backToTopBtn.addEventListener('click', () => {
513
+ window.scrollTo({
514
+ top: 0,
515
+ behavior: 'smooth'
516
+ });
517
+ });
518
+
519
+ // CTA button animation
520
+ const ctaBtn = document.getElementById('cta-btn');
521
+
522
+ ctaBtn.addEventListener('mouseenter', () => {
523
+ ctaBtn.classList.add('animate-pulse');
524
+ });
525
+
526
+ ctaBtn.addEventListener('mouseleave', () => {
527
+ ctaBtn.classList.remove('animate-pulse');
528
+ });
529
+
530
+ // Form submission
531
+ const contactForm = document.querySelector('form');
532
+
533
+ contactForm.addEventListener('submit', (e) => {
534
+ e.preventDefault();
535
+
536
+ // Get form values
537
+ const name = document.getElementById('name').value;
538
+ const email = document.getElementById('email').value;
539
+ const subject = document.getElementById('subject').value;
540
+ const message = document.getElementById('message').value;
541
+
542
+ // Here you would typically send the data to a server
543
+ console.log({ name, email, subject, message });
544
+
545
+ // Show success message
546
+ alert('Thank you for your message! I will get back to you soon.');
547
+
548
+ // Reset form
549
+ contactForm.reset();
550
+ });
551
+ </script>
552
+ <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=PeterAdel/agent-zone" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
553
+ </html>
prompts.txt CHANGED
@@ -0,0 +1 @@
 
 
1
+ intretuce your sef