Spaces:
Running
Running
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PixelPulse | Digital Art Portfolio</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@700&family=IBM+Plex+Mono&family=Lora:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet"> | |
| <link href="https://fonts.cdnfonts.com/css/clash-display" rel="stylesheet"> | |
| <link href="https://api.fontshare.com/v2/css?f[]=satoshi@900,700,500,300,400&display=swap" rel="stylesheet"> | |
| <link href="https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@800,700,500,300,400&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| secondary: { | |
| 50: '#f5f3ff', | |
| 100: '#ede9fe', | |
| 200: '#ddd6fe', | |
| 300: '#c4b5fd', | |
| 400: '#a78bfa', | |
| 500: '#8b5cf6', | |
| 600: '#7c3aed', | |
| 700: '#6d28d9', | |
| 800: '#5b21b6', | |
| 900: '#4c1d95', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-50 text-gray-900 font-sans antialiased overflow-x-hidden"> | |
| <custom-preloader></custom-preloader> | |
| <particle-background></particle-background> | |
| <custom-navbar></custom-navbar> | |
| <main> | |
| <!-- Hero Section --> | |
| <section class="hero-section relative h-screen flex items-center justify-center overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-primary-500 to-secondary-600 opacity-90 animate-professionalGradient"></div> | |
| <div class="absolute inset-0 bg-[url('https://static.photos/abstract/1200x630/42')] bg-cover bg-center mix-blend-overlay"></div> | |
| <div class="absolute inset-0 bg-[url('https://static.photos/abstract/1200x630/43')] bg-cover bg-center mix-blend-overlay opacity-0 hover:opacity-100 transition-opacity duration-1000"></div> | |
| <div class="relative z-10 text-center px-4 max-w-4xl mx-auto"> | |
| <h1 class="professional-headline text-white mb-6 text-reveal" data-animate="professionalSlide"> | |
| PixelPulse Gallery | |
| </h1> | |
| <p class="professional-subhead text-white/90 mb-8 max-w-2xl mx-auto" data-animate="professionalSlide" data-delay="100"> | |
| Where digital brushstrokes meet infinite imagination | |
| </p> | |
| <a href="#gallery" class="professional-btn inline-flex items-center px-8 py-3 bg-white text-primary-600 rounded-full font-semibold shadow-lg hover:bg-gray-100 transition-all duration-300"> | |
| Explore Artworks | |
| <i data-feather="arrow-down" class="ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-subtleFloat"> | |
| <i data-feather="chevron-down" class="text-white w-8 h-8"></i> | |
| </div> | |
| </section> | |
| <!-- Gallery Section --> | |
| <section id="gallery" class="py-20 px-4 sm:px-6 lg:px-8 bg-white"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4 tracking-tight">My Digital Creations</h2> | |
| <p class="professional-body text-gray-600 max-w-2xl mx-auto">A curated collection of my finest digital artworks, each telling a unique visual story.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Artwork 1 --> | |
| <div class="professional-card group relative overflow-hidden rounded-xl shadow-lg hover:shadow-2xl transition-all duration-500 transform-style-preserve-3d"> | |
| <img src="https://static.photos/abstract/640x360/1" alt="Digital Artwork" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-105" data-animate="professionalSlide"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-end p-6"> | |
| <div class="transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500"> | |
| <h3 class="text-xl font-bold text-white professional-underline tracking-tight">Cosmic Dreams</h3> | |
| <p class="professional-caption text-white/80 mb-4">Digital Painting | 2023</p> | |
| <button class="professional-btn mt-2 px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Artwork 2 --> | |
| <div class="group relative overflow-hidden rounded-xl shadow-xl hover:shadow-2xl transition-all duration-500"> | |
| <img src="https://static.photos/minimal/640x360/2" alt="Digital Artwork" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6"> | |
| <div> | |
| <h3 class="text-xl font-bold text-white">Minimal Essence</h3> | |
| <p class="text-white/80">Vector Art | 2023</p> | |
| <button class="mt-2 px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Artwork 3 --> | |
| <div class="group relative overflow-hidden rounded-xl shadow-xl hover:shadow-2xl transition-all duration-500"> | |
| <img src="https://static.photos/technology/640x360/3" alt="Digital Artwork" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6"> | |
| <div> | |
| <h3 class="text-xl font-bold text-white">Cyber Synth</h3> | |
| <p class="text-white/80">3D Render | 2023</p> | |
| <button class="mt-2 px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Artwork 4 --> | |
| <div class="group relative overflow-hidden rounded-xl shadow-xl hover:shadow-2xl transition-all duration-500"> | |
| <img src="https://static.photos/nature/640x360/4" alt="Digital Artwork" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6"> | |
| <div> | |
| <h3 class="text-xl font-bold text-white">Ethereal Flora</h3> | |
| <p class="text-white/80">Digital Painting | 2023</p> | |
| <button class="mt-2 px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Artwork 5 --> | |
| <div class="group relative overflow-hidden rounded-xl shadow-xl hover:shadow-2xl transition-all duration-500"> | |
| <img src="https://static.photos/abstract/640x360/5" alt="Digital Artwork" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6"> | |
| <div> | |
| <h3 class="text-xl font-bold text-white">Liquid Architecture</h3> | |
| <p class="text-white/80">3D Animation | 2023</p> | |
| <button class="mt-2 px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Artwork 6 --> | |
| <div class="group relative overflow-hidden rounded-xl shadow-xl hover:shadow-2xl transition-all duration-500"> | |
| <img src="https://static.photos/black/640x360/6" alt="Digital Artwork" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6"> | |
| <div> | |
| <h3 class="text-xl font-bold text-white">Monochrome Visions</h3> | |
| <p class="text-white/80">Digital Illustration | 2023</p> | |
| <button class="mt-2 px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-16"> | |
| <a href="#" class="inline-flex items-center px-8 py-3 bg-primary-500 text-white rounded-full font-semibold shadow-lg hover:bg-primary-600 transition-all duration-300"> | |
| Load More | |
| <i data-feather="plus" class="ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-gray-50 to-gray-100"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex flex-col lg:flex-row items-center gap-12"> | |
| <div class="lg:w-1/2"> | |
| <img src="https://static.photos/people/640x360/7" alt="Artist" class="rounded-2xl shadow-2xl w-full"> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6 tracking-tight">About The Artist</h2> | |
| <p class="professional-body text-gray-600 mb-6">I'm a passionate digital artist with over 8 years of experience creating stunning visual experiences. My work spans across various mediums including digital painting, 3D modeling, and vector illustration.</p> | |
| <p class="professional-body text-gray-600 mb-8">Each piece I create is a journey into imagination, blending technical precision with creative expression to craft artworks that resonate with emotion and meaning.</p> | |
| <div class="flex flex-wrap gap-4"> | |
| <span class="px-4 py-2 bg-primary-100 text-primary-700 rounded-full">Photoshop</span> | |
| <span class="px-4 py-2 bg-primary-100 text-primary-700 rounded-full">Illustrator</span> | |
| <span class="px-4 py-2 bg-primary-100 text-primary-700 rounded-full">Blender</span> | |
| <span class="px-4 py-2 bg-primary-100 text-primary-700 rounded-full">Procreate</span> | |
| <span class="px-4 py-2 bg-primary-100 text-primary-700 rounded-full">After Effects</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-primary-500 to-secondary-600"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-4 tracking-tight">Client Testimonials</h2> | |
| <p class="professional-subhead text-white/90 max-w-2xl mx-auto">What people say about my work</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-8 rounded-xl shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> | |
| <img src="https://static.photos/people/200x200/8" alt="Client" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-900">Sarah Johnson</h4> | |
| <p class="text-primary-500">Creative Director</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Absolutely stunning work! The attention to detail and creativity in each piece is remarkable. Our brand visuals have never looked better."</p> | |
| <div class="flex mt-4 text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-8 rounded-xl shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> | |
| <img src="https://static.photos/people/200x200/9" alt="Client" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-900">Michael Chen</h4> | |
| <p class="text-primary-500">Art Director</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Working with this artist was a game-changer for our project. The ability to translate abstract concepts into breathtaking visuals is truly exceptional."</p> | |
| <div class="flex mt-4 text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white p-8 rounded-xl shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> | |
| <img src="https://static.photos/people/200x200/10" alt="Client" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-900">Emma Rodriguez</h4> | |
| <p class="text-primary-500">Marketing Director</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"The digital artworks created for our campaign exceeded all expectations. The artist's unique style and professionalism made the entire process seamless."</p> | |
| <div class="flex mt-4 text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8 bg-white"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4 tracking-tight">Get In Touch</h2> | |
| <p class="professional-subhead text-gray-600 max-w-2xl mx-auto">Have a project in mind? Let's create something amazing together.</p> | |
| </div> | |
| <form class="space-y-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label> | |
| <input type="text" id="subject" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all"></textarea> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full px-6 py-4 bg-primary-500 text-white font-semibold rounded-lg hover:bg-primary-600 transition-colors shadow-lg"> | |
| Send Message | |
| <i data-feather="send" class="ml-2 inline"></i> | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </section> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <back-to-top></back-to-top> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script> | |
| <script src="components/preloader.js"></script> | |
| <script src="components/back-to-top.js"></script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="components/particles.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <!-- SVG Filter for Liquid Distortion --> | |
| <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg"> | |
| <defs> | |
| <filter id="liquid" x="-20%" y="-20%" width="140%" height="140%"> | |
| <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence" seed="1"/> | |
| <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G" result="displacement"/> | |
| </filter> | |
| </defs> | |
| </svg> | |
| <!-- Floating Particles --> | |
| <div id="floating-particles"></div> | |
| <script> | |
| // Generate floating particles | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const container = document.getElementById('floating-particles'); | |
| if (container) { | |
| for (let i = 0; i < 30; i++) { | |
| const particle = document.createElement('div'); | |
| particle.className = 'particle-float'; | |
| particle.style.width = `${Math.random() * 10 + 5}px`; | |
| particle.style.height = particle.style.width; | |
| particle.style.left = `${Math.random() * 100}%`; | |
| particle.style.bottom = '0'; | |
| particle.style.animationDuration = `${Math.random() * 10 + 10}s`; | |
| particle.style.animationDelay = `${Math.random() * 5}s`; | |
| container.appendChild(particle); | |
| } | |
| } | |
| }); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |