<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Charlie Alvarado · Fotógrafo & Filmmaker</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: { brand: { DEFAULT: '#eab308' } },
keyframes: {
fadeInUp: {
'0%': { opacity: 0, transform: 'translateY(20px)' },
'100%': { opacity: 1, transform: 'translateY(0)' },
},
},
animation: { fadeInUp: 'fadeInUp 0.8s ease-out forwards' },
},
},
};
</script>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<meta name="description" content="Fotografía y vídeo profesional en Jaca, Huesca y Pirineos. Reportajes de boda, proyectos comerciales y contenido creativo." />
<link rel="icon" type="image/png" href="/favicon.png" />
</head>
<body class="bg-black text-gray-100 font-sans">
<!-- Navegación -->
<nav class="fixed top-0 left-0 w-full z-20 backdrop-blur bg-black/70 border-b border-gray-800">
<div class="max-w-6xl mx-auto px-4 py-3 flex justify-between items-center">
<a href="/" class="text-lg font-semibold tracking-wider">CA</a>
<button id="menuBtn" aria-label="Abrir menú" class="md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<ul id="menu" class="hidden md:flex gap-6 text-sm">
<li><a href="#portfolio" class="hover:text-brand">Portfolio</a></li>
<li><a href="#about" class="hover:text-brand">Sobre mí</a></li>
<li><a href="#contacto" class="hover:text-brand">Contacto</a></li>
</ul>
</div>
</nav>
<!-- Hero -->
<header class="relative h-screen flex items-center justify-center text-center px-6" style="background-image:url('/images/hero.jpg')">
<div class="absolute inset-0 bg-black/60"></div>
<div class="relative z-10 max-w-2xl mx-auto animate-fadeInUp">
<h1 class="text-3xl md:text-5xl font-bold leading-tight">Capturo emociones auténticas que perduran en el tiempo</h1>
<p class="mt-4 text-gray-300">Fotografía y vídeo creativo desde los Pirineos para el mundo.</p>
<a href="/contacto" class="mt-8 inline-block bg-brand text-black px-8 py-3 rounded-xl font-semibold shadow-lg hover:bg-brand/90 transition">Reserva tu fecha</a>
</div>
</header>
<!-- Portfolio Destacado -->
<section id="portfolio" class="py-24 px-6 max-w-6xl mx-auto">
<h2 class="text-2xl font-semibold mb-8 text-center">Portfolio Destacado</h2>
<div class="overflow-x-auto flex gap-4 snap-x">
<a href="/portfolio#bodas" class="w-3/4 sm:w-1/3 flex-shrink-0 snap-center relative group">
<img src="/images/portfolio-bodas.jpg" alt="Reportajes de boda" class="rounded-xl object-cover w-full h-56 brightness-75 group-hover:brightness-100 transition" />
<span class="absolute inset-0 flex items-center justify-center text-lg font-semibold">Bodas</span>
</a>
<a href="/portfolio#comercial" class="w-3/4 sm:w-1/3 flex-shrink-0 snap-center relative group">
<img src="/images/portfolio-comercial.jpg" alt="Proyectos comerciales" class="rounded-xl object-cover w-full h-56 brightness-75 group-hover:brightness-100 transition" />
<span class="absolute inset-0 flex items-center justify-center text-lg font-semibold">Comercial</span>
</a>
<a href="/portfolio#editorial" class="w-3/4 sm:w-1/3 flex-shrink-0 snap-center relative group">
<img src="/images/portfolio-editorial.jpg" alt="Retrato editorial" class="rounded-xl object-cover w-full h-56 brightness-75 group-hover:brightness-100 transition" />
<span class="absolute inset-0 flex items-center justify-center text-lg font-semibold">Editorial</span>
</a>
</div>
</section>
<!-- Sobre mí -->
<section id="about" class="py-24 px-6 bg-gray-900">
<div class="max-w-4xl mx-auto flex flex-col md:flex-row gap-10 items-center">
<img src="/images/charlie-about.jpg" alt="Charlie Alvarado retrato" class="w-48 h-48 object-cover rounded-full ring-4 ring-brand shadow-lg" />
<div>
<h2 class="text-2xl font-semibold mb-4">Hola, soy Charlie</h2>
<p class="leading-relaxed text-gray-300">Fotógrafo y filmmaker con más de 10 años contando historias visuales. Mi base está en Jaca, pero mi cámara y yo viajamos donde haga falta para capturar momentos únicos. Colaboro con marcas, parejas y aventureros que buscan imágenes auténticas, con estilo cinematográfico y toques de luz natural.</p>
</div>
</div>
</section>
<!-- Testimonios Slider -->
<section class="py-24 px-6" aria-label="Testimonios">
<h2 class="text-2xl font-semibold mb-8 text-center">Lo que dicen de mi trabajo</h2>
<div class="swiper mySwiper max-w-xl mx-auto">
<div class="swiper-wrapper">
<div class="swiper-slide p-6 bg-gray-800 rounded-xl shadow-lg">
<p class="italic">“Charlie plasmó la esencia de nuestra boda mejor de lo que imaginamos.”</p>
<span class="block mt-4 text-brand font-semibold">Laura & Miguel</span>
</div>
<div class="swiper-slide p-6 bg-gray-800 rounded-xl shadow-lg">
<p class="italic">“Las fotos del catálogo elevaron nuestra marca a otro nivel.”</p>
<span class="block mt-4 text-brand font-semibold">Startup Pyrenees</span>
</div>
<div class="swiper-slide p-6 bg-gray-800 rounded-xl shadow-lg">
<p class="italic">“Convirtió un día de montaña en una película llena de emoción.”</p>
<span class="block mt-4 text-brand font-semibold">Club Alpino</span>
</div>
</div>
<div class="swiper-pagination mt-6"></div>
</div>
</section>
<!-- CTA final -->
<section id="contacto" class="py-24 px-6 bg-brand text-black text-center">
<h2 class="text-3xl font-bold mb-6">¿Listo para crear recuerdos inolvidables?</h2>
<a href="/contacto" class="inline-block bg-black text-brand border border-black px-10 py-4 rounded-xl font-semibold hover:bg-gray-800 transition">Contactar</a>
</section>
<footer class="py-8 text-center text-gray-500 text-sm">© 2025 Charlie Alvarado · Jaca, Huesca</footer>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.mySwiper', {
loop: true,
pagination: { el: '.swiper-pagination' },
autoplay: { delay: 4000, disableOnInteraction: false },
});
// Menú móvil
const menuBtn = document.getElementById('menuBtn');
const menu = document.getElementById('menu');
menuBtn.addEventListener('click', () => menu.classList.toggle('hidden'));
document.querySelectorAll('#menu a').forEach(link => link.addEventListener('click', () => menu.classList.add('hidden')));
</script>
</body>
</html>