Hugging Face's logo

Spaces:
MohamedNetai
/
mohamed-abdullah
Running

App Files Community
MohamedNetai commited on
Commit
0bdb7ae
·
verified ·
1 Parent(s): 7231e6d

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +893 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mohamed Abdullah
3
- emoji: 🌍
4
- colorFrom: green
5
  colorTo: red
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: mohamed-abdullah
3
+ emoji: 🐳
4
+ colorFrom: pink
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,893 @@
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" dir="ltr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Mohamed Abdullah | Mass Communication Student | Pro Volleyball Player & Coach</title>
7
+ <meta name="description" content="Mohamed Abdullah - Mass Communication student, journalist in training, and pro volleyball athlete. Explore my portfolio and connect with me.">
8
+ <meta property="og:title" content="Mohamed Abdullah | Professional Portfolio">
9
+ <meta property="og:description" content="Mass Communication student, volleyball player & coach. Bridging media and sports.">
10
+ <meta property="og:type" content="website">
11
+ <meta property="og:url" content="https://mohamedabdullah.com">
12
+ <meta property="og:image" content="https://mohamedabdullah.com/images/preview.jpg">
13
+ <script src="https://cdn.tailwindcss.com"></script>
14
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
15
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Merriweather:wght@400;700&display=swap" rel="stylesheet">
16
+ <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap" rel="stylesheet">
17
+ <style>
18
+ body {
19
+ font-family: 'Merriweather', serif;
20
+ scroll-behavior: smooth;
21
+ transition: background-color 0.3s, color 0.3s;
22
+ }
23
+ h1, h2, h3, h4 {
24
+ font-family: 'Montserrat', sans-serif;
25
+ }
26
+ .arabic {
27
+ font-family: 'Tajawal', sans-serif;
28
+ }
29
+ .accent {
30
+ color: #007ACC;
31
+ }
32
+ .bg-accent {
33
+ background-color: #007ACC;
34
+ }
35
+ .border-accent {
36
+ border-color: #007ACC;
37
+ }
38
+ .dark .accent {
39
+ color: #B91C1C;
40
+ }
41
+ .dark .bg-accent {
42
+ background-color: #B91C1C;
43
+ }
44
+ .dark .border-accent {
45
+ border-color: #B91C1C;
46
+ }
47
+ .hero-image {
48
+ background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://images.unsplash.com/photo-1547347298-4074fc3086f0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
49
+ background-size: cover;
50
+ background-position: center;
51
+ }
52
+ .dark .hero-image {
53
+ background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1547347298-4074fc3086f0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
54
+ }
55
+ .skill-bar {
56
+ height: 8px;
57
+ border-radius: 4px;
58
+ }
59
+ .project-card:hover {
60
+ transform: translateY(-5px);
61
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
62
+ }
63
+ .animate-float {
64
+ animation: float 3s ease-in-out infinite;
65
+ }
66
+ @keyframes float {
67
+ 0% { transform: translateY(0px); }
68
+ 50% { transform: translateY(-10px); }
69
+ 100% { transform: translateY(0px); }
70
+ }
71
+ .theme-toggle {
72
+ position: relative;
73
+ width: 50px;
74
+ height: 26px;
75
+ border-radius: 13px;
76
+ background-color: #e2e8f0;
77
+ cursor: pointer;
78
+ transition: background-color 0.3s;
79
+ }
80
+ .dark .theme-toggle {
81
+ background-color: #4b5563;
82
+ }
83
+ .theme-toggle::after {
84
+ content: '';
85
+ position: absolute;
86
+ top: 2px;
87
+ left: 2px;
88
+ width: 22px;
89
+ height: 22px;
90
+ border-radius: 50%;
91
+ background-color: white;
92
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
93
+ transition: transform 0.3s;
94
+ }
95
+ .dark .theme-toggle::after {
96
+ transform: translateX(24px);
97
+ }
98
+ .dark {
99
+ background-color: #1f2937;
100
+ color: #f3f4f6;
101
+ }
102
+ .dark .bg-white {
103
+ background-color: #111827;
104
+ color: #f3f4f6;
105
+ }
106
+ .dark .bg-gray-50 {
107
+ background-color: #1f2937;
108
+ }
109
+ .dark .bg-gray-100 {
110
+ background-color: #374151;
111
+ }
112
+ .dark .text-gray-800 {
113
+ color: #f3f4f6;
114
+ }
115
+ .dark .text-gray-600 {
116
+ color: #d1d5db;
117
+ }
118
+ .dark .bg-gray-900 {
119
+ background-color: #111827;
120
+ }
121
+ .dark .text-gray-400 {
122
+ color: #9ca3af;
123
+ }
124
+ .dark .border-gray-300 {
125
+ border-color: #4b5563;
126
+ }
127
+ .dark .shadow-md {
128
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
129
+ }
130
+ .language-switcher {
131
+ position: relative;
132
+ display: inline-block;
133
+ margin-left: 1rem;
134
+ }
135
+ .language-btn {
136
+ background-color: transparent;
137
+ border: none;
138
+ cursor: pointer;
139
+ display: flex;
140
+ align-items: center;
141
+ color: inherit;
142
+ font-weight: 500;
143
+ }
144
+ .language-btn i {
145
+ margin-left: 5px;
146
+ transition: transform 0.3s;
147
+ }
148
+ .language-dropdown {
149
+ position: absolute;
150
+ top: 100%;
151
+ right: 0;
152
+ background-color: white;
153
+ border-radius: 0.5rem;
154
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
155
+ padding: 0.5rem 0;
156
+ min-width: 120px;
157
+ z-index: 50;
158
+ display: none;
159
+ }
160
+ .dark .language-dropdown {
161
+ background-color: #1f2937;
162
+ border: 1px solid #374151;
163
+ }
164
+ .language-dropdown.show {
165
+ display: block;
166
+ }
167
+ .language-option {
168
+ padding: 0.5rem 1rem;
169
+ cursor: pointer;
170
+ display: flex;
171
+ align-items: center;
172
+ transition: background-color 0.2s;
173
+ }
174
+ .language-option:hover {
175
+ background-color: #f3f4f6;
176
+ }
177
+ .dark .language-option:hover {
178
+ background-color: #374151;
179
+ }
180
+ .language-option i {
181
+ margin-right: 8px;
182
+ }
183
+ .rtl {
184
+ direction: rtl;
185
+ text-align: right;
186
+ }
187
+ .rtl .md\:flex-row-reverse {
188
+ flex-direction: row-reverse;
189
+ }
190
+ .rtl .md\:pr-10 {
191
+ padding-right: 0;
192
+ padding-left: 2.5rem;
193
+ }
194
+ .rtl .mr-4 {
195
+ margin-right: 0;
196
+ margin-left: 1rem;
197
+ }
198
+ .rtl .ml-4 {
199
+ margin-left: 0;
200
+ margin-right: 1rem;
201
+ }
202
+ .rtl .md\:space-x-8 > * + * {
203
+ margin-left: 0;
204
+ margin-right: 2rem;
205
+ }
206
+ .rtl .flex-row-reverse {
207
+ flex-direction: row-reverse;
208
+ }
209
+ .rtl .text-left {
210
+ text-align: right;
211
+ }
212
+ .rtl .text-right {
213
+ text-align: left;
214
+ }
215
+ .rtl .justify-start {
216
+ justify-content: flex-end;
217
+ }
218
+ .rtl .justify-end {
219
+ justify-content: flex-start;
220
+ }
221
+ .rtl .items-start {
222
+ align-items: flex-end;
223
+ }
224
+ .rtl .md\:items-start {
225
+ align-items: flex-end;
226
+ }
227
+ .rtl .md\:text-left {
228
+ text-align: right;
229
+ }
230
+ .rtl .md\:text-right {
231
+ text-align: left;
232
+ }
233
+ .rtl .md\:justify-start {
234
+ justify-content: flex-end;
235
+ }
236
+ .rtl .md\:justify-end {
237
+ justify-content: flex-start;
238
+ }
239
+ </style>
240
+ </head>
241
+ <body class="bg-gray-50 text-gray-800">
242
+ <!-- Navigation -->
243
+ <nav class="bg-white dark:bg-gray-800 shadow-md fixed w-full z-10">
244
+ <div class="max-w-6xl mx-auto px-4">
245
+ <div class="flex justify-between items-center py-4">
246
+ <a href="#" class="text-2xl font-bold accent">MA</a>
247
+ <div class="hidden md:flex space-x-8 items-center">
248
+ <a href="#about" class="hover:text-blue-600 dark:hover:text-red-600 transition" data-en="About" data-ar="عني">About</a>
249
+ <a href="#experience" class="hover:text-blue-600 dark:hover:text-red-600 transition" data-en="Experience" data-ar="الخبرة">Experience</a>
250
+ <a href="#skills" class="hover:text-blue-600 dark:hover:text-red-600 transition" data-en="Skills" data-ar="المهارات">Skills</a>
251
+ <a href="#blog" class="hover:text-blue-600 dark:hover:text-red-600 transition" data-en="Blog" data-ar="المدونة">Blog</a>
252
+ <a href="#contact" class="hover:text-blue-600 dark:hover:text-red-600 transition" data-en="Contact" data-ar="اتصل">Contact</a>
253
+
254
+ <div class="flex items-center ml-4">
255
+ <span class="mr-2 hidden md:block"><i class="fas fa-sun"></i></span>
256
+ <div class="theme-toggle" id="themeToggle"></div>
257
+ <span class="ml-2 hidden md:block"><i class="fas fa-moon"></i></span>
258
+ </div>
259
+
260
+ <div class="language-switcher">
261
+ <button class="language-btn" id="languageBtn">
262
+ <span data-en="English" data-ar="العربية">English</span>
263
+ <i class="fas fa-chevron-down"></i>
264
+ </button>
265
+ <div class="language-dropdown" id="languageDropdown">
266
+ <div class="language-option" data-lang="en">
267
+ <i class="fas fa-globe"></i>
268
+ <span>English</span>
269
+ </div>
270
+ <div class="language-option" data-lang="ar">
271
+ <i class="fas fa-globe"></i>
272
+ <span>العربية</span>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ </div>
277
+ <div class="flex items-center md:hidden">
278
+ <div class="flex items-center mr-4">
279
+ <div class="theme-toggle" id="mobileThemeToggle"></div>
280
+ </div>
281
+ <div class="language-switcher mr-4">
282
+ <button class="language-btn" id="mobileLanguageBtn">
283
+ <span data-en="EN" data-ar="AR">EN</span>
284
+ </button>
285
+ </div>
286
+ <button class="focus:outline-none">
287
+ <i class="fas fa-bars text-xl"></i>
288
+ </button>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </nav>
293
+
294
+ <!-- Hero Section -->
295
+ <section class="hero-image min-h-screen flex items-center justify-center text-white pt-16">
296
+ <div class="max-w-6xl mx-auto px-4 py-20 md:py-32 flex flex-col md:flex-row items-center">
297
+ <div class="md:w-1/2 mb-10 md:mb-0">
298
+ <h1 class="text-4xl md:text-6xl font-bold mb-4" data-en="Mohamed <span class='accent'>Abdullah</span>" data-ar="محمد <span class='accent'>عبدالله</span>">Mohamed <span class="accent">Abdullah</span></h1>
299
+ <p class="text-xl md:text-2xl mb-8" data-en="Mass Communication Student | Pro Volleyball Player & Coach" data-ar="طالب إعلام | لاعب كرة طائرة محترف ومدرب">Mass Communication Student | Pro Volleyball Player & Coach</p>
300
+ <div class="flex space-x-4">
301
+ <a href="#contact" class="bg-accent hover:bg-blue-700 dark:hover:bg-red-800 text-white px-6 py-3 rounded-full font-medium transition" data-en="Get In Touch" data-ar="تواصل معي">Get In Touch</a>
302
+ <a href="#about" class="border-2 border-white hover:bg-white hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-white text-white px-6 py-3 rounded-full font-medium transition" data-en="Learn More" data-ar="اعرف المزيد">Learn More</a>
303
+ </div>
304
+ </div>
305
+ <div class="md:w-1/2 flex justify-center">
306
+ <div class="relative w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden border-4 border-white shadow-xl animate-float">
307
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Mohamed Abdullah" class="w-full h-full object-cover">
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </section>
312
+
313
+ <!-- About Section -->
314
+ <section id="about" class="py-20 bg-white dark:bg-gray-800">
315
+ <div class="max-w-6xl mx-auto px-4">
316
+ <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center" data-en="About <span class='accent'>Me</span>" data-ar="<span class='accent'>عني</span>">About <span class="accent">Me</span></h2>
317
+ <div class="flex flex-col md:flex-row items-center">
318
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
319
+ <p class="text-lg mb-6 dark:text-gray-300" data-en="I'm Mohamed Abdullah, a passionate Mass Communication student with a deep fascination for storytelling and media. Currently exploring diverse career paths in journalism, reporting, and public relations, I'm driven by the power of communication to inform, inspire, and connect communities." data-ar="أنا محمد عبدالله، طالب إعلام شغوف بالقصص الإعلامية ووسائل الإعلام. أستكشف حاليًا مسارات مهنية متنوعة في الصحافة والإعلام والعلاقات العامة، مدفوعًا بقوة التواصل لإعلام وإلهام وربط المجتمعات.">I'm Mohamed Abdullah, a passionate Mass Communication student with a deep fascination for storytelling and media. Currently exploring diverse career paths in journalism, reporting, and public relations, I'm driven by the power of communication to inform, inspire, and connect communities.</p>
320
+ <p class="text-lg mb-6 dark:text-gray-300" data-en="Beyond the classroom, I'm a professional volleyball player and certified coach, where I've learned the value of discipline, teamwork, and leadership. These athletic experiences have shaped my approach to communication, teaching me how to perform under pressure and connect with diverse audiences." data-ar="خارج الفصل الدراسي، أنا لاعب كرة طائرة محترف ومدرب معتمد، حيث تعلمت قيمة الانضباط والعمل الجماعي والقيادة. ساهمت هذه التجارب الرياضية في تشكيل نهجي في التواصل، وعلمتني كيفية الأداء تحت الضغط والتواصل مع جماهير متنوعة.">Beyond the classroom, I'm a professional volleyball player and certified coach, where I've learned the value of discipline, teamwork, and leadership. These athletic experiences have shaped my approach to communication, teaching me how to perform under pressure and connect with diverse audiences.</p>
321
+ <p class="text-lg dark:text-gray-300" data-en="My unique combination of intellectual curiosity and athletic discipline allows me to approach challenges from multiple perspectives. Whether crafting compelling narratives or strategizing game plans, I bring creativity, dedication, and a solutions-oriented mindset to everything I do." data-ar="يجمعني فضول فكري وانضباط رياضي يسمحان لي بمواجهة التحديات من زوايا متعددة. سواء في صياغة قصص مقنعة أو وضع خطط اللعب، أحمل الإبداع والتفاني وعقلية موجهة نحو الحلول في كل ما أفعله.">My unique combination of intellectual curiosity and athletic discipline allows me to approach challenges from multiple perspectives. Whether crafting compelling narratives or strategizing game plans, I bring creativity, dedication, and a solutions-oriented mindset to everything I do.</p>
322
+ </div>
323
+ <div class="md:w-1/2 bg-gray-100 dark:bg-gray-700 p-8 rounded-xl">
324
+ <h3 class="text-2xl font-bold mb-4 accent" data-en="Quick Facts" data-ar="حقائق سريعة">Quick Facts</h3>
325
+ <div class="space-y-4">
326
+ <div class="flex items-start">
327
+ <div class="bg-accent text-white p-2 rounded-full mr-4">
328
+ <i class="fas fa-graduation-cap"></i>
329
+ </div>
330
+ <div>
331
+ <h4 class="font-bold dark:text-white" data-en="Education" data-ar="التعليم">Education</h4>
332
+ <p class="dark:text-gray-300" data-en="Bachelor's in Mass Communication" data-ar="بكالوريوس في الإعلام">Bachelor's in Mass Communication</p>
333
+ <p class="text-sm text-gray-600 dark:text-gray-400" data-en="Expected Graduation: 2024" data-ar="التخرج المتوقع: 2024">Expected Graduation: 2024</p>
334
+ </div>
335
+ </div>
336
+ <div class="flex items-start">
337
+ <div class="bg-accent text-white p-2 rounded-full mr-4">
338
+ <i class="fas fa-volleyball-ball"></i>
339
+ </div>
340
+ <div>
341
+ <h4 class="font-bold dark:text-white" data-en="Volleyball Career" data-ar="المسيرة الرياضية">Volleyball Career</h4>
342
+ <p class="dark:text-gray-300" data-en="Professional Player since 2018" data-ar="لاعب محترف منذ 2018">Professional Player since 2018</p>
343
+ <p class="dark:text-gray-300" data-en="Certified Coach since 2021" data-ar="مدرب معتمد منذ 2021">Certified Coach since 2021</p>
344
+ </div>
345
+ </div>
346
+ <div class="flex items-start">
347
+ <div class="bg-accent text-white p-2 rounded-full mr-4">
348
+ <i class="fas fa-bullhorn"></i>
349
+ </div>
350
+ <div>
351
+ <h4 class="font-bold dark:text-white" data-en="Media Interests" data-ar="اهتمامات إعلامية">Media Interests</h4>
352
+ <p class="dark:text-gray-300" data-en="Investigative Journalism" data-ar="صحافة الاستقصاء">Investigative Journalism</p>
353
+ <p class="dark:text-gray-300" data-en="Sports Reporting" data-ar="التغطية الرياضية">Sports Reporting</p>
354
+ <p class="dark:text-gray-300" data-en="Strategic Communication" data-ar="التواصل الاستراتيجي">Strategic Communication</p>
355
+ </div>
356
+ </div>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </section>
362
+
363
+ <!-- Experience & Projects -->
364
+ <section id="experience" class="py-20 bg-gray-50 dark:bg-gray-900">
365
+ <div class="max-w-6xl mx-auto px-4">
366
+ <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center" data-en="Experience & <span class='accent'>Projects</span>" data-ar="الخبرة و<span class='accent'>المشاريع</span>">Experience & <span class="accent">Projects</span></h2>
367
+ <div class="grid md:grid-cols-2 gap-8">
368
+ <!-- Experience Item 1 -->
369
+ <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md project-card transition">
370
+ <div class="flex items-start mb-4">
371
+ <div class="bg-accent text-white p-3 rounded-lg mr-4">
372
+ <i class="fas fa-newspaper text-xl"></i>
373
+ </div>
374
+ <div>
375
+ <h3 class="text-xl font-bold dark:text-white" data-en="Campus News Editor" data-ar="محرر أخبار الحرم الجامعي">Campus News Editor</h3>
376
+ <p class="text-gray-600 dark:text-gray-400" data-en="University Media Center • Jan 2023 - Present" data-ar="مركز الإعلام الجامعي • يناير 2023 - الآن">University Media Center • Jan 2023 - Present</p>
377
+ </div>
378
+ </div>
379
+ <p class="mb-4 dark:text-gray-300" data-en="Lead editorial team for campus newspaper, overseeing content creation, editing, and publication schedule. Increased readership by 40% through strategic social media promotion." data-ar="قادت فريق التحرير لصحيفة الحرم الجامعي، أشرف على إنشاء المحتوى والتحرير وجدول النشر. زادت القراءة بنسبة 40٪ من خلال الترويج الاستراتيجي على وسائل التواصل الاجتماعي.">Lead editorial team for campus newspaper, overseeing content creation, editing, and publication schedule. Increased readership by 40% through strategic social media promotion.</p>
380
+ <a href="#" class="text-accent font-medium hover:underline" data-en="View Sample Articles →" data-ar="عرض نماذج المقالات ←">View Sample Articles →</a>
381
+ </div>
382
+
383
+ <!-- Experience Item 2 -->
384
+ <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md project-card transition">
385
+ <div class="flex items-start mb-4">
386
+ <div class="bg-accent text-white p-3 rounded-lg mr-4">
387
+ <i class="fas fa-volleyball-ball text-xl"></i>
388
+ </div>
389
+ <div>
390
+ <h3 class="text-xl font-bold dark:text-white" data-en="Head Volleyball Coach" data-ar="مدرب رئيسي للكرة الطائرة">Head Volleyball Coach</h3>
391
+ <p class="text-gray-600 dark:text-gray-400" data-en="Elite Sports Academy • Jun 2021 - Present" data-ar="أكاديمية النخبة الرياضية • يونيو 2021 - الآن">Elite Sports Academy • Jun 2021 - Present</p>
392
+ </div>
393
+ </div>
394
+ <p class="mb-4 dark:text-gray-300" data-en="Develop and implement training programs for youth and adult volleyball teams. Mentored 3 players who went on to compete at national level tournaments." data-ar="طورت ونفذت برامج تدريبية لفرق الكرة الطائرة للشباب والكبار. دربت 3 لاعبين تأهلوا للمنافسة في بطولات المستوى الوطني.">Develop and implement training programs for youth and adult volleyball teams. Mentored 3 players who went on to compete at national level tournaments.</p>
395
+ <a href="#" class="text-accent font-medium hover:underline" data-en="View Team Highlights →" data-ar="عرض أبرز الفريق ←">View Team Highlights →</a>
396
+ </div>
397
+
398
+ <!-- Experience Item 3 -->
399
+ <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md project-card transition">
400
+ <div class="flex items-start mb-4">
401
+ <div class="bg-accent text-white p-3 rounded-lg mr-4">
402
+ <i class="fas fa-microphone text-xl"></i>
403
+ </div>
404
+ <div>
405
+ <h3 class="text-xl font-bold dark:text-white" data-en="PR Intern" data-ar="متدرب علاقات عامة">PR Intern</h3>
406
+ <p class="text-gray-600 dark:text-gray-400" data-en="Media Solutions Agency • Sep 2022 - Dec 2022" data-ar="وكالة حلول الإعلام • سبتمبر 2022 - ديسمبر 2022">Media Solutions Agency • Sep 2022 - Dec 2022</p>
407
+ </div>
408
+ </div>
409
+ <p class="mb-4 dark:text-gray-300" data-en="Assisted in developing PR campaigns for clients across various industries. Drafted press releases that secured coverage in 5 major regional publications." data-ar="ساعدت في تطوير حملات العلاقات العامة للعملاء عبر مختلف الصناعات. صاغت بيانات صحفية حصلت على تغطية في 5 منشورات إقليمية رئيسية.">Assisted in developing PR campaigns for clients across various industries. Drafted press releases that secured coverage in 5 major regional publications.</p>
410
+ <a href="#" class="text-accent font-medium hover:underline" data-en="View Campaign Samples →" data-ar="عرض نماذج الحملات ←">View Campaign Samples →</a>
411
+ </div>
412
+
413
+ <!-- Experience Item 4 -->
414
+ <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md project-card transition">
415
+ <div class="flex items-start mb-4">
416
+ <div class="bg-accent text-white p-3 rounded-lg mr-4">
417
+ <i class="fas fa-broadcast-tower text-xl"></i>
418
+ </div>
419
+ <div>
420
+ <h3 class="text-xl font-bold dark:text-white" data-en="Podcast Producer" data-ar="منتج بودكاست">Podcast Producer</h3>
421
+ <p class="text-gray-600 dark:text-gray-400" data-en="Sports Talk Network • Mar 2022 - Aug 2022" data-ar="شبكة حديث الرياضة • مارس 2022 - أغسطس 2022">Sports Talk Network • Mar 2022 - Aug 2022</p>
422
+ </div>
423
+ </div>
424
+ <p class="mb-4 dark:text-gray-300" data-en="Produced weekly sports analysis podcast, handling recording, editing, and distribution. Grew audience by 75% during tenure through strategic content planning." data-ar="أنتجت بودكاست أسبوعي لتحليل الرياضة، تعاملت مع التسجيل والتحرير والتوزيع. زاد الجمهور بنسبة 75٪ خلال فترة عملي من خلال التخطيط الاستراتيجي للمحتوى.">Produced weekly sports analysis podcast, handling recording, editing, and distribution. Grew audience by 75% during tenure through strategic content planning.</p>
425
+ <a href="#" class="text-accent font-medium hover:underline" data-en="Listen to Episodes →" data-ar="استمع للحلقات ←">Listen to Episodes →</a>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ </section>
430
+
431
+ <!-- Skills & Tools -->
432
+ <section id="skills" class="py-20 bg-white dark:bg-gray-800">
433
+ <div class="max-w-6xl mx-auto px-4">
434
+ <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center" data-en="Skills & <span class='accent'>Expertise</span>" data-ar="المهارات و<span class='accent'>الخبرات</span>">Skills & <span class="accent">Expertise</span></h2>
435
+
436
+ <div class="grid md:grid-cols-2 gap-10">
437
+ <!-- Left Column - Communication Skills -->
438
+ <div>
439
+ <h3 class="text-2xl font-bold mb-6 flex items-center">
440
+ <div class="bg-accent text-white p-2 rounded-full mr-3">
441
+ <i class="fas fa-comments"></i>
442
+ </div>
443
+ <span class="dark:text-white" data-en="Communication" data-ar="التواصل">Communication</span>
444
+ </h3>
445
+ <div class="space-y-5">
446
+ <div>
447
+ <div class="flex justify-between mb-1">
448
+ <span class="dark:text-gray-300" data-en="Media Writing" data-ar="الكتابة الإعلامية">Media Writing</span>
449
+ <span class="dark:text-gray-300">95%</span>
450
+ </div>
451
+ <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2.5">
452
+ <div class="bg-accent h-2.5 rounded-full" style="width: 95%"></div>
453
+ </div>
454
+ </div>
455
+ <div>
456
+ <div class="flex justify-between mb-1">
457
+ <span class="dark:text-gray-300" data-en="Public Speaking" data-ar="التحدث أمام الجمهور">Public Speaking</span>
458
+ <span class="dark:text-gray-300">90%</span>
459
+ </div>
460
+ <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2.5">
461
+ <div class="bg-accent h-2.5 rounded-full" style="width: 90%"></div>
462
+ </div>
463
+ </div>
464
+ <div>
465
+ <div class="flex justify-between mb-1">
466
+ <span class="dark:text-gray-300" data-en="Interviewing" data-ar="إجراء المقابلات">Interviewing</span>
467
+ <span class="dark:text-gray-300">85%</span>
468
+ </div>
469
+ <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2.5">
470
+ <div class="bg-accent h-2.5 rounded-full" style="width: 85%"></div>
471
+ </div>
472
+ </div>
473
+ <div>
474
+ <div class="flex justify-between mb-1">
475
+ <span class="dark:text-gray-300" data-en="Content Strategy" data-ar="استراتيجية المحتوى">Content Strategy</span>
476
+ <span class="dark:text-gray-300">88%</span>
477
+ </div>
478
+ <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2.5">
479
+ <div class="bg-accent h-2.5 rounded-full" style="width: 88%"></div>
480
+ </div>
481
+ </div>
482
+ </div>
483
+ </div>
484
+
485
+ <!-- Right Column - Technical & Coaching Skills -->
486
+ <div>
487
+ <h3 class="text-2xl font-bold mb-6 flex items-center">
488
+ <div class="bg-accent text-white p-2 rounded-full mr-3">
489
+ <i class="fas fa-tools"></i>
490
+ </div>
491
+ <span class="dark:text-white" data-en="Technical & Coaching" data-ar="التقنية والتدريب">Technical & Coaching</span>
492
+ </h3>
493
+ <div class="space-y-5">
494
+ <div>
495
+ <div class="flex justify-between mb-1">
496
+ <span class="dark:text-gray-300" data-en="Video Editing" data-ar="تحرير الفيديو">Video Editing</span>
497
+ <span class="dark:text-gray-300">80%</span>
498
+ </div>
499
+ <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2.5">
500
+ <div class="bg-accent h-2.5 rounded-full" style="width: 80%"></div>
501
+ </div>
502
+ </div>
503
+ <div>
504
+ <div class="flex justify-between mb-1">
505
+ <span class="dark:text-gray-300" data-en="Team Leadership" data-ar="قيادة الفريق">Team Leadership</span>
506
+ <span class="dark:text-gray-300">93%</span>
507
+ </div>
508
+ <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2.5">
509
+ <div class="bg-accent h-2.5 rounded-full" style="width: 93%"></div>
510
+ </div>
511
+ </div>
512
+ <div>
513
+ <div class="flex justify-between mb-1">
514
+ <span class="dark:text-gray-300" data-en="Coaching Techniques" data-ar="تقنيات التدريب">Coaching Techniques</span>
515
+ <span class="dark:text-gray-300">92%</span>
516
+ </div>
517
+ <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2.5">
518
+ <div class="bg-accent h-2.5 rounded-full" style="width: 92%"></div>
519
+ </div>
520
+ </div>
521
+ <div>
522
+ <div class="flex justify-between mb-1">
523
+ <span class="dark:text-gray-300" data-en="Social Media Management" data-ar="إدارة وسائل التواصل">Social Media Management</span>
524
+ <span class="dark:text-gray-300">87%</span>
525
+ </div>
526
+ <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2.5">
527
+ <div class="bg-accent h-2.5 rounded-full" style="width: 87%"></div>
528
+ </div>
529
+ </div>
530
+ </div>
531
+ </div>
532
+ </div>
533
+
534
+ <!-- Tools Icons -->
535
+ <div class="mt-16">
536
+ <h3 class="text-2xl font-bold mb-8 text-center dark:text-white" data-en="Tools I <span class='accent'>Use</span>" data-ar="الأدوات التي <span class='accent'>أستخدمها</span>">Tools I <span class="accent">Use</span></h3>
537
+ <div class="flex flex-wrap justify-center gap-8">
538
+ <div class="flex flex-col items-center">
539
+ <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-full mb-2">
540
+ <i class="fab fa-adobe text-3xl accent"></i>
541
+ </div>
542
+ <span class="dark:text-gray-300" data-en="Adobe CC" data-ar="أدوبي">Adobe CC</span>
543
+ </div>
544
+ <div class="flex flex-col items-center">
545
+ <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-full mb-2">
546
+ <i class="fas fa-camera-retro text-3xl accent"></i>
547
+ </div>
548
+ <span class="dark:text-gray-300" data-en="Photography" data-ar="التصوير">Photography</span>
549
+ </div>
550
+ <div class="flex flex-col items-center">
551
+ <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-full mb-2">
552
+ <i class="fab fa-wordpress text-3xl accent"></i>
553
+ </div>
554
+ <span class="dark:text-gray-300" data-en="WordPress" data-ar="ووردبريس">WordPress</span>
555
+ </div>
556
+ <div class="flex flex-col items-center">
557
+ <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-full mb-2">
558
+ <i class="fas fa-podcast text-3xl accent"></i>
559
+ </div>
560
+ <span class="dark:text-gray-300" data-en="Podcast Tools" data-ar="أدوات البودكاست">Podcast Tools</span>
561
+ </div>
562
+ <div class="flex flex-col items-center">
563
+ <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-full mb-2">
564
+ <i class="fab fa-google text-3xl accent"></i>
565
+ </div>
566
+ <span class="dark:text-gray-300" data-en="Google Suite" data-ar="جوجل سويت">Google Suite</span>
567
+ </div>
568
+ </div>
569
+ </div>
570
+ </div>
571
+ </section>
572
+
573
+ <!-- Blog Section -->
574
+ <section id="blog" class="py-20 bg-gray-50 dark:bg-gray-900">
575
+ <div class="max-w-6xl mx-auto px-4">
576
+ <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center" data-en="Latest <span class='accent'>Articles</span>" data-ar="أحدث <span class='accent'>المقالات</span>">Latest <span class="accent">Articles</span></h2>
577
+
578
+ <div class="grid md:grid-cols-3 gap-8">
579
+ <!-- Blog Post 1 -->
580
+ <div class="bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md hover:shadow-lg transition">
581
+ <div class="h-48 bg-gray-300 overflow-hidden">
582
+ <img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Journalism in Digital Age" class="w-full h-full object-cover">
583
+ </div>
584
+ <div class="p-6">
585
+ <span class="text-sm text-gray-500 dark:text-gray-400" data-en="May 15, 2023" data-ar="15 مايو 2023">May 15, 2023</span>
586
+ <h3 class="text-xl font-bold my-2 dark:text-white" data-en="The Evolution of Sports Journalism in the Digital Age" data-ar="تطور الصحافة الرياضية في العصر الرقمي">The Evolution of Sports Journalism in the Digital Age</h3>
587
+ <p class="text-gray-600 dark:text-gray-300 mb-4" data-en="Exploring how digital platforms have transformed the way we consume and produce sports media content." data-ar="استكشاف كيف غيرت المنصات الرقمية طريقة استهلاكنا وإنتاجنا للمحتوى الإعلامي الرياضي.">Exploring how digital platforms have transformed the way we consume and produce sports media content.</p>
588
+ <a href="#" class="text-accent font-medium hover:underline" data-en="Read More →" data-ar="اقرأ المزيد ←">Read More →</a>
589
+ </div>
590
+ </div>
591
+
592
+ <!-- Blog Post 2 -->
593
+ <div class="bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md hover:shadow-lg transition">
594
+ <div class="h-48 bg-gray-300 overflow-hidden">
595
+ <img src="https://images.unsplash.com/photo-1547347298-4074fc3086f0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Volleyball Coaching" class="w-full h-full object-cover">
596
+ </div>
597
+ <div class="p-6">
598
+ <span class="text-sm text-gray-500 dark:text-gray-400" data-en="March 28, 2023" data-ar="28 مارس 2023">March 28, 2023</span>
599
+ <h3 class="text-xl font-bold my-2 dark:text-white" data-en="Coaching Philosophy: Building Team Chemistry On and Off the Court" data-ar="فلسفة التدريب: بناء كيمياء الفريق داخل وخارج الملعب">Coaching Philosophy: Building Team Chemistry On and Off the Court</h3>
600
+ <p class="text-gray-600 dark:text-gray-300 mb-4" data-en="My approach to developing cohesive teams that communicate effectively both during games and in everyday life." data-ar="نهجي في تطوير فرق متماسكة تتواصل بفعالية أثناء المباريات وفي الحياة اليومية.">My approach to developing cohesive teams that communicate effectively both during games and in everyday life.</p>
601
+ <a href="#" class="text-accent font-medium hover:underline" data-en="Read More →" data-ar="اقرأ المزيد ←">Read More →</a>
602
+ </div>
603
+ </div>
604
+
605
+ <!-- Blog Post 3 -->
606
+ <div class="bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md hover:shadow-lg transition">
607
+ <div class="h-48 bg-gray-300 overflow-hidden">
608
+ <img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="PR Strategies" class="w-full h-full object-cover">
609
+ </div>
610
+ <div class="p-6">
611
+ <span class="text-sm text-gray-500 dark:text-gray-400" data-en="February 10, 2023" data-ar="10 فبراير 2023">February 10, 2023</span>
612
+ <h3 class="text-xl font-bold my-2 dark:text-white" data-en="PR Strategies for Emerging Athletes: Building Your Personal Brand" data-ar="استراتيجيات العلاقات العامة للرياضيين الناشئين: بناء علامتك الشخصية">PR Strategies for Emerging Athletes: Building Your Personal Brand</h3>
613
+ <p class="text-gray-600 dark:text-gray-300 mb-4" data-en="Practical advice for young athletes looking to establish their media presence while focusing on performance." data-ar="نصائح عملية للرياضيين الشباب الذين يتطلعون إلى إنشاء حضور إعلامي مع التركيز على الأداء.">Practical advice for young athletes looking to establish their media presence while focusing on performance.</p>
614
+ <a href="#" class="text-accent font-medium hover:underline" data-en="Read More →" data-ar="اقرأ المزيد ←">Read More →</a>
615
+ </div>
616
+ </div>
617
+ </div>
618
+
619
+ <div class="text-center mt-12">
620
+ <a href="#" class="inline-block bg-accent hover:bg-blue-700 dark:hover:bg-red-800 text-white px-6 py-3 rounded-full font-medium transition" data-en="View All Articles" data-ar="عرض جميع المقالات">View All Articles</a>
621
+ </div>
622
+ </div>
623
+ </section>
624
+
625
+ <!-- Contact Section -->
626
+ <section id="contact" class="py-20 bg-white dark:bg-gray-800">
627
+ <div class="max-w-6xl mx-auto px-4">
628
+ <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center" data-en="Get In <span class='accent'>Touch</span>" data-ar="ابقى على <span class='accent'>اتصال</span>">Get In <span class="accent">Touch</span></h2>
629
+
630
+ <div class="flex flex-col md:flex-row gap-10">
631
+ <!-- Contact Info -->
632
+ <div class="md:w-1/3">
633
+ <div class="bg-gray-50 dark:bg-gray-700 p-8 rounded-xl">
634
+ <h3 class="text-2xl font-bold mb-6 dark:text-white" data-en="Contact Information" data-ar="معلومات الاتصال">Contact Information</h3>
635
+
636
+ <div class="space-y-6">
637
+ <div class="flex items-start">
638
+ <div class="bg-accent text-white p-2 rounded-full mr-4">
639
+ <i class="fas fa-envelope"></i>
640
+ </div>
641
+ <div>
642
+ <h4 class="font-bold dark:text-white" data-en="Email" data-ar="البريد الإلكتروني">Email</h4>
643
+ <a href="mailto:netai.business@gmail.com" class="text-gray-600 dark:text-gray-300 hover:text-accent transition">netai.business@gmail.com</a>
644
+ </div>
645
+ </div>
646
+
647
+ <div class="flex items-start">
648
+ <div class="bg-accent text-white p-2 rounded-full mr-4">
649
+ <i class="fas fa-phone"></i>
650
+ </div>
651
+ <div>
652
+ <h4 class="font-bold dark:text-white" data-en="Phone" data-ar="الهاتف">Phone</h4>
653
+ <a href="tel:+201090720414" class="text-gray-600 dark:text-gray-300 hover:text-accent transition">+20 1090720414</a>
654
+ </div>
655
+ </div>
656
+
657
+ <div class="flex items-start">
658
+ <div class="bg-accent text-white p-2 rounded-full mr-4">
659
+ <i class="fab fa-instagram"></i>
660
+ </div>
661
+ <div>
662
+ <h4 class="font-bold dark:text-white" data-en="Instagram" data-ar="إنستغرام">Instagram</h4>
663
+ <a href="https://www.instagram.com/hamama.lib/" target="_blank" class="text-gray-600 dark:text-gray-300 hover:text-accent transition">@hamama.lib</a>
664
+ </div>
665
+ </div>
666
+ </div>
667
+
668
+ <div class="mt-10">
669
+ <h4 class="font-bold mb-4 dark:text-white" data-en="Connect With Me" data-ar="تواصل معي">Connect With Me</h4>
670
+ <div class="flex space-x-4">
671
+ <a href="#" class="bg-gray-200 dark:bg-gray-600 hover:bg-accent hover:text-white p-3 rounded-full transition">
672
+ <i class="fab fa-linkedin-in"></i>
673
+ </a>
674
+ <a href="#" class="bg-gray-200 dark:bg-gray-600 hover:bg-accent hover:text-white p-3 rounded-full transition">
675
+ <i class="fab fa-twitter"></i>
676
+ </a>
677
+ <a href="#" class="bg-gray-200 dark:bg-gray-600 hover:bg-accent hover:text-white p-3 rounded-full transition">
678
+ <i class="fab fa-facebook-f"></i>
679
+ </a>
680
+ </div>
681
+ </div>
682
+ </div>
683
+ </div>
684
+
685
+ <!-- Contact Form -->
686
+ <div class="md:w-2/3">
687
+ <form class="bg-gray-50 dark:bg-gray-700 p-8 rounded-xl">
688
+ <div class="grid md:grid-cols-2 gap-6 mb-6">
689
+ <div>
690
+ <label for="name" class="block mb-2 font-medium dark:text-white" data-en="Your Name" data-ar="اسمك">Your Name</label>
691
+ <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent" placeholder="John Doe" data-en="John Doe" data-ar="محمد أحمد">
692
+ </div>
693
+ <div>
694
+ <label for="email" class="block mb-2 font-medium dark:text-white" data-en="Your Email" data-ar="بريدك الإلكتروني">Your Email</label>
695
+ <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent" placeholder="john@example.com" data-en="john@example.com" data-ar="example@email.com">
696
+ </div>
697
+ </div>
698
+ <div class="mb-6">
699
+ <label for="subject" class="block mb-2 font-medium dark:text-white" data-en="Subject" data-ar="الموضوع">Subject</label>
700
+ <input type="text" id="subject" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent" placeholder="How can I help you?" data-en="How can I help you?" data-ar="كيف يمكنني مساعدتك؟">
701
+ </div>
702
+ <div class="mb-6">
703
+ <label for="message" class="block mb-2 font-medium dark:text-white" data-en="Your Message" data-ar="رسالتك">Your Message</label>
704
+ <textarea id="message" rows="6" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent" placeholder="Write your message here..." data-en="Write your message here..." data-ar="اكتب رسالتك هنا..."></textarea>
705
+ </div>
706
+ <button type="submit" class="w-full bg-accent hover:bg-blue-700 dark:hover:bg-red-800 text-white px-6 py-3 rounded-lg font-medium transition" data-en="Send Message" data-ar="إرسال الرسالة">Send Message</button>
707
+ </form>
708
+ </div>
709
+ </div>
710
+ </div>
711
+ </section>
712
+
713
+ <!-- Footer -->
714
+ <footer class="bg-gray-900 dark:bg-gray-800 text-white py-12">
715
+ <div class="max-w-6xl mx-auto px-4">
716
+ <div class="flex flex-col md:flex-row justify-between items-center">
717
+ <div class="mb-6 md:mb-0">
718
+ <a href="#" class="text-2xl font-bold accent" data-en="Mohamed Abdullah" data-ar="محمد عبدالله">Mohamed Abdullah</a>
719
+ <p class="mt-2 text-gray-400" data-en="Mass Communication Student | Pro Volleyball Player & Coach" data-ar="طالب إعلام | لاعب كرة طائرة محترف ومدرب">Mass Communication Student | Pro Volleyball Player & Coach</p>
720
+ </div>
721
+ <div class="flex space-x-6">
722
+ <a href="#about" class="text-gray-400 hover:text-white transition" data-en="About" data-ar="عني">About</a>
723
+ <a href="#experience" class="text-gray-400 hover:text-white transition" data-en="Experience" data-ar="الخبرة">Experience</a>
724
+ <a href="#skills" class="text-gray-400 hover:text-white transition" data-en="Skills" data-ar="المهارات">Skills</a>
725
+ <a href="#blog" class="text-gray-400 hover:text-white transition" data-en="Blog" data-ar="المدونة">Blog</a>
726
+ <a href="#contact" class="text-gray-400 hover:text-white transition" data-en="Contact" data-ar="اتصل">Contact</a>
727
+ </div>
728
+ </div>
729
+ <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
730
+ <p class="text-gray-400 mb-4 md:mb-0" data-en="© 2023 Mohamed Abdullah. All rights reserved." data-ar="© 2023 محمد عبدالله. جميع الحقوق محفوظة.">© 2023 Mohamed Abdullah. All rights reserved.</p>
731
+ <div class="flex space-x-4">
732
+ <a href="#" class="text-gray-400 hover:text-white transition">
733
+ <i class="fab fa-linkedin-in"></i>
734
+ </a>
735
+ <a href="#" class="text-gray-400 hover:text-white transition">
736
+ <i class="fab fa-twitter"></i>
737
+ </a>
738
+ <a href="#" class="text-gray-400 hover:text-white transition">
739
+ <i class="fab fa-instagram"></i>
740
+ </a>
741
+ <a href="#" class="text-gray-400 hover:text-white transition">
742
+ <i class="fab fa-facebook-f"></i>
743
+ </a>
744
+ </div>
745
+ </div>
746
+ </div>
747
+ </footer>
748
+
749
+ <!-- Back to Top Button -->
750
+ <button id="backToTop" class="fixed bottom-8 right-8 bg-accent text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all">
751
+ <i class="fas fa-arrow-up"></i>
752
+ </button>
753
+
754
+ <script>
755
+ // Theme Toggle Functionality
756
+ const themeToggle = document.getElementById('themeToggle');
757
+ const mobileThemeToggle = document.getElementById('mobileThemeToggle');
758
+ const html = document.documentElement;
759
+
760
+ // Check for saved user preference or use system preference
761
+ const savedTheme = localStorage.getItem('theme') ||
762
+ (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
763
+
764
+ if (savedTheme === 'dark') {
765
+ html.classList.add('dark');
766
+ }
767
+
768
+ // Toggle theme function
769
+ function toggleTheme() {
770
+ html.classList.toggle('dark');
771
+ const isDark = html.classList.contains('dark');
772
+ localStorage.setItem('theme', isDark ? 'dark' : 'light');
773
+ }
774
+
775
+ // Add event listeners to both toggle buttons
776
+ themeToggle.addEventListener('click', toggleTheme);
777
+ mobileThemeToggle.addEventListener('click', toggleTheme);
778
+
779
+ // Language Switching Functionality
780
+ const languageBtn = document.getElementById('languageBtn');
781
+ const mobileLanguageBtn = document.getElementById('mobileLanguageBtn');
782
+ const languageDropdown = document.getElementById('languageDropdown');
783
+ const languageOptions = document.querySelectorAll('.language-option');
784
+
785
+ // Check for saved language preference or default to English
786
+ const savedLang = localStorage.getItem('lang') || 'en';
787
+ if (savedLang === 'ar') {
788
+ switchLanguage('ar');
789
+ }
790
+
791
+ // Toggle language dropdown
792
+ languageBtn.addEventListener('click', (e) => {
793
+ e.stopPropagation();
794
+ languageDropdown.classList.toggle('show');
795
+ });
796
+
797
+ // Close dropdown when clicking outside
798
+ document.addEventListener('click', () => {
799
+ languageDropdown.classList.remove('show');
800
+ });
801
+
802
+ // Handle language selection
803
+ languageOptions.forEach(option => {
804
+ option.addEventListener('click', (e) => {
805
+ e.stopPropagation();
806
+ const lang = option.dataset.lang;
807
+ switchLanguage(lang);
808
+ languageDropdown.classList.remove('show');
809
+ });
810
+ });
811
+
812
+ // Mobile language switcher
813
+ mobileLanguageBtn.addEventListener('click', () => {
814
+ const currentLang = document.documentElement.lang;
815
+ const newLang = currentLang === 'en' ? 'ar' : 'en';
816
+ switchLanguage(newLang);
817
+ });
818
+
819
+ // Language switching function
820
+ function switchLanguage(lang) {
821
+ // Update HTML lang attribute and direction
822
+ document.documentElement.lang = lang;
823
+ if (lang === 'ar') {
824
+ document.documentElement.dir = 'rtl';
825
+ document.documentElement.classList.add('rtl');
826
+ document.documentElement.classList.add('arabic');
827
+ } else {
828
+ document.documentElement.dir = 'ltr';
829
+ document.documentElement.classList.remove('rtl');
830
+ document.documentElement.classList.remove('arabic');
831
+ }
832
+
833
+ // Update all elements with data attributes
834
+ document.querySelectorAll('[data-en], [data-ar]').forEach(element => {
835
+ if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
836
+ element.placeholder = element.getAttribute(`data-${lang}`);
837
+ } else {
838
+ element.textContent = element.getAttribute(`data-${lang}`);
839
+ }
840
+ });
841
+
842
+ // Update language button text
843
+ if (languageBtn) {
844
+ const btnText = languageBtn.querySelector('span');
845
+ btnText.textContent = lang === 'en' ? 'English' : 'العربية';
846
+ }
847
+ if (mobileLanguageBtn) {
848
+ const mobileBtnText = mobileLanguageBtn.querySelector('span');
849
+ mobileBtnText.textContent = lang === 'en' ? 'EN' : 'AR';
850
+ }
851
+
852
+ // Save preference
853
+ localStorage.setItem('lang', lang);
854
+ }
855
+
856
+ // Back to Top Button
857
+ const backToTopButton = document.getElementById('backToTop');
858
+
859
+ window.addEventListener('scroll', () => {
860
+ if (window.pageYOffset > 300) {
861
+ backToTopButton.classList.remove('opacity-0', 'invisible');
862
+ backToTopButton.classList.add('opacity-100', 'visible');
863
+ } else {
864
+ backToTopButton.classList.remove('opacity-100', 'visible');
865
+ backToTopButton.classList.add('opacity-0', 'invisible');
866
+ }
867
+ });
868
+
869
+ backToTopButton.addEventListener('click', () => {
870
+ window.scrollTo({
871
+ top: 0,
872
+ behavior: 'smooth'
873
+ });
874
+ });
875
+
876
+ // Mobile Menu Toggle (placeholder - would need more implementation)
877
+ document.querySelector('.md\\:hidden button').addEventListener('click', () => {
878
+ alert('Mobile menu would open here in a full implementation');
879
+ });
880
+
881
+ // Smooth scrolling for anchor links
882
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
883
+ anchor.addEventListener('click', function (e) {
884
+ e.preventDefault();
885
+
886
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
887
+ behavior: 'smooth'
888
+ });
889
+ });
890
+ });
891
+ </script>
892
+ <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=MohamedNetai/mohamed-abdullah" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
893
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ now add an option to change the language of the site, i need only english and arabic, and in the arabic version translate the whole site to arabic and change the lay to fit the Arabic language making it from right to left while keeping the English version from left to right