القائمة
Portfolio bento grid with A4 CV, zinc surfaces, and Syne display typography
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| schemaVersion | 1 |
| name | bentofolio |
| description | Portfolio bento grid with A4 CV, zinc surfaces, and Syne display typography |
cell variants (hero, photo, skills, contact, formation, interests, projects)#f0f0f3, white cards #ffffff, text #111113, muted #6b6b76, borders #dcdce0#6366f1 for interactive states, category badges, and active elementsSyne (display/headings), SF Pro Display (body), JetBrains Mono (code/technical)Cell({ variant, glow, className, children }) — Bento grid card with optional mouse-follow glowhero, photo, skills, contact, formation, interests, projectsIcon({ name, size }) — Inline SVG icons (lucide-style), 40+ iconsBadge({ label, color }) — Colored labelChip({ label, variant }) — Outline/solid pillTechTag({ label, tech }) — Category-colored tech pill using .t-{tech} CSS classSectionTitle({ title }) — Section headingCatGlyph({ cat, size }) — Category icon with colorCatPill({ cat }) — Category badge with icon + labelCatPills({ project, max }) — Multi-category pills for a projectHomeView — Bento grid with hero, photo, skills, contact, formation, interests, projects previewProjectsView — Filterable project gallery with category chipsProjectDetailView — Full project detail page with case studyCvView — A4 CV with project selection, download/printContactView — Contact form + info cardAdminView — Mini-CMS dashboard (password: bento)--cat-dev, --cat-webdesign, --cat-3d, --cat-animation, --cat-logo, --cat-tooling, --cat-tools, --cat-devops, --cat-ai.t-laravel, .t-vue, .t-react, .t-tailwind, .t-docker, etc. — 20+ tech-specific accent classesauto-fill / minmax[data-theme="dark"] selector in app/styles.cssconfig.json (single source of truth)app/config-runtime.js (preview iframe, postMessage validation)id, name, categories[], featured, techs[], role, period, duration, description, caseStudy, highlights[], demoUrl, repoUrl, image/api/admin/save write directly to config.jsonbun run build embeds config.json into the production bundleIcon component