atyaf-portfolio

البورتفوليو ده موقع ويب احترافي ومتكامل لشركة "اطياف" (Atyaf)، متخصصة في خدمات قص الخرسانة وفتحات الكور (core drilling) في منطقة الدمام بالمملكة العربية السعودية. الموقع مبني بـHTML، CSS، وJavaScript النقي (بدون فريموركس)، وهو مصمم كـ**صفحة واحدة (SPA)** مع تمرير سلس، عشان يعرض الخدمات والمشاريع بطريقة جذابة وسهلة التصفح. التصميم صناعي حديث (رمادي غامق، أزرق وبرتقالي للإشارة للمعدات)، مع دعم كامل للدارك مود والتبديل بين العربي والإنجليزي (RTL/LTR)، ومتجاوب تمامًا مع الجوال والديسكتوب. #### **الميزات الرئيسية:** 1. **الهيرو (Hero Section)**: بانر كبير مع صورة ديناميكية لعامل يعمل بدريل برتقالي Hilti في موقع بناء، عنوان "اطياف | Atyaf" بخط أنيق (Amiri للعربي، Roboto للإنجليزي)، وإحصائيات مثل "15+ سنوات خبرة"، "500+ مشروع"، "100% رضا عملاء". زراير "اتصل بنا" و"خدماتنا" للانتقال السريع. 2. **عن الشركة (About)**: نبذة موجزة عن "اطياف" كمتخصصة في الخدمات الدقيقة منذ 2020، مع التركيز على السلامة والكفاءة. نص بسيط مع ترجمة كاملة. 3. **الخدمات (Services)**: شبكة من 4 كروت (Concrete Sawing, Core Drilling, Wire Sawing, Surface Grinding) مع أيقونات SVG بسيطة، وصف مختصر لكل خدمة (مثل "قص الجدران والأرضيات لفتحات دقيقة بدون غبار"). 4. **البورتفوليو/الأعمال (Portfolio/Gallery)**: معرض متجاوب لـ6-7 صور مشاريع (مثل حفر كور لـHVAC في مكاتب الدمام)، مقسم 3 في السطر في الديسكتوب، مع lightbox للتكبير. كل صورة ليها caption بالعربي/الإنجليزي، وأضفنا card تفاعلي لمشروع جديد مع تفاصيل (عنوان، وصف، صور إضافية، مهارات مثل "حفر كور"، قسم "استشارات إدارية"، ورابط). 5. **الفريق (Team)**: صورة رئيسية للمؤسس (محدثة لـ"تامر البيلي" مع 15+ سنة خبرة)، مع بايو قصير يركز على الشغف بالحلول الابتكارية في الحفر. 6. **التواصل (Contact)**: معلومات بسيطة (رقم +966 56 001 408، إيميل [email protected]، موقع الدمام مع خريطة Google Maps مدمجة). روابط clickable للاتصال الفوري. 7. **الفوتر (Footer)**: حقوق النشر مع روابط سريعة، وزر "عودة للأعلى". **التقنيات والميزات التقنية:** - **التصميم**: دارك مود افتراضي (رمادي غامق #0a0a0a، نصوص بيضاء، accents برتقالي #ff6b35 وأزرق #007bff)، مع glassmorphism (تأثيرات زجاجية شفافة) وأنيميشن خفيفة (fade-in عند السكرول via Intersection Observer). - **التفاعل**: تبديل لغة/مود يحفظ في localStorage، smooth scroll، hamburger menu للموبايل، lightbox للصور. - **التوافق**: متجاوب (media queries للموبايل/تابلت)، SEO جاهز (meta tags، alt texts)، وأمان (HTTPS تلقائي عند الرفع). - **الحجم والأداء**: خفيف (أقل من 100KB بدون صور)، مع lazy loading للصور. الموقع ده مثالي لعرض خدماتك كشركة بناء في الدمام – يجذب العملاء بسرعة ويبني ثقة من خلال المشاريع والإحصائيات.