Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>What I Do | Digital Creator</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .card-hover: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); | |
| } | |
| .skill-bar { | |
| transition: width 1.5s ease-in-out; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Hero Section --> | |
| <header class="gradient-bg text-white py-20 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">What I Do Best</h1> | |
| <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-10">Crafting digital experiences that captivate, engage, and convert</p> | |
| <button onclick="scrollToSection('services')" class="bg-white text-indigo-700 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition duration-300"> | |
| Explore My Skills | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">My Digital Craftsmanship</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service Card 1 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 card-hover"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-code text-indigo-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Web Development</h3> | |
| <p class="text-gray-600 mb-4">Building responsive, fast, and accessible websites that work flawlessly across all devices.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">HTML5</span> | |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">CSS3</span> | |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">JavaScript</span> | |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">React</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Service Card 2 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 card-hover"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-paint-brush text-pink-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">UI/UX Design</h3> | |
| <p class="text-gray-600 mb-4">Creating intuitive interfaces with user experience at the core of every design decision.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-pink-100 text-pink-800 text-xs px-3 py-1 rounded-full">Figma</span> | |
| <span class="bg-pink-100 text-pink-800 text-xs px-3 py-1 rounded-full">Adobe XD</span> | |
| <span class="bg-pink-100 text-pink-800 text-xs px-3 py-1 rounded-full">User Research</span> | |
| <span class="bg-pink-100 text-pink-800 text-xs px-3 py-1 rounded-full">Prototyping</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Service Card 3 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 card-hover"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-mobile-alt text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Mobile Development</h3> | |
| <p class="text-gray-600 mb-4">Developing cross-platform mobile applications with native-like performance.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">React Native</span> | |
| <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">Flutter</span> | |
| <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">iOS</span> | |
| <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">Android</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-100"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">My Technical Arsenal</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <div class="mb-8"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="font-medium text-gray-700">HTML/CSS</span> | |
| <span class="text-gray-500">95%</span> | |
| </div> | |
| <div class="w-full bg-gray-300 rounded-full h-2.5"> | |
| <div class="skill-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%" data-width="95%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="font-medium text-gray-700">JavaScript</span> | |
| <span class="text-gray-500">90%</span> | |
| </div> | |
| <div class="w-full bg-gray-300 rounded-full h-2.5"> | |
| <div class="skill-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%" data-width="90%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="font-medium text-gray-700">React</span> | |
| <span class="text-gray-500">85%</span> | |
| </div> | |
| <div class="w-full bg-gray-300 rounded-full h-2.5"> | |
| <div class="skill-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%" data-width="85%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="mb-8"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="font-medium text-gray-700">UI/UX Design</span> | |
| <span class="text-gray-500">88%</span> | |
| </div> | |
| <div class="w-full bg-gray-300 rounded-full h-2.5"> | |
| <div class="skill-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%" data-width="88%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="font-medium text-gray-700">Mobile Development</span> | |
| <span class="text-gray-500">80%</span> | |
| </div> | |
| <div class="w-full bg-gray-300 rounded-full h-2.5"> | |
| <div class="skill-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%" data-width="80%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="font-medium text-gray-700">Backend Integration</span> | |
| <span class="text-gray-500">75%</span> | |
| </div> | |
| <div class="w-full bg-gray-300 rounded-full h-2.5"> | |
| <div class="skill-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%" data-width="75%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Process Section --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">My Creative Process</h2> | |
| <div class="relative"> | |
| <!-- Timeline line --> | |
| <div class="hidden md:block absolute left-1/2 h-full w-1 bg-indigo-200 transform -translate-x-1/2"></div> | |
| <!-- Process Step 1 --> | |
| <div class="flex flex-col md:flex-row items-center mb-16"> | |
| <div class="md:w-1/2 md:pr-12 mb-8 md:mb-0 order-1 md:order-1"> | |
| <div class="bg-white p-8 rounded-xl shadow-lg"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Discovery & Research</h3> | |
| <p class="text-gray-600">Understanding your business goals, target audience, and project requirements through in-depth research and discovery sessions.</p> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12 order-2 md:order-2"> | |
| <div class="w-20 h-20 bg-indigo-600 rounded-full flex items-center justify-center mx-auto"> | |
| <span class="text-white text-2xl font-bold">1</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Process Step 2 --> | |
| <div class="flex flex-col md:flex-row items-center mb-16"> | |
| <div class="md:w-1/2 md:pr-12 order-2 md:order-1"> | |
| <div class="w-20 h-20 bg-indigo-600 rounded-full flex items-center justify-center mx-auto"> | |
| <span class="text-white text-2xl font-bold">2</span> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12 mb-8 md:mb-0 order-1 md:order-2"> | |
| <div class="bg-white p-8 rounded-xl shadow-lg"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Design & Prototyping</h3> | |
| <p class="text-gray-600">Creating wireframes, mockups, and interactive prototypes to visualize the user experience before development begins.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Process Step 3 --> | |
| <div class="flex flex-col md:flex-row items-center mb-16"> | |
| <div class="md:w-1/2 md:pr-12 mb-8 md:mb-0 order-1 md:order-1"> | |
| <div class="bg-white p-8 rounded-xl shadow-lg"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Development</h3> | |
| <p class="text-gray-600">Bringing designs to life with clean, efficient code while ensuring cross-browser compatibility and mobile responsiveness.</p> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12 order-2 md:order-2"> | |
| <div class="w-20 h-20 bg-indigo-600 rounded-full flex items-center justify-center mx-auto"> | |
| <span class="text-white text-2xl font-bold">3</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Process Step 4 --> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 md:pr-12 order-2 md:order-1"> | |
| <div class="w-20 h-20 bg-indigo-600 rounded-full flex items-center justify-center mx-auto"> | |
| <span class="text-white text-2xl font-bold">4</span> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12 mb-8 md:mb-0 order-1 md:order-2"> | |
| <div class="bg-white p-8 rounded-xl shadow-lg"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Testing & Launch</h3> | |
| <p class="text-gray-600">Rigorous testing across devices and browsers, followed by deployment and post-launch support to ensure everything runs smoothly.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonial Section --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8 bg-indigo-50"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">What Clients Say</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Sarah Johnson</h4> | |
| <p class="text-gray-600 text-sm">CEO, TechStart Inc.</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic">"The website delivered exceeded our expectations. The attention to detail and user experience was phenomenal. Highly recommended!"</p> | |
| <div class="flex mt-4 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Michael Chen</h4> | |
| <p class="text-gray-600 text-sm">Founder, DesignHub</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic">"Working with this developer was a game-changer for our business. The mobile app they built increased our user engagement by 40%."</p> | |
| <div class="flex mt-4 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Emily Rodriguez</h4> | |
| <p class="text-gray-600 text-sm">Marketing Director</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic">"The UI redesign completely transformed our conversion rates. The developer understood our brand perfectly and delivered beyond expectations."</p> | |
| <div class="flex mt-4 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8 gradient-bg text-white"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Bring Your Vision to Life?</h2> | |
| <p class="text-xl mb-10">Let's collaborate on your next digital project. I'm just one message away!</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="bg-white text-indigo-700 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition duration-300"> | |
| Get in Touch | |
| </button> | |
| <button class="border-2 border-white text-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-indigo-700 transition duration-300"> | |
| View Portfolio | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Digital Creator</h3> | |
| <p class="text-gray-400">Crafting exceptional digital experiences that drive results and delight users.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Services</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white transition">Web Development</a></li> | |
| <li><a href="#" class="hover:text-white transition">UI/UX Design</a></li> | |
| <li><a href="#" class="hover:text-white transition">Mobile Apps</a></li> | |
| <li><a href="#" class="hover:text-white transition">Consulting</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Quick Links</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white transition">About</a></li> | |
| <li><a href="#" class="hover:text-white transition">Portfolio</a></li> | |
| <li><a href="#" class="hover:text-white transition">Blog</a></li> | |
| <li><a href="#" class="hover:text-white transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Connect</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-indigo-600 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-indigo-600 transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-indigo-600 transition"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-indigo-600 transition"> | |
| <i class="fab fa-dribbble"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> | |
| <p>© 2023 Digital Creator. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Floating Action Button --> | |
| <div class="fixed bottom-8 right-8"> | |
| <button onclick="scrollToTop()" class="w-14 h-14 bg-indigo-600 rounded-full flex items-center justify-center text-white shadow-lg hover:bg-indigo-700 transition duration-300 floating"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| </div> | |
| <script> | |
| // Animate skill bars on scroll | |
| function animateSkillBars() { | |
| const skillBars = document.querySelectorAll('.skill-bar'); | |
| skillBars.forEach(bar => { | |
| const width = bar.getAttribute('data-width'); | |
| bar.style.width = width; | |
| }); | |
| } | |
| // Scroll to section | |
| function scrollToSection(sectionId) { | |
| const section = document.getElementById(sectionId); | |
| section.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| // Scroll to top | |
| function scrollToTop() { | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| } | |
| // Intersection Observer for animations | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| if (entry.target.classList.contains('skill-bar')) { | |
| animateSkillBars(); | |
| } | |
| entry.target.classList.add('animate-fadeIn'); | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| // Observe elements | |
| document.querySelectorAll('.skill-bar').forEach(el => observer.observe(el)); | |
| document.querySelectorAll('.card-hover').forEach(el => observer.observe(el)); | |
| // Initialize animations when page loads | |
| window.addEventListener('load', () => { | |
| const elements = document.querySelectorAll('[class*="animate-"]'); | |
| elements.forEach(el => { | |
| el.style.opacity = '0'; | |
| }); | |
| }); | |
| </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=geniusmanish/my-first-work" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |