Create agents file

AGENTS.md

@@ -0,0 +1,80 @@
+# Style
+
+Professional, minimalistic, and high-contrast. Emphasize clarity, generous whitespace, and restrained use of color. The design should feel precise and technical. Black is the dominant base; light blue is the single accent for interactive and highlighted elements.
+
+Follow this style guide for all visual decisions. When in doubt, prioritize minimalism, high contrast, and the single light-blue accent.
+
+## Colors
+
+| Role              | Color          | Hex       | Usage                                      |
+|-------------------|----------------|-----------|--------------------------------------------|
+| Background        | Near-black     | `#0A0A0A` | Page and section backgrounds               |
+| Surface / Card    | Dark charcoal  | `#141414` | Cards, panels, elevated areas              |
+| Primary text      | Off-white      | `#F5F5F5` | Headings and body text                     |
+| Secondary text    | Medium gray    | `#A0A0A0` | Captions, metadata, supporting text        |
+| Accent            | Light blue     | `#4FC3F7` | Links, buttons, focus states, highlights   |
+| Accent hover      | Lighter blue   | `#81D4FA` | Hover on accent elements                   |
+| Border / Divider  | Subtle gray    | `#2A2A2A` | Card borders, separators                   |
+| Error / Destructive | Soft red    | `#EF5350` | Only when needed (rare)                    |
+
+k## Color Rules
+- Use the light blue accent sparingly — primarily for interactive elements and key highlights.
+- Prefer solid fills over gradients or shadows. When elevation is needed, use a 1px border in `#2A2A2A` instead of drop shadows.
+- Maintain strong contrast. Body text should always be `#F5F5F5` or close to it on dark backgrounds.
+- Avoid pure black (`#000000`) for large areas; use `#0A0A0A`.
+
+## Typography
+
+- **Font stack**: `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`
+- **Headings**: Weight 500–600. Optional slight letter-spacing (0.02–0.04em) on large headings.
+- **Body**: Weight 400, line-height 1.6–1.7.
+- **Scale**: Keep hierarchy simple (e.g. 2.5rem / 1.75rem / 1.25rem / 1rem). Avoid many intermediate sizes.
+- **Monospace** (for code or technical details): `ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`
+
+## Layout
+
+- Maximum content width: 720–900px for text-heavy pages; wider for project grids if needed.
+- Vertical rhythm: 1.5–2rem between related elements, 3–4rem between major sections.
+- Left-aligned text by default. Center only short hero statements.
+- Numbered section labels (e.g. “01 Projects”) are optional but acceptable for a structured feel.
+
+## Components
+
+### Buttons
+- **Primary**: Light blue background (`#4FC3F7`), dark text (`#0A0A0A`), 8–10px border-radius, ~0.75rem horizontal / 0.5rem vertical padding.
+- **Secondary / Ghost**: Transparent background, 1px light blue border, light blue text.
+- **Hover**: Slightly lighten the blue or reduce opacity to ~90%. No heavy scale transforms.
+- **Disabled**: Reduced opacity (0.4–0.5), no pointer cursor.
+- Prefer rectangular or lightly rounded shapes. Avoid pill shapes unless used consistently for tags.
+
+### Links
+- Default: Light blue (`#4FC3F7`), no underline by default.
+- Hover: Underline or shift to `#81D4FA`.
+- Visited: Same as default (or a slightly muted blue if distinction is desired).
+- Inline links in body text must remain light blue for visibility.
+
+### Cards
+- Background `#141414`, 1px border `#2A2A2A`, 8–12px border-radius.
+- Padding 1.25–1.5rem.
+- Optional hover: border color shifts toward a muted blue or slight background lighten.
+- Title in primary text, description in secondary text. Keep internal spacing tight but readable.
+- Use for projects, skills, contact items, etc. Avoid heavy imagery unless it is the focus.
+
+### Forms & Inputs
+- Background slightly lighter than card (`#1A1A1A`), 1px border `#2A2A2A`.
+- Focus: Border changes to light blue.
+- Placeholder text in `#666`.
+- Labels above inputs in secondary text color.
+
+### Navigation
+- Simple horizontal or vertical list.
+- Active state indicated by light blue text or a thin underline.
+- Minimal height. No large logo treatments required.
+
+## Other Guidelines
+
+- **Icons**: Simple, line-style, monochrome (white or light blue). Avoid filled multi-color icons.
+- **Images**: Prefer subtle borders or none. Use dark overlays if text must sit on photos.
+- **Motion**: Short, subtle transitions (150–200ms) on hover/focus. Avoid large animated elements.
+- **Accessibility**: Ensure accent blue meets contrast on dark surfaces. Provide visible focus outlines.
+