From 3e9edc5873d7bcf0a5593bd6fdf511c3d77286e9 Mon Sep 17 00:00:00 2001 From: MOH Date: Sat, 14 Mar 2026 15:57:33 +0100 Subject: [PATCH] chore: save current workspace changes --- AGENTS.md | 51 +++ .codex/environments/environment.toml | 11 + .codex/skills/frontend-system/SKILL.md | 259 +++++---------- .../frontend-system/agents/ openai.yaml | 2 +- app/[locale]/(site)/about/page.tsx | 300 +----------------- messages/ar.json | 57 +--- messages/de.json | 57 +--- messages/en.json | 57 +--- skills/mohs-frontend-system/SKILL.md | 57 ---- .../mohs-frontend-system/agents/openai.yaml | 4 - 10 files changed, 162 insertions(+), 693 deletions(-) create mode 100644 AGENTS.md create mode 100644 .codex/environments/environment.toml delete mode 100644 skills/mohs-frontend-system/SKILL.md delete mode 100644 skills/mohs-frontend-system/agents/openai.yaml diff --git a/ AGENTS.md b/ AGENTS.md new file mode 100644 index 0000000..222e01f --- /dev/null +++ b/ AGENTS.md @@ -0,0 +1,51 @@ +# Agent Instructions + +Use documentation selectively. + +Always read the minimum relevant documentation before making changes. + +## Required documentation by task type + +### Small scoped changes +For small UI fixes, copy updates, styling adjustments, or isolated bug fixes: +- read only the directly relevant files +- do not read project-wide documentation unless needed + +### Feature-scoped changes +For changes affecting an existing feature: +- read the matching file in `specs/` +- read `docs/ARCHITECTURE.md` only if the change affects structure or flow + +### Large or cross-cutting changes +For new features, architecture changes, domain rule changes, or public behavior changes: +- read: + - docs/ARCHITECTURE.md + - docs/DOMAIN_RULES.md + - docs/FEATURES.md +- also read the matching file in `specs/` when applicable + +## Core rules + +- Do not introduce new patterns, abstractions, or frameworks unless explicitly requested. +- Do not refactor unrelated code. +- Do not rename files, folders, database fields, or public interfaces unless explicitly requested. +- Follow the existing folder structure and module boundaries. +- Keep changes minimal, scoped, and consistent with the current codebase. +- Reuse existing primitives, services, validators, helpers, and utilities whenever possible. +- Preserve the current implementation unless the task explicitly requires changing it. + +## Documentation updates + +Update documentation only when implementation changes affect: +- feature scope +- business rules +- architectureڑڑ +- public behavior + +Do not update documentation for small isolated fixes or purely visual changes. + +Update only the relevant files in: +- docs/ +- specs/ + +Keep documentation aligned with the real implementation, not assumptions. \ No newline at end of file diff --git a/.codex/environments/environment.toml b/.codex/environments/environment.toml new file mode 100644 index 0000000..6d41e9a --- /dev/null +++ b/.codex/environments/environment.toml @@ -0,0 +1,11 @@ +# THIS IS AUTOGENERATED. DO NOT EDIT MANUALLY +version = 1 +name = "mohfarawati" + +[setup] +script = "" + +[[actions]] +name = "Run" +icon = "run" +command = "make restart" diff --git a/.codex/skills/frontend-system/SKILL.md b/.codex/skills/frontend-system/SKILL.md index 648aa66..197d8d0 100644 --- a/.codex/skills/frontend-system/SKILL.md +++ b/.codex/skills/frontend-system/SKILL.md @@ -1,246 +1,145 @@ --- -name: mohfarawati-frontend-system +name: mohfarawati-ui-rules description: Enforce the project's frontend architecture and UI system when implementing or modifying frontend code. --- # Frontend System -This skill ensures that all frontend work follows the established UI architecture and design system used in this project. +All frontend work must follow the existing UI architecture and design system implemented in this repository. -The system is defined by the real implementation in the codebase, not by external design assumptions. +The system is defined by the **actual implementation**, not by external assumptions. ## Source of truth -The current system is defined by: +The UI system is defined by: -- `docs/frontend-system-current-state.md` -- `components/ui/*` -- `components/layout/*` -- `lib/utils.ts` -- `app/globals.css` -- `tailwind.config.ts` +- docs/frontend-system-current-state.md +- components/ui/* +- components/layout/* +- lib/utils.ts +- app/globals.css +- tailwind.config.ts -These files define the project's UI primitives, tokens, layout rules, and styling system. +Always inspect these files before implementing UI. -## Primitive architecture +--- -All shared UI must originate from the local primitive layer. +# UI primitives -Primary primitives live in: +Shared UI components must originate from the local primitive layer: `components/ui` Examples include: -- Button -- Card -- AppCard -- Input -- Textarea -- Select -- Dialog -- Sheet -- Tabs -- DropdownMenu -- Accordion -- Badge -- Checkbox -- Table -- Label -- Separator +Button, Card, AppCard, Input, Textarea, Select, Dialog, Sheet, Tabs, DropdownMenu, Accordion, Badge, Checkbox, Table, Label, Separator. -Feature code must reuse these primitives rather than reimplementing their behavior. +Feature code **must reuse these primitives** instead of reimplementing them. -If new shared UI behavior is required, extend the primitive layer instead of bypassing it. +If new shared UI behavior is required, extend the primitive layer rather than bypassing it. + +--- + +# Styling rules ## Class composition -Use the project's shared helper: - -`cn()` - -from: +Use `cn()` from: `lib/utils.ts` -for class composition. +Variant logic should use `cva` when primitives support variants. -Variant logic should use: +## Tokens -`class-variance-authority (cva)` - -when the primitive already exposes variants. - -## Allowed libraries - -Frontend code may use only the libraries already present in the system. - -UI primitives: -- `@radix-ui/react-*` through local primitives - -Styling: -- `tailwindcss` - -Class composition: -- `class-variance-authority` -- `clsx` -- `tailwind-merge` - -Motion: -- `framer-motion` -- `tailwindcss-animate` - -Icons: -- `lucide-react` - -Do not introduce additional UI frameworks or icon libraries. - -## Token system - -Styling must rely on the semantic token layer defined in: +Use semantic tokens defined in: - `app/globals.css` - `tailwind.config.ts` -Prefer semantic tokens over raw color values. +Prefer tokens over raw values. -Shared UI must not introduce new arbitrary color values when tokens already exist. +Do not introduce arbitrary colors, radius values, shadows, or borders when tokens already exist. -## Radius system +--- -The project uses a shared radius token system. +# Allowed libraries -Approved radius token categories include: +Only use libraries already present in the project. -- surface radius -- nested element radius -- pill radius +UI primitives +- `@radix-ui/react-*` (via local wrappers) -These tokens are mapped in Tailwind and must be used for shared UI. +Styling +- `tailwindcss` -Shared components should not introduce arbitrary radius values. +Utilities +- `class-variance-authority` +- `clsx` +- `tailwind-merge` -## Surface and card system +Motion +- `framer-motion` +- `tailwindcss-animate` -Shared surfaces should follow the established card system. +Icons +- `lucide-react` -Primary shared surfaces originate from: +Do not introduce additional UI frameworks or icon libraries. + +--- + +# Layout and surfaces + +Shared layout and surfaces must reuse existing primitives: - `Card` - `AppCard` +- container components from `components/layout` -These primitives define the canonical surface styles used throughout the application. +Do not recreate card styles or layout wrappers inside feature code. -Feature code should not duplicate card styling directly. +--- -Instead, reuse these primitives or extend them where necessary. +# Motion -## Layout system +Use existing motion patterns. -Shared layout constraints should use the project's container system. +- custom motion: `framer-motion` +- primitive transitions: `tailwindcss-animate` -The container primitive defines width limits and horizontal padding behavior. +Avoid introducing new motion systems. -Container variants include categories such as: +--- -- default layout width -- narrow content width -- wide layout width -- admin layout width +# Forbidden patterns -Layout code should reuse the container primitive rather than defining ad-hoc layout wrappers. +Avoid: -## Spacing rhythm +- introducing new UI frameworks +- bypassing `components/ui` when a primitive already exists +- importing Radix primitives directly in feature code +- duplicating design systems +- creating alternative styling abstractions +- hardcoding shared surface styles -The project uses a consistent spacing rhythm. +--- -Common spacing categories include: +# Arbitrary Tailwind values -- surface padding -- component internal spacing -- layout gaps -- vertical content spacing +Arbitrary Tailwind values are allowed only for rare layout or typography edge cases. -Spacing values should remain consistent with the existing system used in primitives and layout components. +They must **not replace tokens** for shared styling (colors, radius, shadows, borders). -Avoid introducing arbitrary spacing values for shared components. +--- -## Motion system - -Motion is implemented through two layers. - -Custom motion: -- `framer-motion` - -Primitive state transitions: -- `tailwindcss-animate` - -Before introducing new motion patterns, inspect existing motion components and reuse their behavior when possible. - -## Icon system - -The project uses a single icon library: - -- `lucide-react` - -Icons should be imported from this library only. - -Do not introduce additional icon libraries. - -## Arbitrary Tailwind values - -Arbitrary Tailwind values are not globally forbidden. - -They may be used when required for: - -- layout-specific grid definitions -- rare content sizing constraints -- typography fitting adjustments -- one-off layout edge cases not covered by tokens - -However, arbitrary values must not replace the shared token system. - -They should not be used for shared-system styling when project tokens already exist, especially for categories such as: - -- radius -- colors -- shadows -- borders -- shared surface styling - -When arbitrary values are used, they should remain narrow in scope and justified by layout or typography needs. - -## Forbidden patterns - -The following patterns must be avoided: - -- introducing a new UI framework -- bypassing the local primitive layer when an equivalent primitive already exists -- creating feature-level implementations of components that already exist in `components/ui` -- importing Radix primitives directly in feature code when a local wrapper exists -- introducing raw styling for shared UI surfaces when tokenized styles already exist -- creating duplicate design systems -- adding styling abstractions that conflict with the existing token system - -## Transitional areas - -Some files still contain transitional visual code. - -These areas must not be treated as canonical UI system references for new work. - -Examples include decorative hero components, experimental visual effects, or legacy route-level styling. - -When implementing new UI, prefer primitives and tokens defined in the main system rather than copying patterns from transitional files. - -## Implementation guidance for Codex +# Implementation guidance When implementing frontend code: -1. Inspect existing primitives before writing new UI. -2. Reuse primitives from `components/ui`. -3. Prefer semantic tokens over raw styling. -4. Follow the established radius, surface, spacing, and container systems. -5. Reuse motion patterns before introducing new ones. -6. Keep new UI aligned with the current frontend architecture. - -If a requested UI does not fit the current primitives, extend the primitive layer rather than bypassing it. \ No newline at end of file +1. Inspect existing primitives first. +2. Reuse components from `components/ui`. +3. Prefer tokens over raw styles. +4. Follow existing layout and surface patterns. +5. Reuse motion patterns. +6. Extend primitives instead of bypassing them. \ No newline at end of file diff --git a/.codex/skills/frontend-system/agents/ openai.yaml b/.codex/skills/frontend-system/agents/ openai.yaml index 7840c18..69bacf1 100644 --- a/.codex/skills/frontend-system/agents/ openai.yaml +++ b/.codex/skills/frontend-system/agents/ openai.yaml @@ -1,3 +1,3 @@ -display_name: MohFarawati Frontend System +display_name: mohfarawati-ui-rules short_description: Enforce the project's frontend architecture and UI primitives default_prompt: Use $frontend-system when creating, editing, or refactoring frontend UI in this project. \ No newline at end of file diff --git a/app/[locale]/(site)/about/page.tsx b/app/[locale]/(site)/about/page.tsx index c5581ef..80e4f46 100644 --- a/app/[locale]/(site)/about/page.tsx +++ b/app/[locale]/(site)/about/page.tsx @@ -1,16 +1,10 @@ import type { Metadata } from "next"; -import { ArrowRight, BriefcaseBusiness, GraduationCap, Layers3, MapPin, Sparkles, Wrench } from "lucide-react"; -import Link from "next/link"; import { getTranslations } from "next-intl/server"; import { Container } from "@/components/layout/container"; import { PageHero } from "@/components/layout/page-hero"; -import { SiteLogo } from "@/components/layout/site-logo"; -import { MotionFade } from "@/components/motion-fade"; -import { Badge } from "@/components/ui/badge"; -import { Button } from "@/components/ui/button"; -import { getSiteSettings, getSiteSettingsMediaBindings } from "@/lib/app-config"; -import { getLocalizedPath, resolveLocale } from "@/lib/locale"; +import { AppCard } from "@/components/ui/app-card"; +import { resolveLocale } from "@/lib/locale"; import { buildLocalizedMetadata } from "@/lib/metadata"; type AboutPageProps = { @@ -30,300 +24,28 @@ export async function generateMetadata({ params }: AboutPageProps): Promise - - -
-
- - {t("storyEyebrow")} - - -

