# KeyBusy Software - LLM Context

> Desarrollo profesional de software web, móvil y escritorio

## Información del Proyecto

**Nombre:** KeyBusy Software
**Tipo:** Sitio web corporativo de servicios de desarrollo
**Framework:** Angular 20+ con SSR (Server-Side Rendering)
**Estilos:** Tailwind CSS 4+
**Hosting:** Vercel
**URL:** https://keybusy-software.vercel.app
**GitHub:** https://github.com/SudoCode76
**Contacto:** WhatsApp +59162994685, miguel.code@outlook.com

## Servicios Ofrecidos

### 1. Desarrollo Web
- Páginas de aterrizaje (Landing Pages)
- Tiendas E-commerce
- Aplicaciones web modernas
- Tecnología principal: Angular
- Stack: Angular + Tailwind CSS + TypeScript

### 2. Aplicaciones Móviles
- Desarrollo multiplataforma
- Tecnología principal: Flutter
- Lenguaje: Dart
- Backend: SupaBase
- Plataformas: iOS y Android con una sola base de código

### 3. Aplicaciones de Escritorio
- Software nativo para Windows
- Tecnología principal: C# .NET
- Frameworks: WPF (Windows Presentation Foundation)
- Integración profunda con el sistema operativo

## Estructura del Proyecto

```
keybusy-software/
├── src/
│   ├── app/
│   │   ├── components/          # Componentes reutilizables
│   │   │   ├── header/          # Navegación principal
│   │   │   └── footer/          # Pie de página con enlaces
│   │   ├── pages/               # Páginas de la aplicación
│   │   │   ├── home/            # Página principal
│   │   │   ├── services/        # Servicios detallados
│   │   │   ├── contact/         # Formulario de contacto
│   │   │   ├── privacy/         # Política de privacidad
│   │   │   └── terms/           # Términos de servicio
│   │   ├── services/            # Servicios Angular
│   │   │   ├── seo.service.ts   # Meta tags dinámicos (SSR compatible)
│   │   │   └── scroll.service.ts # Gestión de scroll
│   │   ├── app.routes.ts        # Configuración de rutas
│   │   └── app.config.ts        # Configuración de la app
│   ├── index.html               # HTML principal con meta tags SEO
│   └── styles.css               # Estilos globales
├── public/
│   ├── favicon.ico
│   ├── logo.png
│   ├── robots.txt               # Configuración de crawlers
│   └── sitemap.xml              # Mapa del sitio
├── vercel.json                  # Configuración de Vercel
├── angular.json                 # Configuración de Angular
├── package.json                 # Dependencias
└── tsconfig.json                # Configuración TypeScript
```

## Tecnologías y Dependencias

### Core
- @angular/core: ^20.3.0
- @angular/router: ^20.3.0
- @angular/ssr: ^20.3.10
- @angular/platform-browser: ^20.3.0
- @angular/platform-server: ^20.3.0

### Estilos
- tailwindcss: ^4.1.18
- @tailwindcss/postcss: ^4.1.18

### Build y Dev
- @angular/cli: ^20.3.10
- @angular/build: ^20.3.10
- typescript: ~5.9.2

### Server
- express: ^5.1.0 (para SSR)

## Rutas de la Aplicación

| Ruta | Componente | Descripción | SEO Keywords |
|------|-----------|-------------|--------------|
| / | Home | Página principal con hero y servicios | desarrollo web, aplicaciones móviles, software |
| /servicios | Services | Detalle de servicios ofrecidos | desarrollo angular, flutter, C#, .NET |
| /contacto | Contact | Formulario de contacto + WhatsApp | contacto desarrollo software, presupuesto |
| /privacidad | Privacy | Política de privacidad | política privacidad, protección datos |
| /terminos | Terms | Términos de servicio | términos servicio, condiciones uso |

## Características Clave

