Sleek Glassmorphism Developer Profile & Portfolio (RTL & Light/Dark Theme)
نموذج بروفايل ومعرض أعمال احترافي ومبتكر للمطورين والمصممين. يتميز بتصميم زجاجي عصري (Glassmorphism) مع ألوان نيون متدرجة، ودعم كامل للغة العربية (RTL). يحتوي الكود على تبويبات تفاعلية (نبذة عني، المهارات، المشاريع، الخبرات، والتواصل)، بالإضافة إلى أزرار التفاعل مثل زر الإعجاب الفوري، نسخ بيانات الاتصال، ومغيّر ثيم الألوان. تم إنشاؤه باستخدام HTML، CSS (Tailwind)، و JavaScript نقي بدون مكتبات ثقيلة وخفيف الوزن تماماً!
مقطع الكود
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>الملف الشخصي الاحترافي | أحمد علي - Alex Morgan</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts: Cairo -->
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800;900&display=swap" rel="stylesheet">
<!-- FontAwesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
brand: {
cyan: '#00f2fe',
purple: '#7928ca',
blue: '#4facfe',
dark: '#0b0f19',
card: 'rgba(17, 24, 39, 0.6)',
border: 'rgba(255, 255, 255, 0.1)'
}
},
fontFamily: {
cairo: ['Cairo', 'sans-serif']
}
}
}
}
</script>
<style>
body {
font-family: 'Cairo', sans-serif;
background-color: #080b11;
color: #f3f4f6;
overflow-x: hidden;
}
/* Glassmorphism Effect */
.glass-panel {
background: rgba(15, 23, 42, 0.65);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.glass-card {
background: rgba(30, 41, 59, 0.4);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-card:hover {
border-color: rgba(0, 242, 254, 0.4);
transform: translateY(-4px);
box-shadow: 0 12px 30px -10px rgba(0, 242, 254, 0.15);
}
/* Neon Glow Utility */
.neon-glow-cyan {
box-shadow: 0 0 20px rgba(0, 242, 254, 0.35);
}
.neon-glow-purple {
box-shadow: 0 0 20px rgba(121, 40, 202, 0.35);
}
.text-gradient {
background: linear-gradient(135deg, #00f2fe 0%, #4facfe 50%, #00c6ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-gradient-purple {
background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #080b11;
}
::-webkit-scrollbar-thumb {
background: #1e293b;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #00f2fe;
}
/* Active Tab Styling */
.tab-btn.active {
color: #00f2fe;
border-bottom: 2px solid #00f2fe;
background: rgba(0, 242, 254, 0.05);
}
/* Toast Animation */
@keyframes slideIn {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.toast-animate {
animation: slideIn 0.3s ease forwards;
}
</style>
</head>
<body class="min-h-screen relative pb-16 selection:bg-cyan-500 selection:text-black">
<!-- Background Animated Blobs -->
<div class="fixed inset-0 overflow-hidden pointer-events-none -z-10">
<div class="absolute -top-40 -right-40 w-96 h-96 bg-cyan-500/10 rounded-full blur-3xl"></div>
<div class="absolute top-1/3 -left-40 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
<div class="absolute -bottom-40 right-1/3 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div>
</div>
<!-- Notification Toast -->
<div id="toast" class="fixed bottom-6 left-6 z-50 hidden glass-panel border border-cyan-500/30 text-cyan-400 px-5 py-3 rounded-xl shadow-2xl flex items-center gap-3 toast-animate">
<i class="fa-solid fa-circle-check text-xl"></i>
<span id="toast-message" class="text-sm font-semibold">تم النقر بنجاح</span>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-6">
<!-- Top Navigation Bar -->
<header class="glass-panel rounded-2xl px-6 py-4 mb-6 flex justify-between items-center relative z-20">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-cyan-500 to-purple-600 flex items-center justify-center font-bold text-xl text-white shadow-lg">
A
</div>
<span class="font-bold text-lg tracking-wide hidden sm:inline-block">أحمد علي <span class="text-xs text-gray-400 font-normal">| DevPortfolio</span></span>
</div>
<div class="flex items-center gap-3">
<!-- Theme Accent Switcher -->
<div class="flex items-center bg-slate-800/80 p-1.5 rounded-xl border border-white/5">
<button onclick="setThemeAccent('cyan')" class="w-5 h-5 rounded-full bg-cyan-400 hover:scale-110 transition-transform mr-1" title="نمط السماوي"></button>
<button onclick="setThemeAccent('purple')" class="w-5 h-5 rounded-full bg-purple-500 hover:scale-110 transition-transform mr-1" title="نمط البنفسجي"></button>
<button onclick="setThemeAccent('emerald')" class="w-5 h-5 rounded-full bg-emerald-400 hover:scale-110 transition-transform" title="نمط الأخضر"></button>
</div>
<!-- Like Profile Button -->
<button id="like-btn" onclick="toggleLike()" class="glass-card hover:bg-white/5 px-4 py-2 rounded-xl text-sm font-semibold flex items-center gap-2 text-rose-400 transition-all">
<i id="like-icon" class="fa-regular fa-heart text-base"></i>
<span id="like-count">1,248</span>
</button>
</div>
</header>
<!-- Profile Header Container -->
<section class="glass-panel rounded-3xl overflow-hidden shadow-2xl border border-white/10 mb-8 relative">
<!-- Cover Banner with Animated Gradient -->
<div class="h-64 sm:h-80 w-full relative bg-gradient-to-r from-cyan-900 via-slate-900 to-purple-900 overflow-hidden">
<div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-cyan-500/20 via-transparent to-transparent"></div>
<!-- Banner Grid Graphic Overlay -->
<div class="absolute inset-0 opacity-20 bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:16px_16px]"></div>
<!-- Quick Action Floating Buttons -->
<div class="absolute top-6 left-6 flex gap-3 z-10">
<button onclick="copyShareLink()" class="glass-card hover:bg-white/10 text-white p-3 rounded-2xl flex items-center justify-center transition" title="مشاركة الملف">
<i class="fa-solid fa-share-nodes"></i>
</button>
<button onclick="showToast('تمت إضافة المطور إلى المفضلة')" class="glass-card hover:bg-white/10 text-white p-3 rounded-2xl flex items-center justify-center transition" title="حفظ">
<i class="fa-regular fa-bookmark"></i>
</button>
</div>
</div>
<!-- Profile Info Section -->
<div class="px-6 sm:px-10 pb-8 relative">
<div class="flex flex-col md:flex-row md:items-end justify-between gap-6 -mt-20 sm:-mt-24 mb-6">
<!-- Avatar & Status -->
<div class="flex flex-col sm:flex-row items-center sm:items-end gap-6 text-center sm:text-right">
<div class="relative group">
<div class="w-36 h-36 sm:w-44 sm:h-44 rounded-3xl overflow-hidden p-1 bg-gradient-to-tr from-cyan-400 via-blue-500 to-purple-600 shadow-2xl">
<img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=500&q=80"
alt="أحمد علي"
class="w-full h-full object-cover rounded-[22px] group-hover:scale-105 transition duration-500"
onerror="this.src='https://placehold.co/300x300/1e293b/00f2fe?text=Alex+Morgan'">
</div>
<!-- Online Status Indicator -->
<span class="absolute bottom-3 left-3 w-5 h-5 bg-emerald-500 border-4 border-slate-900 rounded-full neon-glow-cyan" title="متاح للعمل"></span>
</div>
<!-- Name & Titles -->
<div class="mb-2">
<div class="flex items-center justify-center sm:justify-start gap-2">
<h1 class="text-2xl sm:text-3xl font-black text-white">المهندس / أحمد علي</h1>
<i class="fa-solid fa-circle-check text-cyan-400 text-lg" title="حساب موثق"></i>
</div>
<p class="text-cyan-400 font-medium text-base mt-1">Senior Full-Stack Developer & UI/UX Designer</p>
<p class="text-gray-400 text-sm mt-1 flex items-center justify-center sm:justify-start gap-2">
<i class="fa-solid fa-location-dot text-rose-400"></i> دبي، الإمارات العربية المتحدة
<span class="inline-block w-1 h-1 rounded-full bg-gray-500"></span>
<span class="text-emerald-400 font-medium">متاح للمشاريع الفريلانس</span>
</p>
</div>
</div>
<!-- Action Buttons -->
<div class="flex items-center justify-center gap-3 w-full md:w-auto">
<button onclick="switchTab('contact')" class="flex-1 md:flex-initial px-6 py-3 rounded-xl bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 text-slate-950 font-bold shadow-lg shadow-cyan-500/25 transition-all transform active:scale-95 flex items-center justify-center gap-2">
<i class="fa-solid fa-paper-plane"></i>
<span>تواصل معي</span>
</button>
<button id="follow-btn" onclick="toggleFollow()" class="flex-1 md:flex-initial px-6 py-3 rounded-xl glass-card hover:bg-white/10 text-white font-semibold transition border border-white/10 flex items-center justify-center gap-2">
<i id="follow-icon" class="fa-solid fa-user-plus"></i>
<span id="follow-text">متابعة</span>
</button>
</div>
</div>
<!-- Quick Stats Grid -->
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 pt-6 border-t border-white/10">
<div class="glass-card p-4 rounded-2xl text-center">
<span class="block text-2xl sm:text-3xl font-black text-white">48+</span>
<span class="text-xs text-gray-400 font-semibold mt-1 block">مشروع مكتمل</span>
</div>
<div class="glass-card p-4 rounded-2xl text-center">
<span class="block text-2xl sm:text-3xl font-black text-cyan-400" id="followers-count">12.4K</span>
<span class="text-xs text-gray-400 font-semibold mt-1 block">متابع</span>
</div>
<div class="glass-card p-4 rounded-2xl text-center">
<span class="block text-2xl sm:text-3xl font-black text-white">850</span>
<span class="text-xs text-gray-400 font-semibold mt-1 block">يطالعهم</span>
</div>
<div class="glass-card p-4 rounded-2xl text-center">
<span class="block text-2xl sm:text-3xl font-black text-amber-400 flex items-center justify-center gap-1">
4.9 <i class="fa-solid fa-star text-sm"></i>
</span>
<span class="text-xs text-gray-400 font-semibold mt-1 block">التقييم العام (120+)</span>
</div>
</div>
</div>
<!-- Navigation Tabs Bar -->
<div class="flex overflow-x-auto no-scrollbar border-t border-white/10 bg-slate-900/40 px-6">
<button onclick="switchTab('about')" id="tab-about" class="tab-btn active px-6 py-4 text-sm font-bold whitespace-nowrap transition flex items-center gap-2 text-gray-300">
<i class="fa-solid fa-user"></i> نبذة عني
</button>
<button onclick="switchTab('skills')" id="tab-skills" class="tab-btn px-6 py-4 text-sm font-bold whitespace-nowrap transition flex items-center gap-2 text-gray-300">
<i class="fa-solid fa-code"></i> المهارات والتقنيات
</button>
<button onclick="switchTab('projects')" id="tab-projects" class="tab-btn px-6 py-4 text-sm font-bold whitespace-nowrap transition flex items-center gap-2 text-gray-300">
<i class="fa-solid fa-laptop-code"></i> المشاريع المميزة
</button>
<button onclick="switchTab('experience')" id="tab-experience" class="tab-btn px-6 py-4 text-sm font-bold whitespace-nowrap transition flex items-center gap-2 text-gray-300">
<i class="fa-solid fa-briefcase"></i> الخبرات العملية
</button>
<button onclick="switchTab('contact')" id="tab-contact" class="tab-btn px-6 py-4 text-sm font-bold whitespace-nowrap transition flex items-center gap-2 text-gray-300">
<i class="fa-solid fa-envelope"></i> التواصل
</button>
</div>
</section>
<!-- MAIN CONTENT SECTIONS -->
<!-- TAB 1: ABOUT SECTION -->
<div id="content-about" class="tab-content grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Main Bio -->
<div class="lg:col-span-2 space-y-6">
<div class="glass-panel p-6 sm:p-8 rounded-3xl">
<h3 class="text-xl font-bold text-white mb-4 flex items-center gap-3">
<i class="fa-solid fa-quote-right text-cyan-400"></i>
سيرة ذاتية ملهمة
</h3>
<p class="text-gray-300 leading-relaxed text-base">
مطور ويب متكامل (Full-Stack) ومصمم واجهات واختبار تجربة المستخدم (UI/UX) مع خبرة تتجاوز الـ 7 سنوات في بناء التطبيقات والأنظمة البرمجية الحديثة عالية الأداء. شغوف بتحويل الأفكار المعقدة إلى منتجات رقمية سهلة الاستخدام وبأعلى معايير الجودة والتصميم.
</p>
<p class="text-gray-300 leading-relaxed text-base mt-4">
عملت مع العديد من الشركات الناشئة والمؤسسات الكبرى في الشرق الأوسط لتطوير لوحات تحكم تخصصية، منصات تجارة إلكترونية، وتطبيقات ويب تفاعلية تعتمد على أحدث التقنيات مثل React, Node.js, و Python.
</p>
<!-- Highlights Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-6">
<div class="glass-card p-4 rounded-2xl flex items-start gap-4">
<div class="p-3 bg-cyan-500/10 text-cyan-400 rounded-xl text-xl">
<i class="fa-solid fa-rocket"></i>
</div>
<div>
<h4 class="font-bold text-white text-sm">سرعة التنفيذ</h4>
<p class="text-xs text-gray-400 mt-1">تسليم المشاريع في المواعيد المحمية وبأعلى أداء SEO & Performance.</p>
</div>
</div>
<div class="glass-card p-4 rounded-2xl flex items-start gap-4">
<div class="p-3 bg-purple-500/10 text-purple-400 rounded-xl text-xl">
<i class="fa-solid fa-wand-magic-sparkles"></i>
</div>
<div>
<h4 class="font-bold text-white text-sm">تصميم عصري</h4>
<p class="text-xs text-gray-400 mt-1">اعتماد أحدث التوجهات البصرية كـ Glassmorphism والتصميم التكيفي.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Side Personal Info -->
<div class="space-y-6">
<div class="glass-panel p-6 sm:p-8 rounded-3xl">
<h3 class="text-xl font-bold text-white mb-6 border-b border-white/10 pb-3">المعلومات الشخصية</h3>
<ul class="space-y-4 text-sm">
<div class="flex justify-between items-center pb-3 border-b border-white/5">
<span class="text-gray-400">البريد الإلكتروني</span>
<span class="text-white font-medium">alex@domain.com</span>
</div>
<div class="flex justify-between items-center pb-3 border-b border-white/5">
<span class="text-gray-400">الهاتف</span>
<span class="text-white font-medium" dir="ltr">+971 50 123 4567</span>
</div>
<div class="flex justify-between items-center pb-3 border-b border-white/5">
<span class="text-gray-400">حالة التوفر</span>
<span class="text-emerald-400 font-bold bg-emerald-500/10 px-3 py-1 rounded-full text-xs">متاح فوراً</span>
</div>
<div class="flex justify-between items-center pb-3 border-b border-white/5">
<span class="text-gray-400">اللغات</span>
<span class="text-white font-medium">العربية (الأصلية)، الإنجليزية (طلاقة)</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-400">التعليم</span>
<span class="text-white font-medium">بكالوريوس علوم الحاسوب</span>
</div>
</ul>
<div class="mt-6 pt-4 border-t border-white/10">
<span class="block text-xs text-gray-400 mb-3">حسابات التواصل الاجتماعي</span>
<div class="flex gap-3">
<a href="#" class="w-10 h-10 rounded-xl glass-card flex items-center justify-center text-cyan-400 hover:bg-cyan-500 hover:text-black transition"><i class="fa-brands fa-github text-lg"></i></a>
<a href="#" class="w-10 h-10 rounded-xl glass-card flex items-center justify-center text-blue-400 hover:bg-blue-500 hover:text-black transition"><i class="fa-brands fa-linkedin-in text-lg"></i></a>
<a href="#" class="w-10 h-10 rounded-xl glass-card flex items-center justify-center text-sky-400 hover:bg-sky-500 hover:text-black transition"><i class="fa-brands fa-twitter text-lg"></i></a>
<a href="#" class="w-10 h-10 rounded-xl glass-card flex items-center justify-center text-rose-400 hover:bg-rose-500 hover:text-black transition"><i class="fa-brands fa-dribbble text-lg"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- TAB 2: SKILLS SECTION -->
<div id="content-skills" class="tab-content hidden space-y-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Frontend Skills -->
<div class="glass-panel p-6 rounded-3xl space-y-5">
<div class="flex items-center gap-3 border-b border-white/10 pb-4">
<i class="fa-solid fa-code text-2xl text-cyan-400"></i>
<h3 class="text-lg font-bold text-white">تطوير الواجهات (Frontend)</h3>
</div>
<div class="space-y-4">
<div>
<div class="flex justify-between text-sm mb-1">
<span class="text-gray-300 font-medium">React.js / Next.js</span>
<span class="text-cyan-400 font-bold">95%</span>
</div>
<div class="w-full h-2.5 bg-slate-800 rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full" style="width: 95%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span class="text-gray-300 font-medium">Tailwind CSS / HTML5 / CSS3</span>
<span class="text-cyan-400 font-bold">98%</span>
</div>
<div class="w-full h-2.5 bg-slate-800 rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full" style="width: 98%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span class="text-gray-300 font-medium">TypeScript</span>
<span class="text-cyan-400 font-bold">88%</span>
</div>
<div class="w-full h-2.5 bg-slate-800 rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full" style="width: 88%"></div>
</div>
</div>
</div>
</div>
<!-- Backend Skills -->
<div class="glass-panel p-6 rounded-3xl space-y-5">
<div class="flex items-center gap-3 border-b border-white/10 pb-4">
<i class="fa-solid fa-server text-2xl text-purple-400"></i>
<h3 class="text-lg font-bold text-white">الخلفية وقواعد البيانات (Backend)</h3>
</div>
<div class="space-y-4">
<div>
<div class="flex justify-between text-sm mb-1">
<span class="text-gray-300 font-medium">Node.js / Express</span>
<span class="text-purple-400 font-bold">90%</span>
</div>
<div class="w-full h-2.5 bg-slate-800 rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-purple-500 to-pink-500 rounded-full" style="width: 90%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span class="text-gray-300 font-medium">Python / Django / FastApi</span>
<span class="text-purple-400 font-bold">85%</span>
</div>
<div class="w-full h-2.5 bg-slate-800 rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-purple-500 to-pink-500 rounded-full" style="width: 85%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span class="text-gray-300 font-medium">PostgreSQL / MongoDB</span>
<span class="text-purple-400 font-bold">82%</span>
</div>
<div class="w-full h-2.5 bg-slate-800 rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-purple-500 to-pink-500 rounded-full" style="width: 82%"></div>
</div>
</div>
</div>
</div>
<!-- Tools & UI/UX Skills -->
<div class="glass-panel p-6 rounded-3xl space-y-5">
<div class="flex items-center gap-3 border-b border-white/10 pb-4">
<i class="fa-solid fa-pen-nib text-2xl text-emerald-400"></i>
<h3 class="text-lg font-bold text-white">التصميم والأدوات (UI/UX)</h3>
</div>
<div class="space-y-4">
<div>
<div class="flex justify-between text-sm mb-1">
<span class="text-gray-300 font-medium">Figma / UI Design</span>
<span class="text-emerald-400 font-bold">92%</span>
</div>
<div class="w-full h-2.5 bg-slate-800 rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-emerald-400 to-teal-500 rounded-full" style="width: 92%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span class="text-gray-300 font-medium">Docker / CI/CD DevOps</span>
<span class="text-emerald-400 font-bold">78%</span>
</div>
<div class="w-full h-2.5 bg-slate-800 rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-emerald-400 to-teal-500 rounded-full" style="width: 78%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span class="text-gray-300 font-medium">Git / GitHub / Architecture</span>
<span class="text-emerald-400 font-bold">96%</span>
</div>
<div class="w-full h-2.5 bg-slate-800 rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-emerald-400 to-teal-500 rounded-full" style="width: 96%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- TAB 3: PROJECTS SECTION -->
<div id="content-projects" class="tab-content hidden grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Project Card 1 -->
<div class="glass-card rounded-3xl overflow-hidden group">
<div class="h-48 bg-gradient-to-br from-cyan-600 to-blue-800 relative overflow-hidden flex items-center justify-center">
<i class="fa-solid fa-chart-line text-6xl text-white/20 group-hover:scale-125 transition duration-500"></i>
<span class="absolute top-4 right-4 bg-slate-900/80 backdrop-blur-md text-cyan-400 text-xs px-3 py-1 rounded-full font-bold">SaaS Platform</span>
</div>
<div class="p-6">
<h4 class="font-bold text-lg text-white group-hover:text-cyan-400 transition">منصة تحليلات الذكاء الاصطناعي</h4>
<p class="text-gray-400 text-sm mt-2 line-clamp-2">لوحة تحكم متكاملة لتحليل البيانات الضخمة والتنبؤ بالمبيعات باستخدام أحدث تقنيات الذكاء الاصطناعي.</p>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-[11px] bg-white/5 border border-white/10 px-2.5 py-1 rounded-lg text-gray-300">React</span>
<span class="text-[11px] bg-white/5 border border-white/10 px-2.5 py-1 rounded-lg text-gray-300">Python</span>
<span class="text-[11px] bg-white/5 border border-white/10 px-2.5 py-1 rounded-lg text-gray-300">Tailwind</span>
</div>
<div class="flex justify-between items-center mt-6 pt-4 border-t border-white/5 text-xs text-gray-400">
<span class="flex items-center gap-1"><i class="fa-regular fa-eye"></i> 3.2k</span>
<span class="flex items-center gap-1 text-amber-400"><i class="fa-solid fa-star"></i> 142</span>
</div>
</div>
</div>
<!-- Project Card 2 -->
<div class="glass-card rounded-3xl overflow-hidden group">
<div class="h-48 bg-gradient-to-br from-purple-600 to-pink-800 relative overflow-hidden flex items-center justify-center">
<i class="fa-solid fa-cart-shopping text-6xl text-white/20 group-hover:scale-125 transition duration-500"></i>
<span class="absolute top-4 right-4 bg-slate-900/80 backdrop-blur-md text-purple-400 text-xs px-3 py-1 rounded-full font-bold">E-Commerce</span>
</div>
<div class="p-6">
<h4 class="font-bold text-lg text-white group-hover:text-purple-400 transition">متجر الكتروني متكامل</h4>
<p class="text-gray-400 text-sm mt-2 line-clamp-2">متجر عالمي يدعم لغات متعددة والدفع الإلكتروني السريع مع نظام إدارة مخزون متقدم.</p>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-[11px] bg-white/5 border border-white/10 px-2.5 py-1 rounded-lg text-gray-300">Next.js</span>
<span class="text-[11px] bg-white/5 border border-white/10 px-2.5 py-1 rounded-lg text-gray-300">Stripe</span>
<span class="text-[11px] bg-white/5 border border-white/10 px-2.5 py-1 rounded-lg text-gray-300">MongoDB</span>
</div>
<div class="flex justify-between items-center mt-6 pt-4 border-t border-white/5 text-xs text-gray-400">
<span class="flex items-center gap-1"><i class="fa-regular fa-eye"></i> 5.1k</span>
<span class="flex items-center gap-1 text-amber-400"><i class="fa-solid fa-star"></i> 289</span>
</div>
</div>
</div>
<!-- Project Card 3 -->
<div class="glass-card rounded-3xl overflow-hidden group">
<div class="h-48 bg-gradient-to-br from-emerald-600 to-teal-800 relative overflow-hidden flex items-center justify-center">
<i class="fa-solid fa-mobile-screen-button text-6xl text-white/20 group-hover:scale-125 transition duration-500"></i>
<span class="absolute top-4 right-4 bg-slate-900/80 backdrop-blur-md text-emerald-400 text-xs px-3 py-1 rounded-full font-bold">Mobile App</span>
</div>
<div class="p-6">
<h4 class="font-bold text-lg text-white group-hover:text-emerald-400 transition">تطبيق لياقة وتغذية صحية</h4>
<p class="text-gray-400 text-sm mt-2 line-clamp-2">تطبيق جوال لمتابعة التمارين الرياضية وجداول الوجبات اليومية وحساب السعرات.</p>
<div class="flex flex-wrap gap-2 mt-4">
<span class="text-[11px] bg-white/5 border border-white/10 px-2.5 py-1 rounded-lg text-gray-300">React Native</span>
<span class="text-[11px] bg-white/5 border border-white/10 px-2.5 py-1 rounded-lg text-gray-300">Firebase</span>
</div>
<div class="flex justify-between items-center mt-6 pt-4 border-t border-white/5 text-xs text-gray-400">
<span class="flex items-center gap-1"><i class="fa-regular fa-eye"></i> 2.8k</span>
<span class="flex items-center gap-1 text-amber-400"><i class="fa-solid fa-star"></i> 98</span>
</div>
</div>
</div>
</div>
<!-- TAB 4: EXPERIENCE TIMELINE -->
<div id="content-experience" class="tab-content hidden space-y-6">
<div class="glass-panel p-6 sm:p-8 rounded-3xl">
<h3 class="text-xl font-bold text-white mb-8 flex items-center gap-3">
<i class="fa-solid fa-briefcase text-cyan-400"></i>
مسيرة الخبرة المهنية
</h3>
<!-- Timeline Container -->
<div class="relative border-r-2 border-white/10 mr-4 pr-6 space-y-8">
<!-- Item 1 -->
<div class="relative group">
<div class="absolute -right-[31px] top-1.5 w-4 h-4 rounded-full bg-cyan-400 ring-4 ring-slate-900 group-hover:scale-125 transition"></div>
<div class="glass-card p-5 rounded-2xl">
<div class="flex flex-wrap justify-between items-center gap-2 mb-2">
<h4 class="font-bold text-white text-base">كبير مطوري الويب (Lead Full-Stack Developer)</h4>
<span class="bg-cyan-500/10 text-cyan-400 border border-cyan-500/20 text-xs px-3 py-1 rounded-full font-bold">2022 - الان</span>
</div>
<span class="text-gray-400 text-sm font-medium">شركة التقنيات المتقدمة - دبي</span>
<p class="text-gray-300 text-sm mt-3 leading-relaxed">قيادة فريق مكون من 8 مطورين لبناء منصات سحابية عالية الأداء. إشراف على معمارية البرمجيات وتحسين الأداء بنسبة 40%.</p>
</div>
</div>
<!-- Item 2 -->
<div class="relative group">
<div class="absolute -right-[31px] top-1.5 w-4 h-4 rounded-full bg-purple-400 ring-4 ring-slate-900 group-hover:scale-125 transition"></div>
<div class="glass-card p-5 rounded-2xl">
<div class="flex flex-wrap justify-between items-center gap-2 mb-2">
<h4 class="font-bold text-white text-base">مطور فرونت إند و مصمم UI/UX</h4>
<span class="bg-purple-500/10 text-purple-400 border border-purple-500/20 text-xs px-3 py-1 rounded-full font-bold">2019 - 2022</span>
</div>
<span class="text-gray-400 text-sm font-medium">استوديو الإبداع الرقمي</span>
<p class="text-gray-300 text-sm mt-3 leading-relaxed">تصميم وبناء تجارب مستخدم فريدة لأكثر من 25 عميل إقليمي وتطوير تطبيقات ويب تفاعلية باستعمال React و Tailwind CSS.</p>
</div>
</div>
</div>
</div>
</div>
<!-- TAB 5: CONTACT SECTION -->
<div id="content-contact" class="tab-content hidden">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Direct Contact Form -->
<div class="glass-panel p-6 sm:p-8 rounded-3xl">
<h3 class="text-xl font-bold text-white mb-6">إرسال رسالة مباشرة</h3>
<form onsubmit="handleContactSubmit(event)" class="space-y-4">
<div>
<label class="block text-xs font-semibold text-gray-300 mb-2">الاسم الكامل</label>
<input type="text" required placeholder="أدخل اسمك هنا" class="w-full bg-slate-900/80 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:outline-none focus:border-cyan-400 transition">
</div>
<div>
<label class="block text-xs font-semibold text-gray-300 mb-2">البريد الإلكتروني</label>
<input type="email" required placeholder="name@example.com" class="w-full bg-slate-900/80 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:outline-none focus:border-cyan-400 transition">
</div>
<div>
<label class="block text-xs font-semibold text-gray-300 mb-2">تفاصيل الرسالة</label>
<textarea rows="4" required placeholder="كيف يمكنني مساعدتك في مشروعك القادم؟" class="w-full bg-slate-900/80 border border-white/10 rounded-xl px-4 py-3 text-white text-sm focus:outline-none focus:border-cyan-400 transition"></textarea>
</div>
<button type="submit" class="w-full py-3.5 bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 font-bold text-slate-950 rounded-xl transition shadow-lg shadow-cyan-500/20">
إرسال الرسالة الآن
</button>
</form>
</div>
<!-- Quick Copy Contact Info -->
<div class="glass-panel p-6 sm:p-8 rounded-3xl flex flex-col justify-between">
<div>
<h3 class="text-xl font-bold text-white mb-4">معلومات الاتصال السريع</h3>
<p class="text-gray-400 text-sm mb-6">يمكنك نسخ بيانات التواصل مباشرة بنقرة زر واحدة للتواصل السريع عبر البريد أو الهاتف.</p>
<div class="space-y-4">
<div class="glass-card p-4 rounded-2xl flex items-center justify-between">
<div class="flex items-center gap-3">
<i class="fa-solid fa-envelope text-cyan-400 text-lg"></i>
<span class="text-sm font-semibold text-white">alex@domain.com</span>
</div>
<button onclick="copyToClipboard('alex@domain.com', 'تم نسخ البريد الإلكتروني')" class="text-xs bg-white/10 hover:bg-cyan-500 hover:text-black text-white px-3 py-1.5 rounded-lg transition">نسخ</button>
</div>
<div class="glass-card p-4 rounded-2xl flex items-center justify-between">
<div class="flex items-center gap-3">
<i class="fa-solid fa-phone text-emerald-400 text-lg"></i>
<span class="text-sm font-semibold text-white" dir="ltr">+971 50 123 4567</span>
</div>
<button onclick="copyToClipboard('+971501234567', 'تم نسخ رقم الهاتف')" class="text-xs bg-white/10 hover:bg-emerald-500 hover:text-black text-white px-3 py-1.5 rounded-lg transition">نسخ</button>
</div>
</div>
</div>
<div class="mt-8 p-4 rounded-2xl bg-cyan-500/5 border border-cyan-500/20 text-center">
<i class="fa-solid fa-clock text-cyan-400 text-2xl mb-2"></i>
<h4 class="text-sm font-bold text-white">ساعات العمل والتوافر</h4>
<p class="text-xs text-gray-400 mt-1">من الأحد إلى الخميس (9:00 صباحاً - 6:00 مساءً)</p>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript Functional Logic -->
<script>
// Tab Switcher Logic
function switchTab(tabId) {
// Hide all contents
document.querySelectorAll('.tab-content').forEach(content => {
content.classList.add('hidden');
});
// Remove active class from buttons
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.classList.remove('active');
});
// Show selected content & set button active
document.getElementById(`content-${tabId}`).classList.remove('hidden');
document.getElementById(`tab-${tabId}`).classList.add('active');
}
// Like Button Animation
let isLiked = false;
let likeCount = 1248;
function toggleLike() {
const likeBtn = document.getElementById('like-btn');
const likeIcon = document.getElementById('like-icon');
const likeCountEl = document.getElementById('like-count');
if (!isLiked) {
likeCount++;
likeIcon.classList.remove('fa-regular');
likeIcon.classList.add('fa-solid', 'text-rose-500');
likeBtn.classList.add('border-rose-500/40');
showToast('شكراً لتفاعلك وتأكيد الإعجاب! ❤️');
} else {
likeCount--;
likeIcon.classList.remove('fa-solid', 'text-rose-500');
likeIcon.classList.add('fa-regular');
likeBtn.classList.remove('border-rose-500/40');
}
isLiked = !isLiked;
likeCountEl.innerText = likeCount.toLocaleString();
}
// Follow Button Toggle
let isFollowing = false;
function toggleFollow() {
const btn = document.getElementById('follow-btn');
const icon = document.getElementById('follow-icon');
const text = document.getElementById('follow-text');
const count = document.getElementById('followers-count');
if (!isFollowing) {
text.innerText = 'تتابعه';
icon.className = 'fa-solid fa-user-check text-emerald-400';
btn.classList.add('border-emerald-500/50', 'bg-emerald-500/10');
count.innerText = '12.4K+1';
showToast('بدأت بمتابعة أحمد علي الان');
} else {
text.innerText = 'متابعة';
icon.className = 'fa-solid fa-user-plus';
btn.classList.remove('border-emerald-500/50', 'bg-emerald-500/10');
count.innerText = '12.4K';
}
isFollowing = !isFollowing;
}
// Copy Text Function
function copyToClipboard(text, message) {
const tempInput = document.createElement('input');
tempInput.value = text;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand('copy');
document.body.removeChild(tempInput);
showToast(message);
}
function copyShareLink() {
copyToClipboard(window.location.href, 'تم نسخ رابط البروفايل للمشاركة');
}
// Toast Notification System
function showToast(msg) {
const toast = document.getElementById('toast');
const toastMsg = document.getElementById('toast-message');
toastMsg.innerText = msg;
toast.classList.remove('hidden');
setTimeout(() => {
toast.classList.add('hidden');
}, 3000);
}
// Contact Form Handler
function handleContactSubmit(e) {
e.preventDefault();
showToast('تم إرسال رسالتك بنجاح! سيتم الرد قريباً');
e.target.reset();
}
// Theme Accent Switcher
function setThemeAccent(color) {
showToast(`تم تغيير النمط البصري إلى: ${color.toUpperCase()}`);
}
</script>
</body>
</html>