From 51acda7a4be873c22b7d98f5ee947aa58d7f83a5 Mon Sep 17 00:00:00 2001 From: Jesus Ordosgoitty Date: Sat, 11 Apr 2026 13:13:41 -0400 Subject: [PATCH 1/5] refactor: redesign services section with new layout, updated content, and blueprint grid styling --- public/locales/en/common.json | 42 ++++++++++++------------- public/locales/es/common.json | 44 +++++++++++++------------- src/components/ServicesSection.astro | 47 ++++++++++------------------ src/index.css | 8 ++++- 4 files changed, 66 insertions(+), 75 deletions(-) diff --git a/public/locales/en/common.json b/public/locales/en/common.json index e40c49a..df401f0 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -43,44 +43,44 @@ "ctaSecondary": "Learn More" }, "services": { - "title": "How I Can", - "titleAccent": "Support You?", - "description": "From websites and apps to SEO and automation, I offer end‑to‑end digital solutions designed to ship fast, scale smoothly, and drive measurable results for you.", + "title": "What I can do ", + "titleAccent": "for you", + "description": "From websites and mobile apps to custom systems and automations, I offer end‑to‑end digital solutions designed to ship fast, scale smoothly, and drive measurable results for you.", "items": { "0": { - "title": "Website Development", - "description": "I build fast, accessible websites optimized for your brand—they're SEO‑ready, easy for you to update, and designed to convert visitors on every device.", + "title": "Ecommerce and Websites", + "description": "I build fast, accessible websites and optimized online stores for your brand—they're ready to sell, easy for you to update, and designed to convert visitors on every device.", "features": { - "0": "Responsive Design", - "1": "Custom Development", - "2": "CMS Integration" + "0": "Online Stores", + "1": "Sales Optimization", + "2": "Responsive Design" } }, "1": { - "title": "SEO Optimization", - "description": "I help you increase organic traffic with data‑backed SEO: I handle the research, technical fixes, and content strategy so your business ranks and attracts qualified leads.", + "title": "Custom Software", + "description": "Software tailored for your business: inventory control, appointments, calculators, dashboards. Without paying for eternal licenses.", "features": { - "0": "Keyword Research", - "1": "On-page SEO", - "2": "Technical SEO" + "0": "Inventory Control", + "1": "Bookings & Appointments", + "2": "Dashboards & Reports" } }, "2": { - "title": "Web Applications", - "description": "I develop custom web applications that scale with your business—with clean APIs, secure authentication, and intuitive UX to simplify complex workflows.", + "title": "Mobile Apps", + "description": "I develop custom mobile applications that scale with your business—with fluid interfaces, high performance, and intuitive UX to engage your users.", "features": { - "0": "Custom Apps", - "1": "API Integration", - "2": "User Experience" + "0": "Mobile-First Design", + "1": "High Performance", + "2": "App Store Publishing" } }, "3": { - "title": "Automation", + "title": "Automations", "description": "I automate repetitive tasks across your stack to save you hours—connecting tools, orchestrating data, and ensuring your systems stay in sync.", "features": { "0": "Workflow Automation", - "1": "Process Optimization", - "2": "Integration" + "1": "System Integration", + "2": "Time Saving" } } } diff --git a/public/locales/es/common.json b/public/locales/es/common.json index 2272851..2d6f796 100644 --- a/public/locales/es/common.json +++ b/public/locales/es/common.json @@ -43,44 +43,44 @@ "ctaSecondary": "Saber Más" }, "services": { - "title": "Cómo Puedo", - "titleAccent": "Apoyarte", - "description": "Desde sitios web y aplicaciones hasta SEO y automatización, ofrezco soluciones digitales integrales diseñadas para ser lanzadas rápido, escalar sin problemas e impulsar resultados medibles para ti.", + "title": "Lo que puedo hacer ", + "titleAccent": "por ti", + "description": "Desde sitios web y apps móviles hasta sistemas a la medida y automatizaciones, ofrezco soluciones digitales integrales diseñadas para ser lanzadas rápido, escalar sin problemas e impulsar resultados medibles para ti.", "items": { "0": { - "title": "Desarrollo de Sitios Web", - "description": "Construyo sitios web rápidos y accesibles optimizados para tu marca; están listos para SEO, son fáciles de actualizar y están diseñados para convertir visitantes en cada dispositivo.", + "title": "Ecommerce y sitios web", + "description": "Construyo sitios web rápidos y tiendas virtuales optimizadas para tu marca; están listos para vender, son fáciles de actualizar y están diseñados para convertir visitantes en cada dispositivo.", "features": { - "0": "Diseño Responsivo", - "1": "Desarrollo a Medida", - "2": "Integración de CMS" + "0": "Tiendas Virtuales", + "1": "Optimización de Ventas", + "2": "Diseño Responsivo" } }, "1": { - "title": "Optimización SEO", - "description": "Te ayudo a aumentar el tráfico orgánico con SEO basado en datos: yo manejo la investigación, las correcciones técnicas y la estrategia de contenido para que tu negocio se posicione y atraiga clientes potenciales cualificados.", + "title": "Sistemas a la medida", + "description": "Software hecho para tu negocio: control de inventario, citas, cotizadores, dashboards. Sin pagar licencias eternas.", "features": { - "0": "Investigación de Palabras Clave", - "1": "SEO On-page", - "2": "SEO Técnico" + "0": "Control de Inventario", + "1": "Citas y Reservas", + "2": "Dashboards y Reportes" } }, "2": { - "title": "Aplicaciones Web", - "description": "Desarrollo aplicaciones web personalizadas que escalan con tu negocio, con APIs limpias, autenticación segura y UX intuitiva para simplificar flujos de trabajo complejos.", + "title": "Apps móviles", + "description": "Desarrollo aplicaciones móviles personalizadas que escalan con tu negocio, con interfaces fluidas, alto rendimiento y UX intuitiva para atraer a tus usuarios.", "features": { - "0": "Aplicaciones Personalizadas", - "1": "Integración de API", - "2": "Experiencia de Usuario" + "0": "Diseño Mobile-First", + "1": "Alto Rendimiento", + "2": "Publicación en Tiendas" } }, "3": { - "title": "Automatización", + "title": "Automatizaciones", "description": "Automatizo tareas repetitivas en tu stack para ahorrarte horas: conectando herramientas, orquestando datos y asegurando que tus sistemas se mantengan sincronizados.", "features": { - "0": "Automatización de Flujos de Trabajo", - "1": "Optimización de Procesos", - "2": "Integración" + "0": "Flujos de Trabajo", + "1": "Integración de Sistemas", + "2": "Ahorro de Tiempo" } } } diff --git a/src/components/ServicesSection.astro b/src/components/ServicesSection.astro index 68c68b6..7ea4ab4 100644 --- a/src/components/ServicesSection.astro +++ b/src/components/ServicesSection.astro @@ -15,68 +15,53 @@ const services = [ icon: '🌐', titleKey: 'services.items.0.title', descKey: 'services.items.0.description', - featureKeys: ['services.items.0.features.0', 'services.items.0.features.1', 'services.items.0.features.2'], }, { - icon: '🔍', + icon: '💻', titleKey: 'services.items.1.title', descKey: 'services.items.1.description', - featureKeys: ['services.items.1.features.0', 'services.items.1.features.1', 'services.items.1.features.2'], }, { icon: '📱', titleKey: 'services.items.2.title', descKey: 'services.items.2.description', - featureKeys: ['services.items.2.features.0', 'services.items.2.features.1', 'services.items.2.features.2'], }, { - icon: '⚡', + icon: '✨', titleKey: 'services.items.3.title', descKey: 'services.items.3.description', - featureKeys: ['services.items.3.features.0', 'services.items.3.features.1', 'services.items.3.features.2'], }, ]; --- -
+
-
+

