Hugging Face's logo

Spaces:
samihalawa
/
sami-halawa-ai-developer
Running

App Files Community
samihalawa commited on
Commit
4931a4c
·
verified ·
1 Parent(s): e247cac

remove all the placehodler information adn contant finformatieon (only modify the part of the code that needs adjustmenet)

Browse files

. use Sami Halawa. I am an AI engineer and a Full Stack programmer. I offer all kinds of AI services, and also training for individuals and businesses and 1-to-1 online lessons. My contact information is sami@samihalawa.com and my whatsapp is +34 679794037 Do not make up any other contact information or social links that may be fake. The goal is that the highest percentage of the visitors that visit my website get ton know all my services and find them very useful so they contant me by email or whatsapp. - Initial Deployment

Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +645 -18
  3. prompts.txt +22 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Sami Halawa Ai Developer
3
- emoji: 👁
4
- colorFrom: indigo
5
- colorTo: yellow
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: sami-halawa-ai-developer
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: purple
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,646 @@
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>Professional Portfolio | Web Developer</title>
7
+ <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💻</text></svg>">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
13
+ <style>
14
+ :root {
15
+ --primary: #4f46e5;
16
+ --secondary: #1e293b;
17
+ --accent: #0ea5e9;
18
+ }
19
+ body {
20
+ font-family: 'Inter', sans-serif;
21
+ scroll-behavior: smooth;
22
+ }
23
+ .nav-link::after {
24
+ content: '';
25
+ display: block;
26
+ width: 0;
27
+ height: 2px;
28
+ background: var(--primary);
29
+ transition: width 0.3s;
30
+ }
31
+ .nav-link:hover::after {
32
+ width: 100%;
33
+ }
34
+ .project-card {
35
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
36
+ }
37
+ .project-card:hover {
38
+ transform: translateY(-5px);
39
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
40
+ }
41
+ .skill-bar {
42
+ height: 8px;
43
+ border-radius: 4px;
44
+ }
45
+ .gradient-bg {
46
+ background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
47
+ }
48
+ .btn-primary {
49
+ background: var(--primary);
50
+ transition: all 0.3s ease;
51
+ }
52
+ .btn-primary:hover {
53
+ background: #4338ca;
54
+ transform: translateY(-2px);
55
+ box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.3);
56
+ }
57
+ .footer-link {
58
+ position: relative;
59
+ }
60
+ .footer-link::after {
61
+ content: '';
62
+ position: absolute;
63
+ bottom: -2px;
64
+ left: 0;
65
+ width: 0;
66
+ height: 1px;
67
+ background: white;
68
+ transition: width 0.3s;
69
+ }
70
+ .footer-link:hover::after {
71
+ width: 100%;
72
+ }
73
+ </style>
74
+ </head>
75
+ <body class="bg-white text-gray-800">
76
+ <!-- Navigation -->
77
+ <nav class="fixed w-full bg-white/90 backdrop-blur-sm z-50 shadow-sm">
78
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
79
+ <div class="flex justify-between h-16 items-center">
80
+ <div class="flex-shrink-0 flex items-center">
81
+ <span class="text-xl font-bold text-indigo-600">DevPortfolio</span>
82
+ </div>
83
+ <div class="hidden md:block">
84
+ <div class="ml-10 flex items-center space-x-8">
85
+ <a href="#home" class="nav-link text-gray-600 hover:text-indigo-600 font-medium">Home</a>
86
+ <a href="#about" class="nav-link text-gray-600 hover:text-indigo-600 font-medium">About</a>
87
+ <a href="#skills" class="nav-link text-gray-600 hover:text-indigo-600 font-medium">Skills</a>
88
+ <a href="#projects" class="nav-link text-gray-600 hover:text-indigo-600 font-medium">Projects</a>
89
+ <a href="#contact" class="nav-link text-gray-600 hover:text-indigo-600 font-medium">Contact</a>
90
+ </div>
91
+ </div>
92
+ <div class="flex items-center md:hidden">
93
+ <button id="mobile-menu-button" class="text-gray-600 hover:text-indigo-600">
94
+ <i data-feather="menu"></i>
95
+ </button>
96
+ </div>
97
+ </div>
98
+ </div>
99
+ <!-- Mobile menu -->
100
+ <div id="mobile-menu" class="md:hidden hidden bg-white shadow-lg">
101
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
102
+ <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-indigo-600 hover:bg-gray-50">Home</a>
103
+ <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-indigo-600 hover:bg-gray-50">About</a>
104
+ <a href="#skills" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-indigo-600 hover:bg-gray-50">Skills</a>
105
+ <a href="#projects" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-indigo-600 hover:bg-gray-50">Projects</a>
106
+ <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-indigo-600 hover:bg-gray-50">Contact</a>
107
+ </div>
108
+ </div>
109
+ </nav>
110
+
111
+ <!-- Hero Section -->
112
+ <section id="home" class="pt-24 pb-16 gradient-bg">
113
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
114
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
115
+ <div data-aos="fade-right">
116
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-900 leading-tight">
117
+ Professional Web Solutions <br>
118
+ <span class="text-indigo-600">Crafted with Precision</span>
119
+ </h1>
120
+ <p class="mt-6 text-lg text-gray-600 max-w-xl">
121
+ I create responsive, accessible websites with modern technologies.
122
+ Focused on performance, SEO, and user experience.
123
+ </p>
124
+ <div class="mt-8 flex flex-wrap gap-4">
125
+ <a href="#projects" class="btn-primary px-8 py-3 rounded-lg text-white font-medium shadow-md">View Projects</a>
126
+ <a href="#contact" class="px-8 py-3 rounded-lg border-2 border-indigo-600 text-indigo-600 font-medium hover:bg-indigo-50 transition">Contact Me</a>
127
+ </div>
128
+ <div class="mt-12 flex items-center space-x-6">
129
+ <div class="flex items-center">
130
+ <div class="flex-shrink-0 bg-indigo-100 rounded-full p-2">
131
+ <i data-feather="award" class="text-indigo-600 w-5 h-5"></i>
132
+ </div>
133
+ <p class="ml-3 text-gray-600">5+ Years Experience</p>
134
+ </div>
135
+ <div class="flex items-center">
136
+ <div class="flex-shrink-0 bg-indigo-100 rounded-full p-2">
137
+ <i data-feather="check-circle" class="text-indigo-600 w-5 h-5"></i>
138
+ </div>
139
+ <p class="ml-3 text-gray-600">50+ Projects</p>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ <div data-aos="fade-left" class="flex justify-center">
144
+ <div class="relative">
145
+ <div class="absolute -top-6 -right-6 w-full h-full rounded-2xl border-4 border-indigo-200 z-0"></div>
146
+ <img src="http://static.photos/technology/640x360/42" alt="Web Development" class="relative z-10 rounded-2xl shadow-xl w-full max-w-md">
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </section>
152
+
153
+ <!-- About Section -->
154
+ <section id="about" class="py-20 bg-white">
155
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
156
+ <div class="text-center mb-16" data-aos="fade-up">
157
+ <h2 class="text-3xl font-bold text-gray-900">About Me</h2>
158
+ <div class="w-20 h-1 bg-indigo-600 mx-auto mt-4"></div>
159
+ </div>
160
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
161
+ <div data-aos="fade-right">
162
+ <img src="http://static.photos/people/640x360/23" alt="Profile" class="rounded-2xl shadow-lg w-full">
163
+ </div>
164
+ <div data-aos="fade-left">
165
+ <h3 class="text-2xl font-bold text-gray-900 mb-4">Crafting Digital Experiences</h3>
166
+ <p class="text-gray-600 mb-6">
167
+ I'm a passionate web developer with expertise in creating modern, responsive websites
168
+ and applications. My approach combines technical excellence with user-centered design.
169
+ </p>
170
+ <p class="text-gray-600 mb-8">
171
+ With a background in both design and development, I bridge the gap between aesthetics
172
+ and functionality. I stay current with industry trends and continuously refine my skills.
173
+ </p>
174
+ <div class="grid grid-cols-2 gap-6">
175
+ <div class="flex items-start">
176
+ <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3">
177
+ <i data-feather="code" class="text-indigo-600 w-6 h-6"></i>
178
+ </div>
179
+ <div class="ml-4">
180
+ <h4 class="font-bold text-gray-900">Clean Code</h4>
181
+ <p class="mt-1 text-gray-600">Semantic, accessible, and maintainable</p>
182
+ </div>
183
+ </div>
184
+ <div class="flex items-start">
185
+ <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3">
186
+ <i data-feather="smartphone" class="text-indigo-600 w-6 h-6"></i>
187
+ </div>
188
+ <div class="ml-4">
189
+ <h4 class="font-bold text-gray-900">Responsive Design</h4>
190
+ <p class="mt-1 text-gray-600">Flawless on all devices</p>
191
+ </div>
192
+ </div>
193
+ <div class="flex items-start">
194
+ <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3">
195
+ <i data-feather="zap" class="text-indigo-600 w-6 h-6"></i>
196
+ </div>
197
+ <div class="ml-4">
198
+ <h4 class="font-bold text-gray-900">Performance</h4>
199
+ <p class="mt-1 text-gray-600">Optimized loading speed</p>
200
+ </div>
201
+ </div>
202
+ <div class="flex items-start">
203
+ <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3">
204
+ <i data-feather="search" class="text-indigo-600 w-6 h-6"></i>
205
+ </div>
206
+ <div class="ml-4">
207
+ <h4 class="font-bold text-gray-900">SEO Optimized</h4>
208
+ <p class="mt-1 text-gray-600">Better search visibility</p>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </section>
216
+
217
+ <!-- Skills Section -->
218
+ <section id="skills" class="py-20 bg-gray-50">
219
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
220
+ <div class="text-center mb-16" data-aos="fade-up">
221
+ <h2 class="text-3xl font-bold text-gray-900">Technical Skills</h2>
222
+ <div class="w-20 h-1 bg-indigo-600 mx-auto mt-4"></div>
223
+ <p class="mt-6 text-gray-600 max-w-2xl mx-auto">
224
+ Expertise in modern web technologies and frameworks
225
+ </p>
226
+ </div>
227
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
228
+ <div data-aos="fade-right">
229
+ <div class="bg-white rounded-2xl shadow-lg p-8">
230
+ <h3 class="text-xl font-bold text-gray-900 mb-6">Frontend Development</h3>
231
+ <div class="space-y-6">
232
+ <div>
233
+ <div class="flex justify-between mb-2">
234
+ <span class="font-medium text-gray-700">HTML5 & CSS3</span>
235
+ <span class="text-gray-500">95%</span>
236
+ </div>
237
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
238
+ <div class="skill-bar bg-indigo-600 h-2.5 rounded-full" style="width: 95%"></div>
239
+ </div>
240
+ </div>
241
+ <div>
242
+ <div class="flex justify-between mb-2">
243
+ <span class="font-medium text-gray-700">JavaScript</span>
244
+ <span class="text-gray-500">90%</span>
245
+ </div>
246
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
247
+ <div class="skill-bar bg-indigo-600 h-2.5 rounded-full" style="width: 90%"></div>
248
+ </div>
249
+ </div>
250
+ <div>
251
+ <div class="flex justify-between mb-2">
252
+ <span class="font-medium text-gray-700">React.js</span>
253
+ <span class="text-gray-500">88%</span>
254
+ </div>
255
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
256
+ <div class="skill-bar bg-indigo-600 h-2.5 rounded-full" style="width: 88%"></div>
257
+ </div>
258
+ </div>
259
+ <div>
260
+ <div class="flex justify-between mb-2">
261
+ <span class="font-medium text-gray-700">Vue.js</span>
262
+ <span class="text-gray-500">85%</span>
263
+ </div>
264
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
265
+ <div class="skill-bar bg-indigo-600 h-2.5 rounded-full" style="width: 85%"></div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ <div data-aos="fade-left">
272
+ <div class="bg-white rounded-2xl shadow-lg p-8">
273
+ <h3 class="text-xl font-bold text-gray-900 mb-6">Backend & Tools</h3>
274
+ <div class="space-y-6">
275
+ <div>
276
+ <div class="flex justify-between mb-2">
277
+ <span class="font-medium text-gray-700">Node.js</span>
278
+ <span class="text-gray-500">85%</span>
279
+ </div>
280
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
281
+ <div class="skill-bar bg-indigo-600 h-2.5 rounded-full" style="width: 85%"></div>
282
+ </div>
283
+ </div>
284
+ <div>
285
+ <div class="flex justify-between mb-2">
286
+ <span class="font-medium text-gray-700">Python</span>
287
+ <span class="text-gray-500">80%</span>
288
+ </div>
289
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
290
+ <div class="skill-bar bg-indigo-600 h-2.5 rounded-full" style="width: 80%"></div>
291
+ </div>
292
+ </div>
293
+ <div>
294
+ <div class="flex justify-between mb-2">
295
+ <span class="font-medium text-gray-700">Git & GitHub</span>
296
+ <span class="text-gray-500">90%</span>
297
+ </div>
298
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
299
+ <div class="skill-bar bg-indigo-600 h-2.5 rounded-full" style="width: 90%"></div>
300
+ </div>
301
+ </div>
302
+ <div>
303
+ <div class="flex justify-between mb-2">
304
+ <span class="font-medium text-gray-700">UI/UX Design</span>
305
+ <span class="text-gray-500">82%</span>
306
+ </div>
307
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
308
+ <div class="skill-bar bg-indigo-600 h-2.5 rounded-full" style="width: 82%"></div>
309
+ </div>
310
+ </div>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ </div>
315
+ <div class="mt-16" data-aos="fade-up">
316
+ <h3 class="text-xl font-bold text-center text-gray-900 mb-8">Technologies I Work With</h3>
317
+ <div class="flex flex-wrap justify-center gap-8">
318
+ <div class="bg-white rounded-xl shadow-md p-5 flex items-center justify-center w-24 h-24">
319
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg" alt="HTML5" class="w-12 h-12">
320
+ </div>
321
+ <div class="bg-white rounded-xl shadow-md p-5 flex items-center justify-center w-24 h-24">
322
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg" alt="CSS3" class="w-12 h-12">
323
+ </div>
324
+ <div class="bg-white rounded-xl shadow-md p-5 flex items-center justify-center w-24 h-24">
325
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" alt="JavaScript" class="w-12 h-12">
326
+ </div>
327
+ <div class="bg-white rounded-xl shadow-md p-5 flex items-center justify-center w-24 h-24">
328
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" alt="React" class="w-12 h-12">
329
+ </div>
330
+ <div class="bg-white rounded-xl shadow-md p-5 flex items-center justify-center w-24 h-24">
331
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/tailwindcss/tailwindcss-plain.svg" alt="Tailwind CSS" class="w-12 h-12">
332
+ </div>
333
+ <div class="bg-white rounded-xl shadow-md p-5 flex items-center justify-center w-24 h-24">
334
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg" alt="Node.js" class="w-12 h-12">
335
+ </div>
336
+ </div>
337
+ </div>
338
+ </div>
339
+ </section>
340
+
341
+ <!-- Projects Section -->
342
+ <section id="projects" class="py-20 bg-white">
343
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
344
+ <div class="text-center mb-16" data-aos="fade-up">
345
+ <h2 class="text-3xl font-bold text-gray-900">Featured Projects</h2>
346
+ <div class="w-20 h-1 bg-indigo-600 mx-auto mt-4"></div>
347
+ <p class="mt-6 text-gray-600 max-w-2xl mx-auto">
348
+ A selection of my recent work showcasing design and development expertise
349
+ </p>
350
+ </div>
351
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
352
+ <!-- Project 1 -->
353
+ <div class="project-card bg-white rounded-2xl shadow-lg overflow-hidden" data-aos="fade-up" data-aos-delay="100">
354
+ <img src="http://static.photos/technology/640x360/101" alt="E-commerce Platform" class="w-full h-56 object-cover">
355
+ <div class="p-6">
356
+ <div class="flex justify-between items-start">
357
+ <h3 class="text-xl font-bold text-gray-900">E-commerce Platform</h3>
358
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-800">
359
+ React
360
+ </span>
361
+ </div>
362
+ <p class="mt-3 text-gray-600">
363
+ Full-featured online shopping experience with cart, payments, and user accounts.
364
+ </p>
365
+ <div class="mt-6 flex flex-wrap gap-2">
366
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 text-sm rounded-full">Redux</span>
367
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 text-sm rounded-full">Stripe API</span>
368
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 text-sm rounded-full">Firebase</span>
369
+ </div>
370
+ <div class="mt-6 flex space-x-4">
371
+ <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
372
+ View Project <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
373
+ </a>
374
+ <a href="#" class="text-gray-600 hover:text-gray-800 flex items-center">
375
+ <i data-feather="github" class="w-5 h-5 mr-1"></i> Code
376
+ </a>
377
+ </div>
378
+ </div>
379
+ </div>
380
+
381
+ <!-- Project 2 -->
382
+ <div class="project-card bg-white rounded-2xl shadow-lg overflow-hidden" data-aos="fade-up" data-aos-delay="200">
383
+ <img src="http://static.photos/finance/640x360/202" alt="Finance Dashboard" class="w-full h-56 object-cover">
384
+ <div class="p-6">
385
+ <div class="flex justify-between items-start">
386
+ <h3 class="text-xl font-bold text-gray-900">Finance Dashboard</h3>
387
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-800">
388
+ Vue.js
389
+ </span>
390
+ </div>
391
+ <p class="mt-3 text-gray-600">
392
+ Real-time financial data visualization with interactive charts and reporting.
393
+ </p>
394
+ <div class="mt-6 flex flex-wrap gap-2">
395
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 text-sm rounded-full">Chart.js</span>
396
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 text-sm rounded-full">REST API</span>
397
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 text-sm rounded-full">JWT Auth</span>
398
+ </div>
399
+ <div class="mt-6 flex space-x-4">
400
+ <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
401
+ View Project <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
402
+ </a>
403
+ <a href="#" class="text-gray-600 hover:text-gray-800 flex items-center">
404
+ <i data-feather="github" class="w-5 h-5 mr-1"></i> Code
405
+ </a>
406
+ </div>
407
+ </div>
408
+ </div>
409
+
410
+ <!-- Project 3 -->
411
+ <div class="project-card bg-white rounded-2xl shadow-lg overflow-hidden" data-aos="fade-up" data-aos-delay="300">
412
+ <img src="http://static.photos/travel/640x360/303" alt="Travel App" class="w-full h-56 object-cover">
413
+ <div class="p-6">
414
+ <div class="flex justify-between items-start">
415
+ <h3 class="text-xl font-bold text-gray-900">Travel Planning App</h3>
416
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-800">
417
+ Mobile
418
+ </span>
419
+ </div>
420
+ <p class="mt-3 text-gray-600">
421
+ Comprehensive travel itinerary planner with maps, bookings, and recommendations.
422
+ </p>
423
+ <div class="mt-6 flex flex-wrap gap-2">
424
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 text-sm rounded-full">React Native</span>
425
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 text-sm rounded-full">Google Maps API</span>
426
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 text-sm rounded-full">MongoDB</span>
427
+ </div>
428
+ <div class="mt-6 flex space-x-4">
429
+ <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
430
+ View Project <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
431
+ </a>
432
+ <a href="#" class="text-gray-600 hover:text-gray-800 flex items-center">
433
+ <i data-feather="github" class="w-5 h-5 mr-1"></i> Code
434
+ </a>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ <div class="mt-12 text-center" data-aos="fade-up">
440
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
441
+ View All Projects
442
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
443
+ </a>
444
+ </div>
445
+ </div>
446
+ </section>
447
+
448
+ <!-- Contact Section -->
449
+ <section id="contact" class="py-20 bg-gray-50">
450
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
451
+ <div class="text-center mb-16" data-aos="fade-up">
452
+ <h2 class="text-3xl font-bold text-gray-900">Get In Touch</h2>
453
+ <div class="w-20 h-1 bg-indigo-600 mx-auto mt-4"></div>
454
+ <p class="mt-6 text-gray-600 max-w-2xl mx-auto">
455
+ Have a project in mind? Let's discuss how I can help bring your ideas to life.
456
+ </p>
457
+ </div>
458
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
459
+ <div data-aos="fade-right">
460
+ <form action="https://airform.io/sami@samihalawa.com" method="post" class="bg-white rounded-2xl shadow-lg p-8">
461
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
462
+ <div>
463
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
464
+ <input type="text" name="name" id="name" placeholder="Enter your name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
465
+ </div>
466
+ <div>
467
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
468
+ <input type="text" name="email" id="email" placeholder="Enter your email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
469
+ </div>
470
+ <div class="sm:col-span-2">
471
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
472
+ <textarea name="message" id="message" rows="5" placeholder="Enter your message" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"></textarea>
473
+ </div>
474
+ <div class="sm:col-span-2">
475
+ <button class="btn-primary w-full py-3 px-6 rounded-lg text-white font-medium shadow-md">
476
+ Send
477
+ </button>
478
+ </div>
479
+ </div>
480
+ </form>
481
+ </div>
482
+ <div data-aos="fade-left">
483
+ <div class="bg-white rounded-2xl shadow-lg p-8 h-full">
484
+ <h3 class="text-xl font-bold text-gray-900 mb-6">Contact Information</h3>
485
+ <div class="space-y-6">
486
+ <div class="flex">
487
+ <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3">
488
+ <i data-feather="mail" class="text-indigo-600 w-6 h-6"></i>
489
+ </div>
490
+ <div class="ml-4">
491
+ <h4 class="font-bold text-gray-900">Email</h4>
492
+ <p class="mt-1 text-gray-600">contact@devportfolio.com</p>
493
+ </div>
494
+ </div>
495
+ <div class="flex">
496
+ <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3">
497
+ <i data-feather="phone" class="text-indigo-600 w-6 h-6"></i>
498
+ </div>
499
+ <div class="ml-4">
500
+ <h4 class="font-bold text-gray-900">Phone</h4>
501
+ <p class="mt-1 text-gray-600">+1 (555) 123-4567</p>
502
+ </div>
503
+ </div>
504
+ <div class="flex">
505
+ <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3">
506
+ <i data-feather="map-pin" class="text-indigo-600 w-6 h-6"></i>
507
+ </div>
508
+ <div class="ml-4">
509
+ <h4 class="font-bold text-gray-900">Location</h4>
510
+ <p class="mt-1 text-gray-600">San Francisco, California</p>
511
+ </div>
512
+ </div>
513
+ </div>
514
+ <div class="mt-12">
515
+ <h4 class="font-bold text-gray-900 mb-4">Follow Me</h4>
516
+ <div class="flex space-x-4">
517
+ <a href="#" class="bg-gray-100 p-3 rounded-full text-gray-600 hover:bg-indigo-100 hover:text-indigo-600 transition">
518
+ <i data-feather="github" class="w-5 h-5"></i>
519
+ </a>
520
+ <a href="#" class="bg-gray-100 p-3 rounded-full text-gray-600 hover:bg-indigo-100 hover:text-indigo-600 transition">
521
+ <i data-feather="twitter" class="w-5 h-5"></i>
522
+ </a>
523
+ <a href="#" class="bg-gray-100 p-3 rounded-full text-gray-600 hover:bg-indigo-100 hover:text-indigo-600 transition">
524
+ <i data-feather="linkedin" class="w-5 h-5"></i>
525
+ </a>
526
+ <a href="#" class="bg-gray-100 p-3 rounded-full text-gray-600 hover:bg-indigo-100 hover:text-indigo-600 transition">
527
+ <i data-feather="dribbble" class="w-5 h-5"></i>
528
+ </a>
529
+ </div>
530
+ </div>
531
+ </div>
532
+ </div>
533
+ </div>
534
+ </div>
535
+ </section>
536
+
537
+ <!-- Footer -->
538
+ <footer class="bg-gray-900 text-white pt-16 pb-8">
539
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
540
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
541
+ <div>
542
+ <h3 class="text-xl font-bold mb-4">DevPortfolio</h3>
543
+ <p class="text-gray-400 mb-6">
544
+ Creating exceptional digital experiences with modern web technologies.
545
+ </p>
546
+ <div class="flex space-x-4">
547
+ <a href="#" class="text-gray-400 hover:text-white transition">
548
+ <i data-feather="github" class="w-5 h-5"></i>
549
+ </a>
550
+ <a href="#" class="text-gray-400 hover:text-white transition">
551
+ <i data-feather="twitter" class="w-5 h-5"></i>
552
+ </a>
553
+ <a href="#" class="text-gray-400 hover:text-white transition">
554
+ <i data-feather="linkedin" class="w-5 h-5"></i>
555
+ </a>
556
+ </div>
557
+ </div>
558
+ <div>
559
+ <h4 class="font-bold text-lg mb-4">Navigation</h4>
560
+ <ul class="space-y-2">
561
+ <li><a href="#home" class="footer-link text-gray-400 hover:text-white transition">Home</a></li>
562
+ <li><a href="#about" class="footer-link text-gray-400 hover:text-white transition">About</a></li>
563
+ <li><a href="#skills" class="footer-link text-gray-400 hover:text-white transition">Skills</a></li>
564
+ <li><a href="#projects" class="footer-link text-gray-400 hover:text-white transition">Projects</a></li>
565
+ <li><a href="#contact" class="footer-link text-gray-400 hover:text-white transition">Contact</a></li>
566
+ </ul>
567
+ </div>
568
+ <div>
569
+ <h4 class="font-bold text-lg mb-4">Services</h4>
570
+ <ul class="space-y-2">
571
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white transition">Web Development</a></li>
572
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white transition">UI/UX Design</a></li>
573
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white transition">Mobile Apps</a></li>
574
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white transition">SEO Optimization</a></li>
575
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white transition">Consulting</a></li>
576
+ </ul>
577
+ </div>
578
+ <div>
579
+ <h4 class="font-bold text-lg mb-4">Newsletter</h4>
580
+ <p class="text-gray-400 mb-4">
581
+ Subscribe to receive updates on new projects and articles.
582
+ </p>
583
+ <form class="flex">
584
+ <input type="email" placeholder="Your email" class="px-4 py-2 w-full rounded-l-lg focus:outline-none text-gray-800">
585
+ <button class="bg-indigo-600 hover:bg-indigo-700 px-4 rounded-r-lg">
586
+ <i data-feather="send" class="w-5 h-5"></i>
587
+ </button>
588
+ </form>
589
+ </div>
590
+ </div>
591
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
592
+ <p class="text-gray-400 text-sm">
593
+ &copy; 2023 DevPortfolio. All rights reserved.
594
+ </p>
595
+ <div class="mt-4 md:mt-0">
596
+ <ul class="flex space-x-6">
597
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white text-sm">Privacy Policy</a></li>
598
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white text-sm">Terms of Service</a></li>
599
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white text-sm">Cookies</a></li>
600
+ </ul>
601
+ </div>
602
+ </div>
603
+ </div>
604
+ </footer>
605
+
606
+ <script>
607
+ // Initialize AOS animations
608
+ AOS.init({
609
+ duration: 800,
610
+ once: true,
611
+ easing: 'ease-in-out'
612
+ });
613
+
614
+ // Initialize Feather Icons
615
+ feather.replace();
616
+
617
+ // Mobile menu toggle
618
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
619
+ const menu = document.getElementById('mobile-menu');
620
+ menu.classList.toggle('hidden');
621
+ });
622
+
623
+ // Close mobile menu when clicking links
624
+ document.querySelectorAll('#mobile-menu a').forEach(link => {
625
+ link.addEventListener('click', () => {
626
+ document.getElementById('mobile-menu').classList.add('hidden');
627
+ });
628
+ });
629
+
630
+ // Smooth scrolling for navigation links
631
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
632
+ anchor.addEventListener('click', function(e) {
633
+ e.preventDefault();
634
+ const target = document.querySelector(this.getAttribute('href'));
635
+ if (target) {
636
+ window.scrollTo({
637
+ top: target.offsetTop - 80,
638
+ behavior: 'smooth'
639
+ });
640
+ }
641
+ });
642
+ });
643
+ </script>
644
+ </body>
645
  </html>
