JavaWithZaid.github.io/about.html at main · ZaidAbuAlshaar/JavaWithZaid.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>عن زيد أبو الشعر | About Zaid Abu Alshaar - Zaid.java</title>
    <meta name="description" content="تعرف على زيد أبو الشعر (Zaid Abu Alshaar)، طالب علوم حاسوب ومطور AR/VR/AI، مؤسس منصة Zaid.java لتعليم لغة جافا. Learn about Zaid Abu Alshaar.">
    <meta name="author" content="Zaid Abu Alshaar">
    <link rel="canonical" href="https://java.zaiddev.com/about.html">

    <!-- Open Graph -->
    <meta property="og:type" content="profile">
    <meta property="og:title" content="عن زيد أبو الشعر | About Zaid Abu Alshaar">
    <meta property="og:description" content="طالب علوم حاسوب ومطور AR/VR/AI، مؤسس منصة Zaid.java لتعليم لغة جافا.">
    <meta property="og:url" content="https://java.zaiddev.com/about.html">
    <meta property="og:image" content="https://java.zaiddev.com/assets/img/og-image.jpg">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:image:alt" content="Zaid Abu Alshaar - زيد أبو الشعر">
    <meta property="og:site_name" content="Zaid.java">
    <meta property="og:locale" content="ar_JO">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="عن زيد أبو الشعر | About Zaid Abu Alshaar">
    <meta name="twitter:description" content="طالب علوم حاسوب ومطور AR/VR/AI، مؤسس منصة Zaid.java لتعليم لغة جافا.">
    <meta name="twitter:image" content="https://java.zaiddev.com/assets/img/og-image.jpg">
    <meta name="twitter:image:alt" content="Zaid Abu Alshaar - زيد أبو الشعر">

    <!-- Favicon & Icons -->
    <link rel="icon" href="/assets/icons/favicon.svg" type="image/svg+xml">
    <link rel="icon" href="/assets/icons/favicon-32x32.png" type="image/png" sizes="32x32">
    <link rel="icon" href="/assets/icons/favicon-48x48.png" type="image/png" sizes="48x48">
    <link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon.png" sizes="180x180">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="manifest" href="/site.webmanifest">
    <meta name="theme-color" content="#64ffda">

    <!-- Fonts & Styles -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="/css/style.css">

    <!-- Structured Data -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebPage",
      "name": "عن زيد أبو الشعر | About Zaid Abu Alshaar",
      "url": "https://java.zaiddev.com/about.html",
      "description": "تعرف على زيد أبو الشعر، مطور ومعلم برمجة جافا",
      "inLanguage": "ar",
      "isPartOf": {
        "@type": "WebSite",
        "url": "https://java.zaiddev.com/"
      },
      "about": {
        "@type": "Person",
        "name": "Zaid Abu Alshaar",
        "alternateName": ["زيد أبو الشعر", "زيد ابو الشعر", "Zaid Abu Al Shaar", "Zaid Alshaar", "Zaid AbuAlshaar"],
        "url": "https://java.zaiddev.com/",
        "image": "https://java.zaiddev.com/assets/img/zaid-abu-alshaar.jpg",
        "jobTitle": "Computer Science Student & AR/VR/AI Developer",
        "sameAs": [
          "https://www.instagram.com/Zaid_10_7",
          "https://t.me/Zaid_10_7"
        ]
      }
    }
    </script>
