Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions .agent/skills/brand-guidelines/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
# Jesus Ordosgoitty Brand Guidelines Skill

This skill provides comprehensive brand guidelines for the Jesus Ordosgoitty website project. It ensures that any new development adheres to the established visual identity, typography, and color palette.

## Installation

This skill is designed to be used with the Gemini CLI. To install it locally in your project:

1. Ensure you have the Gemini CLI installed.
2. Place this directory in your project's `.agent/skills/` folder.

## Usage

You can trigger this skill by asking the Gemini CLI about the brand or design. For example:

- "What are Jesus Ordosgoitty's brand colors?"
- "How should I style a new component for the website?"
- "What gradients are available in the brand guidelines?"
- "Show me the animation patterns for this project."

## Contents

- **Core Identity:** Professional, tech-forward developer brand.
- **Color Palette:** Detailed HSL and Hex approximations for the blue-themed palette.
- **Visual Language:** Standard gradients, elegant shadows, and glows.
- **Motion & Interaction:** Core animations and custom slide-up effects.
- **Design Principles:** Guidelines for readability, tech-forward aesthetic, and theme fidelity.

## Maintaining the Skill

When the design system evolves (e.g., in `src/index.css` or `tailwind.config.ts`), please update the `SKILL.md` file in this directory to reflect the changes.
99 changes: 99 additions & 0 deletions .agent/skills/brand-guidelines/SKILL.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
# Jesus Ordosgoitty Brand Guidelines

## Purpose

To provide official brand guidelines, colors, and design patterns for the "Jesus Ordosgoitty" portfolio project. Use this skill when:
- Creating new UI components or pages
- Implementing design-consistent styling
- Selecting colors and visual effects
- Applying animations and transitions
- Maintaining consistency between light and dark modes

## Triggers

This skill should be used when the user mentions:
- "Jesus Ordosgoitty brand"
- "Jesus Ordosgoitty design guidelines"
- "colors for Jesus Ordosgoitty"
- "portfolio styles"
- "brand guidelines for the website project"

## Brand Identity

The "Jesus Ordosgoitty" portfolio represents a professional, modern, and tech-forward developer identity. The brand utilizes a strong blue-themed palette with high-contrast elements and elegant visual effects.

## Core Typography

| Usage | Font Family | Source |
| :--- | :--- | :--- |
| **Primary Sans-serif** | `Fira Code` | @fontsource/fira-code |
| **Monospace** | `Fira Code` | @fontsource/fira-code |

## Color Palette

The project uses a theme-aware color system using HSL variables for core UI elements and a specific brand palette for identity-driven elements.

### Brand Palette (Hex Approximation)

- **Brand Dark:** `#161B24` (Primary Background / Navy)
- **Brand Medium:** `#1C4C96` (Secondary Blue)
- **Brand Bright:** `#0B5EF3` (Primary Action / Bright Blue)
- **Brand Light Blue:** `#D6DFF8` (Muted / Background Accents)
- **Brand Off-White:** `#EDECEB` (Light Mode Background)

### Semantic HSL Variables (Light/Dark Mode)

| Variable | Light Mode (HSL) | Dark Mode (HSL) |
| :--- | :--- | :--- |
| `--background` | `30 14% 93%` | `217 57% 13%` |
| `--foreground` | `217 57% 13%` | `30 14% 93%` |
| `--primary` | `221 91% 50%` | `221 91% 50%` |
| `--secondary` | `218 67% 35%` | `218 67% 35%` |
| `--muted` | `228 57% 91%` | `218 67% 25%` |
| `--accent` | `217 57% 13%` | `221 91% 50%` |
| `--border` | `228 57% 91%` | `218 67% 25%` |

## Visual Language

### Gradients

The brand uses smooth linear gradients to create depth and focus.

- **Primary Gradient:** `linear-gradient(135deg, hsl(var(--brand-bright)), hsl(var(--brand-medium)))`
- **Hero Gradient:** `linear-gradient(135deg, hsl(var(--brand-dark)), hsl(var(--brand-medium)))`
- **Card Gradient:** `linear-gradient(145deg, hsl(0 0% 100%), hsl(var(--brand-light-blue)))`

### Shadows and Depth

