---
# System prepended metadata

title: "\U0001F4D8 Manual de Usuario"

---

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

[![vista-Home.png](https://i.postimg.cc/rFBmN5Vq/vista-Home.png)](https://postimg.cc/7fNwxGJR)

De igual manera se muestra la vista movil

[![vista-Home-Movil.png](https://i.postimg.cc/SxpGtTks/vista-Home-Movil.png)](https://postimg.cc/VdDMJFSQ)

Y la vista en Tableta

[![vista-Home-Ipad.png](https://i.postimg.cc/FRfcK3N8/vista-Home-Ipad.png)](https://postimg.cc/dkYDH77j)

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


[![vista-Fotografia.png](https://i.postimg.cc/L5yCLjrS/vista-Fotografia.png)](https://postimg.cc/RJHLzJSp)

De igual manera se muestra la vista del movil

[![vista-Fotografia-Movil.png](https://i.postimg.cc/bNBVvHxH/vista-Fotografia-Movil.png)](https://postimg.cc/KRtDqTsR)

Y la vista en tableta 

[![vista-Fotografia-Ipad.png](https://i.postimg.cc/Wb3fjfk1/vista-Fotografia-Ipad.png)](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.

[![vista-Video.png](https://i.postimg.cc/g06sSnTV/vista-Video.png)](https://postimg.cc/bGp1dN8r)

De igual manera se muestra la vista del movil

[![vista-Video-Movil.png](https://i.postimg.cc/B6Tg3Rst/vista-Video-Movil.png)](https://postimg.cc/njL7YRXt)

Y la vista en tableta

[![vista-Video-Ipad.png](https://i.postimg.cc/DZkgtn9t/vista-Video-Ipad.png)](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.

[![vista-Sobre-Nosotros.png](https://i.postimg.cc/pVpkZ8Z6/vista-Sobre-Nosotros.png)](https://postimg.cc/hhR94XNL)

De igual manera se muestra la vista del movil

[![vista-Sobre-Nosotros-Movil.png](https://i.postimg.cc/t7GCLpPm/vista-Sobre-Nosotros-Movil.png)](https://postimg.cc/fS5Nd48x)

Y la vista en tableta

[![vista-Sobre-Nosotros-Ipad.png](https://i.postimg.cc/hvdtyfJd/vista-Sobre-Nosotros-Ipad.png)](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.

[![vista-Servicios.png](https://i.postimg.cc/YChchm6H/vista-Servicios.png)](https://postimg.cc/bZcV5rVC)

Vista Movil:

[![vista-Servicios-Movil.png](https://i.postimg.cc/6pyS92RG/vista-Servicios-Movil.png)](https://postimg.cc/YvB8RSdp)

Vista Tableta:

[![vista-Cotizacion-Paquetes-Predefinidos-Ipad.png](https://i.postimg.cc/pTjSbgwh/vista-Cotizacion-Paquetes-Predefinidos-Ipad.png)](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.

[![vista-Cotizacion-Paquetes-Predefinidos.png](https://i.postimg.cc/GpyZjwgg/vista-Cotizacion-Paquetes-Predefinidos.png)](https://postimg.cc/HJTZpKgb)

Vista movil:

[![vista-Cotizacion-Paquetes-Predefinidos-Movil.png](https://i.postimg.cc/hj5sZMyy/vista-Cotizacion-Paquetes-Predefinidos-Movil.png)](https://postimg.cc/47ppmvTV)

Vista tableta:

[![vista-Cotizacion-Paquetes-Predefinidos-Ipad2.png](https://i.postimg.cc/j2dyQf4x/vista-Cotizacion-Paquetes-Predefinidos-Ipad2.png)](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

[![vista-Cotizacion-Paquetes-Personalizados.png](https://i.postimg.cc/pX3qx0BK/vista-Cotizacion-Paquetes-Personalizados.png)](https://postimg.cc/N571kkS0)

[![vista-Cotizacion-Pdf-Personalizada.png](https://i.postimg.cc/13VHCbbL/vista-Cotizacion-Pdf-Personalizada.png)](https://postimg.cc/21mh39kw)

Vista Movil:

[![vista-Cotizacion-Paquetes-Personalizados-Movil.png](https://i.postimg.cc/7PnFHJsK/vista-Cotizacion-Paquetes-Personalizados-Movil.png)](https://postimg.cc/s116KxRW)

[![vista-Cotizacion-Pdf-Personalizada-Movil.png](https://i.postimg.cc/sxZLY1PN/vista-Cotizacion-Pdf-Personalizada-Movil.png)](https://postimg.cc/D4n5FvMr)

Vista en Tableta:

[![vista-Cotizacion-Paquetes-Personalizados-Ipad.png](https://i.postimg.cc/J4Bj3Zfq/vista-Cotizacion-Paquetes-Personalizados-Ipad.png)](https://postimg.cc/JGMyMD4D)

[![vista-Cotizacion-Paquetes-Predefinidos-Ipad2.png](https://i.postimg.cc/j2dyQf4x/vista-Cotizacion-Paquetes-Predefinidos-Ipad2.png)](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.


[![vista-Comentarios.png](https://i.postimg.cc/4dBYx8HJ/vista-Comentarios.png)](https://postimg.cc/TL5dkJcS)

Vista movil:

[![vista-Comentarios-Movil.png](https://i.postimg.cc/qv7RRcXw/vista-Comentarios-Movil.png)](https://postimg.cc/N5WYCHn2)

Vista en tableta:

[![vista-Comentarios-Ipad.png](https://i.postimg.cc/ZYDs24sq/vista-Comentarios-Ipad.png)](https://postimg.cc/vDfv6FsR)

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

[![vista-Comentarios2.png](https://i.postimg.cc/s2nBV6h3/vista-Comentarios2.png)](https://postimg.cc/SXMQdGdP)

Vista movil:

[![vista-Comentarios-Movil2.png](https://i.postimg.cc/jdc2t3NC/vista-Comentarios-Movil2.png)](https://postimg.cc/Tpyfc9tX)

Vista en tableta:

[![vista-Comentarios-Ipad2.png](https://i.postimg.cc/Nf9CwSZk/vista-Comentarios-Ipad2.png)](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.

[![vista-Contacto.png](https://i.postimg.cc/NMYTdJHt/vista-Contacto.png)](https://postimg.cc/1gCftKB7)

Vista en Movil:

[![vista-Contacto-Movil.png](https://i.postimg.cc/VkjvNnNH/vista-Contacto-Movil.png)](https://postimg.cc/75ZwsC0g)

Vista en Tableta:

[![imagen-Contacto-Ipad.jpg](https://i.postimg.cc/tJ86K6qt/imagen-Contacto-Ipad.jpg)](https://postimg.cc/SY7j8JzJ)    

#### 📬 Formulario de Contacto

El formulario permite al usuario ingresar:

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

[![vista-Contacto2.png](https://i.postimg.cc/d0FLF7tm/vista-Contacto2.png)](https://postimg.cc/hXCSbtmf)

Vista en Movil:

[![vista-Contacto-Formulario-Movil.png](https://i.postimg.cc/wjh5dtY9/vista-Contacto-Formulario-Movil.png)](https://postimg.cc/jDSnHSj1)

Vista en Tableta:

[![vista-Contacto-Formulario-Ipad.png](https://i.postimg.cc/ZKZvdJ9q/vista-Contacto-Formulario-Ipad.png)](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.

[![vista-Contacto3.png](https://i.postimg.cc/0N5ZQyVD/vista-Contacto3.png)](https://postimg.cc/G4Nvgdwm)

Vista en Movil:

[![vista-Contacto-Formulario-Movil2.png](https://i.postimg.cc/52c5GBGP/vista-Contacto-Formulario-Movil2.png)](https://postimg.cc/gnD6LZGR)

Vista en Tableta:

[![vista-Contacto-Formulario-Ipad2.png](https://i.postimg.cc/RVR612fL/vista-Contacto-Formulario-Ipad2.png)](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).

[![vista-Contacto-Redes.png](https://i.postimg.cc/8kHb7f7c/vista-Contacto-Redes.png)](https://postimg.cc/LhJP7XBF)

Vista en Movil:

[![vista-Contacto-Datos-Movil.png](https://i.postimg.cc/YC9Lq8V2/vista-Contacto-Datos-Movil.png)](https://postimg.cc/QH2dfghv)

Vista en Tableta:

[![vista-Contacto-Redes.png](https://i.postimg.cc/8kHb7f7c/vista-Contacto-Redes.png)](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.

---