</head>
<body class="bg-primary-dark" style="font-family: 'Tajawal', sans-serif; color: var(--text-primary);">
    <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:bg-accent-color focus:text-primary-dark focus:px-4 focus:py-2 focus:rounded focus:z-[999]">Skip to content</a>

    <header class="fixed top-0 left-0 w-full z-50" role="banner" style="background: rgba(10, 25, 47, 0.9); backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(0,0,0,0.3); border-bottom: 1px solid rgba(100,255,218,0.1);">
        <nav class="container mx-auto px-4 py-3 flex items-center justify-between" aria-label="Main navigation">
            <a href="/" class="text-2xl font-bold" style="color: var(--accent-color);">
                Zaid.<span style="color: #f89820; text-shadow: 0 0 10px rgba(248,152,32,0.5);">java</span>
            </a>
            <div class="flex items-center space-x-6">
                <a href="/" class="nav-link text-white hover:text-accent-color">الرئيسية</a>
                <a href="/about.html" class="nav-link" style="color: var(--accent-color);">عني</a>
            </div>
        </nav>
    </header>

    <main id="main-content" class="pt-24 pb-16">
        <div class="container mx-auto px-4 max-w-4xl">

            <section class="text-center mb-16">
                <div class="mx-auto mb-8" style="width: 200px; height: 200px; border-radius: 50%; overflow: hidden; border: 3px solid var(--accent-color); box-shadow: 0 0 30px rgba(100,255,218,0.3);">
                    <img src="/assets/img/zaid-abu-alshaar.jpg" alt="Zaid Abu Alshaar - زيد أبو الشعر" width="200" height="200" style="width:100%;height:100%;object-fit:cover;">
                </div>
                <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
                    زيد أبو الشعر
                    <br>
                    <span style="color: var(--accent-color);">Zaid Abu Alshaar</span>
                </h1>
                <p class="text-xl" style="color: var(--text-secondary);">طالب علوم حاسوب | مطور AR/VR/AI | معلم جافا</p>
                <p class="text-lg" style="color: var(--text-secondary);">Computer Science Student | AR/VR/AI Developer | Java Instructor</p>
            </section>

            <section class="mb-16" style="background: linear-gradient(145deg, var(--primary-medium), var(--primary-light)); border-radius: 16px; padding: 2rem; border: 1px solid rgba(100,255,218,0.1);">
                <h2 class="text-2xl font-bold mb-6" style="color: var(--accent-color);"><i class="fas fa-user ml-2"></i> نبذة عني | About Me</h2>
                <p class="mb-4 leading-relaxed" style="color: var(--text-secondary);">
                    أنا زيد أبو الشعر، طالب علوم حاسوب متحمس ومطور AR/VR/AI (الأول على دفعتي مع مرتبة الشرف) في جامعة البتراء، عمان، الأردن. أسست منصة <strong style="color: var(--accent-color);">Zaid.java</strong> لتعليم لغة جافا بطريقة تفاعلية وممتعة.
                </p>
                <p class="mb-4 leading-relaxed" style="color: var(--text-secondary);">
                    I am Zaid Abu Alshaar, a passionate Computer Science student and AR/VR/AI developer (first in my class with honors) at the University of Petra, Amman, Jordan. I created the <strong style="color: var(--accent-color);">Zaid.java</strong> platform to teach Java programming interactively.
                </p>
                <p class="leading-relaxed" style="color: var(--text-secondary);">
                    بارع في Java, C#, JavaScript, Python, HTML, CSS, PHP. ذو خبرة في تطبيقات الرعاية الصحية بتقنية XR، ومشاريع الذكاء الاصطناعي. مطور عضوية MD في فرع طلاب IEEE بجامعة البتراء، وعضو مؤسس لنادي الواقع الافتراضي والألعاب.
                </p>
            </section>

            <section class="mb-16">
                <h2 class="text-2xl font-bold mb-8 text-center text-white"><i class="fas fa-code ml-2"></i> المهارات | Skills</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div style="background: linear-gradient(145deg, var(--primary-medium), var(--primary-light)); border-radius: 16px; padding: 1.5rem; border: 1px solid rgba(100,255,218,0.1);">
                        <h3 class="text-xl font-bold mb-3" style="color: var(--accent-color);"><i class="fas fa-laptop-code ml-2"></i> البرمجة</h3>
                        <ul style="color: var(--text-secondary);" class="space-y-1">
                            <li>Java - مستوى متقدم</li>
                            <li>C# - مستوى متقدم</li>
                            <li>JavaScript - مستوى متقدم</li>
                            <li>Python - مستوى متقدم</li>
                        </ul>
                    </div>
                    <div style="background: linear-gradient(145deg, var(--primary-medium), var(--primary-light)); border-radius: 16px; padding: 1.5rem; border: 1px solid rgba(100,255,218,0.1);">
                        <h3 class="text-xl font-bold mb-3" style="color: var(--accent-color);"><i class="fas fa-vr-cardboard ml-2"></i> التقنيات</h3>
                        <ul style="color: var(--text-secondary);" class="space-y-1">
                            <li>AR/VR Development</li>
                            <li>AI & Machine Learning</li>
                            <li>Web Development</li>
                            <li>XR Healthcare Applications</li>
                        </ul>
                    </div>
                </div>
            </section>

            <section class="mb-16">
                <h2 class="text-2xl font-bold mb-8 text-center text-white"><i class="fas fa-trophy ml-2"></i> الإنجازات | Achievements</h2>
                <div style="background: linear-gradient(145deg, var(--primary-medium), var(--primary-light)); border-radius: 16px; padding: 2rem; border: 1px solid rgba(100,255,218,0.1);">
                    <ul style="color: var(--text-secondary);" class="space-y-3">
                        <li><i class="fas fa-medal ml-2" style="color: var(--accent-color);"></i> الأول على الدفعة في جامعة البتراء مع مرتبة الشرف</li>
                        <li><i class="fas fa-users ml-2" style="color: var(--accent-color);"></i> مؤسس نادي الواقع الافتراضي والألعاب بجامعة البتراء</li>
                        <li><i class="fas fa-microchip ml-2" style="color: var(--accent-color);"></i> مطور عضوية MD في فرع طلاب IEEE بجامعة البتراء</li>
                        <li><i class="fas fa-chalkboard-teacher ml-2" style="color: var(--accent-color);"></i> مساهم رئيسي في فعاليات IEEE</li>
                    </ul>
                </div>
            </section>

            <section class="mb-16">
                <h2 class="text-2xl font-bold mb-8 text-center text-white"><i class="fas fa-project-diagram ml-2"></i> مشاريعي | Projects</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <a href="/" style="background: linear-gradient(145deg, var(--primary-medium), var(--primary-light)); border-radius: 16px; padding: 1.5rem; border: 1px solid rgba(100,255,218,0.1); display: block; text-decoration: none; transition: transform 0.3s;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='none'">
                        <h3 class="text-xl font-bold mb-2" style="color: var(--accent-color);">Zaid.java</h3>
                        <p style="color: var(--text-secondary);">منصة تعليمية تفاعلية لتعلم لغة جافا من الصفر إلى الاحتراف</p>
                    </a>
                    <a href="https://python.zaiddev.com/" style="background: linear-gradient(145deg, var(--primary-medium), var(--primary-light)); border-radius: 16px; padding: 1.5rem; border: 1px solid rgba(100,255,218,0.1); display: block; text-decoration: none; transition: transform 0.3s;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='none'">
                        <h3 class="text-xl font-bold mb-2" style="color: var(--accent-color);">Zaid.python</h3>
                        <p style="color: var(--text-secondary);">منصة تعليمية لتعلم لغة البايثون</p>
                    </a>
                </div>
            </section>

            <section class="text-center">
                <h2 class="text-2xl font-bold mb-6 text-white"><i class="fas fa-share-alt ml-2"></i> تواصل معي | Contact</h2>
                <div class="flex justify-center flex-wrap gap-4">
                    <a href="https://www.instagram.com/Zaid_10_7" target="_blank" rel="noopener noreferrer" class="social-btn instagram-btn" aria-label="Instagram">
                        <i class="fab fa-instagram"></i> Instagram
                    </a>
                    <a href="https://wa.me/962799569573" target="_blank" rel="noopener noreferrer" class="social-btn whatsapp-btn" aria-label="WhatsApp">
                        <i class="fab fa-whatsapp"></i> WhatsApp
                    </a>
                    <a href="https://t.me/Zaid_10_7" target="_blank" rel="noopener noreferrer" style="background: #0088cc; color: white; display: inline-flex; align-items: center; padding: 12px 25px; border-radius: 50px; font-weight: bold; transition: all 0.3s;" aria-label="Telegram">
                        <i class="fab fa-telegram" style="margin-left:10px;"></i> Telegram
                    </a>
                </div>
            </section>

        </div>
    </main>

    <footer class="py-8" role="contentinfo" style="background: rgba(10,25,47,0.8); border-top: 1px solid rgba(100,255,218,0.1);">
        <div class="container mx-auto px-4 text-center" style="color: var(--text-secondary);">
            <p class="mb-2">
                <a href="/" style="color: var(--accent-color); text-decoration: none;">Zaid.<span style="color: #f89820;">java</span></a>
            </p>
            <p>&copy; 2025 زيد أبو الشعر (Zaid Abu Alshaar). جميع الحقوق محفوظة.</p>
        </div>
    </footer>
</body>
</html>