- **Elegant Shadow:** `0 10px 30px -10px hsl(var(--brand-medium) / 0.3)`
- **Glow Shadow:** `0 0 40px hsl(var(--brand-bright) / 0.4)`
- **Card Shadow:** `0 4px 20px -2px hsl(var(--brand-dark) / 0.1)`

### Transitions

The project prefers smooth interactions using standard Tailwind easing or custom cubic-bezier curves.

## Animations

Core animations used to make the UI feel "alive":

- `fade-in`: Opacity 0 to 1 with 20px upward movement.
- `slide-up`: Opacity 0 to 1 with 30px upward movement.
- `scale-in`: Scale 0.95 to 1 with opacity.
- `float`: Continuous 10px vertical floating effect.
- `typewriter`: For text revealing effects.
- `animate-slide-up-delayed`: Custom "slide-up-bounce" effect (700ms).

## Design Principles

1. **Tech-Forward:** Use bright blues and glows to emphasize a modern developer aesthetic.
2. **Readability:** Ensure high contrast between text and background, especially in Dark Mode.
3. **Subtle Motion:** Use floating and sliding animations to create a dynamic but professional feel.
4. **Theme Fidelity:** Always respect the HSL variable system for light/dark mode compatibility.
5. **Clean Layouts:** Leverage the `--shadow-elegant` to create separation without heavy borders.

## Best Practices

- **Tailwind Integration:** Use semantic classes (e.g., `bg-primary`, `text-foreground`, `shadow-elegant`).
- **Gradient Usage:** Apply gradients mainly to hero sections, primary buttons, and decorative cards.
- **Radius:** Standard border radius is `0.5rem` (`--radius`).
6 changes: 3 additions & 3 deletions .agent/skills/shadcn-ui/SKILL.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
name: shadcn-ui
description: Guides the implementation, customization, and usage of shadcn/ui components within an Astro + React environment. Ensures accessible and consistent UI primitives aligned with JODAZ DEV branding.
description: Guides the implementation, customization, and usage of shadcn/ui components within an Astro + React environment. Ensures accessible and consistent UI primitives aligned with Jesus Ordosgoitty branding.
---

# shadcn/ui Integration & Usage
Expand All @@ -21,7 +21,7 @@ You are an expert in using **shadcn/ui** to build high-quality, accessible, and

1) **Check for Existence**: Verify if the component already exists in `src/components/ui/`.
2) **Install/Add**: If missing, use the shadcn CLI: `npx shadcn-ui@latest add <component-name>`.
3) **Refine & Style**: Apply JODAZ DEV brand styles.
3) **Refine & Style**: Apply Jesus Ordosgoitty brand styles.
4) **Integration (The Island Rule)**: When using shadcn components in `.astro` files, you **MUST** ensure they are wrapped in a React component and use the appropriate `client:` directive (e.g., `client:load` for dropdowns, `client:visible` for dialogs).

## Instructions
Expand All @@ -32,7 +32,7 @@ You are an expert in using **shadcn/ui** to build high-quality, accessible, and

### 2. Styling Standards
- **Source of Truth**: The component file itself.
- **Theme Alignment**: Ensure components default to the **JODAZ DEV** aesthetic:
- **Theme Alignment**: Ensure components default to the **Jesus Ordosgoitty** aesthetic:
- Stone backgrounds, Navy text, and Blue primary accents.
- Buttons should use the custom variants (e.g., `hero`, `outline-hero`).

