Develop

.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`).**

.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.

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"
         }
       }
     }

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"
         }
       }
     }

src/components/ProjectList.astro → src/components/ArticlesList.astro

@@ -24,42 +24,47 @@ const labels = {
 const t = lang === 'es' ? labels.es : labels.en;
 ---
 
-<section class="py-20 bg-background">
+<section class="py-24 overflow-hidden">
   <div class="container mx-auto px-4">
-    <div class="mb-12">
-      <h2 class="text-3xl md:text-4xl font-bold text-foreground">
+    <div class="mb-20 animate-fade-in text-left">
+      <h2 class="text-4xl md:text-5xl font-bold text-foreground mb-6">
         {t.featuredProjects}
       </h2>
-      <div class="w-20 h-1 bg-primary mt-4"></div>
+      <p class="text-xl text-muted-foreground max-w-3xl leading-relaxed">
+        {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.'}
+      </p>
     </div>
 
-    <div class="grid gap-8">
-      {sortedProjects.map(project => {
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-1">
+      {sortedProjects.map((project, index) => {
         const baseSlug = project.slug.split('/').pop();
         const href = lang === 'es' ? `/es/projects/${baseSlug}` : `/projects/${baseSlug}`;
         return (
           <a 
             href={href}
-            class="group block p-8 bg-card border border-border/50 rounded-2xl transition-all hover:shadow-elegant hover:border-primary/20"
+            class="group block p-10 bg-white border-border border-2 transition-all duration-500 hover:shadow-glow hover:z-20 animate-slide-up relative overflow-hidden"
+            style={`animation-delay: ${index * 0.1}s`}
           >
-            <div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
-              <div class="space-y-3 flex-1">
+            <div class="relative z-10 flex flex-col h-full justify-between gap-8">
+              <div class="space-y-4">
                 <div class="flex flex-wrap gap-2">
                   {project.data.tags.map(tag => (
-                    <span class="text-[10px] uppercase tracking-wider font-bold text-primary/60 bg-primary/5 px-2 py-0.5 rounded">
+                    <span class="text-[10px] uppercase tracking-widest font-bold text-primary px-0 py-0 border-b border-primary/30">
                       {tag}
                     </span>
                   ))}
                 </div>
                 <h3 class="text-2xl font-bold text-foreground group-hover:text-primary transition-colors">
                   {project.data.title}
                 </h3>
-                <p class="text-muted-foreground line-clamp-2 max-w-2xl">
+                <p class="text-muted-foreground line-clamp-2 max-w-2xl leading-relaxed">
                   {project.data.description}
                 </p>
               </div>
 
-              <div class="text-primary font-bold text-sm flex items-center gap-2 group-hover:translate-x-2 transition-transform">
+              <div class="text-primary font-bold text-sm flex items-center gap-2 group-hover:translate-x-2 transition-all">
                 {t.viewCaseStudy}
               </div>
             </div>

src/components/AvailabilityBadge.astro

@@ -16,14 +16,14 @@ const labels = {
 const currentLabels = lang === 'es' ? labels.es : labels.en;
 ---
 
-<div class="flex items-center gap-2 px-3 py-1.5 bg-background/50 backdrop-blur-sm border border-border rounded-full w-fit animate-fade-in shadow-sm">
+<div class="flex items-center gap-3 px-4 py-2 bg-white border-2 border-border rounded-none w-fit animate-fade-in shadow-sm">
   <span class={`relative flex h-2.5 w-2.5`}>
     {isAvailable && (
       <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
     )}
     <span class={`relative inline-flex rounded-full h-2.5 w-2.5 ${isAvailable ? 'bg-green-500' : 'bg-gray-400'}`}></span>
   </span>
-  <span class="text-xs font-medium text-foreground/80">
+  <span class="text-xs font-bold uppercase tracking-wider text-foreground">
     {isAvailable ? currentLabels.available : currentLabels.unavailable}
   </span>
 </div>

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;
+---
+
+<div class="blueprint-grid bg-gray-100 border-t-2 border-border/50 relative overflow-hidden">
+  <ArticlesList lang={lang} />
+
+  {showContact && contactStrings && (
+    <ContactSection strings={contactStrings} lang={lang} />
+  )}
+
+  <Footer lang={lang} />
+</div>

src/components/ContactActions.astro

@@ -48,9 +48,4 @@ const t = lang === 'es' ? labels.es : labels.en;
       {t.telegram}
     </a>
   </div>
-
-  <div class="flex items-center gap-2 justify-center text-muted-foreground">
-    <span class="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></span>
-    <p class="text-xs italic">{t.fastResponse}</p>
-  </div>
 </div>

src/components/ContactForm.tsx

@@ -64,7 +64,7 @@ const ContactForm: React.FC<ContactFormProps> = ({ 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"
           />
         </div>
         <div class="space-y-2">
@@ -74,7 +74,7 @@ const ContactForm: React.FC<ContactFormProps> = ({ 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"
           />
         </div>
       </div>
@@ -86,16 +86,16 @@ const ContactForm: React.FC<ContactFormProps> = ({ 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"
         ></textarea>
       </div>
 
       <button
         disabled={status === 'sending'}
         type="submit"
-        class={`w-full py-4 rounded-xl font-bold transition-all shadow-glow ${
-          status === 'sending' ? 'bg-primary/50' : 'bg-primary hover:scale-[1.01] active:scale-[0.99]'
-        } text-white`}
+        class={`w-full py-4 rounded-none font-bold transition-all shadow-glow ${
+          status === 'sending' ? 'bg-primary/50' : 'bg-primary hover:bg-primary/90'
+        } text-white uppercase tracking-widest`}
       >
         {status === 'sending' ? t.sending : t.submit}
       </button>