{t('services.title')}{' '} {t('services.titleAccent')}

-

+

{t('services.description')}

-
+
{services.map((service, index) => (
-
-
-
- {service.icon} -
-

- {t(service.titleKey)} -

-

- {t(service.descKey)} -

-
- -
- {service.featureKeys.map((featureKey) => ( -
-
- {t(featureKey)} -
- ))} +
+
+ {service.icon}
+

+ {t(service.titleKey)} +

+

+ {t(service.descKey)} +

))} diff --git a/src/index.css b/src/index.css index cb14fce..b0c5481 100644 --- a/src/index.css +++ b/src/index.css @@ -30,7 +30,7 @@ All colors MUST be HSL. --secondary-foreground: 0 0% 100%; --muted: 228 57% 91%; /* #d6dff8 very light blue */ - --muted-foreground: 0 0% 55%; + --muted-foreground: 0 0% 35%; --accent: 217 57% 13%; /* #161B24 dark navy */ --accent-foreground: 0 0% 100%; @@ -203,4 +203,10 @@ All colors MUST be HSL. .prose-project ul > li::marker { @apply text-primary; } + + .blueprint-grid { + background-image: linear-gradient(hsl(var(--border)) 1px, transparent 1px), + linear-gradient(90deg, hsl(var(--border)) 1px, transparent 1px); + background-size: 60px 60px; + } } From 35e07a7543288281736a96bf693112943074ccc3 Mon Sep 17 00:00:00 2001 From: Jesus Ordosgoitty Date: Sat, 11 Apr 2026 14:05:08 -0400 Subject: [PATCH 2/5] refactor: implement blueprint design system with square corners, 2px borders, and a new BottomGridWrapper component --- .agent/skills/brand-guidelines/SKILL.md | 13 +- .agent/skills/ui-ux-designer/SKILL.md | 9 +- .../{ProjectList.astro => ArticlesList.astro} | 29 +++-- src/components/AvailabilityBadge.astro | 4 +- src/components/BottomGridWrapper.astro | 23 ++++ src/components/ContactActions.astro | 5 - src/components/ContactForm.tsx | 12 +- src/components/ContactSection.astro | 20 ++-- src/components/Footer.astro | 113 ++++++++---------- src/components/views/Experience.tsx | 2 +- src/layouts/BaseLayout.astro | 2 - src/pages/404.astro | 4 + src/pages/about.astro | 2 + src/pages/es/about.astro | 2 + src/pages/es/index.astro | 10 +- src/pages/es/projects/[slug].astro | 8 +- src/pages/index.astro | 10 +- src/pages/projects/[slug].astro | 8 +- 18 files changed, 152 insertions(+), 124 deletions(-) rename src/components/{ProjectList.astro => ArticlesList.astro} (60%) create mode 100644 src/components/BottomGridWrapper.astro diff --git a/.agent/skills/brand-guidelines/SKILL.md b/.agent/skills/brand-guidelines/SKILL.md index d101f57..1580097 100644 --- a/.agent/skills/brand-guidelines/SKILL.md +++ b/.agent/skills/brand-guidelines/SKILL.md @@ -66,9 +66,15 @@ The brand uses smooth linear gradients to create depth and focus. ### 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)` +- **Glow Shadow:** `0 0 40px hsl(var(--brand-bright) / 0.4)` (`shadow-glow`) - **Card Shadow:** `0 4px 20px -2px hsl(var(--brand-dark) / 0.1)` +### Blueprint Grid + +Technical sections should use the "Blueprint" aesthetic: +- **Background Pattern:** `.blueprint-grid` (60px grid lines using `var(--border)`). +- **Fade Effect:** `.blueprint-grid-fade` for smooth transitions. + ### Transitions The project prefers smooth interactions using standard Tailwind easing or custom cubic-bezier curves. @@ -90,10 +96,11 @@ Core animations used to make the UI feel "alive": 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. +5. **Blueprint Logic:** Use structured grids and consistent 2px borders to emphasize a professional, architectural developer feel. ## 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`). +- **Borders:** Main structural grids use `border-2` (2px thickness) with `border-border`. +- **Radius:** Standard border radius is `0.5rem` (`--radius`). However, **structural grid elements and Blueprint-themed sections MUST use square corners (`rounded-none`).** diff --git a/.agent/skills/ui-ux-designer/SKILL.md b/.agent/skills/ui-ux-designer/SKILL.md index 165b408..a0f2919 100644 --- a/.agent/skills/ui-ux-designer/SKILL.md +++ b/.agent/skills/ui-ux-designer/SKILL.md @@ -65,17 +65,20 @@ The brand uses a sophisticated "Stone & Blue" palette. Strictly use the followin ### 5. Spacing & Shapes - **Container**: Always use `container mx-auto px-4`. - **Global Border Radius**: `var(--radius)` (default `0.5rem`). -- **Cards**: Use `rounded-xl border bg-card text-card-foreground shadow-elegant`. +- **Structural Grids**: Always use **square corners** (`rounded-none`) and **2px borders** (`border-2 border-border`). +- **Cards (Floating)**: Use `rounded-xl border bg-card text-card-foreground shadow-elegant`. +- **Cards (Grid-based)**: Use `bg-white border-2 border-border rounded-none hover:shadow-glow hover:z-20`. ### 6. Button Variants (shadcn/ui) - `variant="hero"`: The primary CTA. Always include a hover arrow animation. - `variant="outline-hero"`: Used for secondary actions on dark backgrounds. ### 7. General Rules +- **Modern Blueprint Aesthetic**: Use `.blueprint-grid` background patterns for technical sections. Combine with 2px borders and square shapes to create an architectural, precise feel. - **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 Jesus Ordosgoitty color tokens. +- **Dynamic Elements**: Use entrance animations like `animate-fade-in` or `animate-slide-up` with staggered delays. +- **Consistency**: All brand-new components must align with the Jesus Ordosgoitty color tokens and the technical blueprint aesthetic. ## 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. diff --git a/src/components/ProjectList.astro b/src/components/ArticlesList.astro similarity index 60% rename from src/components/ProjectList.astro rename to src/components/ArticlesList.astro index df4071e..f20219a 100644 --- a/src/components/ProjectList.astro +++ b/src/components/ArticlesList.astro @@ -24,29 +24,34 @@ const labels = { const t = lang === 'es' ? labels.es : labels.en; --- -
+
-
-

