readme

docs/front/frontend-documentation.md

@@ -0,0 +1,69 @@
+# Documentación del Frontend
+
+## **Tecnología Base**
+
+- **Framework:** Angular 20
+- **Lenguaje:** TypeScript
+- **Estilos:** SCSS
+- **Gestión de Estado:** RxJS (si aplica)
+- **Rutas:** Angular Router
+
+## **Estructura del Proyecto**
+
+El proyecto estará organizado en módulos y componentes para maximizar la reutilización y la escalabilidad. La estructura inicial será:
+
+```FileSystem
+src/
+  app/
+    core/                # Servicios y lógica compartida
+    shared/              # Componentes y directivas reutilizables
+    features/            # Módulos específicos de características
+      home/              # Página principal
+      gallery/           # Página de galería
+      profile/           # Página de perfil
+    app-routing.module.ts
+    app.module.ts
+  assets/                # Recursos estáticos como imágenes
+  environments/          # Configuraciones de entorno
+```
+
+## **Componentes Principales**
+
+### **Menú de Navegación (`MenuComponent`)**
+
+- **Descripción:** Componente para la navegación entre las diferentes secciones de la aplicación.
+- **Propiedades:**
+  - `links: Array<{ label: string, route: string }>`: Lista de enlaces.
+- **Eventos:**
+  - `onLinkClick`: Evento emitido al hacer clic en un enlace.
+
+### **Galería (`GalleryComponent`)**
+
+- **Descripción:** Componente para mostrar una colección de imágenes.
+- **Propiedades:**
+  - `images: Array<{ src: string, alt: string }>`: Lista de imágenes.
+- **Eventos:**
+  - `onImageClick`: Evento emitido al seleccionar una imagen.
+
+### **Imagen (`ImageComponent`)**
+
+- **Descripción:** Componente para mostrar una imagen individual.
+- **Propiedades:**
+  - `src: string`: URL de la imagen.
+  - `alt: string`: Texto alternativo.
+- **Eventos:**
+  - `onClick`: Evento emitido al hacer clic en la imagen.
+
+### **Pie de Página (`FooterComponent`)**
+
+- **Descripción:** Componente para mostrar información adicional en la parte inferior de la página.
+- **Propiedades:**
+  - `links: Array<{ label: string, url: string }>`: Enlaces a recursos externos.
+
+### **Página Principal (`HomePageComponent`)**
+
+- **Descripción:** Página que combina el menú, la galería y el pie de página.
+- **Componentes Hijos:**
+  - `MenuComponent`
+  - `GalleryComponent`
+  - `FooterComponent`