646
+
prompts.txt ADDED
@@ -0,0 +1,22 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ Sami Halawa. I am an AI engineer and a Full Stack programmer. I offer all kinds of AI services, and also training for individuals and businesses and 1-to-1 online lessons. My contact information is sami@samihalawa.com and my whatsapp is +34 679794037 Do not make up any other contact information or social links that may be fake. The goal is that the highest percentage of the visitors that visit my website get ton know all my services and find them very useful so they contant me by email or whatsapp. The style must be clean, 2025 professional, and with very soft aurora effects very translucid and all perfectly responsive. ULTRATHINK, use CoT to fully simulate how would loko and what is the best and most optimal approach. Must look very polsiedh adn ready to publish. Plan and proceed
2
+
3
+ Analyze the code, simulate how it would render according to how HTML renders in the eyes of the final vistor, and visualize step by step all the details and interactions and observations, and list 10 thigns that mostly make the visitor think this page is not complete nor professional or that looks too amateru, and address all of them so is so polished and clean and very very professional and polished
4
+ Analyze the code, simulate how it would render according to how HTML renders in the eyes of the final vistor, and visualize step by step all the details and interactions and observations, and list 10 thigns that mostly make the visitor think this page is not complete nor professional or that looks too amateru, and address all of them so is so polished and clean and very very professional and polished
5
+ The form replace it with this
6
+ <form action="https://airform.io/sami@samihalawa.com" method="post">
7
+ <input type="text" name="name" placeholder="Enter your name">
8
+ <input type="text" name="email" placeholder="Enter your email">
9
+ <textarea name="message" placeholder="Enter your message"></textarea>
10
+ <button>Send</button>
11
+ </form>
12
+ The form replace it with this
13
+ <form action="https://airform.io/sami@samihalawa.com" method="post">
14
+ <input type="text" name="name" placeholder="Enter your name">
15
+ <input type="text" name="email" placeholder="Enter your email">
16
+ <textarea name="message" placeholder="Enter your message"></textarea>
17
+ <button>Send</button>
18
+ </form>
19
+
20
+ remove all the placehodler information adn contant finformatieon (only modify the part of the code that needs adjustmenet)
21
+
22
+ . use Sami Halawa. I am an AI engineer and a Full Stack programmer. I offer all kinds of AI services, and also training for individuals and businesses and 1-to-1 online lessons. My contact information is sami@samihalawa.com and my whatsapp is +34 679794037 Do not make up any other contact information or social links that may be fake. The goal is that the highest percentage of the visitors that visit my website get ton know all my services and find them very useful so they contant me by email or whatsapp.