- {t("storyTitle")} -

- -
-
-

- {t("storyTextOne")} -

-

- {t("storyTextTwo")} -

-
- -
- {focusItems.map((item) => ( -
- {item} -
- ))} -
-
- -
- - -
-
- - -
- - - -
-
-
-
- - {t("experienceEyebrow")} - -

- {t("experienceTitle")} -

-
- -
- -
- {workItems.map((item, index) => ( -
-

- {item.period} -

-

{item.role}

-

{item.company}

-

{item.text}

-
- ))} -
-
- -
-
-
- - {t("educationEyebrow")} - -

- {t("educationTitle")} -

-

- {t("educationIntro")} -

-
- -
- -
- {educationItems.map((item) => ( -
-

- {item.place} -

-

{item.title}

-

{item.text}

-
- ))} -
-
-
- - - -
-
-
-
- - {t("skillsEyebrow")} - -

- {t("skillsTitle")} -

-

- {t("skillsIntro")} -

-
- -
- -
- {skillItems.map((item) => ( - - {item} - - ))} -
-
- -
-
- - {t("toolsEyebrow")} - - -
- -
- {toolItems.map((item) => ( -
- {item} -
- ))} -
-
- -
-
- - {t("focusEyebrow")} - - -
- -
- {focusItems.map((item) => ( -
- {item} -
- ))} -
-
-
- + + +

