Foto Alemán 📸

Luz que trasciende — Estudio fotográfico con más de 40 años de trayectoria en Cuernavaca, Morelos.

📖 Descripción

Foto Alemán es el sitio web oficial del estudio fotográfico de José Armando Alemán Olvera, un fotógrafo profesional con más de cuatro décadas de experiencia capturando los momentos más importantes en la vida de las personas. Desde graduaciones y bodas hasta retratos de celebridades y fotografía comercial, Foto Alemán se ha consolidado como un referente en la fotografía profesional en el estado de Morelos.

El sitio web presenta un diseño editorial elegante inspirado en revistas de alta gama, con tipografía premium y una experiencia visual cautivadora.

✨ Secciones del Sitio

• 🎓 Graduaciones — Catálogo completo de placas y trípticos de graduación (individuales, grupales, dípticos, trípticos y agradecimientos) con precios y detalles.
• 💒 Bodas y Eventos — Paquetes fotográficos para bodas y eventos especiales.
• 🎓 Estolas, Togas y Birretes — Colección exclusiva de estolas bordadas y accesorios de graduación.
• 📷 Fotos de Identificación — Servicio de fotografía profesional para documentos oficiales (INE, pasaporte, visa, título profesional, etc.).
• 🏢 Empresas — Servicios de fotografía corporativa y empresarial.
• 🌟 Trayectoria — Historia y legado de 40 años de fotografía profesional, incluyendo galería de celebridades retratadas.
• 📜 Políticas — Información sobre términos, condiciones y políticas del estudio.
• 📬 Contacto — Información de contacto, ubicación y redes sociales.

🎥 Características

• Diseño editorial premium con tipografía Playfair Display e Inter (Google Fonts).
• Carrusel de videos con historias en movimiento del estudio (TikTok/Reels integrados).
• Galería de celebridades con carrusel interactivo en el footer.
• Catálogo visual de productos con lightbox para ver imágenes en detalle.
• Diseño responsivo optimizado para móvil y escritorio.
• Imágenes optimizadas en formato WebP para carga rápida.

🛠️ Stack Tecnológico

• HTML5 — Estructura semántica del sitio.
• CSS3 — Estilos personalizados con Variables CSS, Flexbox, Grid y animaciones.
• JavaScript (Vanilla) — Interactividad, carruseles, lightbox y menú móvil.
• Vite — Servidor de desarrollo y bundler de producción.
• Google Fonts — Playfair Display & Inter.
• FontAwesome — Iconografía (redes sociales, navegación).
• Vercel — Hosting y despliegue continuo.

🚀 Instalación y Ejecución

1. Clonar el repositorio:

   git clone https://github.com/dochoar/fotoaleman.git
   cd fotoaleman

2. Instalar dependencias:

   npm install

3. Iniciar el servidor de desarrollo:

   npm run dev

4. Abrir http://localhost:5173 en tu navegador.

5. Generar versión de producción:

   npm run build

📂 Estructura del Proyecto

fotoaleman/
├── FotoEstolas/          # Imágenes de estolas y accesorios
├── FotoGraduaciones/     # Imágenes de placas y trípticos de graduación
├── fotoscelebridades/    # Fotos de celebridades retratadas
├── video/                # Videos del estudio (historias en movimiento)
├── public/               # Assets estáticos
├── index.html            # Página principal (homepage)
├── graduaciones.html     # Catálogo de graduaciones
├── bodas.html            # Paquetes de bodas
├── estolas.html          # Colección de estolas
├── estudio.html          # Fotos de identificación
├── empresas.html         # Servicios empresariales
├── trayectoria.html      # Historia y legado
├── contacto.html         # Página de contacto

├── style.css             # Estilos globales
├── script.js             # JavaScript principal
├── vite.config.js        # Configuración de Vite
└── vercel.json           # Configuración de despliegue

🌐 Sitio en Producción

🔗 fotoaleman.com

📱 Redes Sociales

• Instagram — @foto_aleman_
• Facebook — FotoAleman
• TikTok — @fotoaleman
• WhatsApp

🤝 Créditos

Desarrollado por David Ochoa.

---

Hecho con ❤️ y 📸 en Cuernavaca, Morelos.