index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SnapVista Gallery | Photography Portfolio</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <style>
        .gallery-item {
            transition: all 0.3s ease;
        }
        .gallery-item:hover {
            transform: scale(1.02);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        .hero-section {
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('http://static.photos/nature/1200x630/42');
            background-size: cover;
            background-position: center;
        }
        .portfolio-filter button.active {
            border-bottom: 2px solid #3B82F6;
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
    <!-- Navigation -->
    <nav class="bg-white shadow-sm sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <span class="text-xl font-bold text-blue-600">SnapVista</span>
                </div>
                <div class="hidden md:flex items-center space-x-8">
                    <a href="#" class="text-gray-900 hover:text-blue-600 px-3 py-2 font-medium">Home</a>
                    <a href="#portfolio" class="text-gray-500 hover:text-blue-600 px-3 py-2 font-medium">Portfolio</a>
                    <a href="#about" class="text-gray-500 hover:text-blue-600 px-3 py-2 font-medium">About</a>
                    <a href="#contact" class="text-gray-500 hover:text-blue-600 px-3 py-2 font-medium">Contact</a>
                </div>
                <div class="flex items-center md:hidden">
                    <button class="text-gray-500 hover:text-blue-600">
                        <i data-feather="menu"></i>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero-section text-white py-32">
        <div class="max-w-3xl mx-auto text-center px-4">
            <h1 class="text-4xl md:text-5xl font-bold mb-6">Capturing Moments, Creating Memories</h1>
            <p class="text-xl mb-8">Showcasing the beauty of the world through my lens</p>
            <a href="#portfolio" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg inline-flex items-center">
                View Portfolio
                <i data-feather="arrow-down" class="ml-2"></i>
            </a>
        </div>
    </section>

    <!-- Portfolio Section -->
    <section id="portfolio" class="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-gray-900 mb-4">My Photography Portfolio</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">Explore a collection of my finest photographic works across different categories</p>
        </div>

        <!-- Filter Buttons -->
        <div class="portfolio-filter flex justify-center space-x-4 mb-10 overflow-x-auto py-2">
            <button class="active px-4 py-2 font-medium text-gray-700 hover:text-blue-600 whitespace-nowrap">All</button>
            <button class="px-4 py-2 font-medium text-gray-700 hover:text-blue-600 whitespace-nowrap">Nature</button>
            <button class="px-4 py-2 font-medium text-gray-700 hover:text-blue-600 whitespace-nowrap">Portrait</button>
            <button class="px-4 py-2 font-medium text-gray-700 hover:text-blue-600 whitespace-nowrap">Street</button>
            <button class="px-4 py-2 font-medium text-gray-700 hover:text-blue-600 whitespace-nowrap">Travel</button>
            <button class="px-4 py-2 font-medium text-gray-700 hover:text-blue-600 whitespace-nowrap">Black & White</button>
        </div>

        <!-- Gallery Grid -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- Item 1 -->
            <div class="gallery-item rounded-lg overflow-hidden bg-white shadow-md">
                <img src="http://static.photos/nature/640x360/1" alt="Nature Photography" class="w-full h-64 object-cover">
                <div class="p-4">
                    <h3 class="font-bold text-lg mb-2">Mountain Sunrise</h3>
                    <p class="text-gray-600 text-sm">Nature Photography</p>
                </div>
            </div>
            
            <!-- Item 2 -->
            <div class="gallery-item rounded-lg overflow-hidden bg-white shadow-md">
                <img src="http://static.photos/people/640x360/2" alt="Portrait Photography" class="w-full h-64 object-cover">
                <div class="p-4">
                    <h3 class="font-bold text-lg mb-2">Urban Portrait</h3>
                    <p class="text-gray-600 text-sm">Portrait Photography</p>
                </div>
            </div>
            
            <!-- Item 3 -->
            <div class="gallery-item rounded-lg overflow-hidden bg-white shadow-md">
                <img src="http://static.photos/cityscape/640x360/3" alt="Cityscape Photography" class="w-full h-64 object-cover">
                <div class="p-4">
                    <h3 class="font-bold text-lg mb-2">City Lights</h3>
                    <p class="text-gray-600 text-sm">Street Photography</p>
                </div>
            </div>
            
            <!-- Item 4 -->
            <div class="gallery-item rounded-lg overflow-hidden bg-white shadow-md">
                <img src="http://static.photos/travel/640x360/4" alt="Travel Photography" class="w-full h-64 object-cover">
                <div class="p-4">
                    <h3 class="font-bold text-lg mb-2">Desert Journey</h3>
                    <p class="text-gray-600 text-sm">Travel Photography</p>
                </div>
            </div>
            
            <!-- Item 5 -->
            <div class="gallery-item rounded-lg overflow-hidden bg-white shadow-md">
                <img src="http://static.photos/monochrome/640x360/5" alt="Black & White Photography" class="w-full h-64 object-cover">
                <div class="p-4">
                    <h3 class="font-bold text-lg mb-2">Silhouette</h3>
                    <p class="text-gray-600 text-sm">Black & White</p>
                </div>
            </div>
            
            <!-- Item 6 -->
            <div class="gallery-item rounded-lg overflow-hidden bg-white shadow-md">
                <img src="http://static.photos/nature/640x360/6" alt="Nature Photography" class="w-full h-64 object-cover">
                <div class="p-4">
                    <h3 class="font-bold text-lg mb-2">Forest Pathway</h3>
                    <p class="text-gray-600 text-sm">Nature Photography</p>
                </div>
            </div>
        </div>

        <div class="text-center mt-12">
            <button class="border border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white font-medium py-2 px-6 rounded-lg inline-flex items-center">
                Load More
                <i data-feather="plus" class="ml-2"></i>
            </button>
        </div>
    </section>

    <!-- About Section -->
    <section id="about" class="py-16 bg-gray-100">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/3 mb-8 md:mb-0">
                    <img src="http://static.photos/people/400x400/20" alt="Photographer" class="rounded-full h-64 w-64 object-cover shadow-lg mx-auto">
                </div>
                <div class="md:w-2/3 md:pl-12">
                    <h2 class="text-3xl font-bold text-gray-900 mb-6">About Me</h2>
                    <p class="text-gray-700 mb-4">Hello! I'm Alex, a passionate photographer with over 10 years of experience capturing special moments and beautiful landscapes around the world.</p>
                    <p class="text-gray-700 mb-4">My journey began when I received my first camera as a gift, and since then, I've been dedicated to telling stories through my lens.</p>
                    <p class="text-gray-700 mb-6">I specialize in landscape, portrait, and street photography, with a keen eye for composition and natural lighting.</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-blue-600 hover:text-blue-800">
                            <i data-feather="instagram"></i>
                        </a>
                        <a href="#" class="text-blue-600 hover:text-blue-800">
                            <i data-feather="facebook"></i>
                        </a>
                        <a href="#" class="text-blue-600 hover:text-blue-800">
                            <i data-feather="twitter"></i>
                        </a>
                        <a href="#" class="text-blue-600 hover:text-blue-800">
                            <i data-feather="linkedin"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonials -->
    <section class="py-16 bg-white">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-3xl font-bold text-gray-900 mb-12">Client Testimonials</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
                    <div class="flex items-center mb-4">
                        <img src="http://static.photos/people/100x100/30" alt="Client" class="rounded-full h-12 w-12 object-cover mr-4">
                        <div>
                            <h4 class="font-semibold">Sarah Johnson</h4>
                            <p class="text-gray-600 text-sm">Wedding Client</p>
                        </div>
                    </div>
                    <p class="text-gray-700 italic">"Alex captured our wedding day perfectly. The photos are stunning and really tell the story of our special day. We'll treasure them forever."</p>
                </div>
                <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
                    <div class="flex items-center mb-4">
                        <img src="http://static.photos/people/100x100/31" alt="Client" class="rounded-full h-12 w-12 object-cover mr-4">
                        <div>
                            <h4 class="font-semibold">Michael Chen</h4>
                            <p class="text-gray-600 text-sm">Magazine Editor</p>
                        </div>
                    </div>
                    <p class="text-gray-700 italic">"Working with Alex on our travel feature was a pleasure. The images were exactly what we needed - evocative, technically excellent, and full of atmosphere."</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="py-16 bg-gray-100">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">Get In Touch</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">Interested in working together or have questions about my services? Send me a message!</p>
            </div>
            <form class="bg-white p-8 rounded-lg shadow-md">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <label for="name" class="block text-gray-700 font-medium mb-2">Name</label>
                        <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
                        <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
                    </div>
                </div>
                <div class="mb-6">
                    <label for="subject" class="block text-gray-700 font-medium mb-2">Subject</label>
                    <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div class="mb-6">
                    <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
                    <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"></textarea>
                </div>
                <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg inline-flex items-center justify-center">
                    Send Message
                    <i data-feather="send" class="ml-2"></i>
                </button>
            </form>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-xl font-bold mb-4">SnapVista</h3>
                    <p class="text-gray-400">Capturing the world's beauty one shot at a time.</p>
                </div>
                <div>
                    <h4 class="font-semibold mb-4">Quick Links</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li>
                        <li><a href="#portfolio" class="text-gray-400 hover:text-white">Portfolio</a></li>
                        <li><a href="#about" class="text-gray-400 hover:text-white">About</a></li>
                        <li><a href="#contact" class="text-gray-400 hover:text-white">Contact</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-semibold mb-4">Services</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">Portrait Photography</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Event Photography</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Landscape Photography</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Commercial Photography</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-semibold mb-4">Contact Info</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li class="flex items-center">
                            <i data-feather="mail" class="mr-2"></i>
                            contact@snapvista.com
                        </li>
                        <li class="flex items-center">
                            <i data-feather="phone" class="mr-2"></i>
                            (555) 123-4567
                        </li>
                        <li class="flex items-center">
                            <i data-feather="map-pin" class="mr-2"></i>
                            New York, USA
                        </li>
                    </ul>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 SnapVista Gallery. All rights reserved.</p>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-400 hover:text-white">
                        <i data-feather="instagram"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white">
                        <i data-feather="facebook"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white">
                        <i data-feather="twitter"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white">
                        <i data-feather="linkedin"></i>
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Photo Modal -->
    <div class="hidden fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center p-4" id="photoModal">
        <div class="relative max-w-4xl w-full">
            <button class="absolute -top-12 right-0 text-white hover:text-gray-300" id="closeModal">
                <i data-feather="x" class="w-8 h-8"></i>
            </button>
            <img src="" alt="" class="w-full h-auto max-h-screen rounded-lg" id="modalImage">
            <div class="bg-white p-4 rounded-b-lg">
                <h3 class="text-xl font-bold" id="modalTitle"></h3>
                <p class="text-gray-600" id="modalCategory"></p>
            </div>
        </div>
    </div>

    <script>
        // Initialize Feather Icons
        feather.replace();
        
        // Gallery Filter
        document.querySelectorAll('.portfolio-filter button').forEach(button => {
            button.addEventListener('click', function() {
                document.querySelector('.portfolio-filter button.active').classList.remove('active');
                this.classList.add('active');
                // Here you would filter the gallery items in a real implementation
            });
        });
        
        // Photo Modal
        document.querySelectorAll('.gallery-item img').forEach(img => {
            img.addEventListener('click', function() {
                const modal = document.getElementById('photoModal');
                const modalImg = document.getElementById('modalImage');
                const modalTitle = document.getElementById('modalTitle');
                const modalCategory = document.getElementById('modalCategory');
                
                modalImg.src = this.src;
                modalTitle.textContent = this.parentElement.nextElementSibling.querySelector('h3').textContent;
                modalCategory.textContent = this.parentElement.nextElementSibling.querySelector('p').textContent;
                
                modal.classList.remove('hidden');
                document.body.style.overflow = 'hidden';
            });
        });
        
        document.getElementById('closeModal').addEventListener('click', function() {
            document.getElementById('photoModal').classList.add('hidden');
            document.body.style.overflow = 'auto';
        });
        
        // Close modal when clicking outside
        document.getElementById('photoModal').addEventListener('click', function(e) {
            if (e.target === this) {
                this.classList.add('hidden');
                document.body.style.overflow = 'auto';
            }
        });
    </script>
</body>
</html>