### SEO Optimizado
- Meta tags dinámicos por página (SEO Service)
- Open Graph para redes sociales
- Twitter Cards
- Schema.org JSON-LD (Organization + ProfessionalService)
- Sitemap XML con 5 rutas
- Robots.txt configurado
- Canonical URLs
- SSR para mejor indexación

### Performance
- Bundle size: ~75 kB gzipped
- Critical CSS inlining
- Lazy loading de rutas
- Output hashing para caché
- Preconnect a recursos externos

### Accesibilidad
- HTML semántico (article, section, main)
- ARIA labels
- Roles WCAG
- Navegación por teclado
- Contraste de colores optimizado

### Seguridad
- Headers de seguridad (X-Frame-Options, CSP ready)
- Cache-Control optimizado
- HTTPS only
- Input validation

## Comandos Principales

```bash
# Desarrollo
npm start                    # Servidor dev en http://localhost:4200
npm run watch               # Build con watch mode

# Build
npm run build               # Build de producción optimizado
npm run build:prod          # Build con todas las optimizaciones

# Deploy
vercel --prod               # Desplegar a producción en Vercel

# Testing
npm test                    # Ejecutar tests
```

## Configuración de Vercel

### Build Settings
- **Build Command:** `npm run build`
- **Output Directory:** `dist/keybusy-software/browser`
- **Install Command:** `npm install`
- **Framework:** Angular

### Headers de Seguridad
- X-Frame-Options: DENY
- X-Content-Type-Options: nosniff
- X-XSS-Protection: 1; mode=block
- Referrer-Policy: strict-origin-when-cross-origin
- Permissions-Policy configurada

### Caché
- Assets estáticos: 1 año (immutable)
- CSS/JS: Cache-Control con output hashing
- HTML: Sin caché (siempre fresh)

## Integración de IA

### Servicio SEO (seo.service.ts)
```typescript
// Servicio compatible con SSR usando isPlatformBrowser
// Actualiza meta tags dinámicamente:
// - Title y description por página
// - Open Graph tags
// - Twitter Cards
// - Canonical URLs

updateMetaTags({
  title: string,
  description: string,
  keywords: string,
  image: string,
  url: string,
  type: string
})
```

### Componentes con SEO
Todos los componentes de página implementan:
```typescript
export class PageComponent implements OnInit {
  private seo = inject(SeoService);

  ngOnInit(): void {
    this.seo.updateMetaTags({
      title: 'Título específico',
      description: 'Descripción única',
      keywords: 'keywords, relevantes',
      url: '/ruta'
    });
  }
}
```

## Schema.org Structured Data

### Organization Schema
```json
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "KeyBusy Software",
  "url": "https://keybusy-software.vercel.app",
  "logo": "https://keybusy-software.vercel.app/logo.png",
  "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+59162994685",
    "contactType": "customer service"
  }
}
```

### ProfessionalService Schema
```json
{
  "@context": "https://schema.org",
  "@type": "ProfessionalService",
  "name": "KeyBusy Software",
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Servicios de Desarrollo",
    "itemListElement": [
      "Desarrollo Web",
      "Apps Móviles",
      "Apps de Escritorio"
    ]
  }
}
```

## Estilos y Diseño

### Paleta de Colores
- Primary: #137fec (Azul KeyBusy)
- Background: #1a1a1a (Dark)
- Text: #ffffff, #e2e8f0, #94a3b8
- Accent: Purple, Indigo

### Tipografía
- Headings: Space Grotesk (Google Fonts)
- Body: Noto Sans (Google Fonts)
- Material Symbols Outlined (iconos)

### Componentes Visuales
- Fluent Design (acrylic, glass effects)
- Gradientes azules
- Animaciones suaves con transitions
- Responsive design (mobile-first)

## Contacto y Enlaces

### Métodos de Contacto
1. **WhatsApp:** +59162994685 (enlace directo wa.me/+59162994685)
2. **Email:** miguel.code@outlook.com (formulario con mailto)
3. **GitHub:** @SudoCode76

