Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Vlad's Portfolio | 5funk.com | Travel Adventures</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Custom CSS for animations and effects */ | |
| .fade-in { | |
| animation: fadeIn 1s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .travel-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| transition: all 0.3s ease; | |
| } | |
| .parallax { | |
| background-attachment: fixed; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| } | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| z-index: 100; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow: auto; | |
| background-color: rgba(0,0,0,0.9); | |
| } | |
| .modal-content { | |
| margin: auto; | |
| display: block; | |
| width: 80%; | |
| max-width: 700px; | |
| animation: zoom 0.6s; | |
| } | |
| @keyframes zoom { | |
| from {transform: scale(0.1)} | |
| to {transform: scale(1)} | |
| } | |
| .close { | |
| position: absolute; | |
| top: 15px; | |
| right: 35px; | |
| color: #f1f1f1; | |
| font-size: 40px; | |
| font-weight: bold; | |
| transition: 0.3s; | |
| } | |
| .close:hover { | |
| color: #bbb; | |
| cursor: pointer; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg fixed w-full z-10"> | |
| <div class="max-w-6xl mx-auto px-4"> | |
| <div class="flex justify-between"> | |
| <div class="flex space-x-7"> | |
| <div> | |
| <a href="#" class="flex items-center py-4 px-2"> | |
| <i class="fas fa-globe-americas text-blue-500 text-2xl mr-2"></i> | |
| <span class="font-semibold text-gray-900 text-lg">5funk.com | Vlad</span> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-1"> | |
| <a href="#home" class="py-4 px-2 text-blue-500 border-b-4 border-blue-500 font-medium">Home</a> | |
| <a href="#about" class="py-4 px-2 text-gray-500 hover:text-blue-500 transition duration-300">About</a> | |
| <a href="#skills" class="py-4 px-2 text-gray-500 hover:text-blue-500 transition duration-300">Skills</a> | |
| <a href="#travel" class="py-4 px-2 text-gray-500 hover:text-blue-500 transition duration-300">Travel</a> | |
| <a href="#contact" class="py-4 px-2 text-gray-500 hover:text-blue-500 transition duration-300">Contact</a> | |
| </div> | |
| <div class="md:hidden flex items-center"> | |
| <button class="outline-none mobile-menu-button"> | |
| <svg class="w-6 h-6 text-gray-500" x-show="!showMenu" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path d="M4 6h16M4 12h16M4 18h16"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden mobile-menu"> | |
| <ul class=""> | |
| <li><a href="#home" class="block text-sm px-2 py-4 hover:bg-blue-500 hover:text-white transition duration-300">Home</a></li> | |
| <li><a href="#about" class="block text-sm px-2 py-4 hover:bg-blue-500 hover:text-white transition duration-300">About</a></li> | |
| <li><a href="#skills" class="block text-sm px-2 py-4 hover:bg-blue-500 hover:text-white transition duration-300">Skills</a></li> | |
| <li><a href="#travel" class="block text-sm px-2 py-4 hover:bg-blue-500 hover:text-white transition duration-300">Travel</a></li> | |
| <li><a href="#contact" class="block text-sm px-2 py-4 hover:bg-blue-500 hover:text-white transition duration-300">Contact</a></li> | |
| </ul> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="parallax bg-cover bg-center h-screen flex items-center" style="background-image: url('https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <div class="bg-black bg-opacity-50 p-8 rounded-lg inline-block"> | |
| <h1 class="text-4xl md:text-6xl font-bold text-white mb-4 fade-in">Hi, I'm <span class="text-blue-400">Vlad</span></h1> | |
| <p class="text-xl md:text-2xl text-gray-200 mb-8 fade-in">Digital Creator & Caribbean Explorer</p> | |
| <a href="#travel" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-full transition duration-300 transform hover:scale-105"> | |
| Explore My Adventures | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">About Me</h2> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/3 mb-8 md:mb-0 flex justify-center"> | |
| <div class="rounded-full overflow-hidden border-4 border-blue-500 shadow-xl w-64 h-64"> | |
| <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Profile" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 md:pl-12"> | |
| <h3 class="text-2xl font-semibold text-gray-800 mb-4">Digital Nomad & Tropical Adventurer</h3> | |
| <p class="text-gray-600 mb-4 leading-relaxed"> | |
| I'm Vlad, the creator behind 5funk.com, combining my passion for web development with my love for Caribbean culture. Over the past 7 years, I've split my time between coding projects and exploring tropical paradises, working remotely from over 25 countries. | |
| </p> | |
| <p class="text-gray-600 mb-6 leading-relaxed"> | |
| My journey began with a computer science degree, but my true education has come from island hopping through the Caribbean, learning from local cultures, and capturing these vibrant experiences through my work and photography. | |
| </p> | |
| <div class="flex flex-wrap"> | |
| <div class="w-full md:w-1/2 mb-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-map-marker-alt text-blue-500 mr-2"></i> | |
| <span class="text-gray-700">Current Base: Punta Cana, DR</span> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-1/2 mb-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-plane text-blue-500 mr-2"></i> | |
| <span class="text-gray-700">Caribbean islands visited: 15</span> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-1/2 mb-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-laptop-code text-blue-500 mr-2"></i> | |
| <span class="text-gray-700">Experience: 7+ years</span> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-1/2 mb-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-camera text-blue-500 mr-2"></i> | |
| <span class="text-gray-700">Tropical photos: 12,000+</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section id="skills" class="py-20 bg-gray-100"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">My Skills</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Skill 1 --> | |
| <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition duration-300"> | |
| <div class="text-blue-500 mb-4"> | |
| <i class="fas fa-code text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Web Development</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Building responsive, accessible websites and web applications using modern technologies. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">HTML5</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">CSS3</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">JavaScript</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">React</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Node.js</span> | |
| </div> | |
| </div> | |
| <!-- Skill 2 --> | |
| <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition duration-300"> | |
| <div class="text-blue-500 mb-4"> | |
| <i class="fas fa-paint-brush text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">UI/UX Design</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Creating intuitive and beautiful user interfaces with a focus on user experience. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Figma</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Adobe XD</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Sketch</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">User Research</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Wireframing</span> | |
| </div> | |
| </div> | |
| <!-- Skill 3 --> | |
| <div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition duration-300"> | |
| <div class="text-blue-500 mb-4"> | |
| <i class="fas fa-umbrella-beach text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Tropical Photography</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Capturing the vibrant colors and laid-back vibes of Caribbean islands through my lens. | |
| </p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Beaches</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Sunsets</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Culture</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Lightroom</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Drone</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Travel Section --> | |
| <section id="travel" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-4">My Island Adventures</h2> | |
| <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto"> | |
| Exploring the Caribbean and beyond, one paradise at a time. Here are highlights from my tropical journeys. | |
| </p> | |
| <!-- Travel Gallery Filters --> | |
| <div class="flex justify-center mb-12"> | |
| <div class="inline-flex rounded-md shadow-sm" role="group"> | |
| <button type="button" class="filter-btn px-4 py-2 text-sm font-medium rounded-l-lg border border-gray-200 hover:bg-gray-100 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:text-blue-700" data-filter="all"> | |
| All | |
| </button> | |
| <button type="button" class="filter-btn px-4 py-2 text-sm font-medium border-t border-b border-gray-200 hover:bg-gray-100 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:text-blue-700" data-filter="caribbean"> | |
| Caribbean | |
| </button> | |
| <button type="button" class="filter-btn px-4 py-2 text-sm font-medium border border-gray-200 hover:bg-gray-100 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:text-blue-700" data-filter="europe"> | |
| Europe | |
| </button> | |
| <button type="button" class="filter-btn px-4 py-2 text-sm font-medium border border-gray-200 hover:bg-gray-100 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:text-blue-700" data-filter="asia"> | |
| Asia | |
| </button> | |
| <button type="button" class="filter-btn px-4 py-2 text-sm font-medium rounded-r-lg border border-gray-200 hover:bg-gray-100 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:text-blue-700" data-filter="americas"> | |
| Americas | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Travel Gallery --> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Travel Card 1 - Caribbean --> | |
| <div class="travel-card caribbean bg-white rounded-lg overflow-hidden shadow-md"> | |
| <div class="relative overflow-hidden h-64"> | |
| <img src="https://images.unsplash.com/photo-1519046904884-53103b34b206?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Punta Cana" class="w-full h-full object-cover transition duration-500 hover:scale-110"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <span class="bg-yellow-500 text-white text-xs font-medium px-2.5 py-0.5 rounded">Caribbean</span> | |
| <h3 class="text-white font-bold text-xl mt-2">Punta Cana, DR</h3> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-gray-600 mb-4">White sand beaches and crystal clear waters of Bavaro Beach, my current home base in the Caribbean.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500"><i class="far fa-calendar mr-1"></i> Current Location</span> | |
| <button class="view-btn text-blue-500 hover:text-blue-700 font-medium" data-img="https://images.unsplash.com/photo-1519046904884-53103b34b206?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" data-title="Punta Cana, DR" data-desc="White sand beaches and crystal clear waters of Bavaro Beach, my current home base in the Caribbean."> | |
| View <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Travel Card 2 - Caribbean --> | |
| <div class="travel-card caribbean bg-white rounded-lg overflow-hidden shadow-md"> | |
| <div class="relative overflow-hidden h-64"> | |
| <img src="https://images.unsplash.com/photo-1559128010-7c1ad6e1b7a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80" alt="Jamaica" class="w-full h-full object-cover transition duration-500 hover:scale-110"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <span class="bg-yellow-500 text-white text-xs font-medium px-2.5 py-0.5 rounded">Caribbean</span> | |
| <h3 class="text-white font-bold text-xl mt-2">Negril, Jamaica</h3> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-gray-600 mb-4">Seven Mile Beach and the famous Rick's Cafe cliff jumping spot in Negril.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500"><i class="far fa-calendar mr-1"></i> March 2023</span> | |
| <button class="view-btn text-blue-500 hover:text-blue-700 font-medium" data-img="https://images.unsplash.com/photo-1559128010-7c1ad6e1b7a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80" data-title="Negril, Jamaica" data-desc="Seven Mile Beach and the famous Rick's Cafe cliff jumping spot in Negril."> | |
| View <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Travel Card 3 - Caribbean --> | |
| <div class="travel-card caribbean bg-white rounded-lg overflow-hidden shadow-md"> | |
| <div class="relative overflow-hidden h-64"> | |
| <img src="https://images.unsplash.com/photo-1544551763-46a013bb70d5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Bahamas" class="w-full h-full object-cover transition duration-500 hover:scale-110"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <span class="bg-yellow-500 text-white text-xs font-medium px-2.5 py-0.5 rounded">Caribbean</span> | |
| <h3 class="text-white font-bold text-xl mt-2">Exuma, Bahamas</h3> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-gray-600 mb-4">Swimming with pigs at Big Major Cay and the stunning sandbars of Exuma.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500"><i class="far fa-calendar mr-1"></i> January 2023</span> | |
| <button class="view-btn text-blue-500 hover:text-blue-700 font-medium" data-img="https://images.unsplash.com/photo-1544551763-46a013bb70d5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" data-title="Exuma, Bahamas" data-desc="Swimming with pigs at Big Major Cay and the stunning sandbars of Exuma."> | |
| View <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Travel Card 4 - Europe --> | |
| <div class="travel-card europe bg-white rounded-lg overflow-hidden shadow-md"> | |
| <div class="relative overflow-hidden h-64"> | |
| <img src="https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80" alt="Paris" class="w-full h-full object-cover transition duration-500 hover:scale-110"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <span class="bg-blue-500 text-white text-xs font-medium px-2.5 py-0.5 rounded">Europe</span> | |
| <h3 class="text-white font-bold text-xl mt-2">Paris, France</h3> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-gray-600 mb-4">Exploring the City of Lights during spring, capturing the beauty of the Eiffel Tower at golden hour.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500"><i class="far fa-calendar mr-1"></i> May 2022</span> | |
| <button class="view-btn text-blue-500 hover:text-blue-700 font-medium" data-img="https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80" data-title="Paris, France" data-desc="Exploring the City of Lights during spring, capturing the beauty of the Eiffel Tower at golden hour."> | |
| View <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Travel Card 5 - Asia --> | |
| <div class="travel-card asia bg-white rounded-lg overflow-hidden shadow-md"> | |
| <div class="relative overflow-hidden h-64"> | |
| <img src="https://images.unsplash.com/photo-1538970272646-f61fabb3bfdf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Kyoto" class="w-full h-full object-cover transition duration-500 hover:scale-110"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <span class="bg-red-500 text-white text-xs font-medium px-2.5 py-0.5 rounded">Asia</span> | |
| <h3 class="text-white font-bold text-xl mt-2">Kyoto, Japan</h3> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-gray-600 mb-4">Cherry blossom season in Kyoto's ancient temples, a magical experience of pink hues and tradition.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500"><i class="far fa-calendar mr-1"></i> April 2023</span> | |
| <button class="view-btn text-blue-500 hover:text-blue-700 font-medium" data-img="https://images.unsplash.com/photo-1538970272646-f61fabb3bfdf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" data-title="Kyoto, Japan" data-desc="Cherry blossom season in Kyoto's ancient temples, a magical experience of pink hues and tradition."> | |
| View <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Travel Card 6 - Americas --> | |
| <div class="travel-card americas bg-white rounded-lg overflow-hidden shadow-md"> | |
| <div class="relative overflow-hidden h-64"> | |
| <img src="https://images.unsplash.com/photo-1518391846015-55a9cc003b25?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="New York" class="w-full h-full object-cover transition duration-500 hover:scale-110"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <span class="bg-green-500 text-white text-xs font-medium px-2.5 py-0.5 rounded">Americas</span> | |
| <h3 class="text-white font-bold text-xl mt-2">New York, USA</h3> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-gray-600 mb-4">The concrete jungle where dreams are made of - capturing the energy of Times Square at night.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500"><i class="far fa-calendar mr-1"></i> October 2021</span> | |
| <button class="view-btn text-blue-500 hover:text-blue-700 font-medium" data-img="https://images.unsplash.com/photo-1518391846015-55a9cc003b25?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" data-title="New York, USA" data-desc="The concrete jungle where dreams are made of - capturing the energy of Times Square at night."> | |
| View <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- View More Button --> | |
| <div class="text-center mt-12"> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-full transition duration-300 transform hover:scale-105"> | |
| Load More Adventures <i class="fas fa-arrow-down ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-gray-100"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Get In Touch</h2> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h3 class="text-2xl font-semibold mb-4">Let's Connect</h3> | |
| <p class="text-gray-600 mb-6"> | |
| Whether you're interested in collaborating on a project, want to discuss Caribbean travel tips, or just say hello, I'd love to hear from you! | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-envelope text-blue-500 text-xl mr-4"></i> | |
| <span class="text-gray-700">hello@5funk.com</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-phone text-blue-500 text-xl mr-4"></i> | |
| <span class="text-gray-700">+1 809 123 4567</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-map-marker-alt text-blue-500 text-xl mr-4"></i> | |
| <span class="text-gray-700">Punta Cana, Dominican Republic (Currently)</span> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="text-lg font-semibold mb-4">Follow My Adventures</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-blue-500 hover:bg-blue-600 text-white rounded-full w-10 h-10 flex items-center justify-center transition duration-300"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="bg-blue-500 hover:bg-blue-600 text-white rounded-full w-10 h-10 flex items-center justify-center transition duration-300"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="bg-blue-500 hover:bg-blue-600 text-white rounded-full w-10 h-10 flex items-center justify-center transition duration-300"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="bg-blue-500 hover:bg-blue-600 text-white rounded-full w-10 h-10 flex items-center justify-center transition duration-300"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <form class="bg-white p-8 rounded-lg shadow-md"> | |
| <div class="mb-4"> | |
| <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:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <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:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <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:outline-none focus:ring-2 focus:ring-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:outline-none focus:ring-2 focus:ring-blue-500"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-4 rounded-lg transition duration-300"> | |
| Send Message <i class="fas fa-paper-plane ml-2"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-8"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <a href="#" class="flex items-center"> | |
| <i class="fas fa-globe-americas text-blue-400 text-2xl mr-2"></i> | |
| <span class="font-semibold text-xl">5funk.com | Vlad</span> | |
| </a> | |
| <p class="text-gray-400 mt-2">Exploring paradise, one pixel at a time.</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-linkedin-in text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 5funk.com. All rights reserved. | Designed with <i class="fas fa-heart text-red-400"></i> by Vlad</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Image Modal --> | |
| <div id="imageModal" class="modal"> | |
| <span class="close">×</span> | |
| <img class="modal-content" id="modalImage"> | |
| <div id="caption" class="text-white text-center py-4 text-xl"></div> | |
| </div> | |
| <!-- Back to Top Button --> | |
| <button id="backToTop" class="fixed bottom-8 right-8 bg-blue-500 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg hover:bg-blue-600 transition duration-300 hidden"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <script> | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.querySelector('.mobile-menu-button'); | |
| const mobileMenu = document.querySelector('.mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| mobileMenu.classList.add('hidden'); | |
| }); | |
| }); | |
| // Travel gallery filtering | |
| const filterButtons = document.querySelectorAll('.filter-btn'); | |
| filterButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| // Remove active class from all buttons | |
| filterButtons.forEach(btn => { | |
| btn.classList.remove('bg-blue-500', 'text-white'); | |
| btn.classList.add('hover:bg-gray-100', 'text-gray-500'); | |
| }); | |
| // Add active class to clicked button | |
| button.classList.add('bg-blue-500', 'text-white'); | |
| button.classList.remove('hover:bg-gray-100', 'text-gray-500'); | |
| const filterValue = button.getAttribute('data-filter'); | |
| const travelCards = document.querySelectorAll('.travel-card'); | |
| travelCards.forEach(card => { | |
| if (filterValue === 'all' || card.classList.contains(filterValue)) { | |
| card.style.display = 'block'; | |
| } else { | |
| card.style.display = 'none'; | |
| } | |
| }); | |
| }); | |
| }); | |
| // Image modal functionality | |
| const modal = document.getElementById("imageModal"); | |
| const modalImg = document.getElementById("modalImage"); | |
| const captionText = document.getElementById("caption"); | |
| const viewButtons = document.querySelectorAll(".view-btn"); | |
| const closeBtn = document.getElementsByClassName("close")[0]; | |
| viewButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| modal.style.display = "block"; | |
| modalImg.src = button.getAttribute('data-img'); | |
| captionText.innerHTML = `<strong>${button.getAttribute('data-title')}</strong><br>${button.getAttribute('data-desc')}`; | |
| }); | |
| }); | |
| closeBtn.addEventListener('click', () => { | |
| modal.style.display = "none"; | |
| }); | |
| window.addEventListener('click', (event) => { | |
| if (event.target == modal) { | |
| modal.style.display = "none"; | |
| } | |
| }); | |
| // Back to top button | |
| const backToTopButton = document.getElementById("backToTop"); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| backToTopButton.classList.remove('hidden'); | |
| } else { | |
| backToTopButton.classList.add('hidden'); | |
| } | |
| }); | |
| backToTopButton.addEventListener('click', () => { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=titanic614/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |