# 📘 Manual de Usuario
**Sitio Web de Portafolio Fotográfico**

---

## 1. Introducción

Bienvenido al manual de usuario del sitio web "Portafolio Fotográfico". Este sitio está diseñado para fotógrafos y videógrafos que desean mostrar su trabajo de manera visual, profesional y accesible desde cualquier dispositivo. Aquí encontrarás instrucciones para personalizar y navegar el sitio de forma efectiva.

---

## 2. Objetivo del Sitio

El objetivo principal es ofrecer un espacio donde el fotógrafo pueda:

- Presentar su trabajo con estilo.
- Recibir mensajes de contacto de clientes potenciales.
- Generar cotizaciones en PDF de manera sencilla.
- Leer comentarios u opiniones del público.

---

## 3. Requisitos del Navegador

El sitio está optimizado para los navegadores modernos. Se recomienda:

- Google Chrome (última versión)
- Mozilla Firefox
- Microsoft Edge
- Safari

Es accesible desde computadora, tablet o celular.

---

## 4. Secciones del Sitio

### 🏠 Inicio
- Presentación con animaciones y una breve descripción de los servicios.
- Texto dinámico generado con animación estilo máquina de escribir.

[](https://postimg.cc/7fNwxGJR)

De igual manera se muestra la vista movil

[](https://postimg.cc/VdDMJFSQ)

Y la vista en Tableta

[](https://postimg.cc/dkYDH77j)

### 🖼️ Fotografia
- Muestra de fotografías.
- Posibilidad de agrandar imágenes al dar clic.

[](https://postimg.cc/RJHLzJSp)

De igual manera se muestra la vista del movil

[](https://postimg.cc/KRtDqTsR)

Y la vista en tableta

[](https://postimg.cc/grCKHssC)

### 🎥 Sección de Videos
Esta sección permite mostrar tus videos subidos a YouTube directamente en el sitio.

Cada video se puede reproducir sin salir del portafolio, gracias a la integración con el reproductor embebido.

Ideal para mostrar videos destacados, detrás de cámaras, o reels promocionales.

[](https://postimg.cc/bGp1dN8r)

De igual manera se muestra la vista del movil

[](https://postimg.cc/njL7YRXt)

Y la vista en tableta

[](https://postimg.cc/8F4MvQPH)

## 👥 Sobre Nosotros
Página donde se presenta el objetivo del proyecto o emprendimiento.

Se explican la misión, visión o valores del fotógrafo/videógrafo.

Ideal para conectar emocionalmente con los visitantes y generar confianza.

[](https://postimg.cc/hhR94XNL)

De igual manera se muestra la vista del movil

[](https://postimg.cc/fS5Nd48x)

Y la vista en tableta

[](https://postimg.cc/K3mb4cDG)

### 💼 Servicios y Paquetes

En esta sección se muestran los diferentes **paquetes de servicios** que puedes ofrecer a tus clientes, especialmente diseñados para eventos como bodas y XV años. Cada uno detalla la cobertura en fotografía y video, así como los elementos que se entregan al cliente.

[](https://postimg.cc/bZcV5rVC)

Vista Movil:

[](https://postimg.cc/YvB8RSdp)

Vista Tableta:

[](https://postimg.cc/DJ261Yyn)

#### 🧷 Paquetes Disponibles

- **Básico:**
Cobertura sencilla de ceremonia y evento, entrega digital de fotografías y video.

- **Premium:**
Cobertura extendida, mayor número de entregables y sesiones más amplias.

- **Deluxe:**
Incluye sesiones previas, tomas aéreas con dron, impresiones físicas y una experiencia completa.

En cada paquete hay un boton en el cual puedes seleccionar y descargar la cotizacion correszpondiente.

[](https://postimg.cc/HJTZpKgb)

Vista movil:

[](https://postimg.cc/47ppmvTV)

Vista tableta:

[](https://postimg.cc/7GdCqfRd)

---

### 🧾 Cotizador Personalizado en PDF

Los clientes pueden elegir **extras adicionales** como:
- Tomas aéreas con dron
- Álbum físico
- Horas adicionales de cobertura
- Cantidad de fotografías digitales
- Seleccionar la fecha del evento
- Si el evento es en Temporadas altas (Diciembre) aunmenta el costo de los paquetes automaticamente y se actualiza en el archivo PDF

[](https://postimg.cc/N571kkS0)

[](https://postimg.cc/21mh39kw)

Vista Movil:

[](https://postimg.cc/s116KxRW)

[](https://postimg.cc/D4n5FvMr)

Vista en Tableta:

[](https://postimg.cc/JGMyMD4D)

[](https://postimg.cc/7GdCqfRd)

El sitio incluye un cotizador que permite al cliente:
- Seleccionar los servicios y extras que desea.
- Visualizar un resumen personalizado de su paquete.
- **Generar un archivo PDF** con la cotización final para descargar o compartir.

Esta herramienta es ideal para brindar propuestas claras y profesionales.

### 💬 Testimonios/Comentarios
- Visualización de opiniones o mensajes de clientes anteriores en animacion de carrusel automatico.
- Se alimenta desde Firebase Firestore.
- En la imagen siguiente se ve como un usuario ingresa su nombre, comentario y tambien como elige un avatar predefinido.

[](https://postimg.cc/TL5dkJcS)

Vista movil:

[](https://postimg.cc/N5WYCHn2)

Vista en tableta:

[](https://postimg.cc/vDfv6FsR)

Y aqui se muestra el comentario con el avatar y el nombre de la persona que dejo el testimonio.

[](https://postimg.cc/SXMQdGdP)

Vista movil:

[](https://postimg.cc/Tpyfc9tX)

Vista en tableta:

[](https://postimg.cc/ppvJfGWm)

### 📞 Sección de Contacto

En esta sección, los visitantes pueden comunicarse directamente contigo por medio de un **formulario integrado** o a través de distintos canales de contacto.

[](https://postimg.cc/1gCftKB7)

Vista en Movil:

[](https://postimg.cc/75ZwsC0g)

Vista en Tableta:

[](https://postimg.cc/SY7j8JzJ)

#### 📬 Formulario de Contacto

El formulario permite al usuario ingresar:

- **Nombre**
- **Correo electrónico**
- **Mensaje**

[](https://postimg.cc/hXCSbtmf)

Vista en Movil:

[](https://postimg.cc/jDSnHSj1)

Vista en Tableta:

[](https://postimg.cc/Th7P8MJ8)

Al hacer clic en **"Enviar mensaje"**, la información se enviará directamente a tu correo a través del servicio de **Formspree**, garantizando una comunicación rápida y efectiva.

[](https://postimg.cc/G4Nvgdwm)

Vista en Movil:

[](https://postimg.cc/gnD6LZGR)

Vista en Tableta:

[](https://postimg.cc/BXjn4Ymj)

#### 📍 Información de Contacto

- **Dirección:**
- **Teléfono:**
- **Email:**
- **Horario de atención:**

#### 🌐 Redes Sociales

Invita a tus visitantes a seguirte para ver más contenido, conocer promociones o contactarte por otros medios. (Puedes agregar aquí los enlaces a tus perfiles de Instagram, Facebook y Whatsapp si lo deseas).

[](https://postimg.cc/LhJP7XBF)

Vista en Movil:

[](https://postimg.cc/QH2dfghv)

Vista en Tableta:

[](https://postimg.cc/LhJP7XBF)

---

## 5. Cómo Personalizar

Los siguientes elementos se pueden adaptar a tu marca o estilo:

- Colores y tipografías.
- Fotografías de la galería.
- Textos de bienvenida y descripción de servicios.
- Iconos e imágenes.
- Dirección de contacto y correo.
- Logo (si se proporciona uno).

Puedes enviar estos elementos por WeTransfer o Google Drive para conservar su calidad.

---

## 6. Preguntas Frecuentes

### ❓¿Puedo cambiar mis fotos después?
Sí. Puedes pedirme una actualización en cualquier momento y subir nuevas imágenes.

### ❓¿Se necesita un dominio?
El sitio se puede usar con un enlace gratuito tipo `https://nombre.firebaseapp.com`.
Si deseas un dominio propio como `www.miportafolio.com`, esto tiene un costo adicional.

### ❓¿Puedo ver quién me escribió?
Sí. Los mensajes se te enviarán directamente a tu correo a través de Formspree.

---

## 7. Soporte Técnico

Si tienes problemas para visualizar, actualizar o compartir tu sitio, contáctame por WhatsApp o correo y te ayudaré lo antes posible.

---

## 8. Créditos

Sitio desarrollado por:
**Braulio Rodríguez**
GitHub: [@braudesDev](https://github.com/braudesDev)
Desarrollador Frontend Jr.

---