Expand Down
8 changes: 4 additions & 4 deletions .agent/skills/ui-ux-designer/SKILL.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
name: ui-ux-designer
description: Creates interface designs and enforces brand guidelines using Tailwind CSS. Focuses on premium, mobile-first, modern aesthetics with the JODAZ DEV brand palette (Stone background, Blue accents, Navy text). Optimized for Astro (Islands Architecture).
description: Creates interface designs and enforces brand guidelines using Tailwind CSS. Focuses on premium, mobile-first, modern aesthetics with the Jesus Ordosgoitty brand palette (Stone background, Blue accents, Navy text). Optimized for Astro (Islands Architecture).
metadata:
model: sonnet
---
Expand All @@ -20,7 +20,7 @@ metadata:
## Workflow
1. Analyze the functional requirement and required inputs.
2. Select appropriate **Astro** (for static) or **React/shadcn** (for interactive) components.
3. Apply **JODAZ DEV Brand UI Guidelines** (Stone background, Blue/Navy palette, precise spacings).
3. Apply **Jesus Ordosgoitty Brand UI Guidelines** (Stone background, Blue/Navy palette, precise spacings).
4. **Mobile-First Design**: Design the layout for mobile devices first, then scale up using Tailwind breakpoints.
5. **i18n & SEO**: Ensure all UI strings are keyed for translations and that every page includes a SEO metadata block.
6. Integrate specified Icon/Animation libraries (e.g., `framer-motion`, `lucide-react`).
Expand All @@ -37,7 +37,7 @@ You are an expert UI/UX designer specialized in premium, modern design systems.
- **Animations**: Use `framer-motion` (in React islands) or Astro View Transitions for page-level motion.
- **Internationalization**: Use Astro's `i18n` features. Always use translation keys (e.g., `t('nav.home')`).

### 2. Colors Palette (JODAZ DEV Brand)
### 2. Colors Palette (Jesus Ordosgoitty Brand)
The brand uses a sophisticated "Stone & Blue" palette. Strictly use the following HSL tokens defined in `index.css`:
- **Primary (Blue)**: `var(--primary)` / `hsl(221 91% 50%)`
- **Secondary (Navy)**: `var(--secondary)` / `hsl(218 67% 35%)`
Expand Down Expand Up @@ -75,7 +75,7 @@ The brand uses a sophisticated "Stone & Blue" palette. Strictly use the followin
- **Contrast**: Black/Navy text on Stone background is the brand signature.
- **Visual Balance**: Use whitespace generously. "White space is premium".
- **Dynamic Elements**: Use `framer-motion` for reveal-on-scroll effects.
- **Consistency**: All brand-new components must align with the JODAZ DEV color tokens.
- **Consistency**: All brand-new components must align with the Jesus Ordosgoitty color tokens.

## Output (exact format)
Provide design specifications, component code (Astro or React), or structural layout. Include explicit references to Tailwind classes used. Ensure all text is wrapped in translation helpers. Include the necessary SEO props.
72 changes: 72 additions & 0 deletions .astro/collections/projects.schema.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
{
"$ref": "#/definitions/projects",
"definitions": {
"projects": {
"type": "object",
"properties": {
"title": {
"type": "string"
},
"description": {
"type": "string"
},
"publishDate": {
"anyOf": [
{
"type": "string",
"format": "date-time"
},
{
"type": "string",
"format": "date"
},
{
"type": "integer",
"format": "unix-time"
}
]
},
"image": {
"type": "string"
},
"tags": {
"type": "array",
"items": {
"type": "string"
},
"default": []
},
"isFeatured": {
"type": "boolean",
"default": false
},
"githubUrl": {
"type": "string",
"format": "uri"
},
"liveUrl": {
"type": "string",
"format": "uri"
},
"lang": {
"type": "string",
"enum": [
"en",
"es"
],
"default": "en"
},
"$schema": {
"type": "string"
}
},
"required": [
"title",
"description",
"publishDate"
],
"additionalProperties": false
}
},
"$schema": "http://json-schema.org/draft-07/schema#"
}
14 changes: 12 additions & 2 deletions .astro/content.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,17 @@ declare module 'astro:content' {
};

type DataEntryMap = {

"projects": Record<string, {
id: string;
render(): Render[".md"];
slug: string;
body: string;
collection: "projects";
data: InferEntrySchema<"projects">;
rendered?: RenderedContent;
filePath?: string;
}>;

};

type AnyEntryMap = ContentEntryMap & DataEntryMap;
Expand Down Expand Up @@ -194,6 +204,6 @@ declare module 'astro:content' {
LiveContentConfig['collections'][C]['loader']
>;

export type ContentConfig = typeof import("../src/content.config.mjs");
export type ContentConfig = typeof import("../src/content/config.js");
export type LiveContentConfig = never;
}
2 changes: 1 addition & 1 deletion .astro/data-store.json

Large diffs are not rendered by default.

Loading