Batta Studio — Website · موقع بطة ستوديو

الموقع الرسمي لـ Batta Studio — استوديو برمجيات مستقل نبني فيه تطبيقات ويب وموبايل، وأدوات للمطوّرين، وألعاب، بالإضافة إلى أعمال العملاء. مبني بـ HTML / CSS / JS عادي بدون أي build step، جاهز للرفع مباشرة على GitHub Pages.

The official Batta Studio site — an independent software · tools · games studio (plus client work). Plain HTML/CSS/JS, no build step, ready for GitHub Pages.

---

📁 الملفات / Files

index.html              الصفحة الواحدة / single page
                        (hero + stats + tech marquee + about + projects + clients + follow)
assets/
  styles.css            التنسيقات / styles
  script.js             i18n (EN/AR) + عرض المشاريع + parallax
  games.js              ← بيانات المشاريع مفتوحة المصدر / open-source project data
  projects/             لقطات شاشة وأيقونات المشاريع / project screenshots + app icons
  clients/              شعارات العملاء / client logos (e.g. nasaa.svg)
  logo.svg              شعار البطة كامل / full mascot
  logo-head.svg         رأس البطة (أيقونة) / head icon
  batta-*.png           صور الماسكوت / mascot art
  og-image.png · social-card.png   صور المشاركة / social previews
  icons/ · icons-outline/          مكتبة أيقونات واجهة (غير مستخدمة بالصفحة) / UI icon library (unused by the page)

---

➕ إضافة/تعديل مشروع مفتوح المصدر / Add or edit an open-source project

عدّل assets/games.js وأضف بلوك داخل window.BATTA_GAMES — يظهر تلقائياً في قسم المشاريع. Edit assets/games.js; add a block to window.BATTA_GAMES — it renders automatically.

{
  title: "My Project",
  titleAr: "مشروعي",
  tagline: "One-line pitch in English.",
  taglineAr: "جملة تعريفية بالعربي.",
  status: "released",                 // released | development | prototype | soon
  tags: ["Web", "TypeScript", "AI"],
  accent: "#2E505E",                  // لون الغلاف / cover accent
  emoji: "🤖",                        // احتياطي إذا ما في صورة / fallback if no image
  image: "assets/projects/my.png",    // لقطة شاشة الغلاف (اختياري) / cover screenshot (optional)
  icon:  "assets/projects/my-icon.png", // أيقونة صغيرة فوق الصورة (اختياري) / small overlay icon (optional)
  repo:  "https://github.com/battastudio/MyProject",  // زر Code (اختياري)
  link:  "https://battastudio.github.io/MyProject/"   // زر Demo (اختياري)
}

• إذا ما في link/repo (مثلاً "قريباً")، ما تظهر أزرار Demo/Code.
• If link/repo are omitted (e.g. coming soon), the Demo/Code buttons are hidden.

---

🤝 إضافة/تعديل عميل / Add or edit a client

العملاء مكتوبون يدوياً كبطاقات .ccard داخل قسم Clients في index.html. Clients are hardcoded .ccards in the Clients section of index.html.

• شارة الحالة / status pill: <span class="cbadge released|development|soon" data-i18n="clients.live|progress|soon">.
• الشعار / logo tile: <div class="ccard-logo"> (شعار على خلفية بيضاء)، أو أضف ccard-logo--fill ليملأ المربّع / add ccard-logo--fill to make the logo fill the tile. للإيموجي استخدم <span class="cc-emoji">.
• الأزرار / buttons: gbtn gbtn-primary (أساسي)، gbtn (رابط)، gbtn is-soon (معطّل "Soon").
• النص / copy: أضف مفتاح clients.<name> في I18N داخل script.js (عربي + إنجليزي).

---

🌐 اللغتان / Bilingual (i18n)

كل النصوص في خريطة I18N داخل assets/script.js مع سمة data-i18n على العنصر. الإنجليزية هي الافتراضية، وزر اللغة يبدّل للعربية (RTL). أي نص جديد أضف له اللغتين.

Every string lives in the I18N map in assets/script.js with a data-i18n attribute on the element. English is the default; the toggle switches to Arabic (RTL). Add both languages for any new string.

---

♻️ كسر الكاش / Cache-busting

لمّا تعدّل assets/*.js أو assets/*.css، زِد رقم ?v= على وسوم <link>/<script> في index.html (مثلاً styles.css?v=2 → ?v=3) — وإلا GitHub Pages/المتصفح بيخدم نسخة قديمة مخزّنة.

When you change assets/*.js|css, bump the ?v= on the <link>/<script> tags in index.html, otherwise GitHub Pages/browsers serve stale cached assets.

---

🔗 مزامنة ملف المنظمة / .github sync

فقط المشاريع مفتوحة المصدر المنشورة تُنسخ إلى ملف المنظمة (../.github/profile/README.md، إنجليزي فقط). العملاء ومشاريع "قريباً/قيد التطوير" تبقى على الموقع فقط. (راجع CLAUDE.md.)

Only released open-source projects mirror to the org profile (../.github/profile/README.md, English-only). Clients and coming-soon/in-progress items are Portfolio-only. (See CLAUDE.md.)

---

🎨 الهوية / Brand

Teal #2E505E · Orange #F98C40 · Yellow #FFD65B · Cream #FBF4E6 · Ink #1C2E33. الخطوط / Fonts: Space Grotesk (EN) · Cairo (AR) · Press Start 2P (pixel accents).

الروابط الاجتماعية (LinkedIn · Instagram · GitHub) مضبوطة في index.html. Social links (LinkedIn · Instagram · GitHub) are wired in index.html.

---

🚀 الرفع / Deploy (GitHub Pages)

المستودع: battastudio/Portfolio — منشور من الفرع main والمجلد / (root). Repo battastudio/Portfolio — served from main / / (root).

1. Settings → Pages → Build and deployment → Source: Deploy from a branch.
2. اختر main + / (root) ثم Save. الموقع على / live at https://battastudio.github.io/Portfolio/.
3. لدومين خاص / for a custom domain: Settings → Pages → Custom domain + ملف CNAME.