{t("placeholder")}

+ ); diff --git a/messages/ar.json b/messages/ar.json index 28332c5..28a25cf 100644 --- a/messages/ar.json +++ b/messages/ar.json @@ -65,60 +65,9 @@ }, "aboutPage": { "title": "من أنا", - "heroBadge": "خلّيني عرّفك عليّي", - "heroTitle": "معلومات عني", - "intro": "لمحة سريعة عن خبرتي، دراستي، والمهارات والأدوات التي أستخدمها في شغلي اليومي.", - "storyEyebrow": "نبذة شخصية", - "storyTitle": "أشتغل على بناء حضور رقمي واضح، مرتب، وقابل للنمو.", - "storyTextOne": "أنا محمد، أركز على الواجهات، الهوية، وتنظيم التجربة بشكل يخلي المنتج أو الخدمة مفهومة من أول نظرة. أحب الشغل الذي يجمع بين الوضوح البصري والتنفيذ العملي بدون تعقيد زائد.", - "storyTextTwo": "هذه الصفحة صارت الآن مهيأة لتعرض قصتي المهنية بشكل مرن: أين عملت، ماذا درست، وما هي المهارات والأدوات التي أعتمد عليها يومياً. كل النصوص الحالية قابلة للتبديل بسهولة لاحقاً.", - "focusOne": "أهتم بالوضوح قبل الزخرفة.", - "focusTwo": "أفضل الأنظمة القابلة للتوسع والصيانة.", - "focusThree": "أشتغل بطريقة مباشرة وسريعة المراجعة.", - "primaryCta": "تواصل معي", - "secondaryCta": "شوف معرض الأعمال", - "snapshotEyebrow": "حالياً", - "snapshotTitle": "أبني من برلين", - "snapshotText": "أشتغل عن بعد ومع فرق مختلفة، مع تركيز على المواقع، الواجهات، والأنظمة الصغيرة المرنة.", - "locationTitle": "القاعدة الحالية", - "locationText": "برلين، ألمانيا، مع قابلية للعمل مع فرق محلية أو عن بعد.", - "experienceEyebrow": "أين اشتغلت", - "experienceTitle": "خبرتي العملية", - "workOnePeriod": "2024 - الآن", - "workOneRole": "Frontend Developer", - "workOneCompany": "استوديو رقمي أو شركة منتج", - "workOneText": "مكان مخصص لذكر آخر جهة عمل، طبيعة المسؤوليات، ونوع المشاريع التي اشتغلت عليها.", - "workTwoPeriod": "2022 - 2024", - "workTwoRole": "UI Designer", - "workTwoCompany": "وكالة أو فريق داخلي", - "workTwoText": "هنا يمكن ذكر دور سابق يوضح المزج بين التصميم والتنفيذ أو بين البراند والواجهات.", - "workThreePeriod": "قبل ذلك", - "workThreeRole": "Freelance / Contract Work", - "workThreeCompany": "عمل حر أو تعاونات مستقلة", - "workThreeText": "خانة مناسبة لإضافة مشاريع خاصة، تعاونات قصيرة، أو مراحل انتقالية مهمة في المسار.", - "educationEyebrow": "شو درست", - "educationTitle": "الخلفية الدراسية", - "educationIntro": "هذا القسم مخصص لوضع الدراسة الأكاديمية أو الدورات المركزة التي أثرت على طريقة التفكير والشغل.", - "educationOneTitle": "اسم التخصص أو الشهادة", - "educationOnePlace": "اسم الجامعة أو المعهد", - "educationOneText": "وصف قصير يوضح ما الذي درسته فعلياً، وكيف انعكس ذلك لاحقاً على شغلك أو على طريقة تحليلك للمشاريع.", - "educationTwoTitle": "دورات أو تدريب متخصص", - "educationTwoPlace": "منصة أو جهة تدريب", - "educationTwoText": "مكان مناسب لذكر أي دراسة مكملة، تدريب عملي، أو برنامج صقل مهارات أخذته لاحقاً.", - "skillsEyebrow": "مهاراتي", - "skillsTitle": "المهارات التي أركز عليها", - "skillsIntro": "كتلة واسعة لعرض المهارات الأساسية التي تريد إظهارها بشكل سريع وواضح وقابل للتحديث.", - "skillOne": "تصميم واجهات", - "skillTwo": "بناء Design Systems", - "skillThree": "Frontend Architecture", - "skillFour": "تحويل الأفكار إلى صفحات واضحة", - "skillFive": "تنظيم المحتوى والتسلسل البصري", - "skillSix": "التعاون السريع مع العملاء والفرق", - "toolsEyebrow": "أدواتي", - "toolOne": "Figma", - "toolTwo": "Next.js", - "toolThree": "Tailwind CSS", - "toolFour": "WordPress" + "description": "نظرة مركزة على دراستي، دوري الحالي، ونوع شغل الواجهات الذي أقدمه.", + "heroEyebrow": "من أنا", + "placeholder": "محتوى صفحة من أنا سينضاف هون قريباً." }, "contactPage": { "title": "تواصل", diff --git a/messages/de.json b/messages/de.json index a2001e0..0208f35 100644 --- a/messages/de.json +++ b/messages/de.json @@ -65,60 +65,9 @@ }, "aboutPage": { "title": "Über mich", - "heroBadge": "Mehr über mich", - "heroTitle": "Über mich", - "intro": "Ein schneller Überblick über meine Erfahrung, Ausbildung sowie die Skills und Tools, die ich in der täglichen Arbeit nutze.", - "storyEyebrow": "Persönlicher Überblick", - "storyTitle": "Ich baue digitale Präsenz, die klar, geordnet und bereit zum Wachsen ist.", - "storyTextOne": "Ich bin Mohamad und arbeite mit Fokus auf Interfaces, Identität und klar strukturierte Nutzererlebnisse. Mich interessiert Arbeit, die visuelle Klarheit mit praktischer Umsetzung verbindet.", - "storyTextTwo": "Diese Seite ist jetzt so aufgebaut, dass sie meine berufliche Geschichte flexibel zeigen kann: wo ich gearbeitet habe, was ich studiert habe und welche Skills und Tools ich am häufigsten nutze.", - "focusOne": "Klarheit vor Dekoration.", - "focusTwo": "Systeme, die skalieren und wartbar bleiben.", - "focusThree": "Direkte Zusammenarbeit mit schnellen Feedback Schleifen.", - "primaryCta": "Kontakt aufnehmen", - "secondaryCta": "Portfolio ansehen", - "snapshotEyebrow": "Aktuell", - "snapshotTitle": "Ich arbeite aus Berlin", - "snapshotText": "Ich arbeite remote und mit verteilten Teams, mit Fokus auf Websites, Interfaces und flexible kleine Systeme.", - "locationTitle": "Aktueller Standort", - "locationText": "Berlin, Deutschland, mit Offenheit für lokale und remote Zusammenarbeit.", - "experienceEyebrow": "Wo ich gearbeitet habe", - "experienceTitle": "Berufserfahrung", - "workOnePeriod": "2024 - heute", - "workOneRole": "Frontend Developer", - "workOneCompany": "Digital Studio oder Produktfirma", - "workOneText": "Hier kann die aktuelle oder letzte Position mit Verantwortung und Projektart eingetragen werden.", - "workTwoPeriod": "2022 - 2024", - "workTwoRole": "UI Designer", - "workTwoCompany": "Agentur oder internes Team", - "workTwoText": "Ein früherer Schritt, der die Verbindung zwischen Design und Umsetzung oder zwischen Branding und Interface Arbeit zeigt.", - "workThreePeriod": "Davor", - "workThreeRole": "Freelance / Contract Work", - "workThreeCompany": "Unabhängige Zusammenarbeit", - "workThreeText": "Ein guter Platz für freie Projekte, Kooperationen oder wichtige Übergangsphasen im Werdegang.", - "educationEyebrow": "Was ich studiert habe", - "educationTitle": "Ausbildung und Studium", - "educationIntro": "Dieser Bereich ist für Studium oder fokussierte Weiterbildungen gedacht, die meine Denkweise und Arbeitsweise geprägt haben.", - "educationOneTitle": "Studiengang oder Abschluss", - "educationOnePlace": "Universität oder Institut", - "educationOneText": "Eine kurze Beschreibung davon, was ich tatsächlich gelernt habe und wie es später meinen Blick auf Projekte beeinflusst hat.", - "educationTwoTitle": "Kurse oder spezialisiertes Training", - "educationTwoPlace": "Plattform oder Trainingsanbieter", - "educationTwoText": "Ein geeigneter Platz für ergänzende Weiterbildung, praxisnahes Training oder Programme zur Vertiefung meiner Skills.", - "skillsEyebrow": "Skills", - "skillsTitle": "Worauf ich mich konzentriere", - "skillsIntro": "Ein breiter Block für die wichtigsten Fähigkeiten, die schnell, klar und später leicht aktualisierbar gezeigt werden sollen.", - "skillOne": "Interface Design", - "skillTwo": "Design Systems", - "skillThree": "Frontend Architektur", - "skillFour": "Ideen in klare Seiten übersetzen", - "skillFive": "Content Struktur und visuelle Hierarchie", - "skillSix": "Schnelle Zusammenarbeit mit Kunden und Teams", - "toolsEyebrow": "Tools", - "toolOne": "Figma", - "toolTwo": "Next.js", - "toolThree": "Tailwind CSS", - "toolFour": "WordPress" + "description": "Ein fokussierter Überblick über meine Ausbildung, meine aktuelle Rolle und die Art von Frontend Arbeit, die ich liefere.", + "heroEyebrow": "Über mich", + "placeholder": "Der Inhalt der About Seite kommt bald hier hin." }, "contactPage": { "title": "Kontakt", diff --git a/messages/en.json b/messages/en.json index 569a78f..7ec1485 100644 --- a/messages/en.json +++ b/messages/en.json @@ -65,60 +65,9 @@ }, "aboutPage": { "title": "About", - "heroBadge": "A bit more about me", - "heroTitle": "About me", - "intro": "A quick overview of my experience, education, and the skills and tools I rely on in day-to-day work.", - "storyEyebrow": "Personal overview", - "storyTitle": "I build digital presence that is clear, structured, and ready to grow.", - "storyTextOne": "I am Mohamad, focused on interfaces, identity, and shaping experiences that feel understandable from the first impression. I like work that connects visual clarity with practical execution.", - "storyTextTwo": "This page is now structured to present my professional story in a flexible way: where I worked, what I studied, and which skills and tools I use most often. The copy can be replaced easily later.", - "focusOne": "Clarity before decoration.", - "focusTwo": "Systems that scale and stay maintainable.", - "focusThree": "Direct work with fast review cycles.", - "primaryCta": "Contact me", - "secondaryCta": "View portfolio", - "snapshotEyebrow": "Current", - "snapshotTitle": "Building from Berlin", - "snapshotText": "I work remotely and with distributed teams, focused on websites, interfaces, and flexible small systems.", - "locationTitle": "Current base", - "locationText": "Berlin, Germany, with flexibility to work with local and remote teams.", - "experienceEyebrow": "Where I worked", - "experienceTitle": "Work experience", - "workOnePeriod": "2024 - now", - "workOneRole": "Frontend Developer", - "workOneCompany": "Digital studio or product company", - "workOneText": "Use this slot for the latest role, the responsibilities, and the types of projects handled there.", - "workTwoPeriod": "2022 - 2024", - "workTwoRole": "UI Designer", - "workTwoCompany": "Agency or in-house team", - "workTwoText": "A previous role that shows the overlap between design and implementation or between branding and interface work.", - "workThreePeriod": "Before that", - "workThreeRole": "Freelance / Contract Work", - "workThreeCompany": "Independent collaborations", - "workThreeText": "A good place for personal projects, contract work, or key transition stages in the overall path.", - "educationEyebrow": "What I studied", - "educationTitle": "Educational background", - "educationIntro": "This block is meant for academic study or focused learning tracks that shaped the way I think and work.", - "educationOneTitle": "Degree or field of study", - "educationOnePlace": "University or institute", - "educationOneText": "A short description of what I actually studied and how it later influenced the way I approach projects.", - "educationTwoTitle": "Courses or specialized training", - "educationTwoPlace": "Platform or training provider", - "educationTwoText": "A good place for follow-up learning, hands-on training, or a program that sharpened my skills later on.", - "skillsEyebrow": "Skills", - "skillsTitle": "Skills I focus on", - "skillsIntro": "A wide block for listing the core skills you want to highlight in a quick and update-friendly way.", - "skillOne": "Interface design", - "skillTwo": "Design systems", - "skillThree": "Frontend architecture", - "skillFour": "Turning ideas into clear pages", - "skillFive": "Content structure and visual hierarchy", - "skillSix": "Fast collaboration with clients and teams", - "toolsEyebrow": "Tools", - "toolOne": "Figma", - "toolTwo": "Next.js", - "toolThree": "Tailwind CSS", - "toolFour": "WordPress" + "description": "A focused overview of my education, current role, and the kind of frontend work I deliver.", + "heroEyebrow": "About", + "placeholder": "About page content will be added here soon." }, "contactPage": { "title": "Contact", diff --git a/skills/mohs-frontend-system/SKILL.md b/skills/mohs-frontend-system/SKILL.md deleted file mode 100644 index 9c32ba0..0000000 --- a/skills/mohs-frontend-system/SKILL.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -name: mohs-frontend-system -description: Use this skill for frontend work in Next.js, Tailwind CSS, and shadcn/ui projects, especially when editing pages, layouts, components, styling, or refactoring UI systems. Apply it when Codex needs to keep visual decisions consistent, reuse shared primitives, centralize tokens and layout patterns, and avoid mixed old and new UI approaches. ---- - -# Mohs Frontend System - -## Overview - -Follow the existing project structure. -Reuse shared components before creating new ones. -Keep visual decisions global and system-driven instead of scattering them inside page files. - -## Workflow - -1. Inspect the current frontend structure before editing. -2. Find existing shared primitives in `components/ui/*` and `components/layout/*`. -3. Check global tokens and style rules in `app/globals.css`. -4. Check Tailwind mapping in `tailwind.config.ts`. -5. Decide whether the change belongs in global styles, shared primitives, or page-level composition. -6. Reuse and extend shared patterns instead of introducing one-off classes or duplicated markup. -7. Finish the refactor completely. Do not leave mixed patterns behind. - -## System Rules - -- Follow the existing project structure. -- Reuse shared components before creating new ones. -- Keep visual decisions global, not scattered in page files. -- Prefer tokens and shared primitives over repeated raw classes. -- Prefer consistency over creativity. -- Do not invent random styles, spacing, radius, shadows, or layouts. -- Use shadcn/ui as a base only, not as the final design language. -- Keep layout primitives shared. -- Keep UI primitives shared. -- Do not leave old and new patterns mixed together. -- Do not leave partial refactors. - -## File Ownership - -- Global styles and tokens: `app/globals.css` -- Tailwind mapping: `tailwind.config.ts` -- Shared UI: `components/ui/*` -- Shared layout: `components/layout/*` - -## Implementation Rules - -- Put reusable visual decisions into shared layers first. -- Keep page files focused on composition and data flow. -- If a new pattern is needed in more than one place, extract it immediately. -- If an old pattern conflicts with the new one, replace the old pattern in the touched area instead of leaving both. -- Match the existing code style and naming conventions of the repo. - -## Output Style - -1. Briefly explain the change. -2. List files to edit or create. -3. Execute the full implementation. diff --git a/skills/mohs-frontend-system/agents/openai.yaml b/skills/mohs-frontend-system/agents/openai.yaml deleted file mode 100644 index f84169c..0000000 --- a/skills/mohs-frontend-system/agents/openai.yaml +++ /dev/null @@ -1,4 +0,0 @@ -interface: - display_name: "Moh Frontend System" - short_description: "Next.js frontend system rules" - default_prompt: "Use $mohs-frontend-system to implement or refactor frontend UI consistently in this project."