أنشئ معرض أعمال داكنًا للمطورين بأسلوب Linear وVercel مع بطاقات بتأثير الإضاءة وقائمة أوامر Ctrl K

استخدم اتصالي بـ Opus Growth لهذا الغرض. إذا لم تجد الأداة التي تحتاجها، فابحث بين أدوات Opus Growth (باستخدام search_tools إن كانت في قائمتك)؛ وإذا تعذّر عليك الوصول إلى الأدوات تمامًا، فلا تخمّن وأخبرني. على موقع [اسم الخادم] في خادم الاستضافة الخاص بي على Opus Growth، أنشئ معرض أعمال شخصيًا ثابتًا لـ [اسمي الكامل] بطابع داكن وهادئ مثل موقعي Linear وVercel. نبذة عني: [مسمّاي الوظيفي، مدينتي، ما أعمله ومنذ كم سنة، جملتان]. المشاريع: [for each one the name, year, my role, whether I may publish the client's name, the technologies, context, constraints, approach and outcome notes, and a screenshot link]. المقالات: [العنوان أو التاريخ أو النص أو المسودة]. الخبرة: [الفترات الزمنية بالسنوات والأدوار الوظيفية]. التواصل: [البريد الإلكتروني]؛ الملفات التي أريد نشرها: [GitHub أو LinkedIn وغيرها، أو "لا شيء"]. متاح لأعمال جديدة: [نعم ومنذ متى، أو لا]. النطاق: [النطاق]. الصفحات: الرئيسية (مقدمة قصيرة، أعمال مختارة، آخر المقالات، ما أعمل عليه الآن، أسئلة شائعة)، المشاريع (/projeler/)، صفحة لكل دراسة حالة (/projeler/[slug]/: السياق، القيود، المنهج، النتيجة، معلومات المشروع)، الكتابات (/yazilar/)، صفحة لكل مقال (/yazilar/[slug]/)، نبذة عني (/hakkimda/) و404.html. إذا لم يوافق العميل على الأرقام، فلا تكتب نسبًا مئوية أو مدد زمنية في دراسة الحالة؛ صف النتيجة وصفًا نوعيًا. الأسلوب: داكن وبسيط. خلفية بحدود #09090B، وبطاقات أفتح بدرجة واحدة، وحد رمادي داكن بسماكة 1 بكسل، ونص أبيض تقريبًا، ونص ثانوي بلون رمادي بتباين لا يقل عن 7:1 مع الخلفية، ولون تمييز واحد يُستخدم فقط لنقطة الحالة وحلقة التركيز والروابط. وزنان من خط Grotesk من Fontshare (مثل Bespoke Sans بوزني 400 و500)؛ وللتواريخ والتسميات استخدم مجموعة الخطوط أحادية المسافة في النظام دون تنزيل خط (ui-monospace, SFMono-Regular, Menlo, Consolas). إذا بدت الأرقام بنمط old-style فاضبط `font-variant-numeric: lining-nums`. لا توجد صورة في الواجهة الرئيسية؛ وتُرسم خلفها بـ CSS خطوط شبكة رفيعة تتلاشى تحت قناع. قواعد التفاعل: 1. لا يتم تحميل GSAP وLenis وSwiper ومكتبات البحث الجاهزة (Fuse.js وما شابهها). تحصل كل صفحة على ملف `ix.js` صغير واحد مع defer (الإضاءة، زر قائمة الأوامر، data-reveal)، وتكون قائمة الأوامر نفسها في ملف `ara.js` منفصل. لا يُنزَّل ara.js مع الصفحة؛ بل يُحمَّل عندما يدخل المؤشر إلى الزر أو يصل إليه التركيز، أو عند فتح القائمة لأول مرة. في العرض التجريبي لم تكن صفحات المقالات تحتوي على ix.js ولم يكن Ctrl K يعمل فيها؛ يجب أن تتصرف القائمة بالطريقة نفسها في كل صفحة. 2. بطاقات الإضاءة: ضوء ناعم على ::before الخاص بالبطاقة بـ `radial-gradient(420px circle at var(--mx) var(--my), ...)` وتوهج بلون التمييز على الحد بسماكة 1 بكسل في ::after باستخدام mask-composite. يضيف JS مستمع pointermove واحدًا فقط إلى الحاوية المحيطة بالبطاقات، ويقيّد وتيرته بـ requestAnimationFrame، ويكتب --mx و--my نسبةً إلى صندوق كل بطاقة ويمسحهما عند مغادرة المؤشر. يعمل هذا فقط على الأجهزة التي تطابق `(hover: hover) and (pointer: fine)` ولا تطلب تقليل الحركة؛ وعلى اللمس تبقى البطاقة عادية. رابط عنوان البطاقة يغطي البطاقة كلها عبر ::after. 3. قائمة الأوامر: عنصر "بحث" في الترويسة هو رابط حقيقي إلى /projeler/ في HTML (مفيد عند تعطيل JS) ويحمل aria-keyshortcuts="Control+K Meta+K". يعترض JS النقرة؛ وتفتح القائمة بالمفاتيح Ctrl K وCmd K و/ (خارج حقول النص). القائمة عبارة عن `<dialog>` يبنيها JS عند أول فتح ويفتحها بـ showModal: مربع بحث بـ role="combobox" وaria-expanded وaria-controls وaria-autocomplete="list" وaria-activedescendant، وقائمة نتائج بـ role="listbox"، ومنطقة role="status" تقرأ عدد النتائج. تحرك مفاتيح الأسهم التحديد، ويذهب Enter إلى الصفحة المحددة، ويغلق Esc القائمة عبر السلوك الأصلي للـ dialog، والنقر على الخلفية يغلقها، ويعود التركيز إلى الزر عند الإغلاق. 4. فهرس البحث `/assets/ara.json`: العنوان، والنوع (Project، Post، Page)، وURL، وملخص من جملة واحدة، وكلمات مفتاحية لكل مشروع ومقال وصفحة رئيسية. لا تكتب هذا الملف يدويًا؛ ولّده من البيانات نفسها التي تستخدمها لصفحات المشاريع والمقالات حتى لا يختلف الاثنان أبدًا. اجعل البحث غير حساس للأحرف التركية (toLocaleLowerCase("tr")، ثم توحيد ı وş وğ وü وö وç)، واشترط تطابق كل الكلمات، ورتّب تطابقات العنوان أعلى. 5. تبدأ صفحة دراسة الحالة بجدول معلومات (السنة، الدور، العميل، التقنية) ولقطة الشاشة التي تمثل عنصر LCP فيها (fetchpriority="high"، دون lazy)؛ وتكون عناوين البطاقات h2 في صفحات القوائم وh3 داخل قسم h2 في الصفحة الرئيسية. Schema: ProfilePage في الرئيسية وصفحة النبذة (mainEntity Person)، وPerson (@id /#person: name وjobTitle وurl وemail وعنوان بالمدينة والبلد فقط وknowsAbout وsameAs للملفات التي أعطيتك إياها فقط). كتلة Organization التي يكتبها seo-stamp تمثل نشاطك التجاري كفرد؛ اربط Person بها عبر worksFor. تحصل المشاريع على CollectionPage مع hasPart؛ وكل دراسة حالة هي CreativeWork (creator وهو Person، وdateCreated وimage وkeywords)؛ وتحصل الكتابات على Blog وكل مقال على BlogPosting (headline وimage وdatePublished وdateModified وauthor وهو Person؛ يعرض seo-check خطأ إذا غاب image أو datePublished). تحتوي المحاضرات والجوائز وقوائم العملاء على حقائق قابلة للتحقق فقط. الإعداد والمزالق المعروفة (كل واحدة منها كلفت نقاطًا في قياسات العرض التجريبي، فلا تتجاوز أيًّا منها): 1. إذا كان هناك موقع يعمل بالفعل على الخادم، فأخبرني أولًا لأن الإعداد يستبدل index.html ومجلد assets. اعرض معاينة scaffold_site مع confirm=false، ولا تستدعه مع confirm=true إلا بعد موافقتي. ثم اقرأ site_design_guide وsite_seo_guide. قبل كتابة الكود، ضع اتجاه التصميم (الخطوط، الألوان، الشبكة، العنصر المميز، لغة الحركة، والمكتبات التي لن تُحمَّل) في ملف ART.md قصير خارج assets واعرضه علي. 2. قم بتجميع Tailwind ولا تحمّله من CDN. ثبّته بـ site_run_command مع background=true (`npm i -D tailwindcss@3`) وتابعه بـ site_command_status. يجب أن تغطي مسارات content في `tailwind.config.js` كل ملفات HTML وقوالب `_src` وأي ملف 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. استضف الخطوط بنفسك. اقرأ CSS عائلة Fontshare التي اخترتها، ونزّل woff2 لكل وزن على حدة بـ site_fetch إلى `assets/fonts/`، واكتب قواعد @font-face مع `font-display: swap` في `assets/app.css`، وهو المكان الذي يبحث فيه design-check عن الخط المخصص. تحقق من اسم font-family في CSS المنزَّل وتأكد من أن العائلة تحتوي على الأحرف التركية ı وİ وş وğ (خط Tanker لا يحتوي على ı). نفّذ preload لكل الأوزان المستخدمة في الشاشة الأولى بـ `<link rel="preload" as="font" type="font/woff2" crossorigin>` وضعه قبل سطر ورقة الأنماط؛ وإذا زادت الملفات عن ثلاثة فاستخدم أوزانًا أقل. في العرض التجريبي، وزن واحد للنص لم يُحمَّل مسبقًا رفع LCP على الجوال إلى 2.6 ثانية وخفّض Performance إلى 97. معظم خطوط Fontshare لا تحتوي على رمز ₺، لذلك اكتب الأسعار بـ "TL". 4. اجعل القائمة والتذييل HTML ثابتًا. لا تحمّل chrome.js أو motion.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" إلى الرابط النشط. استخدم عناصر نائبة مثل `[[NAV]]` بدل `{{...}}` ولا تعطِ القوالب امتداد .html، وإلا عامل design-check وseo-check القوالب كصفحات غير مكتملة. ابنِ قائمة الجوال بعنصر `<details>` دون JS. أبقِ اسم النشاط والعنوان والهاتف نصًا عاديًا في التذييل، واجعل ارتفاع روابط التذييل ومسار التنقل 44 بكسل على الأقل. 5. حوّل الصور أثناء جلبها بـ site_fetch: اكتب الصورة نفسها في ملفات منفصلة مع resize="480x" و"800x" و"1200x" وimage_format="webp" وquality=60 (لا يقص site_fetch الصور، لذا اطلب المصدر بالنسبة التي تحتاجها). أعطِ كل `<img>` قيم srcset وsizes وwidth وheight مطابقة للنسبة الفعلية. الصورة التي تمثل عنصر LCP في الصفحة تحصل على fetchpriority="high" ولا تكون lazy؛ وكل صورة أخرى تحصل على loading="lazy" decoding="async". إذا ملأت صورة الشاشة الأولى على الجوال، فقدّم للجوال قصة أصغر عبر `<picture>`. 6. أضف `<link rel="icon" href="/favicon.svg" type="image/svg+xml">` إلى كل صفحة وأنشئ apple-touch-icon بحجم 180 بكسل من الشعار بـ site_fetch مع resize="180x180". بدون رابط favicon يطلب المتصفح /favicon.ico ويسجل خطأ 404 وينخفض Best Practices إلى 96. 7. قواعد مدقق HTML: ابدأ كل مستند بـ `<!DOCTYPE html>` بأحرف كبيرة؛ يجب أن يكون كل فراغ في النص المرئي لرابط tel: هو `&nbsp;`، بما في ذلك الفراغ بعد بادئة مثل "اتصل:&nbsp;0212..."؛ لا تستخدم style=""؛ أعطِ كل button قيمة type؛ ضع aria-label فقط على المعالم (landmarks) أو النماذج أو العناصر التفاعلية (على ul أو div دون role كان ذلك خطأ)؛ لا تعطِ معلمين الاسم نفسه أبدًا؛ لا تترك مسافات بيضاء في نهاية الأسطر. 8. لا تتخطَّ مستويات العناوين: في صفحة قائمة، أدّت عناوين البطاقات بوسم h3 مباشرة بعد h1 إلى خفض Accessibility إلى 98. عند إعادة استخدام بطاقة، اضبط مستوى عنوانها لكل صفحة (h2 في صفحة القائمة، وh3 داخل قسم h2). 9. سمِّ سمة الحركة data-reveal (لا يتعرف design-check على الحركة إلا بهذا الاسم). يعطي JS الحالة الأولية المخفية فقط للكتل الواقعة أسفل الشاشة عند فتح الصفحة، ولا يخفي أبدًا محتوى الشاشة الأولى؛ استخدم transform لأن التلاشي بـ opacity يخفض تدقيق التباين. ضع السمة على الكتلة التي تحيط بالعنوان ووصفه، لا على العنوان وحده؛ ففي العرض التجريبي انزلق عنوان منتظر فوق الفقرة التي تحته. مع prefers-reduced-motion: reduce لا يُخفى أي شيء وتُعطَّل الحركات. SEO وAEO وGEO: 1. استخدم روابط بنمط الدلائل مع شرطة مائلة في النهاية. املأ كتلة seo في site.config.js ونفّذ `node seo-stamp.mjs`. اكتب schema الخاص بكل صفحة في كتل `<script type="application/ld+json">` منفصلة مرتبطة بالرسم الأساسي عبر @id. لا تضع BreadcrumbList داخل @graph؛ أبقه في كتلته الخاصة، فهذه هي الطريقة الوحيدة التي يراه بها seo-check. 2. العناوين 60 حرفًا كحد أقصى (يعتبر seo-check أي عنوان أقل من 25 أو أكثر من 65 خطأ)، والأوصاف من 130 إلى 158 حرفًا، وh1 واحد لكل صفحة، و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)؛ وإذا كان هناك محتوى مفقود في هذه اللقطة فالحالة الثابتة معطوبة. في لقطات الصفحة الكاملة قد تظهر العناصر الثابتة مثل الشريط اللاصق في منتصف الصفحة وقد تظهر الصور lazy الأبعد فارغة؛ لا تعدّ ذلك أخطاء، لكن تحقق من مساراتها. 3. نفّذ core_web_vitals لكل صفحة مع strategy="mobile" وstrategy="desktop". معيار القبول: على الجوال Performance لا يقل عن 95 (الهدف من 99 إلى 100) وAccessibility وBest Practices وSEO بقيمة 100؛ وعلى سطح المكتب الأربعة بقيمة 100. للصفحة التي تفشل، استخدم resources=true لإيجاد الملف الذي يؤخرها، وأصلحه وقِس مرة أخرى. ثم نفّذ seo_audit على الصفحة الرئيسية مع strategy="mobile" وruns=2. يجب ألا يبقى أي عنوان خارج نطاقك الخاص في قائمة طلبات الشبكة. 4. لا تمرير أفقي عند عرض 360 و390 و768 و1440 بكسل، ومناطق اللمس 44 بكسل على الأقل، ولا أخطاء في وحدة التحكم (console). فحص التفاعل: لا يستطيع site_preview عرض التمرير بالمؤشر (hover) ولا اختصارات لوحة المفاتيح ولا مربعات الحوار. أخبرني كيف أتحقق على سطح المكتب من أن الضوء يتبع المؤشر فوق البطاقات؛ وأن Ctrl K وCmd K و/ تفتح القائمة؛ وأن الكتابة دون أحرف تركية لا تزال تعثر على نتائج ("erisilebilir" وما شابهها)؛ وأن مفاتيح الأسهم وEnter تنقلني إلى مقال؛ وأن التركيز يعود إلى زر البحث بعد Esc؛ وأنه مع تعطيل JavaScript يفتح رابط البحث صفحة المشاريع. بعد النشر: اعرض معاينة القاعدة `/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)، ونتيجة كل بوابة، وقائمة الإصلاحات التي طبقتها.