أنشئ موقع معرض أعمال بتمرير أفقي وصفحات للمشاريع لمهندس معماري أو مصور

استخدم اتصالي بـ Opus Growth لهذا الغرض. إذا لم تجد الأداة التي تحتاجها، فابحث بين أدوات Opus Growth (باستخدام search_tools إن كانت في قائمتك)؛ وإذا تعذّر عليك الوصول إلى الأدوات تمامًا، فلا تخمّن وأخبرني. على خادم الاستضافة الخاص بي في Opus Growth [اسم الخادم]، ابنِ موقع معرض أعمال بتمرير أفقي لـ [اسم المكتب أو المصور]. ما أقدمه: [العمارة أو التصميم الداخلي أو التصوير؛ أي نوع من الأعمال]، المدينة: [المدينة، الحي]، سنة التأسيس والفريق: [السنة، عدد الأفراد، اسم المؤسس]. المشاريع: [لكل مشروع: الاسم، المكان، السنة، الحالة، المساحة المبنية أو نوع الجلسة، ملخص بجملة واحدة، السؤال، المقاربة، العملية، المواد أو التقنية، رابطا صورتين على الأقل]. الأعمال الجارية: [الاسم، المكان، السنة، جملة واحدة]. التسجيل المهني: [إن وجد]. التواصل: [البريد الإلكتروني]، [الهاتف]، [رقم WhatsApp]، [العنوان]. النطاق: [النطاق]. الصفحات: الرئيسية (/: قسم hero، معرض أفقي للمشاريع، المقاربة، الأسئلة الشائعة)، وصفحة لكل مشروع (/projeler/[اسم-المشروع]/: صورة بعرض كامل، بطاقة معلومات، السؤال، المقاربة، العملية، المواد، صورة ثانية، رابط إلى المشروع التالي)، والمكتب والتواصل (/ofis/، مع قسم التواصل عند المرساة #iletisim)، والخصوصية وKVKK (/gizlilik/) وصفحة 404.html. بدون نموذج؛ يكفي البريد الإلكتروني والهاتف ورابط WhatsApp برسالة معبأة مسبقًا. إذا لم تكن لمشروع جارٍ صفحة تفاصيل، فلا تجعل بطاقته رابطًا. الأسلوب: معرض أعمال هادئ بطابع المعارض الفنية. خلفية بلون حجر الكلس، ونص داكن، وزوايا حادة وخطوط رفيعة؛ ولا يظهر لون التمييز إلا عند التمرير بالمؤشر (hover) والتركيز. خط عناوين بخطوط سيريف من Fontshare (مثل Erode) وخط نص غروتسك بسيط (مثل Archivo). على سطح المكتب يملأ قسم hero الشاشة، فيبدأ المعرض أسفل المشهد الأول. قواعد الحركة (الجزء الأصعب، التزم بها حرفيًا): 1. المكتبات: GSAP 3.13 core وScrollTrigger وLenis، في الصفحة الرئيسية وصفحات المشاريع. لا يتم تحميل SplitText وSwiper؛ ولا نصوص برمجية إطلاقًا في صفحتي المكتب والخصوصية. 2. الـ HTML والـ CSS الافتراضيان عبارة عن تكديس عمودي: عمود واحد على الهواتف وشبكة من عمودين على سطح المكتب. بدون JS ومع تقليل الحركة وعلى الهواتف يبقى المعرض هكذا. 3. اترك لـ CSS، لا لـ JS، بناء التخطيط الأفقي: عند عرض 768 px فأكثر وعند وجود الصنف `.anim`، يكون المسار `display:flex` و`width:max-content` و`height:calc(100vh - ارتفاع الترويسة)` منذ أول رسم، ويتمرر الغلاف من تلقاء نفسه عبر `overflow-x:auto`. بهذا لا يتغير التخطيط عند وصول JS (CLS 0)، وإذا لم تصل المكتبة أبدًا يمكن تمرير المعرض جانبيًا. 4. باستخدام gsap.matchMedia، وفقط لـ `(min-width: 768px)`، ثبّت الغلاف بـ ScrollTrigger مع scrub 0.8 وقيمة end تساوي فائض المسار ("+=" + (track.scrollWidth - innerWidth)) وتفعيل invalidateOnRefresh؛ وأضف صنفًا يعطي الغلاف `overflow:hidden`. يتقدم خط تقدم رفيع بواسطة scaleX. 5. كشف الصور: تنفتح صور المعرض من اليسار إلى اليمين باستخدام containerAnimation، من clip-path `inset(0 100% 0 0)` إلى `inset(0)`. لا تُخفِ أبدًا اللوحة الظاهرة في المشهد الأول ولا صورة hero. على الهواتف وفي صفحات المشاريع، تنفتح إلى الأعلى بـ clip-path فقط الصور الموجودة أسفل الشاشة عند التحميل. 6. لوحة المفاتيح: عندما يصل Tab إلى بطاقة خارج الشاشة في المسار، يمرر المتصفح الغلاف داخليًا فتختفي البطاقة. عند focusin، أعد scrollLeft الخاص بالغلاف إلى 0 ومرر الصفحة إلى الموضع العمودي الذي تظهر فيه البطاقة (scrollTrigger.start + (end - start) * الإزاحة اليسرى للبطاقة / الفائض الكلي). بدون هذه الخطوة بقيت البطاقة الثالثة التي وصلنا إليها بـ Tab خارج الشاشة في العرض التجريبي. 7. فعّل Lenis فقط على أجهزة `(pointer: fine)` واربطه بـ ScrollTrigger.update؛ وعند الروابط الداخلية مثل #projeler، انقل التركيز إلى الهدف بعد التمرير. الإعداد والمطبات المعروفة (كل واحدة منها كلّفت نقاطًا أو كسرت شيئًا في قياس العرض التجريبي، فلا تتخطَّ أيًّا منها): 1. إذا كان هناك موقع يعمل بالفعل على الخادم، فأخبرني أولًا، لأن الإعداد يستبدل index.html ومجلد assets. اعرض معاينة لـ scaffold_site مع confirm=false واستدعِها مع confirm=true بعد موافقتي. ثم اقرأ site_design_guide وsite_seo_guide. قبل كتابة الكود، ضع اتجاه التصميم (الخطوط واللون والشبكة والعنصر المميز ولغة الحركة والمكتبات التي لن يتم تحميلها) في ملف ART.md قصير خارج assets واعرضه عليّ. 2. اضبط Tailwind بالتجميع، ولا تحمّله من CDN. ثبّت `npm i -D tailwindcss@3` باستخدام site_run_command مع background=true، وتابعه عبر site_command_status. يجب أن تغطي مسارات content في `tailwind.config.js` كل ملفات HTML وكل القوالب وكل ملفات JS التي تكتب أصنافًا. يحتوي `_src/tw.css` على سطر `@import "../assets/app.css";` وأسطر `@tailwind` الثلاثة؛ جمّعه في ملف واحد بالأمر `npx tailwindcss -c tailwind.config.js -i _src/tw.css -o assets/site.css --minify`. أزل سكربت cdn.tailwindcss.com وtailwind.config المضمن من الصفحات واربط `/assets/site.css` فقط. أعد التجميع بعد كل تغيير في HTML. 3. استضف الخطوط ذاتيًا. تحقق أولًا من أن عائلة Fontshare التي تختارها تحتوي على الحروف التركية (ş وğ وı وİ وç وö وü): في العرض التجريبي لم يكن في Tanker حرف ı بلا نقطة ولم يكن في Outfit الحروف ş وğ وİ، فكانت هذه الحروف ستنتقل إلى خط آخر في العناوين. نزّل ملف woff2 لكل وزن على حدة باستخدام site_fetch إلى `assets/fonts/`، واكتب قواعد @font-face مع `font-display: swap` في `assets/app.css` (يبحث design-check عن الخط المخصص هناك) وتحقق من اسم font-family في ملف CSS الذي نزّلته. نفّذ preload لخطي العناوين والنص المستخدمين فوق خط الطي في كل صفحة عبر `<link rel="preload" as="font" type="font/woff2" crossorigin>`، قبل ملف الأنماط؛ ولا تنفذ preload لأكثر من ملفين، لأن preload لوزن ثالث في العرض التجريبي زاد LCP على الهاتف بمقدار 0.2 ثانية. تفتقر معظم خطوط Fontshare إلى رمز ₺، لذا اكتب "TL" في الأسعار. 4. اجعل القائمة والتذييل HTML ثابتًا. لا تحمّل chrome.js ولا site.config.js في الصفحات. اكتب `chrome-stamp.mjs` صغيرًا يقرأ قائمة التنقل من site.config.js ويختم `_src/header.tpl` و`_src/footer.tpl` بين العلامتين `<!-- nav:start --><!-- nav:end -->` و`<!-- footer:start --><!-- footer:end -->` في كل صفحة، مع إضافة aria-current="page" إلى الرابط النشط. يجب ألا تنتهي القوالب بـ .html وأن تستخدم عناصر نائبة مثل `[[NAV]]` بدل `{{...}}`. ابنِ قائمة الهاتف بدون JS باستخدام `<details>`. أبقِ اسم المؤسسة والعنوان والهاتف نصًا عاديًا في التذييل، واجعل كل هدف لمس بحجم 44x44 px على الأقل، بما في ذلك روابط التذييل ومسار التنقل (breadcrumb). 5. حوّل الصور أثناء تنزيلها بـ site_fetch: احفظ الصورة نفسها مع resize="480x" و"800x" و"1200x" وimage_format="webp" وquality=65 في ملفات منفصلة. لا يقص site_fetch الصور أبدًا؛ وعندما تحتاج صورة من Unsplash إلى نسبة أخرى، نزّل النسخة المقصوصة بإضافة معاملات مثل `?w=1600&h=1200&fit=crop` إلى عنوانها. أعطِ كل `<img>` سمات srcset وsizes وwidth وheight تطابق النسبة الحقيقية. تحصل الصورة الرئيسية فوق خط الطي على fetchpriority="high" ولا تكون lazy؛ وتحصل البقية على loading="lazy" decoding="async". إذا كانت الصورة الرئيسية تملأ الشاشة على الهاتف، فقدّم قصًا أصغر عبر `<picture>`. 6. اكتب نسخة SVG من الشعار باسم favicon.svg باستخدام site_write_file وأضف `<link rel="icon" href="/favicon.svg" type="image/svg+xml">` إلى كل صفحة. بدون أيقونة موقع يسجل المتصفح خطأ 404 وينخفض Best Practices إلى 96. 7. قواعد مدقق HTML: ابدأ بـ `<!DOCTYPE html>` بأحرف كبيرة، واستخدم `&nbsp;` للمسافات في النص المرئي لروابط tel:، ولا تستخدم السمة style="" أبدًا، وأعطِ كل زر type="button"، ولا تضع `<details>` داخل `<figure>` بعد figcaption. 8. نزّل مكتبات الحركة (GSAP وScrollTrigger وLenis) من jsdelivr إلى `assets/vendor/` باستخدام site_fetch، وثبّت الإصدار وحمّلها فقط في الصفحة الرئيسية وصفحات المشاريع. لا تستخدم `<script defer>`؛ ضع محمّلًا صغيرًا في نهاية الصفحة ينتظر حدث load ثم استدعاءين لـ requestAnimationFrame ثم requestIdleCallback، ويُلحق السكربتات بالترتيب مع async=false. يضيف سكربت من سطر واحد في `<head>` الصنف `js` إلى `<html>` والصنف `anim` ما لم تكن قيمة prefers-reduced-motion هي "reduce"؛ وبدون `anim` لا ينزّل المحمّل شيئًا. عرّف حالات البداية المخفية تحت `.anim` فقط، وأضف حركة CSS كشبكة أمان تكشف كل العناصر المخفية بعد 2.5 ثانية في حال لم تصل المكتبة أبدًا. في عروض تجريبية سابقة دفعت المكتبات المؤجلة LCP على الهاتف إلى 3.2 ثانية؛ ومع هذا المحمّل سجّلت الصفحات من 99 إلى 100. سمِّ سمة العناصر التي تظهر عند التمرير data-reveal؛ فلا يتعرف design-check على الحركة إلا بهذا الاسم. SEO وAEO وGEO: 1. استخدم عناوين URL بنمط المجلدات مع شرطة مائلة في النهاية (/projeler/[اسم-المشروع]/ و/ofis/ و/gizlilik/). املأ كتلة seo في site.config.js ونفّذ `node seo-stamp.mjs`. اكتب schema الخاص بكل صفحة (الرئيسية: WebPage وFAQPage؛ وكل صفحة مشروع: WebPage مع CreativeWork كـ mainEntity، تتضمن dateCreated وlocationCreated وimage؛ والمكتب: AboutPage مع Person للمؤسس؛ وBreadcrumbList في الصفحات الداخلية. لاستوديو عمارة أو تصوير له مكتب، businessType هو ProfessionalService) في كتل `<script type="application/ld+json">` منفصلة واربطها بالرسم الأساسي عبر @id. لا تضع BreadcrumbList داخل @graph؛ أبقِه في كتلة مستقلة، لأن هذه هي الطريقة الوحيدة التي يراه بها seo-check. 2. أبقِ العناوين عند 60 حرفًا أو أقل (يعدّ seo-check كل ما يزيد على 65 خطأ)، والأوصاف بين 120 و158 حرفًا، وعنوان h1 واحدًا لكل صفحة، وبدون تخطي أي مستوى من مستويات العناوين (وضع h3 مباشرة بعد h1 خفّض إمكانية الوصول إلى 98). تحتاج كل صفحة إلى 150 كلمة على الأقل من المحتوى الرئيسي؛ وغالبًا ما تقصر صفحتا التواصل والخصوصية عن ذلك. 3. تجيب الفقرة الأولى من كل صفحة مباشرة عن سؤال الصفحة. اكتب أسئلة شائعة خاصة بكل صفحة باستخدام `<details>` ووسمها بـ FAQPage. أظهر المؤسسة الناشرة وتاريخ "آخر تحديث" داخل `<time>`. 4. في robots.txt، اكتب قرارك وبرّره لكل من GPTBot وOAI-SearchBot وChatGPT-User وClaudeBot وClaude-User وClaude-SearchBot وPerplexityBot وPerplexity-User وGoogle-Extended وApplebot-Extended وBingbot وCCBot، وأشِر إلى خريطة الموقع. أعطِ sitemap.xml تواريخ lastmod حقيقية. يحتوي llms.txt على ملخص دقيق للموقع من جملتين والحقائق الأساسية وقائمة بالصفحات المهمة. 5. لا اختلاق: لا تكتب مراجعات أو تقييمات أو جوائز أو أعداد عملاء أو شهادات أو ساعات عمل أو إحداثيات أو أسعارًا دون أن تسألني. اترك أي حقل لا تعرفه خارج schema تمامًا. بوابات الجودة (بالترتيب؛ لا تقل "تم" حتى تنجح جميعها): 1. باستخدام site_run_command نفّذ `node chrome-stamp.mjs` ثم تجميع Tailwind ثم `node seo-stamp.mjs` ثم `node seo-check.mjs` (0 أخطاء، 0 تحذيرات) ثم `node design-check.mjs` (0 أخطاء؛ برّر أي تحذير متبقٍّ) ثم `npx html-validate "**/*.html"` (0 أخطاء). 2. اعرض كل صفحة بـ site_preview مع view="mobile" وview="desktop". يلتقط site_preview الصفحة مع إيقاف الحركة (reduced-motion)؛ وإذا نقص محتوى في هذه اللقطة فهذا يعني أن حالة عدم وجود الحركة معطلة. قد تظهر الصور الكسولة في الأسفل فارغة في لقطة الصفحة الكاملة؛ لا تعدّ ذلك خطأ، لكن تحقق من مساراتها. 3. نفّذ core_web_vitals مع strategy="mobile" وstrategy="desktop" لكل صفحة. معيار القبول: على الهاتف Performance لا يقل عن 95 وAccessibility وBest Practices وSEO بقيمة 100؛ وعلى سطح المكتب تكون الأربعة جميعها 95 على الأقل. للصفحة التي لا تحقق ذلك، اعثر على الملف البطيء باستخدام resources=true وأصلحه وأعد القياس. ثم نفّذ seo_audit على الصفحة الرئيسية مع strategy="mobile" وruns=2. يجب ألا يبقى أي عنوان خارج نطاقك الخاص في قائمة طلبات الشبكة. 4. لا تمرير أفقي عند 360 و390 و768 و1440 px، وأهداف لمس لا تقل عن 44 px ولا أخطاء في وحدة التحكم (console). ويجب أن يبدو الموقع سليمًا تمامًا داخل إطار 390x790 وإطار 1440x898 أيضًا، كما في صفحات الـ prompts. فحص الحركة: لا يستطيع site_preview عرض الحركة، لذا أخبرني بما يجب أن أراقبه في متصفحي. على سطح المكتب، يجب أن يثبت المعرض في الأعلى عند الوصول إلى قسم المشاريع، وأن تنساب البطاقات إلى اليسار أثناء التمرير للأسفل، وأن تنفتح الصور من اليسار إلى اليمين، وأن يمتلئ خط التقدم؛ وبعد البطاقة الأخيرة تعود الصفحة إلى التدفق العادي. عند التنقل بين البطاقات بـ Tab، يجب أن تكون البطاقة المركَّز عليها دائمًا على الشاشة. على الهاتف ومع تفعيل تقليل الحركة، يكون المعرض عبارة عن تكديس من البطاقات ولا يثبت أي شيء. بعد النشر: اعرض معاينة للقاعدة `/assets/* Cache-Control: public, max-age=31536000, immutable` باستخدام site_headers وطبّقها بعد موافقتي؛ ومن ذلك الحين، غيّر رقم إصدار اسم الملف كلما تغير CSS أو JS (site-v2.css وهكذا). أرسل sitemap.xml باستخدام gsc_submit_sitemap وافحص الصفحة الرئيسية بـ gsc_url_inspect. وأخيرًا قدّم لي: جدول نتائج لكل صفحة (الصفحة، النتائج الأربع على الهاتف، النتائج الأربع على سطح المكتب، LCP، CLS)، ونتائج البوابات، ونتيجة التفاعلات التي جرّبتها في المتصفح، وقائمة الإصلاحات التي طبّقتها.