### Enlaces Sociales en Footer
- Twitter: https://twitter.com (placeholder)
- GitHub: https://github.com/SudoCode76
- LinkedIn: https://linkedin.com (placeholder)

## Keywords SEO Principales

### Primarias
- desarrollo web
- aplicaciones móviles
- software escritorio
- Angular
- Flutter
- C#

### Secundarias
- desarrollo profesional
- landing pages
- e-commerce
- apps multiplataforma
- desarrollo .NET
- desarrollo WPF
- SupaBase

### Long-tail
- desarrollo web angular profesional
- crear aplicaciones móviles flutter
- desarrollo software escritorio c#
- empresa desarrollo software españa
- contratar desarrollador angular

## Métricas de Rendimiento

### Lighthouse Targets
- Performance: 90+
- Accessibility: 95+
- Best Practices: 95+
- SEO: 100

### Core Web Vitals
- LCP (Largest Contentful Paint): < 2.5s
- FID (First Input Delay): < 100ms
- CLS (Cumulative Layout Shift): < 0.1

### Bundle Sizes
- Initial: 289.94 kB (~75 kB gzipped) ✓
- Lazy chunks: 9-14 kB cada uno ✓

## Notas para LLMs

### Al Modificar el Proyecto
1. Mantener compatibilidad con SSR (usar isPlatformBrowser)
2. Actualizar sitemap.xml al agregar nuevas rutas
3. Añadir meta tags SEO en componentes nuevos
4. Seguir la estructura de carpetas existente
5. Usar Tailwind CSS para estilos
6. Mantener accesibilidad (ARIA, semantic HTML)

### Al Agregar Páginas
1. Crear componente en `src/app/pages/`
2. Añadir ruta en `app.routes.ts`
3. Inyectar SeoService y configurar meta tags
4. Actualizar sitemap.xml
5. Usar Header y Footer components
6. Seguir estructura HTML semántica

### Al Optimizar SEO
1. Keywords en título (50-60 caracteres)
2. Description atractiva (150-160 caracteres)
3. Alt text en imágenes
4. Headings jerárquicos (H1 > H2 > H3)
5. Enlaces internos relevantes
6. Schema.org cuando aplique

## Ejemplos de Código

### Crear Nueva Página con SEO
```typescript
import { Component, inject, OnInit } from '@angular/core';
import { SeoService } from '../../services/seo.service';
import { Header } from '../../components/header/header';
import { Footer } from '../../components/footer/footer';

@Component({
  selector: 'app-nueva-pagina',
  imports: [Header, Footer],
  templateUrl: './nueva-pagina.html',
  styleUrl: './nueva-pagina.css',
})
export class NuevaPagina implements OnInit {
  private seo = inject(SeoService);

  ngOnInit(): void {
    this.seo.updateMetaTags({
      title: 'Título | KeyBusy Software',
      description: 'Descripción optimizada para SEO',
      keywords: 'keyword1, keyword2, keyword3',
      url: '/nueva-ruta',
      type: 'website'
    });
  }
}
```

### Añadir Ruta
```typescript
// En app.routes.ts
import { Routes } from '@angular/router';

export const routes: Routes = [
  // ...existing routes...
  {
    path: 'nueva-ruta',
    loadComponent: () => import('./pages/nueva-pagina/nueva-pagina').then(m => m.NuevaPagina)
  }
];
```

## Estado del Proyecto

- ✅ Producción ready
- ✅ SEO 100% optimizado
- ✅ SSR funcionando
- ✅ Build sin errores
- ✅ Documentación completa
- ✅ Desplegado en Vercel

## Documentación Adicional

- README.md - Información general y guía de despliegue
- AGENTS.md - Guía para agentes de codificación automática
- public/llms.txt - Este archivo (contexto resumido para LLMs)
- public/llms-full.txt - Contenido extendido completo del sitio para ingestión LLM
- public/humans.txt - Créditos del equipo

---

**Última actualización:** 2026-03-02
**Versión:** 1.1.0
**Mantenedor:** @SudoCode76