| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>سيرة ذاتية | مصمم ومطور ويب</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap'); |
| |
| body { |
| font-family: 'Tajawal', sans-serif; |
| scroll-behavior: smooth; |
| } |
| |
| .gradient-bg { |
| background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%); |
| } |
| |
| .skill-bar { |
| height: 8px; |
| border-radius: 4px; |
| background-color: #e5e7eb; |
| } |
| |
| .skill-progress { |
| height: 100%; |
| border-radius: 4px; |
| background: linear-gradient(90deg, #4f46e5, #7c3aed); |
| transition: width 1s ease-in-out; |
| } |
| |
| .portfolio-item { |
| transition: all 0.3s ease; |
| } |
| |
| .portfolio-item:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| } |
| |
| .timeline-item::before { |
| content: ''; |
| position: absolute; |
| left: -20px; |
| top: 0; |
| width: 2px; |
| height: 100%; |
| background-color: #4f46e5; |
| } |
| |
| .timeline-dot { |
| position: absolute; |
| left: -26px; |
| top: 5px; |
| width: 12px; |
| height: 12px; |
| border-radius: 50%; |
| background-color: #4f46e5; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(20px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .animate-fade-in { |
| animation: fadeIn 0.8s ease forwards; |
| } |
| |
| .delay-100 { |
| animation-delay: 0.1s; |
| } |
| |
| .delay-200 { |
| animation-delay: 0.2s; |
| } |
| |
| .delay-300 { |
| animation-delay: 0.3s; |
| } |
| |
| .delay-400 { |
| animation-delay: 0.4s; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 text-gray-800"> |
| |
| <header class="gradient-bg text-white shadow-lg sticky top-0 z-50"> |
| <div class="container mx-auto px-6 py-4"> |
| <div class="flex items-center justify-between"> |
| <div class="text-2xl font-bold">أحمد<span class="text-purple-300">.</span></div> |
| <nav class="hidden md:flex space-x-8 space-x-reverse"> |
| <a href="#home" class="hover:text-purple-200 transition">الرئيسية</a> |
| <a href="#about" class="hover:text-purple-200 transition">عنّي</a> |
| <a href="#skills" class="hover:text-purple-200 transition">المهارات</a> |
| <a href="#portfolio" class="hover:text-purple-200 transition">معرض الأعمال</a> |
| <a href="#experience" class="hover:text-purple-200 transition">الخبرات</a> |
| <a href="#contact" class="hover:text-purple-200 transition">اتصل بي</a> |
| </nav> |
| <button class="md:hidden focus:outline-none" id="menu-toggle"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="md:hidden hidden bg-indigo-800" id="mobile-menu"> |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
| <a href="#home" class="block px-3 py-2 hover:bg-indigo-700 rounded-md">الرئيسية</a> |
| <a href="#about" class="block px-3 py-2 hover:bg-indigo-700 rounded-md">عنّي</a> |
| <a href="#skills" class="block px-3 py-2 hover:bg-indigo-700 rounded-md">المهارات</a> |
| <a href="#portfolio" class="block px-3 py-2 hover:bg-indigo-700 rounded-md">معرض الأعمال</a> |
| <a href="#experience" class="block px-3 py-2 hover:bg-indigo-700 rounded-md">الخبرات</a> |
| <a href="#contact" class="block px-3 py-2 hover:bg-indigo-700 rounded-md">اتصل بي</a> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section id="home" class="gradient-bg text-white py-20"> |
| <div class="container mx-auto px-6 flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0 animate-fade-in"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">أحمد محمد</h1> |
| <h2 class="text-2xl md:text-3xl font-semibold mb-6 text-purple-200">مصمم ومطور ويب | كاتب محتوى | مدير حسابات تواصل اجتماعي</h2> |
| <p class="text-lg mb-8 leading-relaxed">أحول الأفكار إلى تجارب رقمية مميزة. خبرة 5+ سنوات في تصميم وتطوير المواقع، كتابة المحتوى الإبداعي، وإدارة الحسابات على منصات التواصل الاجتماعي.</p> |
| <div class="flex space-x-4 space-x-reverse"> |
| <a href="#portfolio" class="bg-white text-indigo-600 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition">معرض أعمالي</a> |
| <a href="#contact" class="border-2 border-white text-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:text-indigo-600 transition">تواصل معي</a> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center animate-fade-in delay-100"> |
| <div class="relative"> |
| <img src="https://via.placeholder.com/400x400" alt="صورة أحمد محمد" class="rounded-full w-64 h-64 md:w-80 md:h-80 object-cover border-4 border-white shadow-xl"> |
| <div class="absolute -bottom-2 -right-2 bg-purple-500 rounded-full p-3 shadow-lg"> |
| <i class="fas fa-code text-white text-xl"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-20 bg-white"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-16 relative"> |
| <span class="relative inline-block"> |
| عنّي |
| <span class="absolute bottom-0 left-0 w-full h-1 bg-purple-500 rounded-full"></span> |
| </span> |
| </h2> |
| |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/3 mb-10 md:mb-0 flex justify-center animate-fade-in"> |
| <img src="https://via.placeholder.com/300x400" alt="صورة شخصية" class="rounded-lg shadow-xl w-64 h-80 object-cover"> |
| </div> |
| <div class="md:w-2/3 md:pr-10 animate-fade-in delay-100"> |
| <h3 class="text-2xl font-semibold mb-4">من أنا؟</h3> |
| <p class="text-lg mb-6 leading-relaxed"> |
| أنا أحمد محمد، محترف في مجال التصميم والتطوير الرقمي مع شغف كبير لتحويل الأفكار إلى واقع ملموس. بدأت رحلتي منذ 5 سنوات كمصمم جرافيك، ثم تطورت مهاراتي لتصبح شاملة لتطوير الويب، كتابة المحتوى، وإدارة وسائل التواصل الاجتماعي. |
| </p> |
| <p class="text-lg mb-6 leading-relaxed"> |
| أؤمن بقوة التفاصيل وأسعى دائماً لخلق تجارب مستخدم استثنائية. أعمل مع العملاء لفهم احتياجاتهم بدقة ثم أترجمها إلى حلول رقمية فعالة وجذابة. |
| </p> |
| |
| <div class="grid grid-cols-2 gap-6 mt-8"> |
| <div class="flex items-center"> |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-calendar-alt text-purple-600"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold">العمر</h4> |
| <p class="text-gray-600">28 سنة</p> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-map-marker-alt text-purple-600"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold">المكان</h4> |
| <p class="text-gray-600">الرياض، السعودية</p> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-envelope text-purple-600"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold">البريد</h4> |
| <p class="text-gray-600">ahmed@example.com</p> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-phone-alt text-purple-600"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold">الهاتف</h4> |
| <p class="text-gray-600">+966 50 123 4567</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-10"> |
| <a href="#" class="inline-flex items-center text-purple-600 font-semibold hover:text-purple-800 transition"> |
| تحميل السيرة الذاتية |
| <i class="fas fa-download mr-2"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="skills" class="py-20 bg-gray-50"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-16 relative"> |
| <span class="relative inline-block"> |
| مهاراتي |
| <span class="absolute bottom-0 left-0 w-full h-1 bg-purple-500 rounded-full"></span> |
| </span> |
| </h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> |
| |
| <div class="animate-fade-in"> |
| <h3 class="text-2xl font-semibold mb-6 flex items-center"> |
| <i class="fas fa-laptop-code text-purple-500 mr-3"></i> |
| المهارات التقنية |
| </h3> |
| |
| <div class="space-y-6"> |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span class="font-medium">HTML5 & CSS3</span> |
| <span>95%</span> |
| </div> |
| <div class="skill-bar"> |
| <div class="skill-progress" style="width: 95%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span class="font-medium">JavaScript</span> |
| <span>85%</span> |
| </div> |
| <div class="skill-bar"> |
| <div class="skill-progress" style="width: 85%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span class="font-medium">React.js</span> |
| <span>80%</span> |
| </div> |
| <div class="skill-bar"> |
| <div class="skill-progress" style="width: 80%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span class="font-medium">UI/UX Design</span> |
| <span>90%</span> |
| </div> |
| <div class="skill-bar"> |
| <div class="skill-progress" style="width: 90%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span class="font-medium">PHP & MySQL</span> |
| <span>75%</span> |
| </div> |
| <div class="skill-bar"> |
| <div class="skill-progress" style="width: 75%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="animate-fade-in delay-100"> |
| <h3 class="text-2xl font-semibold mb-6 flex items-center"> |
| <i class="fas fa-briefcase text-purple-500 mr-3"></i> |
| المهارات المهنية |
| </h3> |
| |
| <div class="space-y-6"> |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span class="font-medium">كتابة المحتوى</span> |
| <span>90%</span> |
| </div> |
| <div class="skill-bar"> |
| <div class="skill-progress" style="width: 90%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span class="font-medium">إدارة وسائل التواصل</span> |
| <span>85%</span> |
| </div> |
| <div class="skill-bar"> |
| <div class="skill-progress" style="width: 85%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span class="font-medium">التسويق الرقمي</span> |
| <span>80%</span> |
| </div> |
| <div class="skill-bar"> |
| <div class="skill-progress" style="width: 80%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span class="font-medium">إدارة المشاريع</span> |
| <span>75%</span> |
| </div> |
| <div class="skill-bar"> |
| <div class="skill-progress" style="width: 75%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span class="font-medium">التحليل الإحصائي</span> |
| <span>70%</span> |
| </div> |
| <div class="skill-bar"> |
| <div class="skill-progress" style="width: 70%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-16 animate-fade-in delay-200"> |
| <h3 class="text-2xl font-semibold mb-8 text-center">الأدوات والتقنيات التي أستخدمها</h3> |
| |
| <div class="flex flex-wrap justify-center gap-6"> |
| <div class="bg-white p-4 rounded-lg shadow-md flex items-center"> |
| <img src="https://via.placeholder.com/40" alt="Adobe Photoshop" class="w-10 h-10 mr-3"> |
| <span>Adobe Photoshop</span> |
| </div> |
| <div class="bg-white p-4 rounded-lg shadow-md flex items-center"> |
| <img src="https://via.placeholder.com/40" alt="Adobe Illustrator" class="w-10 h-10 mr-3"> |
| <span>Adobe Illustrator</span> |
| </div> |
| <div class="bg-white p-4 rounded-lg shadow-md flex items-center"> |
| <img src="https://via.placeholder.com/40" alt="Figma" class="w-10 h-10 mr-3"> |
| <span>Figma</span> |
| </div> |
| <div class="bg-white p-4 rounded-lg shadow-md flex items-center"> |
| <img src="https://via.placeholder.com/40" alt="VS Code" class="w-10 h-10 mr-3"> |
| <span>VS Code</span> |
| </div> |
| <div class="bg-white p-4 rounded-lg shadow-md flex items-center"> |
| <img src="https://via.placeholder.com/40" alt="Git" class="w-10 h-10 mr-3"> |
| <span>Git</span> |
| </div> |
| <div class="bg-white p-4 rounded-lg shadow-md flex items-center"> |
| <img src="https://via.placeholder.com/40" alt="WordPress" class="w-10 h-10 mr-3"> |
| <span>WordPress</span> |
| </div> |
| <div class="bg-white p-4 rounded-lg shadow-md flex items-center"> |
| <img src="https://via.placeholder.com/40" alt="Google Analytics" class="w-10 h-10 mr-3"> |
| <span>Google Analytics</span> |
| </div> |
| <div class="bg-white p-4 rounded-lg shadow-md flex items-center"> |
| <img src="https://via.placeholder.com/40" alt="Hootsuite" class="w-10 h-10 mr-3"> |
| <span>Hootsuite</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="portfolio" class="py-20 bg-white"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-16 relative"> |
| <span class="relative inline-block"> |
| معرض الأعمال |
| <span class="absolute bottom-0 left-0 w-full h-1 bg-purple-500 rounded-full"></span> |
| </span> |
| </h2> |
| |
| <div class="flex justify-center mb-12"> |
| <div class="inline-flex rounded-md shadow-sm"> |
| <button type="button" class="px-4 py-2 text-sm font-medium rounded-r-lg border border-gray-200 bg-purple-600 text-white focus:z-10 focus:ring-2 focus:ring-purple-500 focus:bg-purple-700 portfolio-filter" data-filter="all"> |
| الكل |
| </button> |
| <button type="button" class="px-4 py-2 text-sm font-medium border-t border-b border-gray-200 hover:bg-gray-100 focus:z-10 focus:ring-2 focus:ring-purple-500 focus:bg-gray-100 portfolio-filter" data-filter="design"> |
| التصميم |
| </button> |
| <button type="button" class="px-4 py-2 text-sm font-medium border-t border-b border-gray-200 hover:bg-gray-100 focus:z-10 focus:ring-2 focus:ring-purple-500 focus:bg-gray-100 portfolio-filter" data-filter="development"> |
| التطوير |
| </button> |
| <button type="button" class="px-4 py-2 text-sm font-medium border-t border-b border-gray-200 hover:bg-gray-100 focus:z-10 focus:ring-2 focus:ring-purple-500 focus:bg-gray-100 portfolio-filter" data-filter="content"> |
| المحتوى |
| </button> |
| <button type="button" class="px-4 py-2 text-sm font-medium rounded-l-lg border border-gray-200 hover:bg-gray-100 focus:z-10 focus:ring-2 focus:ring-purple-500 focus:bg-gray-100 portfolio-filter" data-filter="social"> |
| التواصل الاجتماعي |
| </button> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="portfolio-item animate-fade-in" data-category="design"> |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md"> |
| <img src="https://via.placeholder.com/600x400" alt="تصميم موقع تجارة إلكترونية" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-2"> |
| <h3 class="text-xl font-semibold">موقع تجارة إلكترونية</h3> |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">تصميم</span> |
| </div> |
| <p class="text-gray-600 mb-4">تصميم واجهة مستخدم لموقع تجارة إلكترونية متكامل مع التركيز على تجربة المستخدم وسهولة التنقل.</p> |
| <a href="#" class="text-purple-600 font-medium hover:text-purple-800 transition flex items-center"> |
| عرض التفاصيل |
| <i class="fas fa-arrow-left mr-2"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="portfolio-item animate-fade-in delay-100" data-category="development"> |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md"> |
| <img src="https://via.placeholder.com/600x400" alt="تطبيق إدارة المهام" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-2"> |
| <h3 class="text-xl font-semibold">تطبيق إدارة المهام</h3> |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">تطوير</span> |
| </div> |
| <p class="text-gray-600 mb-4">تطبيق ويب لإدارة المهام الشخصية والفريقية باستخدام React.js و Firebase.</p> |
| <a href="#" class="text-purple-600 font-medium hover:text-purple-800 transition flex items-center"> |
| عرض التفاصيل |
| <i class="fas fa-arrow-left mr-2"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="portfolio-item animate-fade-in delay-200" data-category="content"> |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md"> |
| <img src="https://via.placeholder.com/600x400" alt="حملة تسويقية" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-2"> |
| <h3 class="text-xl font-semibold">حملة تسويقية لمتجر إلكتروني</h3> |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">محتوى</span> |
| </div> |
| <p class="text-gray-600 mb-4">إستراتيجية محتوى وحملة تسويقية لمتجر إلكتروني متخصص في المنتجات الصحية.</p> |
| <a href="#" class="text-purple-600 font-medium hover:text-purple-800 transition flex items-center"> |
| عرض التفاصيل |
| <i class="fas fa-arrow-left mr-2"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="portfolio-item animate-fade-in" data-category="social"> |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md"> |
| <img src="https://via.placeholder.com/600x400" alt="إدارة حسابات التواصل" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-2"> |
| <h3 class="text-xl font-semibold">إدارة حسابات تواصل اجتماعي</h3> |
| <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">تواصل</span> |
| </div> |
| <p class="text-gray-600 mb-4">إدارة وتنفيذ استراتيجية محتوى لعلامة تجارية في قطاع الأزياء عبر منصات التواصل.</p> |
| <a href="#" class="text-purple-600 font-medium hover:text-purple-800 transition flex items-center"> |
| عرض التفاصيل |
| <i class="fas fa-arrow-left mr-2"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="portfolio-item animate-fade-in delay-100" data-category="design"> |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md"> |
| <img src="https://via.placeholder.com/600x400" alt="هوية بصرية" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-2"> |
| <h3 class="text-xl font-semibold">هوية بصرية لمطعم</h3> |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">تصميم</span> |
| </div> |
| <p class="text-gray-600 mb-4">تصميم هوية بصرية متكاملة لمطعم حديث يشمل الشعار، بطاقات العمل، القوائم، وغيرها.</p> |
| <a href="#" class="text-purple-600 font-medium hover:text-purple-800 transition flex items-center"> |
| عرض التفاصيل |
| <i class="fas fa-arrow-left mr-2"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="portfolio-item animate-fade-in delay-200" data-category="development"> |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md"> |
| <img src="https://via.placeholder.com/600x400" alt="موقع شركة" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-2"> |
| <h3 class="text-xl font-semibold">موقع شركة عقارية</h3> |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">تطوير</span> |
| </div> |
| <p class="text-gray-600 mb-4">تطوير موقع متكامل لشركة عقارية مع نظام إدارة محتوى مخصص.</p> |
| <a href="#" class="text-purple-600 font-medium hover:text-purple-800 transition flex items-center"> |
| عرض التفاصيل |
| <i class="fas fa-arrow-left mr-2"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-12"> |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition"> |
| عرض المزيد من الأعمال |
| <i class="fas fa-arrow-left mr-2"></i> |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="experience" class="py-20 bg-gray-50"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-16 relative"> |
| <span class="relative inline-block"> |
| خبراتي |
| <span class="absolute bottom-0 left-0 w-full h-1 bg-purple-500 rounded-full"></span> |
| </span> |
| </h2> |
| |
| <div class="max-w-3xl mx-auto"> |
| |
| <div class="mb-16 animate-fade-in"> |
| <h3 class="text-2xl font-semibold mb-8 flex items-center"> |
| <i class="fas fa-graduation-cap text-purple-500 mr-3"></i> |
| التعليم |
| </h3> |
| |
| <div class="space-y-8 relative border-l-2 border-purple-200 pl-8"> |
| |
| <div class="relative timeline-item"> |
| <div class="timeline-dot"></div> |
| <div class="bg-white p-6 rounded-lg shadow-md"> |
| <div class="flex justify-between items-start mb-2"> |
| <h4 class="text-xl font-medium">بكالوريوس علوم الحاسب</h4> |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">2014 - 2018</span> |
| </div> |
| <p class="text-purple-600 font-medium mb-2">جامعة الملك سعود</p> |
| <p class="text-gray-600">تخصصت في تطوير الويب وتصميم واجهات المستخدم خلال دراستي الجامعية.</p> |
| </div> |
| </div> |
| |
| |
| <div class="relative timeline-item"> |
| <div class="timeline-dot"></div> |
| <div class="bg-white p-6 rounded-lg shadow-md"> |
| <div class="flex justify-between items-start mb-2"> |
| <h4 class="text-xl font-medium">دبلوم التسويق الرقمي</h4> |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">2019</span> |
| </div> |
| <p class="text-purple-600 font-medium mb-2">أكاديمية التسويق الرقمي</p> |
| <p class="text-gray-600">برنامج متخصص في استراتيجيات التسويق الرقمي وإدارة وسائل التواصل الاجتماعي.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="animate-fade-in delay-100"> |
| <h3 class="text-2xl font-semibold mb-8 flex items-center"> |
| <i class="fas fa-briefcase text-purple-500 mr-3"></i> |
| الخبرة العملية |
| </h3> |
| |
| <div class="space-y-8 relative border-l-2 border-purple-200 pl-8"> |
| |
| <div class="relative timeline-item"> |
| <div class="timeline-dot"></div> |
| <div class="bg-white p-6 rounded-lg shadow-md"> |
| <div class="flex justify-between items-start mb-2"> |
| <h4 class="text-xl font-medium">مصمم ومطور ويب</h4> |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">2020 - الحاضر</span> |
| </div> |
| <p class="text-purple-600 font-medium mb-2">شركة التقنية المتقدمة</p> |
| <p class="text-gray-600 mb-3">تصميم وتطوير مواقع وتطبيقات ويب متكاملة للعملاء مع التركيز على تجربة المستخدم والأداء.</p> |
| <ul class="list-disc list-inside text-gray-600 space-y-1"> |
| <li>تصميم واجهات مستخدم جذابة وسهلة الاستخدام</li> |
| <li>تطوير تطبيقات ويب باستخدام React.js و Node.js</li> |
| <li>تحسين أداء المواقع وسرعة تحميل الصفحات</li> |
| </ul> |
| </div> |
| </div> |
| |
| |
| <div class="relative timeline-item"> |
| <div class="timeline-dot"></div> |
| <div class="bg-white p-6 rounded-lg shadow-md"> |
| <div class="flex justify-between items-start mb-2"> |
| <h4 class="text-xl font-medium">كاتب محتوى ومدير وسائل تواصل</h4> |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">2018 - 2020</span> |
| </div> |
| <p class="text-purple-600 font-medium mb-2">وكالة الإبداع الرقمي</p> |
| <p class="text-gray-600 mb-3">إدارة حسابات التواصل الاجتماعي وإنشاء استراتيجيات محتوى للعديد من العلامات التجارية.</p> |
| <ul class="list-disc list-inside text-gray-600 space-y-1"> |
| <li>كتابة وإدارة المحتوى لمواقع التواصل الاجتماعي</li> |
| <li>تحليل أداء الحملات وتحسين استراتيجيات المحتوى</li> |
| <li>إدارة العلاقات مع المؤثرين على المنصات</li> |
| </ul> |
| </div> |
| </div> |
| |
| |
| <div class="relative timeline-item"> |
| <div class="timeline-dot"></div> |
| <div class="bg-white p-6 rounded-lg shadow-md"> |
| <div class="flex justify-between items-start mb-2"> |
| <h4 class="text-xl font-medium">مصمم جرافيك</h4> |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">2016 - 2018</span> |
| </div> |
| <p class="text-purple-600 font-medium mb-2">استوديو التصميم الإبداعي</p> |
| <p class="text-gray-600 mb-3">تصميم المواد التسويقية والهويات البصرية للعملاء من مختلف القطاعات.</p> |
| <ul class="list-disc list-inside text-gray-600 space-y-1"> |
| <li>تصميم الشعارات والهويات البصرية</li> |
| <li>إنشاء مواد تسويقية مطبوعة ورقمية</li> |
| <li>تصميم واجهات المستخدم للمواقع والتطبيقات</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-white"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-16 relative"> |
| <span class="relative inline-block"> |
| آراء العملاء |
| <span class="absolute bottom-0 left-0 w-full h-1 bg-purple-500 rounded-full"></span> |
| </span> |
| </h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="bg-gray-50 p-8 rounded-lg shadow-md animate-fade-in"> |
| <div class="flex items-center mb-6"> |
| <img src="https://via.placeholder.com/60" alt="صورة العميل" class="w-12 h-12 rounded-full object-cover mr-4"> |
| <div> |
| <h4 class="font-semibold">محمد الخالد</h4> |
| <p class="text-gray-600 text-sm">مدير تسويق - شركة التقنية</p> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-6"> |
| "عمل أحمد معنا على تطوير موقعنا الإلكتروني وكانت النتيجة ممتازة. فهم احتياجاتنا بدقة وقدم حلولاً إبداعية ساعدت في تحسين تجربة عملائنا بشكل ملحوظ." |
| </p> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-8 rounded-lg shadow-md animate-fade-in delay-100"> |
| <div class="flex items-center mb-6"> |
| <img src="https://via.placeholder.com/60" alt="صورة العميل" class="w-12 h-12 rounded-full object-cover mr-4"> |
| <div> |
| <h4 class="font-semibold">نورة السعد</h4> |
| <p class="text-gray-600 text-sm">مالكة متجر إلكتروني</p> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-6"> |
| "استعنت بأحمد لإدارة حسابات التواصل الاجتماعي لمتجري وكانت النتائج رائعة. زادت متابعينا بنسبة 300% خلال 3 أشهر فقط بفضل استراتيجيته المبتكرة في المحتوى." |
| </p> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-8 rounded-lg shadow-md animate-fade-in delay-200"> |
| <div class="flex items-center mb-6"> |
| <img src="https://via.placeholder.com/60" alt="صورة العميل" class="w-12 h-12 rounded-full object-cover mr-4"> |
| <div> |
| <h4 class="font-semibold">خالد الفهد</h4> |
| <p class="text-gray-600 text-sm">مدير مشاريع - وكالة إعلانية</p> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-6"> |
| "تعاملت مع أحمد في عدة مشاريع تصميم وتطوير ويب. يتميز بالإبداع والدقة في التنفيذ، كما أنه ملتزم بالمواعيد النهائية مما يجعله شريكًا موثوقًا به في أي مشروع." |
| </p> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-20 bg-gray-50"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-16 relative"> |
| <span class="relative inline-block"> |
| اتصل بي |
| <span class="absolute bottom-0 left-0 w-full h-1 bg-purple-500 rounded-full"></span> |
| </span> |
| </h2> |
| |
| <div class="max-w-4xl mx-auto"> |
| <div class="bg-white rounded-lg shadow-xl overflow-hidden"> |
| <div class="md:flex"> |
| <div class="md:w-1/2 gradient-bg text-white p-10"> |
| <h3 class="text-2xl font-semibold mb-6">تواصل معي</h3> |
| <p class="mb-8">للاستفسار عن خدماتي أو لمناقشة مشروعك المقبل، لا تتردد في التواصل معي عبر أي من الوسائل التالية:</p> |
| |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="bg-white bg-opacity-20 p-3 rounded-full mr-4"> |
| <i class="fas fa-map-marker-alt"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold">العنوان</h4> |
| <p>الرياض، حي الصحافة، شارع الملك فهد</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="bg-white bg-opacity-20 p-3 rounded-full mr-4"> |
| <i class="fas fa-envelope"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold">البريد الإلكتروني</h4> |
| <p>ahmed@example.com</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="bg-white bg-opacity-20 p-3 rounded-full mr-4"> |
| <i class="fas fa-phone-alt"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold">الهاتف</h4> |
| <p>+966 50 123 4567</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-10 flex space-x-4 space-x-reverse"> |
| <a href="#" class="bg-white text-purple-600 p-3 rounded-full hover:bg-gray-100 transition"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="bg-white text-purple-600 p-3 rounded-full hover:bg-gray-100 transition"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| <a href="#" class="bg-white text-purple-600 p-3 rounded-full hover:bg-gray-100 transition"> |
| <i class="fab fa-behance"></i> |
| </a> |
| <a href="#" class="bg-white text-purple-600 p-3 rounded-full hover:bg-gray-100 transition"> |
| <i class="fab fa-github"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div class="md:w-1/2 p-10"> |
| <form id="contact-form" class="space-y-6"> |
| <div> |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">الاسم</label> |
| <input type="text" id="name" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" required> |
| </div> |
| |
| <div> |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">البريد الإلكتروني</label> |
| <input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" required> |
| </div> |
| |
| <div> |
| <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">الموضوع</label> |
| <input type="text" id="subject" name="subject" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" required> |
| </div> |
| |
| <div> |
| <label for="message" class="block text-sm font-medium text-gray-700 mb-1">الرسالة</label> |
| <textarea id="message" name="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" required></textarea> |
| </div> |
| |
| <button type="submit" class="w-full bg-purple-600 text-white py-3 px-6 rounded-md hover:bg-purple-700 transition focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"> |
| إرسال الرسالة |
| </button> |
| </form> |
| |
| <div id="form-success" class="hidden mt-6 p-4 bg-green-100 text-green-700 rounded-md"> |
| تم إرسال رسالتك بنجاح! سأتواصل معك قريبًا. |
| </div> |
| |
| <div id="form-error" class="hidden mt-6 p-4 bg-red-100 text-red-700 rounded-md"> |
| حدث خطأ أثناء إرسال الرسالة. يرجى المحاولة مرة أخرى لاحقًا. |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-white py-12"> |
| <div class="container mx-auto px-6"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-6 md:mb-0"> |
| <div class="text-2xl font-bold">أحمد<span class="text-purple-400">.</span></div> |
| <p class="mt-2 text-gray-400">مصمم ومطور ويب | كاتب محتوى | مدير حسابات تواصل اجتماعي</p> |
| </div> |
| |
| <div class="flex space-x-6 space-x-reverse"> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-behance"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-github"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 mt-10 pt-10 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 أحمد محمد. جميع الحقوق محفوظة.</p> |
| |
| <div class="flex space-x-6 space-x-reverse text-sm"> |
| <a href="#" class="text-gray-400 hover:text-white transition">سياسة الخصوصية</a> |
| <a href="#" class="text-gray-400 hover:text-white transition">شروط الاستخدام</a> |
| <a href="#" class="text-gray-400 hover:text-white transition">إخلاء مسؤولية</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <button id="back-to-top" class="hidden fixed bottom-6 right-6 bg-purple-600 text-white p-3 rounded-full shadow-lg hover:bg-purple-700 transition focus:outline-none"> |
| <i class="fas fa-arrow-up"></i> |
| </button> |
|
|
| <script> |
| |
| document.getElementById('menu-toggle').addEventListener('click', function() { |
| const menu = document.getElementById('mobile-menu'); |
| menu.classList.toggle('hidden'); |
| }); |
| |
| |
| const filterButtons = document.querySelectorAll('.portfolio-filter'); |
| const portfolioItems = document.querySelectorAll('.portfolio-item'); |
| |
| filterButtons.forEach(button => { |
| button.addEventListener('click', function() { |
| |
| filterButtons.forEach(btn => { |
| btn.classList.remove('bg-purple-600', 'text-white'); |
| btn.classList.add('hover:bg-gray-100'); |
| }); |
| |
| |
| this.classList.add('bg-purple-600', 'text-white'); |
| this.classList.remove('hover:bg-gray-100'); |
| |
| const filterValue = this.getAttribute('data-filter'); |
| |
| portfolioItems.forEach(item => { |
| if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) { |
| item.style.display = 'block'; |
| } else { |
| item.style.display = 'none'; |
| } |
| }); |
| }); |
| }); |
| |
| |
| const contactForm = document.getElementById('contact-form'); |
| const formSuccess = document.getElementById('form-success'); |
| const formError = document.getElementById('form-error'); |
| |
| contactForm.addEventListener('submit', function(e) { |
| e.preventDefault(); |
| |
| |
| setTimeout(() => { |
| contactForm.reset(); |
| formSuccess.classList.remove('hidden'); |
| formError.classList.add('hidden'); |
| |
| |
| setTimeout(() => { |
| formSuccess.classList.add('hidden'); |
| }, 5000); |
| }, 1000); |
| }); |
| |
| |
| const backToTopButton = document.getElementById('back-to-top'); |
| |
| window.addEventListener('scroll', function() { |
| if (window.pageYOffset > 300) { |
| backToTopButton.classList.remove('hidden'); |
| } else { |
| backToTopButton.classList.add('hidden'); |
| } |
| }); |
| |
| backToTopButton.addEventListener('click', function() { |
| window.scrollTo({ |
| top: 0, |
| behavior: 'smooth' |
| }); |
| }); |
| |
| |
| const animateOnScroll = function() { |
| const elements = document.querySelectorAll('.animate-fade-in'); |
| |
| elements.forEach(element => { |
| const elementPosition = element.getBoundingClientRect().top; |
| const screenPosition = window.innerHeight / 1.3; |
| |
| if (elementPosition < screenPosition) { |
| element.style.opacity = '1'; |
| element.style.transform = 'translateY(0)'; |
| } |
| }); |
| }; |
| |
| window.addEventListener('scroll', animateOnScroll); |
| window.addEventListener('load', animateOnScroll); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function(e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| const targetElement = document.querySelector(targetId); |
| |
| if (targetElement) { |
| window.scrollTo({ |
| top: targetElement.offsetTop - 80, |
| behavior: 'smooth' |
| }); |
| |
| |
| const mobileMenu = document.getElementById('mobile-menu'); |
| if (!mobileMenu.classList.contains('hidden')) { |
| mobileMenu.classList.add('hidden'); |
| } |
| } |
| }); |
| }); |
| </script> |
| <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=MeemAdam/portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