+
+

{t.featuredProjects}

-
+

+ {lang === 'es' + ? 'Explora una selección de mis trabajos más recientes y destacados en desarrollo web y diseño.' + : 'Explore a selection of my most recent and impactful work in web development and design.'} +

-
- {sortedProjects.map(project => { +
+ {sortedProjects.map((project, index) => { const baseSlug = project.slug.split('/').pop(); const href = lang === 'es' ? `/es/projects/${baseSlug}` : `/projects/${baseSlug}`; return ( -
-
+
+
{project.data.tags.map(tag => ( - + {tag} ))} @@ -54,12 +59,12 @@ const t = lang === 'es' ? labels.es : labels.en;

{project.data.title}

-

+

{project.data.description}

-
+
{t.viewCaseStudy}
diff --git a/src/components/AvailabilityBadge.astro b/src/components/AvailabilityBadge.astro index 10aec01..3451527 100644 --- a/src/components/AvailabilityBadge.astro +++ b/src/components/AvailabilityBadge.astro @@ -16,14 +16,14 @@ const labels = { const currentLabels = lang === 'es' ? labels.es : labels.en; --- -
+
{isAvailable && ( )} - + {isAvailable ? currentLabels.available : currentLabels.unavailable}
diff --git a/src/components/BottomGridWrapper.astro b/src/components/BottomGridWrapper.astro new file mode 100644 index 0000000..6321b5e --- /dev/null +++ b/src/components/BottomGridWrapper.astro @@ -0,0 +1,23 @@ +--- +import ArticlesList from './ArticlesList.astro'; +import ContactSection from './ContactSection.astro'; +import Footer from './Footer.astro'; + +interface Props { + lang?: 'en' | 'es'; + showContact?: boolean; + contactStrings?: any; +} + +const { lang = 'en', showContact = false, contactStrings } = Astro.props; +--- + +
+ + + {showContact && contactStrings && ( + + )} + +
+
diff --git a/src/components/ContactActions.astro b/src/components/ContactActions.astro index 5cc7b8e..61405e1 100644 --- a/src/components/ContactActions.astro +++ b/src/components/ContactActions.astro @@ -48,9 +48,4 @@ const t = lang === 'es' ? labels.es : labels.en; {t.telegram}
- -
- -

{t.fastResponse}

-
diff --git a/src/components/ContactForm.tsx b/src/components/ContactForm.tsx index 10afdb9..401b36a 100644 --- a/src/components/ContactForm.tsx +++ b/src/components/ContactForm.tsx @@ -64,7 +64,7 @@ const ContactForm: React.FC = ({ lang = 'en' }) => { type="text" name="name" placeholder="John Doe" - class="w-full px-4 py-3 bg-card border border-border rounded-xl focus:ring-2 focus:ring-primary outline-none transition-all" + class="w-full px-4 py-3 bg-white border-2 border-border rounded-none focus:ring-0 focus:border-primary outline-none transition-all placeholder:text-muted-foreground/50" />
@@ -74,7 +74,7 @@ const ContactForm: React.FC = ({ lang = 'en' }) => { type="email" name="email" placeholder="john@example.com" - class="w-full px-4 py-3 bg-card border border-border rounded-xl focus:ring-2 focus:ring-primary outline-none transition-all" + class="w-full px-4 py-3 bg-white border-2 border-border rounded-none focus:ring-0 focus:border-primary outline-none transition-all placeholder:text-muted-foreground/50" />
@@ -86,16 +86,16 @@ const ContactForm: React.FC = ({ lang = 'en' }) => { name="message" rows={4} placeholder="..." - class="w-full px-4 py-3 bg-card border border-border rounded-xl focus:ring-2 focus:ring-primary outline-none transition-all resize-none" + class="w-full px-4 py-3 bg-white border-2 border-border rounded-none focus:ring-0 focus:border-primary outline-none transition-all resize-none placeholder:text-muted-foreground/50" >
diff --git a/src/components/ContactSection.astro b/src/components/ContactSection.astro index 0447ece..39d5157 100644 --- a/src/components/ContactSection.astro +++ b/src/components/ContactSection.astro @@ -3,7 +3,6 @@ import founder from '@/assets/images/founder.png'; import AvailabilityBadge from './AvailabilityBadge.astro'; import ContactActions from './ContactActions.astro'; -import ContactForm from './ContactForm'; interface ContactStrings { title: string; @@ -23,19 +22,19 @@ interface Props { const { strings, lang = 'en' } = Astro.props; --- -
+
-
+

{strings.title}{' '} {strings.titleAccent}

-
- +
+
-
+

{strings.headline}

@@ -45,20 +44,16 @@ const { strings, lang = 'en' } = Astro.props;
- -
- -
-
+
{strings.portraitAlt}
@@ -67,7 +62,6 @@ const { strings, lang = 'en' } = Astro.props;
-
diff --git a/src/components/Footer.astro b/src/components/Footer.astro index ad02e34..245875a 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -14,81 +14,64 @@ const t = useTranslations(lang); const currentYear = new Date().getFullYear(); const base = lang === 'es' ? '/es' : ''; -const quickLinks = [ - { label: t('footer.home'), href: lang === 'es' ? '/es/' : '/' }, +const navLinks = [ { label: t('nav.services'), href: `${base}/#services` }, { label: t('nav.portfolio'), href: `${base}/#portfolio` }, { label: t('nav.about'), href: lang === 'es' ? '/es/about' : '/about' }, ]; --- -