| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Index</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| </head> |
| <body> |
| <header class="bg-gradient-to-r from-yellow-400 to-blue-500 text-white p-4 shadow-lg"> |
| <div class="container mx-auto flex justify-between items-center"> |
| <h1 class="text-2xl font-bold text-gray-800">HEELO WORLD</h1> |
| <nav> |
| <ul class="flex space-x-6"> |
| <li><a href="#home" class="hover:text-gray-300 font-medium">Home</a></li> |
| <li><a href="#about" class="hover:text-gray-300 font-medium">About</a></li> |
| <li><a href="#services" class="hover:text-gray-300 font-medium">Services</a></li> |
| <li><a href="#portfolio" class="hover:text-gray-300 font-medium">Portfolio</a></li> |
| <li><a href="#contact" class="hover:text-gray-300 font-medium">Contact</a></li> |
| </ul> |
| </nav> |
| </div> |
| </header> |
|
|
| <main> |
| <section id="home" class="py-20 bg-gray-100"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold mb-6 text-center">Welcome Section</h2> |
| <div class="carousel relative w-full h-96 overflow-hidden rounded-lg shadow-xl"> |
| <div class="carousel-inner flex transition-transform duration-500 ease-in-out"> |
| <div class="carousel-item w-full flex-shrink-0"> |
| <img src="https://huggingface.co/spaces/TomHoax/test/resolve/main/images/422-4226853_penny-transparent-heads-up-copper-penny-hd-png.png" alt="" class="w-full h-full object-cover"> |
| </div> |
| <div class="carousel-item w-full flex-shrink-0"> |
| <img src="https://huggingface.co/spaces/TomHoax/test/resolve/main/images/422-4226853_penny-transparent-heads-up-copper-penny-hd-png.png" alt="" class="w-full h-full object-cover"> |
| </div> |
| <div class="carousel-item w-full flex-shrink-0"> |
| <img src="https://huggingface.co/spaces/TomHoax/test/resolve/main/images/422-4226853_penny-transparent-heads-up-copper-penny-hd-png.png" alt="" class="w-full h-full object-cover"> |
| </div> |
| </div> |
| <button class="carousel-prev absolute left-4 top-1/2 -translate-y-1/2 bg-white/50 hover:bg-white/75 rounded-full p-2 shadow-md"> |
| <i data-feather="chevron-left"></i> |
| </button> |
| <button class="carousel-next absolute right-4 top-1/2 -translate-y-1/2 bg-white/50 hover:bg-white/75 rounded-full p-2 shadow-md"> |
| <i data-feather="chevron-right"></i> |
| </button> |
| <div class="carousel-indicators absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2"> |
| <button class="w-3 h-3 rounded-full bg-white/50 hover:bg-white"></button> |
| <button class="w-3 h-3 rounded-full bg-white/50 hover:bg-white"></button> |
| <button class="w-3 h-3 rounded-full bg-white/50 hover:bg-white"></button> |
| </div> |
| </div> |
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| const carousel = document.querySelector('.carousel'); |
| const inner = carousel.querySelector('.carousel-inner'); |
| const items = carousel.querySelectorAll('.carousel-item'); |
| const prevBtn = carousel.querySelector('.carousel-prev'); |
| const nextBtn = carousel.querySelector('.carousel-next'); |
| const indicators = carousel.querySelectorAll('.carousel-indicators button'); |
| |
| let currentIndex = 0; |
| const itemCount = items.length; |
| |
| function updateCarousel() { |
| inner.style.transform = `translateX(-${currentIndex * 100}%)`; |
| indicators.forEach((indicator, index) => { |
| indicator.classList.toggle('bg-white', index === currentIndex); |
| indicator.classList.toggle('bg-white/50', index !== currentIndex); |
| }); |
| } |
| |
| nextBtn.addEventListener('click', () => { |
| currentIndex = (currentIndex + 1) % itemCount; |
| updateCarousel(); |
| }); |
| |
| prevBtn.addEventListener('click', () => { |
| currentIndex = (currentIndex - 1 + itemCount) % itemCount; |
| updateCarousel(); |
| }); |
| |
| indicators.forEach((indicator, index) => { |
| indicator.addEventListener('click', () => { |
| currentIndex = index; |
| updateCarousel(); |
| }); |
| }); |
| |
| }); |
| </script> |
| </div> |
| </section> |
|
|
| <section id="about" class="py-20 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold mb-6 text-center">About Us</h2> |
| <div class="resume-container max-w-4xl mx-auto"> |
| <div class="resume-header bg-yellow-500 text-white p-6 rounded-t-lg shadow-md"> |
| <h3 class="text-2xl font-bold">John Doe</h3> |
| <p class="text-blue-100">Senior Web Developer</p> |
| </div> |
| |
| <div class="resume-body bg-gray-50 p-6 rounded-b-lg shadow-md"> |
| <div class="resume-section mb-8"> |
| <h4 class="text-xl font-semibold mb-4 border-b pb-2">Professional Summary</h4> |
| <p class="text-gray-700">Experienced web developer with 5+ years of expertise in front-end development, UI/UX design, and responsive web applications. Passionate about creating efficient, scalable, and user-friendly digital experiences.</p> |
| </div> |
| |
| <div class="resume-section mb-8"> |
| <h4 class="text-xl font-semibold mb-4 border-b pb-2">Skills</h4> |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-4"> |
| <div class="skill-item bg-white p-3 rounded shadow-sm"> |
| <span class="font-medium">HTML/CSS</span> |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2"> |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 95%"></div> |
| </div> |
| </div> |
| <div class="skill-item bg-white p-3 rounded shadow-sm"> |
| <span class="font-medium">JavaScript</span> |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2"> |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 90%"></div> |
| </div> |
| </div> |
| <div class="skill-item bg-white p-3 rounded shadow-sm"> |
| <span class="font-medium">React</span> |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2"> |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 85%"></div> |
| </div> |
| </div> |
| <div class="skill-item bg-white p-3 rounded shadow-sm"> |
| <span class="font-medium">UI/UX Design</span> |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2"> |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 88%"></div> |
| </div> |
| </div> |
| <div class="skill-item bg-white p-3 rounded shadow-sm"> |
| <span class="font-medium">Node.js</span> |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2"> |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 75%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="resume-section"> |
| <h4 class="text-xl font-semibold mb-4 border-b pb-2">Experience</h4> |
| <div class="experience-item mb-6"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h5 class="font-bold text-lg">Senior Web Developer</h5> |
| <p class="text-blue-600">Tech Solutions Inc.</p> |
| </div> |
| <span class="bg-yellow-100 text-yellow-800 text-sm px-3 py-1 rounded-full">2020 - Present</span> |
| </div> |
| <ul class="mt-3 list-disc pl-5 text-gray-700"> |
| <li>Lead front-end development for enterprise applications</li> |
| <li>Implemented responsive design frameworks</li> |
| <li>Mentored junior developers</li> |
| </ul> |
| </div> |
| <div class="experience-item"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h5 class="font-bold text-lg">Web Developer</h5> |
| <p class="text-blue-600">Digital Creations</p> |
| </div> |
| <span class="bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full">2017 - 2020</span> |
| </div> |
| <ul class="mt-3 list-disc pl-5 text-gray-700"> |
| <li>Developed custom WordPress themes</li> |
| <li>Optimized website performance</li> |
| <li>Collaborated with design team</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="services" class="py-20 bg-gray-100"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold mb-6 text-center">Our Services</h2> |
| <p class="text-lg mb-12">Discover what we can do for you.</p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| <div class="service-card group relative overflow-hidden rounded-lg shadow-lg transition-all duration-300 hover:shadow-xl"> |
| <img src="https://huggingface.co/spaces/TomHoax/test/resolve/main/images/422-4226853_penny-transparent-heads-up-copper-penny-hd-png.png" alt="" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-110"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6"> |
| <h3 class="text-white text-xl font-bold">Web Development</h3> |
| </div> |
| </div> |
| |
| <div class="service-card group relative overflow-hidden rounded-lg shadow-lg transition-all duration-300 hover:shadow-xl"> |
| <img src="https://huggingface.co/spaces/TomHoax/test/resolve/main/images/422-4226853_penny-transparent-heads-up-copper-penny-hd-png.png" alt="" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-110"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6"> |
| <h3 class="text-white text-xl font-bold">UI/UX Design</h3> |
| </div> |
| </div> |
| |
| <div class="service-card group relative overflow-hidden rounded-lg shadow-lg transition-all duration-300 hover:shadow-xl"> |
| <img src="https://huggingface.co/spaces/TomHoax/test/resolve/main/images/422-4226853_penny-transparent-heads-up-copper-penny-hd-png.png" alt="" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-110"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6"> |
| <h3 class="text-white text-xl font-bold">Mobile Apps</h3> |
| </div> |
| </div> |
| |
| <div class="service-card group relative overflow-hidden rounded-lg shadow-lg transition-all duration-300 hover:shadow-xl"> |
| <img src="https://huggingface.co/spaces/TomHoax/test/resolve/main/images/422-4226853_penny-transparent-heads-up-copper-penny-hd-png.png" alt="" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-110"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6"> |
| <h3 class="text-white text-xl font-bold">SEO Optimization</h3> |
| </div> |
| </div> |
| |
| <div class="service-card group relative overflow-hidden rounded-lg shadow-lg transition-all duration-300 hover:shadow-xl"> |
| <img src="https://huggingface.co/spaces/TomHoax/test/resolve/main/images/422-4226853_penny-transparent-heads-up-copper-penny-hd-png.png" alt="" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-110"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6"> |
| <h3 class="text-white text-xl font-bold">Cloud Solutions</h3> |
| </div> |
| </div> |
| |
| <div class="service-card group relative overflow-hidden rounded-lg shadow-lg transition-all duration-300 hover:shadow-xl"> |
| <img src="https://huggingface.co/spaces/TomHoax/test/resolve/main/images/422-4226853_penny-transparent-heads-up-copper-penny-hd-png.png" alt="" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-110"> |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6"> |
| <h3 class="text-white text-xl font-bold">24/7 Support</h3> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="portfolio" class="py-20 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold mb-6 text-center">Portfolio</h2> |
| <p class="text-lg mb-12">View our previous work and projects.</p> |
| |
| <div class="portfolio-carousel relative w-full overflow-hidden rounded-lg shadow-xl"> |
| <div class="portfolio-inner flex transition-transform duration-500 ease-in-out"> |
| <div class="portfolio-item w-full flex-shrink-0 p-4"> |
| <div class="bg-gray-100 rounded-lg p-6 h-full"> |
| <img src="https://huggingface.co/spaces/TomHoax/test/resolve/main/images/422-4226853_penny-transparent-heads-up-copper-penny-hd-png.png" alt="" class="w-full h-64 object-cover rounded-lg mb-4"> |
| <h3 class="text-xl font-bold mb-2">E-Commerce Platform</h3> |
| <p class="text-gray-700 mb-4">A full-featured online store with payment integration and inventory management.</p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">React</span> |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Node.js</span> |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">MongoDB</span> |
| </div> |
| </div> |
| </div> |
| <div class="portfolio-item w-full flex-shrink-0 p-4"> |
| <div class="bg-gray-100 rounded-lg p-6 h-full"> |
| <img src="https://huggingface.co/spaces/TomHoax/test/resolve/main/images/422-4226853_penny-transparent-heads-up-copper-penny-hd-png.png" alt="" class="w-full h-64 object-cover rounded-lg mb-4"> |
| <h3 class="text-xl font-bold mb-2">Fitness App</h3> |
| <p class="text-gray-700 mb-4">Mobile application for tracking workouts and nutrition with social features.</p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Flutter</span> |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Firebase</span> |
| </div> |
| </div> |
| </div> |
| <div class="portfolio-item w-full flex-shrink-0 p-4"> |
| <div class="bg-gray-100 rounded-lg p-6 h-full"> |
| <img src="https://huggingface.co/spaces/TomHoax/test/resolve/main/images/422-4226853_penny-transparent-heads-up-copper-penny-hd-png.png" alt="" class="w-full h-64 object-cover rounded-lg mb-4"> |
| <h3 class="text-xl font-bold mb-2">Corporate Website</h3> |
| <p class="text-gray-700 mb-4">Modern responsive website with CMS integration for a financial services company.</p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">WordPress</span> |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">PHP</span> |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">JavaScript</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| <button class="portfolio-prev absolute left-4 top-1/2 -translate-y-1/2 bg-white hover:bg-gray-100 rounded-full p-3 shadow-md"> |
| <i data-feather="chevron-left"></i> |
| </button> |
| <button class="portfolio-next absolute right-4 top-1/2 -translate-y-1/2 bg-white hover:bg-gray-100 rounded-full p-3 shadow-md"> |
| <i data-feather="chevron-right"></i> |
| </button> |
| <div class="portfolio-indicators absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2"> |
| <button class="w-3 h-3 rounded-full bg-gray-300 hover:bg-yellow-500"></button> |
| <button class="w-3 h-3 rounded-full bg-gray-300 hover:bg-yellow-500"></button> |
| <button class="w-3 h-3 rounded-full bg-gray-300 hover:bg-yellow-500"></button> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| const carousel = document.querySelector('.portfolio-carousel'); |
| const inner = carousel.querySelector('.portfolio-inner'); |
| const items = carousel.querySelectorAll('.portfolio-item'); |
| const prevBtn = carousel.querySelector('.portfolio-prev'); |
| const nextBtn = carousel.querySelector('.portfolio-next'); |
| const indicators = carousel.querySelectorAll('.portfolio-indicators button'); |
| |
| let currentIndex = 0; |
| const itemCount = items.length; |
| |
| function updateCarousel() { |
| inner.style.transform = `translateX(-${currentIndex * 100}%)`; |
| indicators.forEach((indicator, index) => { |
| indicator.classList.toggle('bg-blue-600', index === currentIndex); |
| indicator.classList.toggle('bg-gray-300', index !== currentIndex); |
| }); |
| } |
| |
| nextBtn.addEventListener('click', () => { |
| currentIndex = (currentIndex + 1) % itemCount; |
| updateCarousel(); |
| }); |
| |
| prevBtn.addEventListener('click', () => { |
| currentIndex = (currentIndex - 1 + itemCount) % itemCount; |
| updateCarousel(); |
| }); |
| |
| indicators.forEach((indicator, index) => { |
| indicator.addEventListener('click', () => { |
| currentIndex = index; |
| updateCarousel(); |
| }); |
| }); |
| |
| }); |
| </script> |
| </div> |
| </section> |
|
|
| <section id="contact" class="py-20 bg-gray-100"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold mb-6 text-center">Contact Us</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> |
| <div> |
| <h3 class="text-xl font-semibold mb-4">Send us a message</h3> |
| <form class="space-y-4"> |
| <div> |
| <label for="name" class="block text-gray-700 mb-2">Name</label> |
| <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| <div> |
| <label for="email" class="block text-gray-700 mb-2">Email</label> |
| <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| <div> |
| <label for="subject" class="block text-gray-700 mb-2">Subject</label> |
| <input type="text" id="subject" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| <div> |
| <label for="message" class="block text-gray-700 mb-2">Message</label> |
| <textarea id="message" rows="5" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> |
| </div> |
| <button type="submit" class="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 transition duration-300">Send Message</button> |
| </form> |
| </div> |
| <div> |
| <h3 class="text-xl font-semibold mb-4 text-center">Contact Information</h3> |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i data-feather="map-pin" class="text-blue-500"></i> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-800">Address</h4> |
| <p class="text-gray-600">L6B2 Tulip st.<br>Metro Manila</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i data-feather="phone" class="text-blue-500"></i> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-800">Phone</h4> |
| <p class="text-gray-600">09769934294</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i data-feather="mail" class="text-blue-500"></i> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-800">Email</h4> |
| <p class="text-gray-600">Tommhoax@gmail.com</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i data-feather="clock" class="text-blue-500"></i> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-800">Hours</h4> |
| <p class="text-gray-600">Monday - Friday: 9am - 6pm<br>Saturday: 10am - 2pm<br>Sunday: Closed</p> |
| </div> |
| </div> |
| </div> |
| <div class="mt-8"> |
| <h4 class="font-medium text-gray-800 mb-4">Follow Us</h4> |
| <div class="flex space-x-4"> |
| <a href="#" class="bg-blue-500 text-white p-3 rounded-full hover:bg-blue-600 transition duration-300"> |
| <i data-feather="facebook"></i> |
| </a> |
| <a href="#" class="bg-blue-400 text-white p-3 rounded-full hover:bg-blue-500 transition duration-300"> |
| <i data-feather="twitter"></i> |
| </a> |
| <a href="#" class="bg-pink-600 text-white p-3 rounded-full hover:bg-pink-700 transition duration-300"> |
| <i data-feather="instagram"></i> |
| </a> |
| <a href="#" class="bg-blue-700 text-white p-3 rounded-full hover:bg-blue-800 transition duration-300"> |
| <i data-feather="linkedin"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| <script>AOS.init();</script> |
| <script>const { animate } = anime;</script> |
| <script>feather.replace();</script> |
| </body> |
| </html> |
|
|
